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.

This commit is contained in:
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'
// 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 { styled } from '@mui/material/styles'
import TimelineDot from '@mui/lab/TimelineDot'
import TimelineItem from '@mui/lab/TimelineItem'
import TimelineContent from '@mui/lab/TimelineContent'
import TimelineSeparator from '@mui/lab/TimelineSeparator'
import TimelineConnector from '@mui/lab/TimelineConnector'
import MuiTimeline from '@mui/lab/Timeline'
import type { TimelineProps } from '@mui/lab/Timeline'
// Component Imports
import OptionMenu from '@core/components/option-menu'
// Styled Timeline
const Timeline = styled(MuiTimeline)<TimelineProps>({
paddingLeft: 0,
paddingRight: 0,
'& .MuiTimelineItem-root': {
width: '100%',
'&:before': { display: 'none' }
}
})
type AlertItem = {
title: string
description: string
time: string
color: 'primary' | 'warning' | 'error' | 'info' | 'success'
}
const alerts: AlertItem[] = [
{
title: 'Water Shortage Risk',
description:
'Soil moisture at 10cm depth (42%) is below optimal. AI predicts stress in 2-3 days if no irrigation. Recommended: irrigate within 24h.',
time: '15 min ago',
color: 'warning'
},
{
title: 'Fungal Disease Risk',
description:
'High humidity (65%) + temp 24°C creates favorable conditions for fungal growth. Consider preventive fungicide or reduce irrigation.',
time: '1 hour ago',
color: 'error'
},
{
title: 'Irrigation Suggestion',
description: 'Optimal watering window: 6:00-8:00 AM. Suggested amount: 450 m³ for Zone A. Expected efficiency gain: 12%.',
time: '2 hours ago',
color: 'info'
},
{
title: 'Soil Salinity Check',
description: 'EC reading 1.2 dS/m is within range. No action needed. Next check recommended in 5 days.',
time: '4 hours ago',
color: 'success'
}
]
const FarmAlertsTimeline = () => {
return (
<Card>
<CardHeader
avatar={<i className='tabler-bell-ring text-xl' />}
title='AI Alerts'
titleTypographyProps={{ variant: 'h5' }}
subheader='Explainable recommendations'
action={<OptionMenu options={['View All', 'Configure', 'Export']} />}
sx={{ '& .MuiCardHeader-avatar': { mr: 3 } }}
/>
<CardContent className='flex flex-col gap-6 pbe-5'>
<Timeline>
{alerts.map((alert, index) => (
<TimelineItem key={index}>
<TimelineSeparator>
<TimelineDot color={alert.color} />
{index < alerts.length - 1 && <TimelineConnector />}
</TimelineSeparator>
<TimelineContent>
<div className='flex flex-wrap items-center justify-between gap-x-2 mbe-2.5'>
<Typography className='font-medium' color='text.primary'>
{alert.title}
</Typography>
<Typography variant='caption'>{alert.time}</Typography>
</div>
<Typography variant='body2' color='text.secondary'>
{alert.description}
</Typography>
</TimelineContent>
</TimelineItem>
))}
</Timeline>
</CardContent>
</Card>
)
}
export default FarmAlertsTimeline