diff --git a/src/contexts/navbarSlotContext.tsx b/src/contexts/navbarSlotContext.tsx
new file mode 100644
index 0000000..7159de5
--- /dev/null
+++ b/src/contexts/navbarSlotContext.tsx
@@ -0,0 +1,35 @@
+'use client'
+
+// React Imports
+import { createContext, useCallback, useMemo, useState } from 'react'
+
+// Type Imports
+import type { ChildrenType } from '@core/types'
+import type { ReactNode } from 'react'
+
+export type NavbarSlotContextProps = {
+ slotContent: ReactNode
+ setSlotContent: (content: ReactNode) => void
+}
+
+const NavbarSlotContext = createContext({} as NavbarSlotContextProps)
+
+export const NavbarSlotProvider = ({ children }: ChildrenType) => {
+ const [slotContent, setSlotContentState] = useState
(null)
+
+ const setSlotContent = useCallback((content: ReactNode) => {
+ setSlotContentState(content)
+ }, [])
+
+ const value = useMemo(
+ () => ({
+ slotContent,
+ setSlotContent
+ }),
+ [slotContent, setSlotContent]
+ )
+
+ return {children}
+}
+
+export default NavbarSlotContext
diff --git a/src/data/navigation/horizontalMenuData.tsx b/src/data/navigation/horizontalMenuData.tsx
index 9c81761..c50a8ab 100644
--- a/src/data/navigation/horizontalMenuData.tsx
+++ b/src/data/navigation/horizontalMenuData.tsx
@@ -28,6 +28,11 @@ const horizontalMenuData = (): HorizontalMenuDataType[] => [
label: 'logistics',
icon: 'tabler-truck',
href: '/dashboards/logistics'
+ },
+ {
+ label: 'farm',
+ icon: 'tabler-plant-2',
+ href: '/dashboards/farm'
}
]
},
diff --git a/src/data/navigation/verticalMenuData.tsx b/src/data/navigation/verticalMenuData.tsx
index 22f6bb3..64981ff 100644
--- a/src/data/navigation/verticalMenuData.tsx
+++ b/src/data/navigation/verticalMenuData.tsx
@@ -32,6 +32,11 @@ const verticalMenuData = (): VerticalMenuDataType[] => [
label: 'logistics',
icon: 'tabler-circle',
href: '/dashboards/logistics'
+ },
+ {
+ label: 'farm',
+ icon: 'tabler-plant-2',
+ href: '/dashboards/farm'
}
]
},
diff --git a/src/libs/api/index.ts b/src/libs/api/index.ts
index c96bba1..47e1364 100644
--- a/src/libs/api/index.ts
+++ b/src/libs/api/index.ts
@@ -15,4 +15,5 @@ export * from './services/todoService'
export * from './services/userManagementService'
export * from './services/rolesPermissionsService'
export * from './services/sensorHubService'
+export * from './services/farmDashboardService'
diff --git a/src/libs/api/services/farmDashboardService.ts b/src/libs/api/services/farmDashboardService.ts
new file mode 100644
index 0000000..f63b65d
--- /dev/null
+++ b/src/libs/api/services/farmDashboardService.ts
@@ -0,0 +1,118 @@
+/**
+ * Farm Dashboard Config Service
+ * Handles API calls for dashboard customization (disabled cards, row order).
+ * Authenticated user required.
+ */
+
+import { apiClient } from '../client'
+import type { FarmDashboardConfig } from '@/views/dashboards/farm/farmDashboardConfig'
+
+export interface ApiResponse {
+ code: number
+ msg: string
+ data: T
+}
+
+export interface FarmDashboardConfigResponse {
+ disabled_card_ids: string[]
+ row_order: string[]
+ enable_drag_reorder?: boolean
+}
+
+const STORAGE_KEY = 'farm_dashboard_config'
+
+/**
+ * Transform API response to frontend config format
+ */
+function fromApiResponse(data: FarmDashboardConfigResponse): FarmDashboardConfig {
+ return {
+ disabledCardIds: data.disabled_card_ids ?? [],
+ rowOrder: data.row_order ?? [],
+ enableDragReorder: data.enable_drag_reorder ?? true
+ }
+}
+
+/**
+ * Transform frontend config to API request format
+ */
+function toApiRequest(config: Partial): Partial {
+ const req: Partial = {}
+ if (config.disabledCardIds !== undefined) req.disabled_card_ids = config.disabledCardIds
+ if (config.rowOrder !== undefined) req.row_order = config.rowOrder
+ if (config.enableDragReorder !== undefined) req.enable_drag_reorder = config.enableDragReorder
+ return req
+}
+
+/**
+ * localStorage fallback when backend is not ready
+ */
+function getLocalConfig(): FarmDashboardConfig | null {
+ if (typeof window === 'undefined') return null
+ try {
+ const stored = localStorage.getItem(STORAGE_KEY)
+ return stored ? (JSON.parse(stored) as FarmDashboardConfig) : null
+ } catch {
+ return null
+ }
+}
+
+function setLocalConfig(config: FarmDashboardConfig): void {
+ if (typeof window === 'undefined') return
+ try {
+ localStorage.setItem(STORAGE_KEY, JSON.stringify(config))
+ } catch (e) {
+ console.error('Failed to save farm dashboard config to localStorage', e)
+ }
+}
+
+export const farmDashboardService = {
+ /**
+ * Get farm dashboard config for current user
+ */
+ async getConfig(): Promise {
+ try {
+ const response = await apiClient.get<
+ ApiResponse | FarmDashboardConfigResponse
+ >('/api/farm-dashboard-config')
+ const raw = response && 'data' in response ? response.data : response
+ if (raw && typeof raw === 'object' && ('disabled_card_ids' in raw || 'row_order' in raw)) {
+ return fromApiResponse(raw as FarmDashboardConfigResponse)
+ }
+ throw new Error('Invalid response')
+ } catch {
+ const local = getLocalConfig()
+ if (local) return local
+ return { disabledCardIds: [], rowOrder: [], enableDragReorder: true }
+ }
+ },
+
+ /**
+ * Update farm dashboard config
+ */
+ async updateConfig(data: Partial): Promise {
+ try {
+ const response = await apiClient.patch<
+ ApiResponse | FarmDashboardConfigResponse
+ >('/api/farm-dashboard-config', toApiRequest(data))
+ const raw = response && 'data' in response ? response.data : response
+ if (raw && typeof raw === 'object' && ('disabled_card_ids' in raw || 'row_order' in raw)) {
+ const config = fromApiResponse(raw as FarmDashboardConfigResponse)
+ setLocalConfig(config)
+ return config
+ }
+ throw new Error('Update failed')
+ } catch (err) {
+ const local = getLocalConfig()
+ if (local) {
+ const merged: FarmDashboardConfig = {
+ disabledCardIds: data.disabledCardIds ?? local.disabledCardIds,
+ rowOrder: data.rowOrder ?? local.rowOrder,
+ enableDragReorder: data.enableDragReorder ?? local.enableDragReorder ?? true
+ }
+ setLocalConfig(merged)
+ return merged
+ }
+ throw err
+ }
+ }
+}
diff --git a/src/views/dashboards/farm/AnomalyDetectionCard.tsx b/src/views/dashboards/farm/AnomalyDetectionCard.tsx
new file mode 100644
index 0000000..51bdae3
--- /dev/null
+++ b/src/views/dashboards/farm/AnomalyDetectionCard.tsx
@@ -0,0 +1,66 @@
+'use client'
+
+// 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 Chip from '@mui/material/Chip'
+
+// Component Imports
+import OptionMenu from '@core/components/option-menu'
+
+type AnomalyItem = {
+ sensor: string
+ value: string
+ expected: string
+ deviation: string
+ severity: 'warning' | 'error'
+}
+
+const anomalies: AnomalyItem[] = [
+ { sensor: 'Soil Moisture Z3', value: '38%', expected: '45-65%', deviation: '-12%', severity: 'warning' },
+ { sensor: 'pH Sector 2', value: '5.2', expected: '6.0-7.0', deviation: '-0.8', severity: 'error' }
+]
+
+const AnomalyDetectionCard = () => {
+ return (
+
+ }
+ title='Anomaly Detection'
+ subheader='Out of range values'
+ action={}
+ sx={{ '& .MuiCardHeader-avatar': { mr: 3 } }}
+ />
+
+ {anomalies.length === 0 ? (
+
+ No anomalies detected. All sensors within optimal range.
+
+ ) : (
+ anomalies.map((item, index) => (
+
+
+
+ {item.sensor}
+
+
+
+
+ Value: {item.value} (Expected: {item.expected}) · Deviation: {item.deviation}
+
+
+
+
+
+
+ {item.value}
+
+ {item.title}
+
+
+ {item.subtitle}
+
+
+
+
+ {alert.title}
+
+ {alert.time}
+
+
+ {alert.description}
+
+
+
+ ))}
+
+
+
+ )
+}
+
+export default FarmAlertsTimeline
diff --git a/src/views/dashboards/farm/FarmAlertsTracker.tsx b/src/views/dashboards/farm/FarmAlertsTracker.tsx
new file mode 100644
index 0000000..5365ee2
--- /dev/null
+++ b/src/views/dashboards/farm/FarmAlertsTracker.tsx
@@ -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 (
+
+ }
+ />
+
+
+
+ 3
+ Total Alerts
+
+
+ {data.map((item, index) => (
+
+
+
+
+
+
+ {item.title}
+
+ {item.subtitle}
+
+
+ ))}
+
+
+ {ROW_IDS.map(rowId => (
+
+
+ {rowLabels[rowId]}
+
+ {rowCards[rowId].map(cardId => {
+ const isDisabled = disabledSet.has(cardId)
+ return (
+
+ onToggleCard(cardId, !e.target.checked)}
+ size='small'
+ />
+ }
+ label={}
+ sx={{ m: 0, width: '100%' }}
+ />
+
+ )
+ })}
+
+
+ ))}
+
+
+
+
+ )
+}
+
+export default FarmDashboardSettingsDrawer
diff --git a/src/views/dashboards/farm/FarmDashboardSettingsDropdown.tsx b/src/views/dashboards/farm/FarmDashboardSettingsDropdown.tsx
new file mode 100644
index 0000000..a46b5a9
--- /dev/null
+++ b/src/views/dashboards/farm/FarmDashboardSettingsDropdown.tsx
@@ -0,0 +1,152 @@
+'use client'
+
+// React Imports
+import { useRef, useState } from 'react'
+
+// MUI Imports
+import IconButton from '@mui/material/IconButton'
+import Popper from '@mui/material/Popper'
+import Fade from '@mui/material/Fade'
+import Paper from '@mui/material/Paper'
+import ClickAwayListener from '@mui/material/ClickAwayListener'
+import Typography from '@mui/material/Typography'
+import Checkbox from '@mui/material/Checkbox'
+import FormControlLabel from '@mui/material/FormControlLabel'
+import Switch from '@mui/material/Switch'
+import Divider from '@mui/material/Divider'
+import List from '@mui/material/List'
+import ListItem from '@mui/material/ListItem'
+import ListItemText from '@mui/material/ListItemText'
+import Box from '@mui/material/Box'
+import CircularProgress from '@mui/material/CircularProgress'
+
+// Hook Imports
+import { useSettings } from '@core/hooks/useSettings'
+
+// Config
+import type { RowId, CardId } from '@views/dashboards/farm/farmDashboardConfig'
+import { ROW_IDS } from '@views/dashboards/farm/farmDashboardConfig'
+
+type RowCardsType = Record
+type RowLabelsType = Record
+type CardLabelsType = Record
+
+type FarmDashboardSettingsDropdownProps = {
+ disabledCardIds: string[]
+ onToggleCard: (cardId: CardId, disabled: boolean) => void
+ enableDragReorder: boolean
+ onToggleDragReorder: (enabled: boolean) => void
+ cardLabels: CardLabelsType
+ rowLabels: RowLabelsType
+ rowCards: RowCardsType
+ saving?: boolean
+}
+
+const FarmDashboardSettingsDropdown = (props: FarmDashboardSettingsDropdownProps) => {
+ const { disabledCardIds, onToggleCard, enableDragReorder, onToggleDragReorder, cardLabels, rowLabels, rowCards, saving } = props
+ const { settings } = useSettings()
+ const [open, setOpen] = useState(false)
+ const anchorRef = useRef(null)
+ const disabledSet = new Set(disabledCardIds)
+
+ const handleClose = () => setOpen(false)
+ const handleToggle = () => setOpen(prev => !prev)
+
+ return (
+ <>
+
+ {saving && }
+
+
+
+
+
+ {({ TransitionProps, placement }) => (
+
+
+
+
+
+ Dashboard Settings
+
+ Toggle cards to show or hide
+
+
+
+ onToggleDragReorder(e.target.checked)}
+ size='small'
+ />
+ }
+ label={
+ Enable drag & reorder rows
+ }
+ sx={{ m: 0 }}
+ />
+
+
+
+ {ROW_IDS.map(rowId => (
+
+
+ {rowLabels[rowId]}
+
+ {rowCards[rowId].map(cardId => {
+ const isDisabled = disabledSet.has(cardId)
+ return (
+
+ onToggleCard(cardId, !e.target.checked)}
+ size='small'
+ />
+ }
+ label={
+
+ }
+ sx={{ m: 0, width: '100%' }}
+ />
+
+ )
+ })}
+
+ ))}
+
+
+
+
+
+ )}
+
+
+ )
+}
+
+export default FarmDashboardSettingsDropdown
diff --git a/src/views/dashboards/farm/FarmDashboardWrapper.tsx b/src/views/dashboards/farm/FarmDashboardWrapper.tsx
new file mode 100644
index 0000000..cfbd9ec
--- /dev/null
+++ b/src/views/dashboards/farm/FarmDashboardWrapper.tsx
@@ -0,0 +1,253 @@
+'use client'
+
+// React Imports
+import type { RefObject } from 'react'
+import { useEffect, useState, useCallback, useContext } from 'react'
+
+// Context Imports
+import NavbarSlotContext from '@/contexts/navbarSlotContext'
+
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+import IconButton from '@mui/material/IconButton'
+import Box from '@mui/material/Box'
+import CircularProgress from '@mui/material/CircularProgress'
+
+// Third-party imports
+import { useDragAndDrop } from '@formkit/drag-and-drop/react'
+import { animations } from '@formkit/drag-and-drop'
+
+// Component Imports
+import FarmOverviewKPIs from '@views/dashboards/farm/FarmOverviewKPIs'
+import FarmWeatherCard from '@views/dashboards/farm/FarmWeatherCard'
+import FarmAlertsTracker from '@views/dashboards/farm/FarmAlertsTracker'
+import SensorValuesList from '@views/dashboards/farm/SensorValuesList'
+import SensorRadarChart from '@views/dashboards/farm/SensorRadarChart'
+import SensorComparisonChart from '@views/dashboards/farm/SensorComparisonChart'
+import FarmAlertsTimeline from '@views/dashboards/farm/FarmAlertsTimeline'
+import WaterNeedPrediction from '@views/dashboards/farm/WaterNeedPrediction'
+import YieldPredictionChart from '@views/dashboards/farm/YieldPredictionChart'
+import HarvestPredictionCard from '@views/dashboards/farm/HarvestPredictionCard'
+import SoilMoistureHeatmap from '@views/dashboards/farm/SoilMoistureHeatmap'
+import AnomalyDetectionCard from '@views/dashboards/farm/AnomalyDetectionCard'
+import NDVIHealthCard from '@views/dashboards/farm/NDVIHealthCard'
+import RecommendationsList from '@views/dashboards/farm/RecommendationsList'
+import EconomicOverview from '@views/dashboards/farm/EconomicOverview'
+
+// Config & Service
+import {
+ ROW_IDS,
+ ROW_CARDS,
+ ROW_LABELS,
+ CARD_GRID_SIZE,
+ CARD_LABELS,
+ DEFAULT_FARM_DASHBOARD_CONFIG,
+ type RowId,
+ type CardId,
+ type FarmDashboardConfig
+} from '@views/dashboards/farm/farmDashboardConfig'
+import { farmDashboardService } from '@/libs/api/services/farmDashboardService'
+import FarmDashboardSettingsDropdown from '@views/dashboards/farm/FarmDashboardSettingsDropdown'
+
+const cardRowSx = {
+ display: 'flex',
+ flexDirection: 'column',
+ '& > *': { flex: 1, minHeight: 0 }
+}
+
+const CARD_COMPONENTS: Record = {
+ farmOverviewKpis: FarmOverviewKPIs,
+ farmWeatherCard: FarmWeatherCard,
+ farmAlertsTracker: FarmAlertsTracker,
+ sensorValuesList: SensorValuesList,
+ sensorRadarChart: SensorRadarChart,
+ sensorComparisonChart: SensorComparisonChart,
+ anomalyDetectionCard: AnomalyDetectionCard,
+ farmAlertsTimeline: FarmAlertsTimeline,
+ waterNeedPrediction: WaterNeedPrediction,
+ harvestPredictionCard: HarvestPredictionCard,
+ yieldPredictionChart: YieldPredictionChart,
+ soilMoistureHeatmap: SoilMoistureHeatmap,
+ ndviHealthCard: NDVIHealthCard,
+ recommendationsList: RecommendationsList,
+ economicOverview: EconomicOverview
+}
+
+function mergeRowOrderAfterDrag(
+ currentRowOrder: string[],
+ newVisibleOrder: string[],
+ visibleRows: string[]
+): string[] {
+ const result = [...currentRowOrder]
+ let visibleIndex = 0
+ for (let i = 0; i < result.length; i++) {
+ if (visibleRows.includes(result[i])) {
+ result[i] = newVisibleOrder[visibleIndex++]
+ }
+ }
+ return result
+}
+
+const FarmDashboardWrapper = () => {
+ const { setSlotContent } = useContext(NavbarSlotContext)
+ const [config, setConfig] = useState(DEFAULT_FARM_DASHBOARD_CONFIG)
+ const [loading, setLoading] = useState(true)
+ const [saving, setSaving] = useState(false)
+
+ const disabledSet = new Set(config.disabledCardIds)
+
+ const hasVisibleCard = useCallback(
+ (rowId: RowId) => ROW_CARDS[rowId].some(cardId => !disabledSet.has(cardId)),
+ [config.disabledCardIds]
+ )
+
+ const visibleRowOrder = config.rowOrder.filter(hasVisibleCard)
+
+ const [containerRef, orderedRows, setOrderedRows] = useDragAndDrop(visibleRowOrder, {
+ plugins: [animations()],
+ dragHandle: '.row-drag-handle'
+ })
+
+ useEffect(() => {
+ farmDashboardService
+ .getConfig()
+ .then(data => {
+ const merged: FarmDashboardConfig = {
+ disabledCardIds: data.disabledCardIds ?? [],
+ rowOrder: data.rowOrder?.length ? data.rowOrder : [...ROW_IDS],
+ enableDragReorder: data.enableDragReorder ?? true
+ }
+ setConfig(merged)
+ })
+ .catch(() => setConfig(DEFAULT_FARM_DASHBOARD_CONFIG))
+ .finally(() => setLoading(false))
+ }, [])
+
+ useEffect(() => {
+ setOrderedRows(visibleRowOrder)
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [config.disabledCardIds])
+
+
+ useEffect(() => {
+ if (loading) return
+ if (JSON.stringify(orderedRows) === JSON.stringify(visibleRowOrder)) return
+ const newRowOrder = mergeRowOrderAfterDrag(config.rowOrder, orderedRows, visibleRowOrder)
+ setConfig(prev => ({ ...prev, rowOrder: newRowOrder }))
+ setSaving(true)
+ farmDashboardService
+ .updateConfig({ rowOrder: newRowOrder })
+ .then(updated => setConfig(updated))
+ .catch(() => {})
+ .finally(() => setSaving(false))
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [orderedRows])
+
+ const handleToggleDragReorder = useCallback((enabled: boolean) => {
+ setConfig(prev => ({ ...prev, enableDragReorder: enabled }))
+ setSaving(true)
+ farmDashboardService
+ .updateConfig({ enableDragReorder: enabled })
+ .then(updated => setConfig(updated))
+ .finally(() => setSaving(false))
+ }, [])
+
+ const handleToggleCard = useCallback(
+ (cardId: CardId, disabled: boolean) => {
+ const next = disabled
+ ? [...config.disabledCardIds, cardId]
+ : config.disabledCardIds.filter(id => id !== cardId)
+ setConfig(prev => ({ ...prev, disabledCardIds: next }))
+ setSaving(true)
+ farmDashboardService
+ .updateConfig({ disabledCardIds: next })
+ .then(updated => setConfig(updated))
+ .catch(() => setConfig(prev => ({ ...prev, disabledCardIds: next })))
+ .finally(() => setSaving(false))
+ },
+ [config.disabledCardIds]
+ )
+
+ useEffect(() => {
+ setSlotContent(
+
+ )
+ return () => setSlotContent(null)
+ }, [setSlotContent, config.disabledCardIds, config.enableDragReorder, handleToggleCard, handleToggleDragReorder, saving])
+
+ if (loading) {
+ return (
+
+
+
+ )
+ }
+
+ return (
+
+ }>
+ {orderedRows.map((rowId: string) => {
+ const cards = ROW_CARDS[rowId as RowId].filter(cardId => !disabledSet.has(cardId))
+ if (cards.length === 0) return null
+
+ const isOverviewRow = rowId === 'overviewKpis'
+
+ return (
+
+ {config.enableDragReorder !== false && (
+
+
+
+ )}
+
+ {isOverviewRow && cards.includes('farmOverviewKpis') && }
+ {!isOverviewRow &&
+ cards.map((cardId: CardId) => {
+ const size = CARD_GRID_SIZE[cardId]
+ const Component = CARD_COMPONENTS[cardId]
+ if (!Component) return null
+ return (
+
+
+
+ )
+ })}
+
+
+ )
+ })}
+
+
+ )
+}
+
+export default FarmDashboardWrapper
diff --git a/src/views/dashboards/farm/FarmOverviewKPIs.tsx b/src/views/dashboards/farm/FarmOverviewKPIs.tsx
new file mode 100644
index 0000000..927a418
--- /dev/null
+++ b/src/views/dashboards/farm/FarmOverviewKPIs.tsx
@@ -0,0 +1,100 @@
+'use client'
+
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Component Imports
+import CardStatsVertical from '@components/card-statistics/Vertical'
+
+const FarmOverviewKPIs = () => {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default FarmOverviewKPIs
diff --git a/src/views/dashboards/farm/FarmWeatherCard.tsx b/src/views/dashboards/farm/FarmWeatherCard.tsx
new file mode 100644
index 0000000..1f7e5b4
--- /dev/null
+++ b/src/views/dashboards/farm/FarmWeatherCard.tsx
@@ -0,0 +1,98 @@
+'use client'
+
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import Typography from '@mui/material/Typography'
+import CardContent from '@mui/material/CardContent'
+import CardHeader from '@mui/material/CardHeader'
+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 - Mock weather data (temp variation through day)
+const series = [{ data: [18, 22, 26, 28, 25, 20, 18] }]
+
+const FarmWeatherCard = () => {
+ const theme = useTheme()
+ const infoColor = theme.palette.info.main
+
+ const options: ApexOptions = {
+ chart: {
+ parentHeightOffset: 0,
+ toolbar: { show: false },
+ sparkline: { enabled: true }
+ },
+ tooltip: { enabled: false },
+ dataLabels: { enabled: false },
+ stroke: {
+ width: 2,
+ curve: 'smooth'
+ },
+ grid: {
+ show: false,
+ padding: { bottom: 20 }
+ },
+ fill: {
+ type: 'gradient',
+ gradient: {
+ opacityTo: 0,
+ opacityFrom: 1,
+ shadeIntensity: 1,
+ stops: [0, 100],
+ colorStops: [
+ [
+ { offset: 0, opacity: 0.4, color: infoColor },
+ { opacity: 0, offset: 100, color: 'var(--mui-palette-background-paper)' }
+ ]
+ ]
+ }
+ },
+ theme: {
+ monochrome: {
+ enabled: true,
+ shadeTo: 'light',
+ shadeIntensity: 1,
+ color: infoColor
+ }
+ },
+ xaxis: {
+ labels: { show: false },
+ axisTicks: { show: false },
+ axisBorder: { show: false }
+ },
+ yaxis: { show: false }
+ }
+
+ return (
+
+ }
+ />
+
+
+
+ 24°C
+
+ Humid: 45% | Wind: 12 km/h
+
+
+
+
+
+ )
+}
+
+export default FarmWeatherCard
diff --git a/src/views/dashboards/farm/HarvestPredictionCard.tsx b/src/views/dashboards/farm/HarvestPredictionCard.tsx
new file mode 100644
index 0000000..7f940a5
--- /dev/null
+++ b/src/views/dashboards/farm/HarvestPredictionCard.tsx
@@ -0,0 +1,40 @@
+'use client'
+
+// 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 Chip from '@mui/material/Chip'
+
+// Component Imports
+import CustomAvatar from '@core/components/mui/Avatar'
+import OptionMenu from '@core/components/option-menu'
+
+const HarvestPredictionCard = () => {
+ return (
+
+
+
+
+ }
+ title='Harvest Prediction'
+ subheader='AI Estimated Date'
+ action={}
+ />
+
+
+ Oct 15, 2025
+
+
+
+ Based on current GDD accumulation and weather forecast. Optimal harvest window: Oct 12-18.
+
+
+
+ )
+}
+
+export default HarvestPredictionCard
diff --git a/src/views/dashboards/farm/NDVIHealthCard.tsx b/src/views/dashboards/farm/NDVIHealthCard.tsx
new file mode 100644
index 0000000..5b78fa3
--- /dev/null
+++ b/src/views/dashboards/farm/NDVIHealthCard.tsx
@@ -0,0 +1,112 @@
+'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 Chip from '@mui/material/Chip'
+import { useTheme } from '@mui/material/styles'
+
+// Third-party Imports
+import classnames from 'classnames'
+import type { ApexOptions } from 'apexcharts'
+
+// Component Imports
+import CustomAvatar from '@core/components/mui/Avatar'
+
+// Styled Component Imports
+const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
+
+const NDVIHealthCard = () => {
+ const theme = useTheme()
+ const successColor = theme.palette.success.main
+ const disabledText = 'var(--mui-palette-text-disabled)'
+
+ const options: ApexOptions = {
+ stroke: { dashArray: 10 },
+ labels: ['NDVI'],
+ colors: [successColor],
+ 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: [successColor]
+ }
+ },
+ 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: (val: number) => val.toFixed(2),
+ color: 'var(--mui-palette-text-primary)',
+ fontFamily: theme.typography.fontFamily,
+ fontSize: theme.typography.h2.fontSize as string
+ }
+ }
+ }
+ }
+ }
+
+ const healthData = [
+ { title: 'Nitrogen Stress', value: 'Low', color: 'success', icon: 'tabler-leaf' },
+ { title: 'Crop Health', value: 'Good', color: 'success', icon: 'tabler-plant' }
+ ]
+
+ return (
+
+ }
+ title='NDVI Health'
+ subheader='Vegetation Index'
+ sx={{ '& .MuiCardHeader-avatar': { mr: 3 } }}
+ />
+
+
+
0.78
+
NDVI Index (0-1)
+
+ {healthData.map((item, index) => (
+
+
+
+
+
+ {item.title}
+
+
+
+ ))}
+
+
+
+
+
+
+
+ {item.title}
+
+
+ {item.subtitle}
+
+
+
+ 48%
+
+ +5% vs last week
+
+
+
+
+
+ )
+}
+
+export default SensorComparisonChart
diff --git a/src/views/dashboards/farm/SensorRadarChart.tsx b/src/views/dashboards/farm/SensorRadarChart.tsx
new file mode 100644
index 0000000..eb561e1
--- /dev/null
+++ b/src/views/dashboards/farm/SensorRadarChart.tsx
@@ -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 (
+
+ }
+ />
+
+
+
+
+ )
+}
+
+export default SensorRadarChart
diff --git a/src/views/dashboards/farm/SensorValuesList.tsx b/src/views/dashboards/farm/SensorValuesList.tsx
new file mode 100644
index 0000000..c55ec0f
--- /dev/null
+++ b/src/views/dashboards/farm/SensorValuesList.tsx
@@ -0,0 +1,72 @@
+'use client'
+
+// 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'
+
+// Third-party Imports
+import classnames from 'classnames'
+
+// Component Imports
+import OptionMenu from '@core/components/option-menu'
+
+type SensorDataType = {
+ title: string
+ subtitle: string
+ trendNumber: number
+ trend?: 'positive' | 'negative'
+ unit: string
+}
+
+const data: SensorDataType[] = [
+ { title: '28°C', subtitle: 'Air Temperature', trendNumber: 2.1, unit: '°C' },
+ { title: '24°C', subtitle: 'Soil Temperature', trendNumber: -0.5, trend: 'negative', unit: '°C' },
+ { title: '65%', subtitle: 'Air Humidity', trendNumber: 3.2, unit: '%' },
+ { title: '42%', subtitle: 'Soil Moisture (10cm)', trendNumber: -1.8, trend: 'negative', unit: '%' },
+ { title: '6.8', subtitle: 'Soil pH', trendNumber: 0.2, unit: 'pH' },
+ { title: '1.2', subtitle: 'EC (dS/m)', trendNumber: 0.1, unit: 'dS/m' },
+ { title: '850', subtitle: 'Light Intensity (lux)', trendNumber: 15.3, unit: 'lux' },
+ { title: '12', subtitle: 'Wind Speed (km/h)', trendNumber: -2.4, trend: 'negative', unit: 'km/h' }
+]
+
+const SensorValuesList = () => {
+ return (
+
+ }
+ />
+
+ {data.map((item, index) => (
+
+
+
+
+ {item.title}
+
+ {item.subtitle}
+
+
+
+ {`${item.trendNumber > 0 ? '+' : ''}${item.trendNumber}%`}
+
+
+
+ 3,290 m³
+
+ Total next 7 days
+
+
+
+
+
+ )
+}
+
+export default WaterNeedPrediction
diff --git a/src/views/dashboards/farm/YieldPredictionChart.tsx b/src/views/dashboards/farm/YieldPredictionChart.tsx
new file mode 100644
index 0000000..b2e39ce
--- /dev/null
+++ b/src/views/dashboards/farm/YieldPredictionChart.tsx
@@ -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 (
+
+ }
+ />
+
+
+
+ {summaryData.map((item, index) => (
+
+
+
+
+
+
+
+ {item.title}
+
+ {item.subtitle}
+
+
+ {item.amount}
+
+
+
+ ))}
+