51 lines
1.2 KiB
TypeScript
51 lines
1.2 KiB
TypeScript
'use client'
|
|
|
|
// MUI Imports
|
|
import Grid from '@mui/material/Grid2'
|
|
|
|
// Component Imports
|
|
import CardStatsVertical from '@components/card-statistics/Vertical'
|
|
|
|
type KpiItem = {
|
|
id: string
|
|
title: string
|
|
subtitle: string
|
|
stats: string
|
|
avatarColor?: string
|
|
avatarIcon?: string
|
|
chipText?: string
|
|
chipColor?: string
|
|
}
|
|
|
|
interface FarmOverviewKPIsProps {
|
|
data?: Record<string, unknown>
|
|
}
|
|
|
|
const FarmOverviewKPIs = ({ data }: FarmOverviewKPIsProps) => {
|
|
const kpis = (data?.kpis as KpiItem[] | undefined) ?? []
|
|
if (kpis.length === 0) return null
|
|
|
|
return (
|
|
<>
|
|
{kpis.map((kpi) => (
|
|
<Grid key={kpi.id} size={{ xs: 12, sm: 6, md: 4, lg: 2 }}>
|
|
<CardStatsVertical
|
|
title={kpi.title}
|
|
subtitle={kpi.subtitle}
|
|
stats={kpi.stats}
|
|
avatarColor={(kpi.avatarColor as 'success' | 'info' | 'primary' | 'secondary' | 'warning') ?? 'primary'}
|
|
avatarIcon={kpi.avatarIcon ?? 'tabler-chart-bar'}
|
|
avatarSkin='light'
|
|
avatarSize={44}
|
|
chipText={kpi.chipText}
|
|
chipColor={(kpi.chipColor as 'success' | 'warning') ?? 'success'}
|
|
chipVariant='tonal'
|
|
/>
|
|
</Grid>
|
|
))}
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default FarmOverviewKPIs
|