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,128 @@
+'use client'
+
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+import { useTheme } from '@mui/material/styles'
+
+// Third Party Imports
+import classnames from 'classnames'
+import type { ApexOptions } from 'apexcharts'
+
+// Types Imports
+import type { ThemeColor } from '@core/types'
+
+// Components Imports
+import OptionMenu from '@core/components/option-menu'
+import CustomAvatar from '@core/components/mui/Avatar'
+
+// Styled Component Imports
+const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
+
+type AlertStatType = {
+  title: string
+  subtitle: 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' }
+]
+
+const FarmAlertsTracker = () => {
+  const theme = useTheme()
+  const disabledText = 'var(--mui-palette-text-disabled)'
+
+  const options: ApexOptions = {
+    stroke: { dashArray: 10 },
+    labels: ['Active Alerts'],
+    colors: ['var(--mui-palette-warning-main)'],
+    states: {
+      hover: { filter: { type: 'none' } },
+      active: { filter: { type: 'none' } }
+    },
+    fill: {
+      type: 'gradient',
+      gradient: {
+        shade: 'dark',
+        opacityTo: 0.5,
+        opacityFrom: 1,
+        shadeIntensity: 0.5,
+        stops: [30, 70, 100],
+        inverseColors: false,
+        gradientToColors: ['var(--mui-palette-warning-main)']
+      }
+    },
+    plotOptions: {
+      radialBar: {
+        endAngle: 130,
+        startAngle: -140,
+        hollow: { size: '60%' },
+        track: { background: 'transparent' },
+        dataLabels: {
+          name: {
+            offsetY: -24,
+            color: disabledText,
+            fontFamily: theme.typography.fontFamily,
+            fontSize: theme.typography.body2.fontSize as string
+          },
+          value: {
+            offsetY: 8,
+            fontWeight: 500,
+            formatter: () => '3',
+            color: 'var(--mui-palette-text-primary)',
+            fontFamily: theme.typography.fontFamily,
+            fontSize: theme.typography.h2.fontSize as string
+          }
+        }
+      }
+    },
+    grid: {
+      padding: { top: -18, left: 0, right: 0, bottom: 14 }
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader
+        title='Active Alerts'
+        subheader='Requires Attention'
+        action={<OptionMenu options={['View All', 'Dismiss', 'Settings']} />}
+      />
+      <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>Total Alerts</Typography>
+          </div>
+          <div className='flex flex-col gap-4 is-full'>
+            {data.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]')} />
+                </CustomAvatar>
+                <div className='flex flex-col'>
+                  <Typography className='font-medium' color='text.primary'>
+                    {item.title}
+                  </Typography>
+                  <Typography variant='body2'>{item.subtitle}</Typography>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+        <AppReactApexCharts type='radialBar' height={350} width='100%' series={[30]} options={options} />
+      </CardContent>
+    </Card>
+  )
+}
+
+export default FarmAlertsTracker