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,85 @@
+'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 { useTheme } from '@mui/material/styles'
+
+// Third Party Imports
+import type { ApexOptions } from 'apexcharts'
+
+// Component Imports
+import OptionMenu from '@core/components/option-menu'
+
+// Styled Component Imports
+const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
+
+// Vars - Today vs ideal ranges (normalized 0-100)
+const series = [
+  { name: 'Today', data: [75, 65, 80, 70, 85, 60] },
+  { name: 'Ideal', data: [80, 70, 75, 75, 90, 50] }
+]
+
+const labels = ['Temp', 'Humidity', 'pH', 'EC', 'Light', 'Wind']
+
+const SensorRadarChart = () => {
+  const theme = useTheme()
+  const textDisabled = 'var(--mui-palette-text-disabled)'
+  const divider = 'var(--mui-palette-divider)'
+
+  const options: ApexOptions = {
+    chart: {
+      parentHeightOffset: 0,
+      toolbar: { show: false }
+    },
+    colors: ['var(--mui-palette-primary-main)', 'var(--mui-palette-success-main)'],
+    plotOptions: {
+      radar: {
+        polygons: {
+          connectorColors: divider,
+          strokeColors: divider
+        }
+      }
+    },
+    stroke: { width: 0 },
+    fill: { opacity: [1, 0.5] },
+    labels,
+    markers: { size: 0 },
+    legend: {
+      fontSize: '13px',
+      labels: { colors: 'var(--mui-palette-text-secondary)' },
+      markers: { offsetY: -1, offsetX: theme.direction === 'rtl' ? 7 : -4 },
+      itemMargin: { horizontal: 9 }
+    },
+    grid: { show: false },
+    xaxis: {
+      labels: {
+        show: true,
+        style: {
+          fontSize: '13px',
+          colors: Array(6).fill(textDisabled)
+        }
+      }
+    },
+    yaxis: { show: false }
+  }
+
+  return (
+    <Card>
+      <CardHeader
+        title='Sensor Comparison'
+        subheader='Today vs Ideal Ranges'
+        action={<OptionMenu options={['Today', 'This Week', 'This Month']} />}
+      />
+      <CardContent>
+        <AppReactApexCharts type='radar' height={373} width='100%' series={series} options={options} />
+      </CardContent>
+    </Card>
+  )
+}
+
+export default SensorRadarChart