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/FarmDashboardWrapper.tsx

@@ -91,13 +91,18 @@ function mergeRowOrderAfterDrag(
 const FarmDashboardWrapper = () => {
   const { setSlotContent } = useContext(NavbarSlotContext)
   const [config, setConfig] = useState<FarmDashboardConfig>(DEFAULT_FARM_DASHBOARD_CONFIG)
+  const [cardsData, setCardsData] = useState<Partial<Record<CardId, Record<string, unknown>>>>({})
   const [loading, setLoading] = useState(true)
   const [saving, setSaving] = useState(false)
 
   const disabledSet = new Set(config.disabledCardIds)
 
   const hasVisibleCard = useCallback(
-    (rowId: RowId) => ROW_CARDS[rowId].some(cardId => !disabledSet.has(cardId)),
+    (rowId: string) => {
+      const cards = ROW_CARDS[rowId as RowId]
+      if (!Array.isArray(cards)) return false
+      return cards.some(cardId => !disabledSet.has(cardId))
+    },
     [config.disabledCardIds]
   )
 
@@ -109,15 +114,18 @@ const FarmDashboardWrapper = () => {
   })
 
   useEffect(() => {
-    farmDashboardService
-      .getConfig()
-      .then(data => {
+    Promise.all([farmDashboardService.getConfig(), farmDashboardService.getAllCards()])
+      .then(([configData, cards]) => {
+        const validRowOrder = (configData.rowOrder ?? []).filter(
+          (id): id is RowId => id in ROW_CARDS
+        )
         const merged: FarmDashboardConfig = {
-          disabledCardIds: data.disabledCardIds ?? [],
-          rowOrder: data.rowOrder?.length ? data.rowOrder : [...ROW_IDS],
-          enableDragReorder: data.enableDragReorder ?? true
+          disabledCardIds: configData.disabledCardIds ?? [],
+          rowOrder: validRowOrder.length ? validRowOrder : [...ROW_IDS],
+          enableDragReorder: configData.enableDragReorder ?? true
         }
         setConfig(merged)
+        setCardsData(cards ?? {})
       })
       .catch(() => setConfig(DEFAULT_FARM_DASHBOARD_CONFIG))
       .finally(() => setLoading(false))
@@ -229,7 +237,9 @@ const FarmDashboardWrapper = () => {
                 </IconButton>
               )}
               <Grid container spacing={6} sx={{ flex: 1, minWidth: 0 }}>
-                {isOverviewRow && cards.includes('farmOverviewKpis') && <FarmOverviewKPIs />}
+                {isOverviewRow && cards.includes('farmOverviewKpis') && (
+                  <FarmOverviewKPIs data={cardsData?.farmOverviewKpis} />
+                )}
                 {!isOverviewRow &&
                   cards.map((cardId: CardId) => {
                     const size = CARD_GRID_SIZE[cardId]
@@ -237,7 +247,7 @@ const FarmDashboardWrapper = () => {
                     if (!Component) return null
                     return (
                       <Grid key={cardId} size={size} sx={cardRowSx}>
-                        <Component />
+                        <Component data={cardsData?.[cardId]} />
                       </Grid>
                     )
                   })}