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.

src/views/dashboards/farm/FarmAlertsTracker.tsx

@@ -26,18 +26,19 @@ const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexChart
 
 type AlertStatType = {
   title: string
-  subtitle: string
+  count: string
   avatarIcon: string
   avatarColor?: ThemeColor
 }
 
-const data: AlertStatType[] = [
-  { title: 'Water Shortage', subtitle: '2', avatarColor: 'error', avatarIcon: 'tabler-droplet-half-2' },
-  { title: 'Fungal Risk', subtitle: '1', avatarColor: 'warning', avatarIcon: 'tabler-mushroom' },
-  { title: 'Frost Alert', subtitle: '0', avatarColor: 'info', avatarIcon: 'tabler-snowflake' }
-]
+interface FarmAlertsTrackerProps {
+  data?: Record<string, unknown>
+}
 
-const FarmAlertsTracker = () => {
+const FarmAlertsTracker = ({ data }: FarmAlertsTrackerProps) => {
+  const alertStats = (data?.alertStats as AlertStatType[] | undefined) ?? []
+  const totalAlerts = (data?.totalAlerts as number | undefined) ?? 0
+  const radialBarValue = (data?.radialBarValue as number | undefined) ?? 30
   const theme = useTheme()
   const disabledText = 'var(--mui-palette-text-disabled)'
 
@@ -77,7 +78,7 @@ const FarmAlertsTracker = () => {
           value: {
             offsetY: 8,
             fontWeight: 500,
-            formatter: () => '3',
+            formatter: () => String(totalAlerts),
             color: 'var(--mui-palette-text-primary)',
             fontFamily: theme.typography.fontFamily,
             fontSize: theme.typography.h2.fontSize as string
@@ -100,11 +101,11 @@ const FarmAlertsTracker = () => {
       <CardContent className='flex flex-col sm:flex-row items-center justify-between gap-7'>
         <div className='flex flex-col gap-6 is-full sm:is-[unset]'>
           <div className='flex flex-col'>
-            <Typography variant='h2'>3</Typography>
+            <Typography variant='h2'>{totalAlerts}</Typography>
             <Typography>Total Alerts</Typography>
           </div>
           <div className='flex flex-col gap-4 is-full'>
-            {data.map((item, index) => (
+            {alertStats.map((item, index) => (
               <div key={index} className='flex items-center gap-4'>
                 <CustomAvatar skin='light' variant='rounded' color={item.avatarColor} size={34}>
                   <i className={classnames(item.avatarIcon, 'text-[22px]')} />
@@ -113,13 +114,19 @@ const FarmAlertsTracker = () => {
                   <Typography className='font-medium' color='text.primary'>
                     {item.title}
                   </Typography>
-                  <Typography variant='body2'>{item.subtitle}</Typography>
+                  <Typography variant='body2'>{item.count}</Typography>
                 </div>
               </div>
             ))}
           </div>
         </div>
-        <AppReactApexCharts type='radialBar' height={350} width='100%' series={[30]} options={options} />
+        <AppReactApexCharts
+          type='radialBar'
+          height={350}
+          width='100%'
+          series={[radialBarValue]}
+          options={options}
+        />
       </CardContent>
     </Card>
   )