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,114 @@
+'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 Grid from '@mui/material/Grid2'
+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 - Cost breakdown (stacked bar style)
+const series = [
+  { name: 'Water Cost', data: [120, 115, 110, 125, 118, 122] },
+  { name: 'Fertilizer', data: [80, 85, 90, 75, 82, 78] }
+]
+
+type EconomicItem = {
+  title: string
+  value: string
+  subtitle: string
+  avatarIcon: string
+  avatarColor: 'primary' | 'success' | 'info' | 'warning'
+}
+
+const economicData: EconomicItem[] = [
+  { title: 'Water Cost', value: '€720', subtitle: 'This month', avatarIcon: 'tabler-droplet', avatarColor: 'primary' },
+  { title: 'AI Water Savings', value: '€156', subtitle: '18% saved', avatarIcon: 'tabler-bulb', avatarColor: 'success' },
+  { title: 'Platform ROI', value: '127%', subtitle: 'vs last year', avatarIcon: 'tabler-chart-line', avatarColor: 'info' },
+  { title: 'Income Forecast', value: '€42k', subtitle: 'This season', avatarIcon: 'tabler-currency-euro', avatarColor: 'success' }
+]
+
+const EconomicOverview = () => {
+  const theme = useTheme()
+
+  const options: ApexOptions = {
+    chart: {
+      stacked: true,
+      parentHeightOffset: 0,
+      toolbar: { show: false }
+    },
+    legend: { position: 'top', labels: { colors: 'var(--mui-palette-text-secondary)' } },
+    dataLabels: { enabled: false },
+    stroke: { width: 5, colors: ['var(--mui-palette-background-paper)'] },
+    colors: ['var(--mui-palette-primary-main)', 'var(--mui-palette-info-main)'],
+    plotOptions: {
+      bar: {
+        borderRadius: 7,
+        columnWidth: '50%',
+        borderRadiusApplication: 'around'
+      }
+    },
+    grid: {
+      borderColor: 'var(--mui-palette-divider)',
+      yaxis: { lines: { show: false } },
+      padding: { top: -40, left: -10, right: 0, bottom: -15 }
+    },
+    xaxis: {
+      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+      labels: { show: false },
+      axisTicks: { show: false },
+      axisBorder: { show: false }
+    },
+    yaxis: { labels: { show: false } }
+  }
+
+  return (
+    <Card>
+      <CardHeader
+        title='Economic Overview'
+        subheader='Costs & ROI'
+        action={<OptionMenu options={['Export PDF', 'Export Excel', 'Details']} />}
+      />
+      <CardContent className='flex flex-col gap-4'>
+        <Grid container spacing={4}>
+          {economicData.map((item, index) => (
+            <Grid size={{ xs: 12, sm: 6 }} key={index}>
+              <div className='flex items-center gap-4'>
+                <CustomAvatar skin='light' variant='rounded' color={item.avatarColor} size={40}>
+                  <i className={classnames(item.avatarIcon, 'text-[22px]')} />
+                </CustomAvatar>
+                <div>
+                  <Typography variant='h6'>{item.value}</Typography>
+                  <Typography variant='body2' color='text.secondary'>
+                    {item.title}
+                  </Typography>
+                  <Typography variant='caption' color='text.disabled'>
+                    {item.subtitle}
+                  </Typography>
+                </div>
+              </div>
+            </Grid>
+          ))}
+        </Grid>
+        <AppReactApexCharts type='bar' height={180} width='100%' series={series} options={options} />
+      </CardContent>
+    </Card>
+  )
+}
+
+export default EconomicOverview