82 lines
2.6 KiB
TypeScript
82 lines
2.6 KiB
TypeScript
'use client'
|
|
|
|
// React Imports
|
|
import { useTranslations } from 'next-intl'
|
|
|
|
// 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'
|
|
|
|
// 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'
|
|
}
|
|
|
|
interface FarmAlertsTimelineProps {
|
|
data?: Record<string, unknown>
|
|
}
|
|
|
|
const FarmAlertsTimeline = ({ data }: FarmAlertsTimelineProps) => {
|
|
const t = useTranslations('farmDashboard')
|
|
const alerts = (data?.alerts as AlertItem[] | undefined) ?? []
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader
|
|
avatar={<i className='tabler-bell-ring text-xl' />}
|
|
title={t('cards.farmAlertsTimeline')}
|
|
titleTypographyProps={{ variant: 'h5' }}
|
|
subheader={t('subheaders.explainableRecommendations')}
|
|
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
|