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,104 @@
+'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'
+
+// Component 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'))
+
+// Vars - Yield comparison: this year vs last year (tons per month)
+const series = [
+  { name: 'This Year', data: [35, 38, 40, 42, 45, 48, 50, 48, 46, 44, 42, 42] },
+  { name: 'Last Year', data: [32, 34, 36, 38, 40, 42, 44, 42, 40, 38, 36, 38] }
+]
+
+const YieldPredictionChart = () => {
+  const theme = useTheme()
+
+  const options: ApexOptions = {
+    chart: {
+      stacked: false,
+      parentHeightOffset: 0,
+      toolbar: { show: false }
+    },
+    legend: {
+      position: 'top',
+      labels: { colors: 'var(--mui-palette-text-secondary)' }
+    },
+    stroke: { width: 2, curve: 'smooth' },
+    colors: ['var(--mui-palette-primary-main)', 'var(--mui-palette-success-main)'],
+    dataLabels: { enabled: false },
+    grid: {
+      borderColor: 'var(--mui-palette-divider)',
+      strokeDashArray: 4
+    },
+    xaxis: {
+      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+      labels: { style: { colors: 'var(--mui-palette-text-disabled)' } }
+    },
+    yaxis: {
+      labels: {
+        style: { colors: 'var(--mui-palette-text-disabled)' },
+        formatter: (val: number) => `${val}t`
+      }
+    },
+    tooltip: {
+      y: { formatter: (val: number) => `${val} tons` }
+    }
+  }
+
+  const summaryData = [
+    { title: 'Predicted Yield', subtitle: 'This Season', amount: '42 ton', avatarColor: 'primary', avatarIcon: 'tabler-chart-bar' },
+    { title: 'Harvest Date', subtitle: 'Est. Oct 15', amount: '+8%', avatarColor: 'success', avatarIcon: 'tabler-calendar' }
+  ]
+
+  return (
+    <Card>
+      <CardHeader
+        title='Yield Prediction'
+        subheader='This Year vs Last Year'
+        action={<OptionMenu options={['Export', 'Compare', 'Details']} />}
+      />
+      <CardContent className='flex flex-col gap-4'>
+        <AppReactApexCharts type='line' height={280} width='100%' series={series} options={options} />
+        <div className='flex flex-col gap-4'>
+          {summaryData.map((item, index) => (
+            <div key={index} className='flex items-center gap-4'>
+              <CustomAvatar skin='light' variant='rounded' color={item.avatarColor} size={38}>
+                <i className={classnames(item.avatarIcon, 'text-[22px]')} />
+              </CustomAvatar>
+              <div className='flex justify-between items-center is-full'>
+                <div className='flex flex-col'>
+                  <Typography className='font-medium' color='text.primary'>
+                    {item.title}
+                  </Typography>
+                  <Typography variant='body2'>{item.subtitle}</Typography>
+                </div>
+                <Typography className='font-medium' color='success.main'>
+                  {item.amount}
+                </Typography>
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default YieldPredictionChart