142 lines
4.6 KiB
TypeScript
142 lines
4.6 KiB
TypeScript
'use client'
|
|
|
|
// MUI Imports
|
|
import Grid from '@mui/material/Grid2'
|
|
|
|
// Component Imports
|
|
import DistributedBarChartOrder from '@views/dashboards/crm/DistributedBarChartOrder'
|
|
|
|
// Server Action Imports
|
|
import Loading from '../../../../../../components/layout/shared/Loading'
|
|
import { usePaymentAnalytics } from '../../../../../../services/queries/analytics'
|
|
import { PaymentDataItem } from '../../../../../../types/services/analytic'
|
|
import PaymentMethodReport from '../../../../../../views/dashboards/payment-methods/PaymentMethodReport'
|
|
import { Typography, TextField, useTheme } from '@mui/material'
|
|
import { useState } from 'react'
|
|
import { formatDateDDMMYYYY, formatForInputDate } from '../../../../../../utils/transform'
|
|
|
|
const DashboardPayment = () => {
|
|
const theme = useTheme()
|
|
|
|
const today = new Date()
|
|
const monthAgo = new Date()
|
|
monthAgo.setDate(today.getDate() - 30)
|
|
|
|
const [filter, setFilter] = useState({
|
|
date_from: formatDateDDMMYYYY(monthAgo),
|
|
date_to: formatDateDDMMYYYY(today)
|
|
})
|
|
|
|
const { data, isLoading } = usePaymentAnalytics({
|
|
date_from: filter.date_from,
|
|
date_to: filter.date_to
|
|
})
|
|
|
|
if (isLoading) return <Loading />
|
|
|
|
return (
|
|
<Grid container spacing={6}>
|
|
<Grid size={{ xs: 12 }}>
|
|
<div className='flex gap-4 items-center justify-between'>
|
|
<Typography variant='h1' className='text-3xl font-bold text-gray-900 mb-2'>
|
|
Payments Analysis Dashboard
|
|
</Typography>
|
|
<div className='flex items-center gap-4'>
|
|
<TextField
|
|
type='date'
|
|
value={formatForInputDate(data?.date_from || new Date())}
|
|
onChange={e => {
|
|
setFilter({
|
|
...filter,
|
|
date_from: formatDateDDMMYYYY(new Date(e.target.value))
|
|
})
|
|
}}
|
|
size='small'
|
|
sx={{
|
|
'& .MuiOutlinedInput-root': {
|
|
'&.Mui-focused fieldset': {
|
|
borderColor: 'primary.main'
|
|
},
|
|
'& fieldset': {
|
|
borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
|
|
}
|
|
}
|
|
}}
|
|
/>
|
|
<Typography>-</Typography>
|
|
<TextField
|
|
type='date'
|
|
value={
|
|
data?.date_to
|
|
? new Date(data?.date_to).toISOString().split('T')[0]
|
|
: new Date().toISOString().split('T')[0]
|
|
}
|
|
onChange={e => {}}
|
|
size='small'
|
|
sx={{
|
|
'& .MuiOutlinedInput-root': {
|
|
'&.Mui-focused fieldset': {
|
|
borderColor: 'primary.main'
|
|
},
|
|
'& fieldset': {
|
|
borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
|
|
}
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Grid>
|
|
<Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
|
|
<DistributedBarChartOrder
|
|
isLoading={isLoading}
|
|
title='Total Orders'
|
|
isCurrency={false}
|
|
value={data?.summary.total_orders as number}
|
|
avatarIcon={'tabler-shopping-cart'}
|
|
avatarColor='primary'
|
|
avatarSkin='light'
|
|
/>
|
|
</Grid>
|
|
<Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
|
|
<DistributedBarChartOrder
|
|
isLoading={isLoading}
|
|
title='Total Payment'
|
|
isCurrency={false}
|
|
value={data?.summary.total_payments as number}
|
|
avatarIcon={'tabler-package'}
|
|
avatarColor='info'
|
|
avatarSkin='light'
|
|
/>
|
|
</Grid>
|
|
<Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
|
|
<DistributedBarChartOrder
|
|
isLoading={isLoading}
|
|
title='Average Orders'
|
|
isCurrency={true}
|
|
value={data?.summary.average_order_value as number}
|
|
avatarIcon={'tabler-trending-up'}
|
|
avatarColor='warning'
|
|
avatarSkin='light'
|
|
/>
|
|
</Grid>
|
|
<Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
|
|
<DistributedBarChartOrder
|
|
isLoading={isLoading}
|
|
title='Total Amount'
|
|
isCurrency={true}
|
|
value={data?.summary.total_amount as number}
|
|
avatarIcon={'tabler-currency-dollar'}
|
|
avatarColor='success'
|
|
avatarSkin='light'
|
|
/>
|
|
</Grid>
|
|
<Grid size={{ xs: 12, lg: 12 }}>
|
|
<PaymentMethodReport payments={data?.data as PaymentDataItem[]} />
|
|
</Grid>
|
|
</Grid>
|
|
)
|
|
}
|
|
|
|
export default DashboardPayment
|