Add farm dashboard components including Anomaly Detection, Economic Overview, and Alerts Tracker. Implemented context for navbar slot management and integrated new API service for farm dashboard configuration. Updated navigation menus to include farm dashboard links.

2026-02-19 15:48:32 +03:30
parent 3871ec89f7
commit ec679c3287
27 changed files with 2183 additions and 0 deletions
@@ -0,0 +1,99 @@
+'use client'
+
+// MUI Imports
+import Drawer from '@mui/material/Drawer'
+import Typography from '@mui/material/Typography'
+import Checkbox from '@mui/material/Checkbox'
+import FormControlLabel from '@mui/material/FormControlLabel'
+import List from '@mui/material/List'
+import ListItem from '@mui/material/ListItem'
+import ListItemText from '@mui/material/ListItemText'
+import Divider from '@mui/material/Divider'
+import Box from '@mui/material/Box'
+
+// Component Imports
+import PerfectScrollbar from 'react-perfect-scrollbar'
+
+// Config
+import type { RowId, CardId } from '@views/dashboards/farm/farmDashboardConfig'
+import { ROW_IDS } from '@views/dashboards/farm/farmDashboardConfig'
+
+type RowCardsType = Record<RowId, CardId[]>
+type RowLabelsType = Record<RowId, string>
+type CardLabelsType = Record<CardId, string>
+
+type FarmDashboardSettingsDrawerProps = {
+  open: boolean
+  onClose: () => void
+  disabledCardIds: string[]
+  onToggleCard: (cardId: CardId, disabled: boolean) => void
+  cardLabels: CardLabelsType
+  rowLabels: RowLabelsType
+  rowCards: RowCardsType
+}
+
+const FarmDashboardSettingsDrawer = (props: FarmDashboardSettingsDrawerProps) => {
+  const { open, onClose, disabledCardIds, onToggleCard, cardLabels, rowLabels, rowCards } = props
+  const disabledSet = new Set(disabledCardIds)
+
+  return (
+    <Drawer
+      open={open}
+      onClose={onClose}
+      anchor='end'
+      variant='temporary'
+      ModalProps={{
+        disablePortal: true,
+        disableAutoFocus: true,
+        disableScrollLock: true,
+        keepMounted: true
+      }}
+      PaperProps={{
+        className: 'is-[320px] shadow-none'
+      }}
+      sx={{ zIndex: 'drawer' }}
+    >
+      <Box className='flex flex-col is-full' sx={{ height: '100%' }}>
+        <Box className='p-6'>
+          <Typography variant='h5'>Dashboard Settings</Typography>
+          <Typography variant='body2' color='text.secondary' sx={{ mt: 0.5 }}>
+            Toggle cards to show or hide on the dashboard
+          </Typography>
+        </Box>
+        <Divider />
+        <PerfectScrollbar options={{ wheelPropagation: false }} className='flex-1'>
+          <List className='p-4'>
+            {ROW_IDS.map(rowId => (
+              <Box key={rowId}>
+                <Typography variant='subtitle2' color='text.secondary' sx={{ px: 2, py: 1 }}>
+                  {rowLabels[rowId]}
+                </Typography>
+                {rowCards[rowId].map(cardId => {
+                  const isDisabled = disabledSet.has(cardId)
+                  return (
+                    <ListItem key={cardId} disablePadding sx={{ py: 0.5 }}>
+                      <FormControlLabel
+                        control={
+                          <Checkbox
+                            checked={!isDisabled}
+                            onChange={e => onToggleCard(cardId, !e.target.checked)}
+                            size='small'
+                          />
+                        }
+                        label={<ListItemText primary={cardLabels[cardId]} primaryTypographyProps={{ variant: 'body2' }} />}
+                        sx={{ m: 0, width: '100%' }}
+                      />
+                    </ListItem>
+                  )
+                })}
+                <Divider component='li' sx={{ my: 2 }} />
+              </Box>
+            ))}
+          </List>
+        </PerfectScrollbar>
+      </Box>
+    </Drawer>
+  )
+}
+
+export default FarmDashboardSettingsDrawer