112 lines
3.5 KiB
TypeScript
112 lines
3.5 KiB
TypeScript
'use client'
|
|
|
|
// Next Imports
|
|
import dynamic from 'next/dynamic'
|
|
import { useTranslations } from 'next-intl'
|
|
|
|
// MUI Imports
|
|
import Card from '@mui/material/Card'
|
|
import CardHeader from '@mui/material/CardHeader'
|
|
import CardContent from '@mui/material/CardContent'
|
|
import Grid from '@mui/material/Grid2'
|
|
import { useTheme } from '@mui/material/styles'
|
|
|
|
import type { ApexOptions } from 'apexcharts'
|
|
|
|
// Component Imports
|
|
import OptionMenu from '@core/components/option-menu'
|
|
import CardStatsVertical from '@/components/card-statistics/Vertical'
|
|
|
|
// Styled Component Imports
|
|
const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
|
|
|
|
type EconomicItem = {
|
|
title: string
|
|
value: string
|
|
subtitle: string
|
|
avatarIcon: string
|
|
avatarColor: 'primary' | 'success' | 'info' | 'warning'
|
|
}
|
|
|
|
interface EconomicOverviewProps {
|
|
data?: Record<string, unknown>
|
|
}
|
|
|
|
const EconomicOverview = ({ data }: EconomicOverviewProps) => {
|
|
const t = useTranslations('farmDashboard')
|
|
const economicData = (data?.economicData as EconomicItem[] | undefined) ?? []
|
|
const chartSeries = (data?.chartSeries as Array<{ name: string; data: number[] }>) ?? []
|
|
const chartCategories =
|
|
(data?.chartCategories as string[]) ??
|
|
[t('fallback.monthJan'), t('fallback.monthFeb'), t('fallback.monthMar'), t('fallback.monthApr'), t('fallback.monthMay'), t('fallback.monthJun')]
|
|
const theme = useTheme()
|
|
|
|
const options: ApexOptions = {
|
|
chart: {
|
|
stacked: true,
|
|
parentHeightOffset: 0,
|
|
toolbar: { show: false }
|
|
},
|
|
legend: { position: 'top', labels: { colors: 'var(--mui-palette-text-secondary)' } },
|
|
dataLabels: { enabled: false },
|
|
stroke: { width: 5, colors: ['var(--mui-palette-background-paper)'] },
|
|
colors: ['var(--mui-palette-primary-main)', 'var(--mui-palette-info-main)'],
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 7,
|
|
columnWidth: '50%',
|
|
borderRadiusApplication: 'around'
|
|
}
|
|
},
|
|
grid: {
|
|
borderColor: 'var(--mui-palette-divider)',
|
|
yaxis: { lines: { show: false } },
|
|
padding: { top: -40, left: -10, right: 0, bottom: -15 }
|
|
},
|
|
xaxis: {
|
|
categories: chartCategories,
|
|
labels: { show: false },
|
|
axisTicks: { show: false },
|
|
axisBorder: { show: false }
|
|
},
|
|
yaxis: { labels: { show: false } }
|
|
}
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader
|
|
title={t('cards.economicOverview')}
|
|
subheader={t('subheaders.costsAndRoi')}
|
|
action={<OptionMenu options={[t('optionMenu.exportPdf'), t('optionMenu.exportExcel'), t('optionMenu.details')]} />}
|
|
/>
|
|
<CardContent className='flex flex-col gap-4'>
|
|
{economicData.length > 0 && (
|
|
<Grid container spacing={4}>
|
|
{economicData.map((item, index) => (
|
|
<Grid size={{ xs: 12, sm: 6 }} key={index}>
|
|
<CardStatsVertical
|
|
title={item.title}
|
|
subtitle={item.subtitle}
|
|
stats={item.value}
|
|
avatarIcon={item.avatarIcon}
|
|
avatarColor={item.avatarColor}
|
|
avatarSkin='light'
|
|
avatarSize={40}
|
|
chipText=''
|
|
chipColor='primary'
|
|
chipVariant='tonal'
|
|
/>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
)}
|
|
{chartSeries.length > 0 && (
|
|
<AppReactApexCharts type='bar' height={180} width='100%' series={chartSeries} options={options} />
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export default EconomicOverview
|