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:
@@ -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
|
||||
Reference in New Issue
Block a user