74 lines
2.9 KiB
TypeScript
74 lines
2.9 KiB
TypeScript
'use client'
|
||
|
||
import Card from '@mui/material/Card'
|
||
import CardContent from '@mui/material/CardContent'
|
||
import CardHeader from '@mui/material/CardHeader'
|
||
import Chip from '@mui/material/Chip'
|
||
import Typography from '@mui/material/Typography'
|
||
import Box from '@mui/material/Box'
|
||
import { alpha, useTheme } from '@mui/material/styles'
|
||
|
||
import CustomAvatar from '@core/components/mui/Avatar'
|
||
|
||
interface FarmWalletSummaryCardProps {
|
||
data?: Record<string, unknown>
|
||
}
|
||
|
||
const FarmWalletSummaryCard = ({ data }: FarmWalletSummaryCardProps) => {
|
||
const theme = useTheme()
|
||
const balance = String(data?.balance ?? '۲۴۸,۵۰۰,۰۰۰ تومان')
|
||
const pendingSettlement = String(data?.pendingSettlement ?? '۱۲,۴۰۰,۰۰۰ تومان')
|
||
const monthlyInflow = String(data?.monthlyInflow ?? '۹۴,۸۰۰,۰۰۰ تومان')
|
||
const monthlyOutflow = String(data?.monthlyOutflow ?? '۵۱,۲۰۰,۰۰۰ تومان')
|
||
const healthLabel = String(data?.healthLabel ?? 'جریان نقدی پایدار')
|
||
|
||
return (
|
||
<Card sx={{ height: '100%' }}>
|
||
<CardHeader
|
||
title='خلاصه کیف پول'
|
||
subheader='وضعیت نقدینگی و تسویه های مزرعه'
|
||
avatar={
|
||
<CustomAvatar skin='light' color='info' size={42}>
|
||
<i className='tabler-wallet text-xl' />
|
||
</CustomAvatar>
|
||
}
|
||
action={<Chip size='small' color='success' variant='tonal' label={healthLabel} />}
|
||
/>
|
||
<CardContent className='flex flex-col gap-4'>
|
||
<Box sx={{ p: 3, borderRadius: 4, backgroundColor: alpha(theme.palette.info.main, 0.06) }}>
|
||
<Typography variant='body2' color='text.secondary'>
|
||
موجودی کل
|
||
</Typography>
|
||
<Typography variant='h5'>{balance}</Typography>
|
||
</Box>
|
||
|
||
<div className='grid grid-cols-2 gap-3'>
|
||
<Box sx={{ p: 3, borderRadius: 4, backgroundColor: alpha(theme.palette.warning.main, 0.06) }}>
|
||
<Typography variant='body2' color='text.secondary'>
|
||
در انتظار تسویه
|
||
</Typography>
|
||
<Typography className='font-semibold'>{pendingSettlement}</Typography>
|
||
</Box>
|
||
<Box sx={{ p: 3, borderRadius: 4, backgroundColor: alpha(theme.palette.success.main, 0.06) }}>
|
||
<Typography variant='body2' color='text.secondary'>
|
||
ورودی ماه
|
||
</Typography>
|
||
<Typography className='font-semibold'>{monthlyInflow}</Typography>
|
||
</Box>
|
||
</div>
|
||
|
||
<Box sx={{ p: 3, borderRadius: 4, border: `1px solid ${alpha(theme.palette.divider, 0.8)}` }}>
|
||
<Typography variant='body2' color='text.secondary'>
|
||
خروجی ۳۰ روز اخیر
|
||
</Typography>
|
||
<Typography className='font-semibold' color='error.main'>
|
||
{monthlyOutflow}
|
||
</Typography>
|
||
</Box>
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|
||
|
||
export default FarmWalletSummaryCard
|