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.

2026-02-19 16:58:30 +03:30
parent 9f1de2166c
commit 51175ffac2
18 changed files with 333 additions and 313 deletions
@@ -6,93 +6,43 @@ import Grid from '@mui/material/Grid2'
 // Component Imports
 import CardStatsVertical from '@components/card-statistics/Vertical'

-const FarmOverviewKPIs = () => {
+type KpiItem = {
+  id: string
+  title: string
+  subtitle: string
+  stats: string
+  avatarColor?: string
+  avatarIcon?: string
+  chipText?: string
+  chipColor?: string
+}
+
+interface FarmOverviewKPIsProps {
+  data?: Record<string, unknown>
+}
+
+const FarmOverviewKPIs = ({ data }: FarmOverviewKPIsProps) => {
+  const kpis = (data?.kpis as KpiItem[] | undefined) ?? []
+  if (kpis.length === 0) return null
+
  return (
    <>
-      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 2 }}>
-        <CardStatsVertical
-          title='Farm Health Score'
-          subtitle='AI Analysis'
-          stats='87%'
-          avatarColor='success'
-          avatarIcon='tabler-heartbeat'
-          avatarSkin='light'
-          avatarSize={44}
-          chipText='Good'
-          chipColor='success'
-          chipVariant='tonal'
-        />
-      </Grid>
-      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 2 }}>
-        <CardStatsVertical
-          title='Water Stress Index'
-          subtitle='Current'
-          stats='12%'
-          avatarColor='info'
-          avatarIcon='tabler-droplet'
-          avatarSkin='light'
-          avatarSize={44}
-          chipText='Low'
-          chipColor='success'
-          chipVariant='tonal'
-        />
-      </Grid>
-      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 2 }}>
-        <CardStatsVertical
-          title='Disease Risk'
-          subtitle='Last 7 Days'
-          stats='Low'
-          avatarColor='success'
-          avatarIcon='tabler-bug'
-          avatarSkin='light'
-          avatarSize={44}
-          chipText='5%'
-          chipColor='success'
-          chipVariant='tonal'
-        />
-      </Grid>
-      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 2 }}>
-        <CardStatsVertical
-          title='Avg Soil Moisture'
-          subtitle='Field-wide'
-          stats='65%'
-          avatarColor='primary'
-          avatarIcon='tabler-plant-2'
-          avatarSkin='light'
-          avatarSize={44}
-          chipText='Optimal'
-          chipColor='success'
-          chipVariant='tonal'
-        />
-      </Grid>
-      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 2 }}>
-        <CardStatsVertical
-          title='Yield Prediction'
-          subtitle='This Season'
-          stats='42 ton'
-          avatarColor='secondary'
-          avatarIcon='tabler-chart-bar'
-          avatarSkin='light'
-          avatarSize={44}
-          chipText='+8%'
-          chipColor='success'
-          chipVariant='tonal'
-        />
-      </Grid>
-      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 2 }}>
-        <CardStatsVertical
-          title='Pest Risk'
-          subtitle='AI Forecast'
-          stats='15%'
-          avatarColor='warning'
-          avatarIcon='tabler-bug-off'
-          avatarSkin='light'
-          avatarSize={44}
-          chipText='Monitor'
-          chipColor='warning'
-          chipVariant='tonal'
-        />
-      </Grid>
+      {kpis.map((kpi) => (
+        <Grid key={kpi.id} size={{ xs: 12, sm: 6, md: 4, lg: 2 }}>
+          <CardStatsVertical
+            title={kpi.title}
+            subtitle={kpi.subtitle}
+            stats={kpi.stats}
+            avatarColor={(kpi.avatarColor as 'success' | 'info' | 'primary' | 'secondary' | 'warning') ?? 'primary'}
+            avatarIcon={kpi.avatarIcon ?? 'tabler-chart-bar'}
+            avatarSkin='light'
+            avatarSize={44}
+            chipText={kpi.chipText}
+            chipColor={(kpi.chipColor as 'success' | 'warning') ?? 'success'}
+            chipVariant='tonal'
+          />
+        </Grid>
+      ))}
    </>
  )
 }