initial commit
This commit is contained in:
ferdiansyah783
@@ -0,0 +1,5 @@
|
||||
import dynamic from 'next/dynamic'
|
||||
|
||||
const Chart = dynamic(() => import('react-apexcharts'), { ssr: false })
|
||||
|
||||
export default Chart
|
||||
@@ -0,0 +1,5 @@
|
||||
import dynamic from 'next/dynamic'
|
||||
|
||||
const ReactPlayer = dynamic(() => import('react-player'), { ssr: false })
|
||||
|
||||
export default ReactPlayer
|
||||
@@ -0,0 +1,4 @@
|
||||
'use client'
|
||||
|
||||
// Third-party imports
|
||||
export * from 'recharts'
|
||||
@@ -0,0 +1,494 @@
|
||||
'use client'
|
||||
|
||||
// MUI imports
|
||||
import { styled } from '@mui/material/styles'
|
||||
import type { Theme } from '@mui/material/styles'
|
||||
|
||||
// Styled Components
|
||||
const AppFullCalendar = styled('div')(({ theme }: { theme: Theme }) => ({
|
||||
display: 'flex',
|
||||
position: 'relative',
|
||||
borderRadius: 'var(--mui-shape-borderRadius)',
|
||||
'& .fc': {
|
||||
zIndex: 1,
|
||||
|
||||
'.fc-col-header, .fc-daygrid-body, .fc-scrollgrid-sync-table, .fc-timegrid-body, .fc-timegrid-body table': {
|
||||
width: '100% !important'
|
||||
},
|
||||
|
||||
// Toolbar
|
||||
'& .fc-toolbar': {
|
||||
flexWrap: 'wrap',
|
||||
flexDirection: 'row !important',
|
||||
'&.fc-header-toolbar': {
|
||||
gap: theme.spacing(2),
|
||||
marginBottom: theme.spacing(6)
|
||||
},
|
||||
'& .fc-button-group:has(.fc-next-button)': {
|
||||
marginInlineStart: theme.spacing(2)
|
||||
},
|
||||
'& .fc-button': {
|
||||
padding: theme.spacing(),
|
||||
'&:active, .&:focus': {
|
||||
boxShadow: 'none'
|
||||
}
|
||||
},
|
||||
'.fc-prev-button, & .fc-next-button': {
|
||||
display: 'flex',
|
||||
backgroundColor: 'transparent',
|
||||
padding: theme.spacing(1.5),
|
||||
border: '0px',
|
||||
'& .fc-icon': {
|
||||
color: 'var(--mui-palette-text-primary)',
|
||||
fontSize: '1.25rem'
|
||||
},
|
||||
'&:hover, &:active, &:focus': {
|
||||
boxShadow: 'none !important',
|
||||
backgroundColor: 'transparent !important'
|
||||
}
|
||||
},
|
||||
'& .fc-toolbar-chunk:first-of-type': {
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
alignItems: 'center',
|
||||
rowGap: theme.spacing(2),
|
||||
[theme.breakpoints.down('md')]: {
|
||||
'& div:first-of-type': {
|
||||
display: 'flex',
|
||||
alignItems: 'center'
|
||||
}
|
||||
}
|
||||
},
|
||||
'& .fc-button-group': {
|
||||
'& .fc-button': {
|
||||
textTransform: 'capitalize',
|
||||
'&:focus': {
|
||||
boxShadow: 'none'
|
||||
}
|
||||
},
|
||||
'& .fc-button-primary': {
|
||||
'&:not(.fc-prev-button):not(.fc-next-button)': {
|
||||
...theme.typography.button,
|
||||
textTransform: 'capitalize',
|
||||
backgroundColor: 'var(--mui-palette-primary-lightOpacity)',
|
||||
padding: theme.spacing(1.75, 4),
|
||||
color: 'var(--mui-palette-primary-main)',
|
||||
borderColor: 'transparent',
|
||||
'&.fc-button-active, &:hover': {
|
||||
color: 'var(--mui-palette-primary-main)',
|
||||
backgroundColor: 'var(--mui-palette-primary-mainOpacity)'
|
||||
}
|
||||
}
|
||||
},
|
||||
'& .fc-sidebarToggle-button': {
|
||||
border: '0 !important',
|
||||
lineHeight: 0.8,
|
||||
paddingBottom: '0 !important',
|
||||
backgroundColor: 'transparent !important',
|
||||
marginInlineEnd: theme.spacing(2),
|
||||
color: 'var(--mui-palette-text-secondary) !important',
|
||||
marginLeft: `${theme.spacing(-2)} !important`,
|
||||
padding: `${theme.spacing(1.25, 2)} !important`,
|
||||
'&:focus': {
|
||||
outline: 0,
|
||||
boxShadow: 'none'
|
||||
},
|
||||
'&:not(.fc-prev-button):not(.fc-next-button):hover': {
|
||||
backgroundColor: 'transparent !important'
|
||||
},
|
||||
'& + div': {
|
||||
marginLeft: 0
|
||||
}
|
||||
},
|
||||
'.fc-dayGridMonth-button, .fc-timeGridWeek-button, .fc-timeGridDay-button, & .fc-listMonth-button': {
|
||||
padding: theme.spacing(2.2, 6),
|
||||
|
||||
'&:last-of-type, &:first-of-type': {
|
||||
borderRadius: 'var(--mui-shape-borderRadius)'
|
||||
},
|
||||
'&:first-of-type': {
|
||||
borderTopRightRadius: 0,
|
||||
borderBottomRightRadius: 0
|
||||
},
|
||||
'&:last-of-type': {
|
||||
borderTopLeftRadius: 0,
|
||||
borderBottomLeftRadius: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
'& > * > :not(:first-of-type)': {
|
||||
marginLeft: 0
|
||||
},
|
||||
'& .fc-toolbar-title': {
|
||||
marginInline: theme.spacing(4),
|
||||
...theme.typography.h4
|
||||
},
|
||||
'.fc-button:empty:not(.fc-sidebarToggle-button), & .fc-toolbar-chunk:empty': {
|
||||
display: 'none'
|
||||
}
|
||||
},
|
||||
|
||||
// Calendar head & body common
|
||||
'& tbody td, & thead th': {
|
||||
borderColor: 'var(--mui-palette-divider)',
|
||||
'&.fc-col-header-cell': {
|
||||
borderLeft: 0,
|
||||
borderRight: 0
|
||||
},
|
||||
'&[role="presentation"]': {
|
||||
borderInline: 0
|
||||
}
|
||||
},
|
||||
'& colgroup col': {
|
||||
width: '60px !important'
|
||||
},
|
||||
|
||||
// Event Colors
|
||||
'& .fc-event': {
|
||||
'& .fc-event-title-container, .fc-event-main-frame': {
|
||||
lineHeight: 1
|
||||
},
|
||||
'&:not(.fc-list-event)': {
|
||||
'&.event-bg-primary': {
|
||||
border: 0,
|
||||
color: 'var(--mui-palette-primary-main)',
|
||||
backgroundColor: 'var(--mui-palette-primary-lightOpacity)',
|
||||
'& .fc-event-title, & .fc-event-time': {
|
||||
fontSize: theme.typography.caption.fontSize,
|
||||
fontWeight: 500,
|
||||
color: 'var(--mui-palette-primary-main)',
|
||||
padding: 0
|
||||
}
|
||||
},
|
||||
'&.event-bg-success': {
|
||||
border: 0,
|
||||
color: 'var(--mui-palette-success-main)',
|
||||
backgroundColor: 'var(--mui-palette-success-lightOpacity)',
|
||||
'& .fc-event-title, & .fc-event-time': {
|
||||
fontSize: theme.typography.caption.fontSize,
|
||||
fontWeight: 500,
|
||||
color: 'var(--mui-palette-success-main)',
|
||||
padding: 0
|
||||
}
|
||||
},
|
||||
'&.event-bg-error': {
|
||||
border: 0,
|
||||
color: 'var(--mui-palette-error-main)',
|
||||
backgroundColor: 'var(--mui-palette-error-lightOpacity)',
|
||||
'& .fc-event-title, & .fc-event-time': {
|
||||
fontSize: theme.typography.caption.fontSize,
|
||||
fontWeight: 500,
|
||||
color: 'var(--mui-palette-error-main)',
|
||||
padding: 0
|
||||
}
|
||||
},
|
||||
'&.event-bg-warning': {
|
||||
border: 0,
|
||||
color: 'var(--mui-palette-warning-main)',
|
||||
backgroundColor: 'var(--mui-palette-warning-lightOpacity)',
|
||||
'& .fc-event-title, & .fc-event-time': {
|
||||
fontSize: theme.typography.caption.fontSize,
|
||||
fontWeight: 500,
|
||||
color: 'var(--mui-palette-warning-main)',
|
||||
padding: 0
|
||||
}
|
||||
},
|
||||
'&.event-bg-info': {
|
||||
border: 0,
|
||||
color: 'var(--mui-palette-info-main)',
|
||||
backgroundColor: 'var(--mui-palette-info-lightOpacity)',
|
||||
'& .fc-event-title, & .fc-event-time': {
|
||||
fontSize: theme.typography.caption.fontSize,
|
||||
fontWeight: 500,
|
||||
color: 'var(--mui-palette-info-main)',
|
||||
padding: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
'&.event-bg-primary': {
|
||||
'& .fc-list-event-dot': {
|
||||
borderColor: 'var(--mui-palette-primary-main)',
|
||||
backgroundColor: 'var(--mui-palette-primary-main)'
|
||||
},
|
||||
'&:hover td': {
|
||||
backgroundColor: 'var(--mui-palette-primary-lightOpacity)'
|
||||
}
|
||||
},
|
||||
'&.event-bg-success': {
|
||||
'& .fc-list-event-dot': {
|
||||
borderColor: 'var(--mui-palette-success-main)',
|
||||
backgroundColor: 'var(--mui-palette-success-main)'
|
||||
},
|
||||
'&:hover td': {
|
||||
backgroundColor: 'var(--mui-palette-success-lightOpacity)'
|
||||
}
|
||||
},
|
||||
'&.event-bg-error': {
|
||||
'& .fc-list-event-dot': {
|
||||
borderColor: 'var(--mui-palette-error-main)',
|
||||
backgroundColor: 'var(--mui-palette-error-main)'
|
||||
},
|
||||
'&:hover td': {
|
||||
backgroundColor: 'var(--mui-palette-error-lightOpacity)'
|
||||
}
|
||||
},
|
||||
'&.event-bg-warning': {
|
||||
'& .fc-list-event-dot': {
|
||||
borderColor: 'var(--mui-palette-warning-main)',
|
||||
backgroundColor: 'var(--mui-palette-warning-main)'
|
||||
},
|
||||
'&:hover td': {
|
||||
backgroundColor: 'var(--mui-palette-warning-lightOpacity)'
|
||||
}
|
||||
},
|
||||
'&.event-bg-info': {
|
||||
'& .fc-list-event-dot': {
|
||||
borderColor: 'var(--mui-palette-info-main)',
|
||||
backgroundColor: 'var(--mui-palette-info-main)'
|
||||
},
|
||||
'&:hover td': {
|
||||
backgroundColor: 'var(--mui-palette-info-lightOpacity)'
|
||||
}
|
||||
},
|
||||
'&.fc-daygrid-event': {
|
||||
margin: 0,
|
||||
borderRadius: '500px'
|
||||
}
|
||||
},
|
||||
|
||||
'& .fc-view-harness': {
|
||||
minHeight: '650px',
|
||||
margin: theme.spacing(0, -6)
|
||||
},
|
||||
|
||||
// Calendar Head
|
||||
'& .fc-col-header': {
|
||||
'& .fc-col-header-cell-cushion': {
|
||||
...theme.typography.body1,
|
||||
fontWeight: 500,
|
||||
color: 'var(--mui-palette-text-primary)',
|
||||
padding: theme.spacing(2),
|
||||
textDecoration: 'none !important'
|
||||
}
|
||||
},
|
||||
|
||||
// Daygrid
|
||||
'& .fc-scrollgrid-section-liquid > td': {
|
||||
borderBottom: 0
|
||||
},
|
||||
'& .fc-daygrid-event-harness': {
|
||||
'& .fc-event': {
|
||||
padding: theme.spacing(1, 3),
|
||||
borderRadius: 4
|
||||
},
|
||||
'&:not(:last-of-type) .fc-event': {
|
||||
marginBottom: `${theme.spacing(2.5)} !important`
|
||||
}
|
||||
},
|
||||
'& .fc-daygrid-day-bottom': {
|
||||
marginTop: theme.spacing(2.5)
|
||||
},
|
||||
'& .fc-daygrid-day': {
|
||||
padding: '8px',
|
||||
'& .fc-daygrid-day-top': {
|
||||
flexDirection: 'row'
|
||||
}
|
||||
},
|
||||
'& .fc-scrollgrid': {
|
||||
borderColor: 'var(--mui-palette-divider)',
|
||||
borderInline: 0
|
||||
},
|
||||
'& .fc-daygrid-day-events': {
|
||||
marginTop: theme.spacing(2.5),
|
||||
minHeight: '5rem !important'
|
||||
},
|
||||
'& .fc-day-other .fc-daygrid-day-top': {
|
||||
opacity: 1,
|
||||
'& .fc-daygrid-day-number': {
|
||||
color: 'var(--mui-palette-text-disabled) !important'
|
||||
}
|
||||
},
|
||||
|
||||
// All Views Event
|
||||
'& .fc-daygrid-day-number, & .fc-timegrid-slot-label-cushion, & .fc-list-event-time': {
|
||||
textDecoration: 'none !important'
|
||||
},
|
||||
'& .fc-daygrid-day-number': {
|
||||
color: 'var(--mui-palette-text-secondary) !important',
|
||||
padding: 0
|
||||
},
|
||||
'& .fc-timegrid-slot-label-cushion, & .fc-list-event-time': {
|
||||
color: 'var(--mui-palette-text-primary) !important'
|
||||
},
|
||||
'& .fc-day-today:not(.fc-popover)': {
|
||||
backgroundColor: 'var(--mui-palette-action-hover)'
|
||||
},
|
||||
|
||||
// WeekView
|
||||
'& .fc-timegrid': {
|
||||
'& .fc-scrollgrid-section': {
|
||||
'& .fc-col-header-cell, & .fc-timegrid-axis': {
|
||||
borderLeft: 0,
|
||||
borderRight: 0,
|
||||
background: 'transparent',
|
||||
borderColor: 'var(--mui-palette-divider)'
|
||||
},
|
||||
'& .fc-timegrid-axis': {
|
||||
borderColor: 'var(--mui-palette-divider)'
|
||||
},
|
||||
'& .fc-timegrid-axis-frame': {
|
||||
justifyContent: 'center',
|
||||
padding: theme.spacing(2),
|
||||
alignItems: 'flex-start'
|
||||
},
|
||||
'&:has(.fc-timegrid-divider)': {
|
||||
height: 0
|
||||
}
|
||||
},
|
||||
'& .fc-timegrid-axis': {
|
||||
'&.fc-scrollgrid-shrink': {
|
||||
'& .fc-timegrid-axis-cushion': {
|
||||
...theme.typography.body2,
|
||||
padding: 0,
|
||||
textTransform: 'capitalize',
|
||||
color: 'var(--mui-palette-text-disabled)'
|
||||
}
|
||||
}
|
||||
},
|
||||
'& .fc-timegrid-slots': {
|
||||
'& .fc-timegrid-slot': {
|
||||
height: '3rem',
|
||||
borderColor: 'var(--mui-palette-divider)',
|
||||
'&.fc-timegrid-slot-label': {
|
||||
borderRight: 0,
|
||||
padding: theme.spacing(2),
|
||||
verticalAlign: 'top'
|
||||
},
|
||||
'&.fc-timegrid-slot-lane': {
|
||||
borderLeft: 0
|
||||
},
|
||||
'& .fc-timegrid-slot-label-frame': {
|
||||
textAlign: 'center',
|
||||
'& .fc-timegrid-slot-label-cushion': {
|
||||
display: 'block',
|
||||
padding: 0,
|
||||
...theme.typography.body2,
|
||||
textTransform: 'uppercase'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'& .fc-timegrid-divider': {
|
||||
display: 'none'
|
||||
},
|
||||
'& .fc-timegrid-event': {
|
||||
'& .fc-event-time': {
|
||||
...theme.typography.caption,
|
||||
marginBlockEnd: 2
|
||||
},
|
||||
'& .fc-event-title': {
|
||||
lineHeight: 1.5385
|
||||
},
|
||||
boxShadow: 'none'
|
||||
},
|
||||
'.fc-timegrid-col-events': {
|
||||
margin: 0,
|
||||
'& .fc-event-main': {
|
||||
padding: theme.spacing(2)
|
||||
}
|
||||
}
|
||||
},
|
||||
'& .fc-timeGridWeek-view .fc-timegrid-slot-minor': {
|
||||
borderBlockStart: 0
|
||||
},
|
||||
|
||||
// List View
|
||||
'& .fc-list': {
|
||||
border: 'none',
|
||||
'& th[colspan="3"]': {
|
||||
position: 'relative'
|
||||
},
|
||||
'& .fc-list-day-cushion': {
|
||||
background: 'transparent',
|
||||
padding: theme.spacing(2, 4)
|
||||
},
|
||||
'.fc-list-event': {
|
||||
cursor: 'pointer',
|
||||
'&:hover': {
|
||||
'& td': {
|
||||
// backgroundColor: `rgba(${theme.palette.customColors.main}, 0.04)`
|
||||
}
|
||||
},
|
||||
'& td': {
|
||||
borderColor: 'var(--mui-palette-divider)'
|
||||
}
|
||||
},
|
||||
'& .fc-list-event-graphic': {
|
||||
padding: theme.spacing(2)
|
||||
},
|
||||
'& .fc-list-day': {
|
||||
backgroundColor: 'var(--mui-palette-action-hover)',
|
||||
|
||||
'& .fc-list-day-text, & .fc-list-day-side-text': {
|
||||
...theme.typography.body1,
|
||||
fontWeight: 500,
|
||||
textDecoration: 'none'
|
||||
},
|
||||
|
||||
'& > *': {
|
||||
background: 'none',
|
||||
borderColor: 'var(--mui-palette-divider)'
|
||||
}
|
||||
},
|
||||
'& .fc-list-event-title': {
|
||||
...theme.typography.body1,
|
||||
color: 'var(--mui-palette-text-secondary) !important',
|
||||
padding: theme.spacing(2, 4, 2, 2)
|
||||
},
|
||||
'& .fc-list-event-time': {
|
||||
...theme.typography.body1,
|
||||
color: 'var(--mui-palette-text-secondary) !important',
|
||||
padding: theme.spacing(2, 4)
|
||||
},
|
||||
'.fc-list-table tbody > tr:first-child th': {
|
||||
borderTop: '1px solid var(--mui-palette-divider)'
|
||||
},
|
||||
'.fc-list-table': {
|
||||
borderBottom: '1px solid var(--mui-palette-divider)'
|
||||
}
|
||||
},
|
||||
|
||||
// Popover
|
||||
'& .fc-popover': {
|
||||
zIndex: 20,
|
||||
'[data-skin="bordered"] &': {
|
||||
boxShadow: 'none'
|
||||
},
|
||||
boxShadow: 1,
|
||||
borderColor: 'var(--mui-palette-divider)',
|
||||
borderRadius: 'var(--mui-shape-borderRadius)',
|
||||
background: 'var(--mui-palette-background-paper)',
|
||||
'& .fc-popover-header': {
|
||||
padding: theme.spacing(2),
|
||||
borderStartStartRadius: 'var(--mui-shape-borderRadius)',
|
||||
borderStartEndRadius: 'var(--mui-shape-borderRadius)',
|
||||
background: 'var(--mui-palette-action-hover)',
|
||||
'& .fc-popover-title, & .fc-popover-close': {
|
||||
color: 'var(--mui-palette-text-primary)'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Media Queries
|
||||
[theme.breakpoints.up('md')]: {
|
||||
'& .fc-sidebarToggle-button': {
|
||||
display: 'none'
|
||||
},
|
||||
'& .fc-toolbar-title': {
|
||||
marginLeft: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}))
|
||||
|
||||
export default AppFullCalendar
|
||||
@@ -0,0 +1,121 @@
|
||||
'use client'
|
||||
|
||||
// MUI imports
|
||||
import { styled } from '@mui/material/styles'
|
||||
import type { Theme } from '@mui/material/styles'
|
||||
|
||||
// Third-party Imports
|
||||
import 'keen-slider/keen-slider.min.css'
|
||||
|
||||
// Styled Components
|
||||
const AppKeenSlider = styled('div')(({ theme }: { theme: Theme }) => ({
|
||||
'& .keen-slider': {
|
||||
// Keen Slider handles RTL internally and thus, we need to set the direction to LTR
|
||||
direction: 'ltr',
|
||||
|
||||
'& .keen-slider__slide': {
|
||||
'& img': {
|
||||
height: 'auto',
|
||||
maxWidth: '100%'
|
||||
}
|
||||
},
|
||||
'&.thumbnail .keen-slider__slide:not(.active)': {
|
||||
opacity: 0.4
|
||||
},
|
||||
'&.zoom-out': {
|
||||
perspective: '1000px',
|
||||
|
||||
'& .zoom-out__slide': {
|
||||
'& .slider-content-wrapper': {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
position: 'absolute',
|
||||
'& img': {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover',
|
||||
position: 'absolute',
|
||||
backgroundColor: 'transparent'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'& .default-slide': {
|
||||
height: 200,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: 'var(--mui-palette-background-default)'
|
||||
}
|
||||
},
|
||||
|
||||
// Fade
|
||||
'& .fader': {
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
|
||||
'& .fader__slide': {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
position: 'absolute',
|
||||
top: '0',
|
||||
'& img': {
|
||||
width: ' 100%',
|
||||
height: ' 100%',
|
||||
objectFit: 'cover',
|
||||
position: 'absolute'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Navigation Controls
|
||||
'& .navigation-wrapper': {
|
||||
position: 'relative',
|
||||
'& .arrow': {
|
||||
top: '50%',
|
||||
width: '3rem',
|
||||
height: '3rem',
|
||||
cursor: 'pointer',
|
||||
position: 'absolute',
|
||||
transform: 'translateY(-50%)',
|
||||
color: 'var(--mui-palette-common-white)',
|
||||
...(theme.direction === 'rtl' ? { transform: 'translateY(-50%) rotate(180deg)' } : {}),
|
||||
'&.arrow-disabled': {
|
||||
cursor: 'not-allowed',
|
||||
pointerEvents: 'none',
|
||||
color: 'var(--mui-palette-action-disabled)'
|
||||
},
|
||||
'&.arrow-left': {
|
||||
left: 0
|
||||
},
|
||||
'&.arrow-right': {
|
||||
right: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Dots
|
||||
'& .swiper-dots': {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
marginTop: theme.spacing(4),
|
||||
|
||||
'& .MuiBadge-root': {
|
||||
'&:not(:last-child)': {
|
||||
marginRight: theme.spacing(4)
|
||||
},
|
||||
'& .MuiBadge-dot': {
|
||||
width: 10,
|
||||
height: 10,
|
||||
cursor: 'pointer',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: 'var(--mui-palette-action-disabled)'
|
||||
},
|
||||
'&.active .MuiBadge-dot': {
|
||||
backgroundColor: 'var(--mui-palette-primary-main)'
|
||||
}
|
||||
}
|
||||
}
|
||||
}))
|
||||
|
||||
export default AppKeenSlider
|
||||
@@ -0,0 +1,118 @@
|
||||
'use client'
|
||||
|
||||
// MUI Imports
|
||||
import Box from '@mui/material/Box'
|
||||
import { styled } from '@mui/material/styles'
|
||||
import type { BoxProps } from '@mui/material/Box'
|
||||
|
||||
// Third-party Imports
|
||||
import type { Props } from 'react-apexcharts'
|
||||
|
||||
// Component Imports
|
||||
import ReactApexcharts from '@/libs/ApexCharts'
|
||||
|
||||
type ApexChartWrapperProps = Props & {
|
||||
boxProps?: BoxProps
|
||||
}
|
||||
|
||||
// Styled Components
|
||||
const ApexChartWrapper = styled(Box)<BoxProps>(({ theme }) => ({
|
||||
'& .apexcharts-canvas': {
|
||||
"& line[stroke='transparent']": {
|
||||
display: 'none'
|
||||
},
|
||||
'& .apexcharts-tooltip': {
|
||||
boxShadow: 'var(--mui-customShadows-xs)',
|
||||
borderColor: 'var(--mui-palette-divider)',
|
||||
background: 'var(--mui-palette-background-paper)',
|
||||
...(theme.direction === 'rtl' && {
|
||||
'.apexcharts-tooltip-marker': {
|
||||
marginInlineEnd: 10,
|
||||
marginInlineStart: 0
|
||||
},
|
||||
'.apexcharts-tooltip-text-y-value': {
|
||||
marginInlineStart: 5,
|
||||
marginInlineEnd: 0
|
||||
}
|
||||
}),
|
||||
'& .apexcharts-tooltip-title': {
|
||||
fontWeight: 600,
|
||||
borderColor: 'var(--mui-palette-divider)',
|
||||
background: 'var(--mui-palette-background-paper)'
|
||||
},
|
||||
'&.apexcharts-theme-light': {
|
||||
color: 'var(--mui-palette-text-primary)'
|
||||
},
|
||||
'&.apexcharts-theme-dark': {
|
||||
color: 'var(--mui-palette-common-white)'
|
||||
},
|
||||
'& .apexcharts-tooltip-series-group:first-of-type': {
|
||||
paddingBottom: 0
|
||||
},
|
||||
'& .bar-chart': {
|
||||
padding: theme.spacing(2, 2.5)
|
||||
}
|
||||
},
|
||||
'& .apexcharts-xaxistooltip': {
|
||||
borderColor: 'var(--mui-palette-divider)',
|
||||
background: 'var(--mui-palette-grey-50)',
|
||||
...theme.applyStyles('dark', {
|
||||
background: 'var(--mui-palette-customColors-bodyBg)'
|
||||
}),
|
||||
'&:after': {
|
||||
borderBottomColor: 'var(--mui-palette-grey-50)',
|
||||
...theme.applyStyles('dark', {
|
||||
borderBottomColor: 'var(--mui-palette-customColors-bodyBg)'
|
||||
})
|
||||
},
|
||||
'&:before': {
|
||||
borderBottomColor: 'var(--mui-palette-divider)'
|
||||
}
|
||||
},
|
||||
'& .apexcharts-yaxistooltip': {
|
||||
borderColor: 'var(--mui-palette-divider)',
|
||||
background: 'var(--mui-palette-grey-50)',
|
||||
...theme.applyStyles('dark', {
|
||||
background: 'var(--mui-palette-customColors-bodyBg)'
|
||||
}),
|
||||
'&:after': {
|
||||
borderLeftColor: 'var(--mui-palette-grey-50)',
|
||||
...theme.applyStyles('dark', {
|
||||
borderLeftColor: 'var(--mui-palette-customColors-bodyBg)'
|
||||
})
|
||||
},
|
||||
'&:before': {
|
||||
borderLeftColor: 'var(--mui-palette-divider)'
|
||||
}
|
||||
},
|
||||
'& .apexcharts-xaxistooltip-text, & .apexcharts-yaxistooltip-text': {
|
||||
color: 'var(--mui-palette-text-primary)'
|
||||
},
|
||||
'& .apexcharts-yaxis .apexcharts-yaxis-texts-g .apexcharts-yaxis-label': {
|
||||
textAnchor: theme.direction === 'rtl' ? 'start' : undefined
|
||||
},
|
||||
'& .apexcharts-text, & .apexcharts-tooltip-text, & .apexcharts-datalabel-label, & .apexcharts-datalabel, & .apexcharts-xaxistooltip-text, & .apexcharts-yaxistooltip-text, & .apexcharts-legend-text':
|
||||
{
|
||||
fontFamily: `${theme.typography.fontFamily} !important`
|
||||
},
|
||||
'& .apexcharts-pie-label': {
|
||||
filter: 'none'
|
||||
},
|
||||
'& .apexcharts-marker': {
|
||||
boxShadow: 'none'
|
||||
}
|
||||
}
|
||||
})) as typeof Box
|
||||
|
||||
const AppReactApexCharts = (props: ApexChartWrapperProps) => {
|
||||
// Props
|
||||
const { boxProps, ...rest } = props
|
||||
|
||||
return (
|
||||
<ApexChartWrapper {...boxProps}>
|
||||
<ReactApexcharts {...rest} />
|
||||
</ApexChartWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
export default AppReactApexCharts
|
||||
@@ -0,0 +1,526 @@
|
||||
'use client'
|
||||
|
||||
// React Imports
|
||||
import type { ComponentProps } from 'react'
|
||||
|
||||
// MUI imports
|
||||
import Box from '@mui/material/Box'
|
||||
import { styled } from '@mui/material/styles'
|
||||
import type { BoxProps } from '@mui/material/Box'
|
||||
|
||||
// Third-party Imports
|
||||
import ReactDatePickerComponent from 'react-datepicker'
|
||||
|
||||
// Styles
|
||||
import 'react-datepicker/dist/react-datepicker.css'
|
||||
|
||||
type Props = ComponentProps<typeof ReactDatePickerComponent> & {
|
||||
boxProps?: BoxProps
|
||||
}
|
||||
|
||||
// Styled Components
|
||||
const StyledReactDatePicker = styled(Box)<BoxProps>(({ theme }) => {
|
||||
return {
|
||||
'& .react-datepicker-popper': {
|
||||
zIndex: 20,
|
||||
paddingTop: `${theme.spacing(0.5)} !important`
|
||||
},
|
||||
'& .react-datepicker-wrapper': {
|
||||
width: '100%'
|
||||
},
|
||||
'& .react-datepicker__triangle': {
|
||||
display: 'none'
|
||||
},
|
||||
'& .react-datepicker': {
|
||||
color: 'var(--mui-palette-text-primary)',
|
||||
borderRadius: 'var(--mui-shape-borderRadius)',
|
||||
fontFamily: theme.typography.fontFamily,
|
||||
backgroundColor: 'var(--mui-palette-background-paper)',
|
||||
boxShadow: 'var(--mui-customShadows-md)',
|
||||
border: 'none',
|
||||
'& .react-datepicker__header': {
|
||||
padding: 0,
|
||||
border: 'none',
|
||||
fontWeight: 'normal',
|
||||
backgroundColor: 'var(--mui-palette-background-paper)',
|
||||
'& .react-datepicker__current-month, &.react-datepicker-year-header': {
|
||||
textAlign: 'left'
|
||||
},
|
||||
'&:not(.react-datepicker-year-header)': {
|
||||
'& + .react-datepicker__month, & + .react-datepicker__year': {
|
||||
margin: theme.spacing(2),
|
||||
marginTop: theme.spacing(4.5)
|
||||
}
|
||||
},
|
||||
'&.react-datepicker-year-header': {
|
||||
'& + .react-datepicker__month, & + .react-datepicker__year': {
|
||||
margin: theme.spacing(2),
|
||||
marginTop: theme.spacing(0)
|
||||
}
|
||||
}
|
||||
},
|
||||
'& > .react-datepicker__navigation': {
|
||||
top: 13,
|
||||
borderRadius: '50%',
|
||||
backgroundColor: 'var(--mui-palette-action-selected)',
|
||||
'&.react-datepicker__navigation--previous': {
|
||||
width: 30,
|
||||
height: 30,
|
||||
border: 'none',
|
||||
top: 12,
|
||||
left: 'auto',
|
||||
right: '57px',
|
||||
...(theme.direction === 'ltr'
|
||||
? {
|
||||
backgroundImage:
|
||||
"url(\"data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(47 43 61 / 0.7)' d='M17.5 10L12.5 15L17.5 20' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E\")",
|
||||
...theme.applyStyles('dark', {
|
||||
backgroundImage:
|
||||
"url(\"data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(225 222 245 / 0.7)' d='M17.5 10L12.5 15L17.5 20' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E\")"
|
||||
})
|
||||
}
|
||||
: {
|
||||
backgroundImage:
|
||||
"url(\"data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(47 43 61 / 0.7)' d='M12.5 10L17.5 15L12.5 20' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E\")",
|
||||
...theme.applyStyles('dark', {
|
||||
backgroundImage:
|
||||
"url(\"data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(225 222 245 / 0.7)' d='M12.5 10L17.5 15L12.5 20' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E\")"
|
||||
})
|
||||
}),
|
||||
'& .react-datepicker__navigation-icon': {
|
||||
display: 'none'
|
||||
},
|
||||
'&:has(+ .react-datepicker__navigation--next--with-time)':
|
||||
theme.direction === 'ltr' ? { right: 177 } : { left: 177 }
|
||||
},
|
||||
'&.react-datepicker__navigation--next': {
|
||||
width: 30,
|
||||
height: 30,
|
||||
border: 'none',
|
||||
top: 12,
|
||||
right: 15,
|
||||
left: 'auto',
|
||||
...(theme.direction === 'ltr'
|
||||
? {
|
||||
backgroundImage:
|
||||
"url(\"data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(47 43 61 / 0.7)' d='M12.5 10L17.5 15L12.5 20' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E\")",
|
||||
...theme.applyStyles('dark', {
|
||||
backgroundImage:
|
||||
"url(\"data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(225 222 245 / 0.7)' d='M12.5 10L17.5 15L12.5 20' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E\")"
|
||||
})
|
||||
}
|
||||
: {
|
||||
backgroundImage:
|
||||
"url(\"data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(47 43 61 / 0.7)' d='M17.5 10L12.5 15L17.5 20' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E\")",
|
||||
...theme.applyStyles('dark', {
|
||||
backgroundImage:
|
||||
"url(\"data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(225 222 245 / 0.7)' d='M17.5 10L12.5 15L17.5 20' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E\")"
|
||||
})
|
||||
}),
|
||||
'& .react-datepicker__navigation-icon': {
|
||||
display: 'none'
|
||||
}
|
||||
},
|
||||
'&.react-datepicker__navigation--next--with-time': theme.direction === 'ltr' ? { right: 135 } : { left: 135 },
|
||||
'&:focus, &:active': {
|
||||
outline: 0
|
||||
}
|
||||
},
|
||||
'& .react-datepicker__current-month, & .react-datepicker-year-header': {
|
||||
...theme.typography.subtitle1,
|
||||
lineHeight: 2,
|
||||
paddingBlockStart: theme.spacing(3),
|
||||
paddingBlockEnd: theme.spacing(4.5),
|
||||
paddingInline: theme.spacing(4),
|
||||
color: 'var(--mui-palette-text-primary)'
|
||||
},
|
||||
'& .react-datepicker__day-name': {
|
||||
margin: 0,
|
||||
width: '2.25rem',
|
||||
...theme.typography.subtitle2,
|
||||
color: 'var(--mui-palette-text-primary)'
|
||||
},
|
||||
'& .react-datepicker__day-names': {
|
||||
marginBottom: 0
|
||||
},
|
||||
'& .react-datepicker__day': {
|
||||
margin: 0,
|
||||
width: '2.25rem',
|
||||
borderRadius: '50%',
|
||||
lineHeight: '2.25rem',
|
||||
color: 'var(--mui-palette-text-primary)',
|
||||
fontSize: theme.typography.body1.fontSize,
|
||||
'&.react-datepicker__day--selected.react-datepicker__day--in-selecting-range.react-datepicker__day--selecting-range-start, &.react-datepicker__day--selected.react-datepicker__day--range-start.react-datepicker__day--in-range, &.react-datepicker__day--range-start':
|
||||
{
|
||||
borderRadius: '18px 0px 0px 18px;',
|
||||
color: 'var(--mui-palette-common-white) !important',
|
||||
backgroundColor: 'var(--mui-palette-primary-main) !important'
|
||||
},
|
||||
'&.react-datepicker__day--range-end.react-datepicker__day--in-range': {
|
||||
borderRadius: '0px 18px 18px 0px',
|
||||
color: 'var(--mui-palette-common-white) !important',
|
||||
backgroundColor: 'var(--mui-palette-primary-main) !important'
|
||||
},
|
||||
'&:focus, &:active': {
|
||||
outline: 0
|
||||
},
|
||||
'&.react-datepicker__day--outside-month, &.react-datepicker__day--disabled:not(.react-datepicker__day--selected)':
|
||||
{
|
||||
color: 'var(--mui-palette-text-disabled)',
|
||||
'&:hover': {
|
||||
backgroundColor: 'transparent'
|
||||
}
|
||||
},
|
||||
'&.react-datepicker__day--highlighted, &.react-datepicker__day--highlighted:hover': {
|
||||
color: 'var(--mui-palette-success-main)',
|
||||
backgroundColor: 'var(--mui-palette-success-lightOpacity)',
|
||||
'&.react-datepicker__day--selected': {
|
||||
backgroundColor: 'var(--mui-palette-primary-main) !important'
|
||||
}
|
||||
}
|
||||
},
|
||||
'&:has(.react-datepicker__day--in-range)': {
|
||||
'& > .react-datepicker__navigation': {
|
||||
'&.react-datepicker__navigation--previous': {
|
||||
...(theme.direction === 'ltr' ? { left: 15 } : { right: 15 })
|
||||
}
|
||||
},
|
||||
'& .react-datepicker__header': {
|
||||
'& .react-datepicker__current-month': {
|
||||
textAlign: 'center'
|
||||
}
|
||||
}
|
||||
},
|
||||
'& .react-datepicker__day--in-range, & .react-datepicker__day--in-selecting-range': {
|
||||
borderRadius: 0,
|
||||
color: 'var(--mui-palette-primary-main) !important',
|
||||
backgroundColor: 'var(--mui-palette-primary-lightOpacity) !important'
|
||||
},
|
||||
'& .react-datepicker__day--today': {
|
||||
fontWeight: 'normal',
|
||||
'&:not(.react-datepicker__day--selected):not(:empty)': {
|
||||
color: 'var(--mui-palette-primary-main)',
|
||||
backgroundColor: 'var(--mui-palette-primary-lightOpacity)',
|
||||
'&:hover': {
|
||||
backgroundColor: 'var(--mui-palette-primary-mainOpacity)'
|
||||
},
|
||||
'&.react-datepicker__day--keyboard-selected': {
|
||||
backgroundColor: 'var(--mui-palette-primary-lightOpacity)',
|
||||
'&:hover': {
|
||||
backgroundColor: 'var(--mui-palette-primary-lightOpacity)'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'& .react-datepicker__month-text--today': {
|
||||
fontWeight: 'normal',
|
||||
'&:not(.react-datepicker__month-text--selected)': {
|
||||
lineHeight: '2.125rem',
|
||||
color: 'var(--mui-palette-primary-main)',
|
||||
border: '1px solid var(--mui-palette-primary-main)',
|
||||
'&:hover': {
|
||||
backgroundColor: 'rgb(var(--mui-palette-primary-mainChannel) / 0.04)'
|
||||
}
|
||||
}
|
||||
},
|
||||
'& .react-datepicker__year-text--today': {
|
||||
fontWeight: 'normal',
|
||||
'&:not(.react-datepicker__year-text--selected)': {
|
||||
lineHeight: '2.125rem',
|
||||
color: 'var(--mui-palette-primary-main)',
|
||||
border: '1px solid var(--mui-palette-primary-main)',
|
||||
'&:hover': {
|
||||
backgroundColor: 'rgb(var(--mui-palette-primary-mainChannel) / 0.04)'
|
||||
},
|
||||
'&.react-datepicker__year-text--keyboard-selected': {
|
||||
color: 'var(--mui-palette-primary-main)',
|
||||
backgroundColor: 'rgb(var(--mui-palette-primary-mainChannel) / 0.06)',
|
||||
'&:hover': {
|
||||
color: 'var(--mui-palette-primary-main)',
|
||||
backgroundColor: 'rgb(var(--mui-palette-primary-mainChannel) / 0.06)'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'& .react-datepicker__day--keyboard-selected': {
|
||||
'&:not(.react-datepicker__day--in-range)': {
|
||||
color: 'var(--mui-palette-primary-main)',
|
||||
backgroundColor: 'rgb(var(--mui-palette-primary-mainChannel) / 0.16)',
|
||||
'&:hover': {
|
||||
backgroundColor: 'rgb(var(--mui-palette-primary-mainChannel) / 0.16)'
|
||||
}
|
||||
}
|
||||
},
|
||||
'& .react-datepicker__month-text--keyboard-selected': {
|
||||
'&:not(.react-datepicker__month--in-range)': {
|
||||
color: 'var(--mui-palette-primary-main)',
|
||||
backgroundColor: 'rgb(var(--mui-palette-primary-mainChannel) / 0.16)',
|
||||
'&:hover': {
|
||||
backgroundColor: 'rgb(var(--mui-palette-primary-mainChannel) / 0.16)'
|
||||
}
|
||||
}
|
||||
},
|
||||
'& .react-datepicker__year-text--keyboard-selected, & .react-datepicker__quarter-text--keyboard-selected': {
|
||||
color: 'var(--mui-palette-primary-main)',
|
||||
backgroundColor: 'rgb(var(--mui-palette-primary-mainChannel) / 0.16)'
|
||||
},
|
||||
'& .react-datepicker__day--selected, & .react-datepicker__month-text--selected, & .react-datepicker__year-text--selected, & .react-datepicker__quarter-text--selected':
|
||||
{
|
||||
color: 'var(--mui-palette-common-white) !important',
|
||||
backgroundColor: 'var(--mui-palette-primary-main) !important',
|
||||
boxShadow: 'var(--mui-customShadows-primary-sm)',
|
||||
'&:hover': {
|
||||
backgroundColor: 'var(--mui-palette-primary-dark) !important'
|
||||
}
|
||||
},
|
||||
'& .react-datepicker__header__dropdown': {
|
||||
'& .react-datepicker__month-dropdown-container:not(:last-child)': {
|
||||
marginRight: theme.spacing(8)
|
||||
},
|
||||
'& .react-datepicker__month-dropdown-container, & .react-datepicker__year-dropdown-container': {
|
||||
marginBottom: theme.spacing(4)
|
||||
},
|
||||
'& .react-datepicker__month-read-view--selected-month, & .react-datepicker__year-read-view--selected-year': {
|
||||
fontSize: '0.875rem',
|
||||
marginRight: theme.spacing(1),
|
||||
color: 'var(--mui-palette-text-primary)'
|
||||
},
|
||||
'& .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow, & .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow':
|
||||
{
|
||||
borderColor: 'var(--mui-palette-text-primary)'
|
||||
},
|
||||
'& .react-datepicker__month-read-view--down-arrow, & .react-datepicker__year-read-view--down-arrow': {
|
||||
top: 4,
|
||||
borderColor: 'var(--mui-palette-text-secondary)'
|
||||
},
|
||||
'& .react-datepicker__month-dropdown, & .react-datepicker__year-dropdown': {
|
||||
padding: theme.spacing(2),
|
||||
border: 'none',
|
||||
borderRadius: 'var(--mui-shape-borderRadius)',
|
||||
backgroundColor: 'var(--mui-palette-background-paper)',
|
||||
boxShadow: 'var(--mui-customShadows-lg)',
|
||||
'[data-skin="bordered"] &': {
|
||||
boxShadow: 'none',
|
||||
border: `1px solid var(--mui-palette-divider)`
|
||||
}
|
||||
},
|
||||
'& .react-datepicker__month-option, & .react-datepicker__year-option': {
|
||||
...theme.typography.body1,
|
||||
padding: theme.spacing(1.5, 4),
|
||||
borderRadius: 'var(--mui-shape-borderRadius)',
|
||||
marginBlockEnd: theme.spacing(0.5),
|
||||
'&:hover': {
|
||||
backgroundColor: 'var(--mui-palette-action-hover)'
|
||||
}
|
||||
},
|
||||
'& .react-datepicker__month-option.react-datepicker__month-option--selected_month': {
|
||||
color: 'var(--mui-palette-primary-main)',
|
||||
backgroundColor: 'var(--mui-palette-primary-lightOpacity)',
|
||||
'&:hover': {
|
||||
backgroundColor: 'var(--mui-palette-primary-lightOpacity)'
|
||||
},
|
||||
'& .react-datepicker__month-option--selected': {
|
||||
display: 'none'
|
||||
}
|
||||
},
|
||||
'& .react-datepicker__year-option.react-datepicker__year-option--selected_year': {
|
||||
color: 'var(--mui-palette-primary-main)',
|
||||
backgroundColor: 'var(--mui-palette-primary-lightOpacity)',
|
||||
'&:hover': {
|
||||
backgroundColor: 'var(--mui-palette-primary-lightOpacity)'
|
||||
},
|
||||
'& .react-datepicker__year-option--selected': {
|
||||
display: 'none'
|
||||
}
|
||||
},
|
||||
'& .react-datepicker__year-option': {
|
||||
// TODO: Remove some of the following styles for arrow in Year dropdown when react-datepicker give arrows in Year dropdown
|
||||
'& .react-datepicker__navigation--years-upcoming': {
|
||||
width: 9,
|
||||
height: 9,
|
||||
borderStyle: 'solid',
|
||||
borderWidth: '3px 3px 0 0',
|
||||
transform: 'rotate(-45deg)',
|
||||
borderTopColor: 'var(--mui-palette-text-secondary)',
|
||||
borderRightColor: 'var(--mui-palette-text-secondary)',
|
||||
margin: `${theme.spacing(2.75)} auto ${theme.spacing(0)}`
|
||||
},
|
||||
'&:hover .react-datepicker__navigation--years-upcoming': {
|
||||
borderTopColor: 'var(--mui-palette-text-primary)',
|
||||
borderRightColor: 'var(--mui-palette-text-primary)'
|
||||
},
|
||||
'& .react-datepicker__navigation--years-previous': {
|
||||
width: 9,
|
||||
height: 9,
|
||||
borderStyle: 'solid',
|
||||
borderWidth: '0 0 3px 3px',
|
||||
transform: 'rotate(-45deg)',
|
||||
borderLeftColor: 'var(--mui-palette-text-secondary)',
|
||||
borderBottomColor: 'var(--mui-palette-text-secondary)',
|
||||
margin: `${theme.spacing(0)} auto ${theme.spacing(2.75)}`
|
||||
},
|
||||
'&:hover .react-datepicker__navigation--years-previous': {
|
||||
borderLeftColor: 'var(--mui-palette-text-primary)',
|
||||
borderBottomColor: 'var(--mui-palette-text-primary)'
|
||||
}
|
||||
}
|
||||
},
|
||||
'& .react-datepicker__week-number': {
|
||||
margin: 0,
|
||||
fontWeight: 500,
|
||||
width: '2.25rem',
|
||||
lineHeight: '2.25rem',
|
||||
fontSize: theme.typography.body2.fontSize,
|
||||
color: 'var(--mui-palette-text-primary)'
|
||||
},
|
||||
'& .react-datepicker__month-text, & .react-datepicker__year-text, & .react-datepicker__quarter-text': {
|
||||
margin: 0,
|
||||
alignItems: 'center',
|
||||
fontSize: theme.typography.body1.fontSize,
|
||||
lineHeight: '2rem',
|
||||
display: 'inline-flex',
|
||||
justifyContent: 'center',
|
||||
borderRadius: 'var(--mui-shape-borderRadius)',
|
||||
'&:focus, &:active': {
|
||||
outline: 0
|
||||
}
|
||||
},
|
||||
'& .react-datepicker__year-wrapper': {
|
||||
maxWidth: 205,
|
||||
justifyContent: 'center'
|
||||
},
|
||||
'& .react-datepicker__input-time-container': {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
...(theme.direction === 'rtl' ? { flexDirection: 'row-reverse' } : {})
|
||||
},
|
||||
'& .react-datepicker__today-button': {
|
||||
borderTop: 0,
|
||||
borderRadius: '1rem',
|
||||
margin: theme.spacing(0, 4, 4),
|
||||
color: 'var(--mui-palette-common-white)',
|
||||
backgroundColor: 'var(--mui-palette-primary-main)'
|
||||
},
|
||||
|
||||
// Time Picker
|
||||
'&:not(.react-datepicker--time-only)': {
|
||||
'& .react-datepicker__time-container': {
|
||||
borderLeftColor: 'var(--mui-palette-divider)',
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
width: '5.5rem'
|
||||
},
|
||||
[theme.breakpoints.up('sm')]: {
|
||||
width: '7.4375rem'
|
||||
}
|
||||
}
|
||||
},
|
||||
'&.react-datepicker--time-only': {
|
||||
width: '7.4375rem',
|
||||
'& .react-datepicker__time-container': {
|
||||
width: '7.4375rem'
|
||||
}
|
||||
},
|
||||
'& .react-datepicker__time-container': {
|
||||
padding: theme.spacing(0.75, 0),
|
||||
'& .react-datepicker-time__header': {
|
||||
...theme.typography.subtitle2,
|
||||
marginBottom: theme.spacing(3.5),
|
||||
marginTop: theme.spacing(3.5),
|
||||
color: 'var(--mui-palette-text-primary)'
|
||||
},
|
||||
|
||||
'& .react-datepicker__time': {
|
||||
background: 'var(--mui-palette-background-paper)',
|
||||
'& .react-datepicker__time-box .react-datepicker__time-list-item--disabled': {
|
||||
pointerEvents: 'none',
|
||||
color: 'var(--mui-palette-text-disabled)',
|
||||
'&.react-datepicker__time-list-item--selected': {
|
||||
fontWeight: 'normal',
|
||||
backgroundColor: 'var(--mui-palette-action-disabledBackground)'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
'& .react-datepicker__time-list-item': {
|
||||
height: 'auto !important',
|
||||
padding: `${theme.spacing(1.75, 0)} !important`,
|
||||
marginLeft: theme.spacing(4.25),
|
||||
marginRight: theme.spacing(2.2),
|
||||
...theme.typography.body1,
|
||||
color: 'var(--mui-palette-text-primary)',
|
||||
borderRadius: 'var(--mui-shape-borderRadius)',
|
||||
'&:focus, &:active': {
|
||||
outline: 0
|
||||
},
|
||||
'&:hover': {
|
||||
backgroundColor: 'var(--mui-palette-action-hover) !important'
|
||||
},
|
||||
'&.react-datepicker__time-list-item--selected:not(.react-datepicker__time-list-item--disabled)': {
|
||||
fontWeight: 'normal',
|
||||
color: 'var(--mui-palette-common-white) !important',
|
||||
backgroundColor: 'var(--mui-palette-primary-main) !important',
|
||||
boxShadow: 'var(--mui-customShadows-xs)'
|
||||
}
|
||||
},
|
||||
|
||||
'& .react-datepicker__time-box': {
|
||||
width: '100%'
|
||||
},
|
||||
'& .react-datepicker__time-list': {
|
||||
'&::-webkit-scrollbar': {
|
||||
width: 8
|
||||
},
|
||||
|
||||
/* Track */
|
||||
'&::-webkit-scrollbar-track': {
|
||||
background: 'var(--mui-palette-background-paper)'
|
||||
},
|
||||
|
||||
/* Handle */
|
||||
'&::-webkit-scrollbar-thumb': {
|
||||
borderRadius: 10,
|
||||
background: '#aaa'
|
||||
},
|
||||
|
||||
/* Handle on hover */
|
||||
'&::-webkit-scrollbar-thumb:hover': {
|
||||
background: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
'& .react-datepicker__day:hover, & .react-datepicker__month-text:hover, & .react-datepicker__quarter-text:hover, & .react-datepicker__year-text:hover':
|
||||
{
|
||||
backgroundColor: 'var(--mui-palette-action-hover)'
|
||||
},
|
||||
'[data-skin="bordered"] &': {
|
||||
boxShadow: 'none',
|
||||
border: `1px solid var(--mui-palette-divider)`
|
||||
}
|
||||
},
|
||||
'& .react-datepicker__close-icon': {
|
||||
top: 10,
|
||||
paddingRight: theme.spacing(4),
|
||||
...(theme.direction === 'rtl' ? { right: 0, left: 'auto' } : {}),
|
||||
'&:after': {
|
||||
width: 'unset',
|
||||
height: 'unset',
|
||||
fontSize: '1.5rem',
|
||||
color: 'var(--mui-palette-text-primary)',
|
||||
backgroundColor: 'transparent !important'
|
||||
}
|
||||
}
|
||||
}
|
||||
}) as typeof Box
|
||||
|
||||
const AppReactDatepicker = (props: Props) => {
|
||||
// Props
|
||||
const { boxProps, ...rest } = props
|
||||
|
||||
return (
|
||||
<StyledReactDatePicker {...boxProps}>
|
||||
<ReactDatePickerComponent popperPlacement='bottom-start' {...rest} />
|
||||
</StyledReactDatePicker>
|
||||
)
|
||||
}
|
||||
|
||||
export default AppReactDatepicker
|
||||
@@ -0,0 +1,82 @@
|
||||
'use client'
|
||||
|
||||
// MUI imports
|
||||
import Box from '@mui/material/Box'
|
||||
import { styled } from '@mui/material/styles'
|
||||
|
||||
// Type imports
|
||||
import type { BoxProps } from '@mui/material/Box'
|
||||
|
||||
// Styled Components
|
||||
const AppReactDropzone = styled(Box)<BoxProps>(({ theme }) => ({
|
||||
'& .dropzone': {
|
||||
minHeight: 300,
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
cursor: 'pointer',
|
||||
position: 'relative',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: theme.spacing(4),
|
||||
borderRadius: 'var(--mui-shape-borderRadius)',
|
||||
border: '2px dashed var(--mui-palette-divider)',
|
||||
[theme.breakpoints.down('xs')]: {
|
||||
textAlign: 'center'
|
||||
},
|
||||
'&:focus': {
|
||||
outline: 'none'
|
||||
},
|
||||
'& + .MuiList-root': {
|
||||
padding: 0,
|
||||
marginTop: theme.spacing(6.25),
|
||||
'& .MuiListItem-root': {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
borderRadius: 'var(--mui-shape-borderRadius)',
|
||||
padding: theme.spacing(2.5, 2.4, 2.5, 6),
|
||||
border: '1px solid var(--mui-palette-divider)',
|
||||
'& .file-details': {
|
||||
display: 'flex',
|
||||
alignItems: 'center'
|
||||
},
|
||||
'& .file-preview': {
|
||||
display: 'flex',
|
||||
marginRight: theme.spacing(3.75),
|
||||
'& svg': {
|
||||
fontSize: '2rem'
|
||||
}
|
||||
},
|
||||
'& img': {
|
||||
width: 38,
|
||||
height: 38,
|
||||
padding: theme.spacing(0.75),
|
||||
borderRadius: 'var(--mui-shape-borderRadius)',
|
||||
border: '1px solid var(--mui-palette-divider)'
|
||||
},
|
||||
'& .file-name': {
|
||||
fontWeight: 600
|
||||
},
|
||||
'& + .MuiListItem-root': {
|
||||
marginTop: theme.spacing(3.5)
|
||||
}
|
||||
},
|
||||
'& + .buttons': {
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
marginTop: theme.spacing(6.25),
|
||||
'& > :first-of-type': {
|
||||
marginRight: theme.spacing(3.5)
|
||||
}
|
||||
}
|
||||
},
|
||||
'& img.single-file-image': {
|
||||
objectFit: 'cover',
|
||||
position: 'absolute',
|
||||
width: 'calc(100% - 1rem)',
|
||||
height: 'calc(100% - 1rem)',
|
||||
borderRadius: 'var(--mui-shape-borderRadius)'
|
||||
}
|
||||
}
|
||||
})) as typeof Box
|
||||
|
||||
export default AppReactDropzone
|
||||
@@ -0,0 +1,125 @@
|
||||
'use client'
|
||||
|
||||
// MUI Imports
|
||||
import Box from '@mui/material/Box'
|
||||
import useMediaQuery from '@mui/material/useMediaQuery'
|
||||
import { styled } from '@mui/material/styles'
|
||||
import type { BoxProps } from '@mui/material/Box'
|
||||
import type { Theme } from '@mui/material/styles'
|
||||
|
||||
// Third-party Imports
|
||||
import 'react-toastify/dist/ReactToastify.css'
|
||||
import { ToastContainer } from 'react-toastify'
|
||||
import type { ToastContainerProps, ToastPosition } from 'react-toastify'
|
||||
|
||||
// Type Imports
|
||||
import type { Direction } from '@core/types'
|
||||
|
||||
// Config Imports
|
||||
import themeConfig from '@configs/themeConfig'
|
||||
|
||||
// Hook Imports
|
||||
import { useSettings } from '@core/hooks/useSettings'
|
||||
|
||||
type Props = ToastContainerProps & {
|
||||
boxProps?: BoxProps
|
||||
direction?: Direction
|
||||
}
|
||||
|
||||
// Styled Components
|
||||
const ToastifyWrapper = styled(Box)<BoxProps>(({ theme }) => {
|
||||
// Hooks
|
||||
const isSmallScreen = useMediaQuery((theme: Theme) => theme.breakpoints.down(480))
|
||||
const { settings } = useSettings()
|
||||
|
||||
return {
|
||||
...(isSmallScreen && {
|
||||
'& .Toastify__toast-container': {
|
||||
marginBlockStart: theme.spacing(3),
|
||||
marginInline: theme.spacing(3),
|
||||
width: 'calc(100dvw - 1.5rem)'
|
||||
}
|
||||
}),
|
||||
'& .Toastify__toast': {
|
||||
minBlockSize: 46,
|
||||
borderRadius: 'var(--mui-shape-borderRadius)',
|
||||
padding: theme.spacing(1.5, 2.5),
|
||||
backgroundColor: 'var(--mui-palette-background-paper)',
|
||||
boxShadow: settings.skin === 'bordered' ? 'none' : 'var(--mui-customShadows-md)',
|
||||
border: settings.skin === 'bordered' && '1px solid var(--mui-palette-divider)',
|
||||
...(isSmallScreen && {
|
||||
marginBlockEnd: theme.spacing(4)
|
||||
}),
|
||||
'&:not(.custom-toast)': {
|
||||
'& .Toastify__toast-body': {
|
||||
color: 'var(--mui-palette-text-primary)'
|
||||
},
|
||||
'&.Toastify__toast--success': {
|
||||
'& .Toastify__toast-icon svg': {
|
||||
fill: 'var(--mui-palette-success-main)'
|
||||
}
|
||||
},
|
||||
'&.Toastify__toast--error': {
|
||||
'& .Toastify__toast-icon svg': {
|
||||
fill: 'var(--mui-palette-error-main)'
|
||||
}
|
||||
},
|
||||
'&.Toastify__toast--warning': {
|
||||
'& .Toastify__toast-icon svg': {
|
||||
fill: 'var(--mui-palette-warning-main)'
|
||||
}
|
||||
},
|
||||
'&.Toastify__toast--info': {
|
||||
'& .Toastify__toast-icon svg': {
|
||||
fill: 'var(--mui-palette-info-main)'
|
||||
}
|
||||
}
|
||||
},
|
||||
'[data-skin="bordered"] &': {
|
||||
boxShadow: 'none',
|
||||
border: `1px solid var(--mui-palette-divider)`
|
||||
}
|
||||
},
|
||||
'& .Toastify__toast-body': {
|
||||
margin: 0,
|
||||
lineHeight: 1.46667,
|
||||
fontSize: theme.typography.body1.fontSize
|
||||
},
|
||||
'& .Toastify__toast-icon': {
|
||||
marginRight: theme.spacing(3),
|
||||
height: 20,
|
||||
width: 20,
|
||||
'& .Toastify__spinner': {
|
||||
margin: 3,
|
||||
height: 14,
|
||||
width: 14
|
||||
}
|
||||
},
|
||||
'& .Toastify__close-button': {
|
||||
color: 'var(--mui-palette-text-primary)'
|
||||
}
|
||||
}
|
||||
}) as typeof Box
|
||||
|
||||
const AppReactToastify = (props: Props) => {
|
||||
const { boxProps, direction = 'ltr', ...rest } = props
|
||||
|
||||
const positionMap: Partial<Record<ToastPosition, ToastPosition>> = {
|
||||
'top-right': 'top-left',
|
||||
'top-left': 'top-right',
|
||||
'bottom-left': 'bottom-right',
|
||||
'bottom-right': 'bottom-left',
|
||||
'top-center': 'top-center',
|
||||
'bottom-center': 'bottom-center'
|
||||
}
|
||||
|
||||
const position = direction === 'rtl' ? positionMap[themeConfig.toastPosition] : themeConfig.toastPosition
|
||||
|
||||
return (
|
||||
<ToastifyWrapper {...boxProps}>
|
||||
<ToastContainer rtl={direction === 'rtl'} position={position} {...rest} />
|
||||
</ToastifyWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
export default AppReactToastify
|
||||
@@ -0,0 +1,55 @@
|
||||
'use client'
|
||||
|
||||
// MUI imports
|
||||
import { styled } from '@mui/material/styles'
|
||||
|
||||
// Styled Components
|
||||
const AppRecharts = styled('div')(({ theme }) => ({
|
||||
'& .recharts-cartesian-grid-vertical, & .recharts-cartesian-grid-horizontal, & .recharts-polar-grid-angle, & .recharts-polar-radius-axis, & .recharts-cartesian-axis':
|
||||
{
|
||||
'& line': {
|
||||
stroke: 'var(--mui-palette-divider)'
|
||||
}
|
||||
},
|
||||
'& .recharts-polar-grid-concentric-polygon': {
|
||||
stroke: 'var(--mui-palette-divider)'
|
||||
},
|
||||
'& .recharts-tooltip-wrapper': {
|
||||
outline: 'none'
|
||||
},
|
||||
'& .recharts-default-tooltip': {
|
||||
border: 'none !important',
|
||||
boxShadow: 'var(--mui-customShadows-xs)',
|
||||
borderRadius: 'var(--mui-shape-borderRadius)',
|
||||
backgroundColor: 'var(--mui-palette-background-paper) !important'
|
||||
},
|
||||
'& .recharts-custom-tooltip': {
|
||||
padding: theme.spacing(2.5),
|
||||
boxShadow: 'var(--mui-customShadows-xs)',
|
||||
borderRadius: 'var(--mui-shape-borderRadius)',
|
||||
backgroundColor: 'var(--mui-palette-background-paper)'
|
||||
},
|
||||
'& .recharts-tooltip-cursor': {
|
||||
fill: 'var(--mui-palette-action-hover)'
|
||||
},
|
||||
'& .recharts-yAxis .recharts-cartesian-axis-ticks .recharts-cartesian-axis-tick .recharts-cartesian-axis-tick-value':
|
||||
{
|
||||
textAnchor: theme.direction === 'rtl' ? 'end' : undefined
|
||||
},
|
||||
'& .recharts-active-dot .recharts-dot': {
|
||||
fill: 'var(--mui-palette-secondary-main)'
|
||||
},
|
||||
'& .recharts-tooltip-item': {
|
||||
fontSize: '0.875rem',
|
||||
color: 'var(--mui-palette-text-primary) !important'
|
||||
},
|
||||
'& .recharts-text': {
|
||||
fontSize: '0.8125rem',
|
||||
fill: 'var(--mui-palette-text-disabled)'
|
||||
},
|
||||
'& .recharts-pie .recharts-sector, & .recharts-layer': {
|
||||
outline: 'none !important'
|
||||
}
|
||||
}))
|
||||
|
||||
export default AppRecharts
|
||||
@@ -0,0 +1,39 @@
|
||||
.slot {
|
||||
position: relative;
|
||||
inline-size: 100%;
|
||||
block-size: 3.5rem;
|
||||
font-size: 1.25rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 100ms;
|
||||
border-width: 1px;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.slotActive {
|
||||
outline: 1px solid var(--mui-palette-primary-main);
|
||||
border-color: var(--mui-palette-primary-main);
|
||||
}
|
||||
|
||||
@keyframes caret-blink {
|
||||
0%,
|
||||
70%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
20%,
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.fakeCaret {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
animation: caret-blink 1.2s ease-out infinite;
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
/* Basic editor styles */
|
||||
.ProseMirror {
|
||||
outline: none;
|
||||
min-block-size: 100px;
|
||||
overflow-y: auto;
|
||||
padding: 1.5rem;
|
||||
inline-size: 100%;
|
||||
|
||||
> * + * {
|
||||
margin-block-start: 0.75em;
|
||||
}
|
||||
p.is-editor-empty:first-child::before {
|
||||
block-size: 0;
|
||||
color: var(--mui-palette-text-disabled);
|
||||
content: attr(data-placeholder);
|
||||
float: inline-start;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-block: 0;
|
||||
padding-inline: 1rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: rgba(#616161, 0.1);
|
||||
color: #616161;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: #0d0d0d;
|
||||
color: #fff;
|
||||
font-family: 'JetBrainsMono', monospace;
|
||||
padding-block: 0.75rem;
|
||||
padding-inline: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
|
||||
code {
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
background: none;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-inline-size: 100%;
|
||||
block-size: auto;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding-inline-start: 1rem;
|
||||
border-inline-start: 2px solid var(--mui-palette-divider);
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-block-start: 2px solid var(--mui-palette-divider);
|
||||
margin-block: 2rem;
|
||||
margin-inline: 0;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user