sajad-dev/Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance farm dashboard components by refactoring to accept data props, improving API integration for dynamic data rendering. Updated FarmDashboardWrapper to fetch and manage card data, ensuring components like EconomicOverview, AnomalyDetectionCard, and others utilize the new data structure. Removed hardcoded values and added error handling for better resilience.

Browse Source
This commit is contained in:
Mohammad Sajad Pourajam
2026-02-19 16:58:30 +03:30
parent 9f1de2166c
commit 51175ffac2
18 changed files with 333 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/dashboards/farm/EconomicOverview.tsx
+32 -34
View File
@@ -22,12 +22,6 @@ import CustomAvatar from '@core/components/mui/Avatar'
// Styled Component Imports
const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
// Vars - Cost breakdown (stacked bar style)
const series = [
{ name: 'Water Cost', data: [120, 115, 110, 125, 118, 122] },
{ name: 'Fertilizer', data: [80, 85, 90, 75, 82, 78] }
]
type EconomicItem = {
title: string
value: string
@@ -36,14 +30,14 @@ type EconomicItem = {
avatarColor: 'primary' | 'success' | 'info' | 'warning'
}
const economicData: EconomicItem[] = [
{ title: 'Water Cost', value: '€720', subtitle: 'This month', avatarIcon: 'tabler-droplet', avatarColor: 'primary' },
{ title: 'AI Water Savings', value: '€156', subtitle: '18% saved', avatarIcon: 'tabler-bulb', avatarColor: 'success' },
{ title: 'Platform ROI', value: '127%', subtitle: 'vs last year', avatarIcon: 'tabler-chart-line', avatarColor: 'info' },
{ title: 'Income Forecast', value: '€42k', subtitle: 'This season', avatarIcon: 'tabler-currency-euro', avatarColor: 'success' }
]
interface EconomicOverviewProps {
data?: Record<string, unknown>
}
const EconomicOverview = () => {
const EconomicOverview = ({ data }: EconomicOverviewProps) => {
const economicData = (data?.economicData as EconomicItem[] | undefined) ?? []
const chartSeries = (data?.chartSeries as Array<{ name: string; data: number[] }>) ?? []
const chartCategories = (data?.chartCategories as string[]) ?? ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
const theme = useTheme()
const options: ApexOptions = {
@@ -69,7 +63,7 @@ const EconomicOverview = () => {
padding: { top: -40, left: -10, right: 0, bottom: -15 }
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
categories: chartCategories,
labels: { show: false },
axisTicks: { show: false },
axisBorder: { show: false }
@@ -85,27 +79,31 @@ const EconomicOverview = () => {
action={<OptionMenu options={['Export PDF', 'Export Excel', 'Details']} />}
/>
<CardContent className='flex flex-col gap-4'>
<Grid container spacing={4}>
{economicData.map((item, index) => (
<Grid size={{ xs: 12, sm: 6 }} key={index}>
<div className='flex items-center gap-4'>
<CustomAvatar skin='light' variant='rounded' color={item.avatarColor} size={40}>
<i className={classnames(item.avatarIcon, 'text-[22px]')} />
</CustomAvatar>
<div>
<Typography variant='h6'>{item.value}</Typography>
<Typography variant='body2' color='text.secondary'>
{item.title}
</Typography>
<Typography variant='caption' color='text.disabled'>
{item.subtitle}
</Typography>
{economicData.length > 0 && (
<Grid container spacing={4}>
{economicData.map((item, index) => (
<Grid size={{ xs: 12, sm: 6 }} key={index}>
<div className='flex items-center gap-4'>
<CustomAvatar skin='light' variant='rounded' color={item.avatarColor} size={40}>
<i className={classnames(item.avatarIcon, 'text-[22px]')} />
</CustomAvatar>
<div>
<Typography variant='h6'>{item.value}</Typography>
<Typography variant='body2' color='text.secondary'>
{item.title}
</Typography>
<Typography variant='caption' color='text.disabled'>
{item.subtitle}
</Typography>
</div>
</div>
</div>
</Grid>
))}
</Grid>
<AppReactApexCharts type='bar' height={180} width='100%' series={series} options={options} />
</Grid>
))}
</Grid>
)}
{chartSeries.length > 0 && (
<AppReactApexCharts type='bar' height={180} width='100%' series={chartSeries} options={options} />
)}
</CardContent>
</Card>
)