100 lines
3.2 KiB
TypeScript
100 lines
3.2 KiB
TypeScript
|
'use client'
|
||
|
|
|
||
|
|
// MUI Imports
|
||
|
|
import Grid from '@mui/material/Grid2'
|
||
|
|
|
||
|
|
// Component Imports
|
||
|
|
import DistributedBarChartOrder from '@views/dashboards/crm/DistributedBarChartOrder'
|
||
|
|
import EarningReportsWithTabs from '@views/dashboards/crm/EarningReportsWithTabs'
|
||
|
|
|
||
|
|
// Server Action Imports
|
||
|
|
import Loading from '../../../../../../components/layout/shared/Loading'
|
||
|
|
import { useDashboardAnalytics } from '../../../../../../services/queries/analytics'
|
||
|
|
import { DashboardReport, PaymentDataItem, ProductData, RecentSale } from '../../../../../../types/services/analytic'
|
||
|
|
|
||
|
|
const DashboardOverview = () => {
|
||
|
|
const { data, isLoading } = useDashboardAnalytics()
|
||
|
|
|
||
|
|
const formatDate = (dateString: any) => {
|
||
|
|
return new Date(dateString).toLocaleDateString('id-ID', {
|
||
|
|
month: 'short',
|
||
|
|
day: 'numeric'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
const transformSalesData = (data: DashboardReport) => {
|
||
|
|
return [
|
||
|
|
{
|
||
|
|
type: 'products',
|
||
|
|
avatarIcon: 'tabler-package',
|
||
|
|
date: data.top_products.map((d: ProductData) => d.product_name),
|
||
|
|
series: [{ data: data.top_products.map((d: ProductData) => d.revenue) }]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: 'orders',
|
||
|
|
avatarIcon: 'tabler-shopping-cart',
|
||
|
|
date: data.recent_sales.map((d: RecentSale) => formatDate(d.date)),
|
||
|
|
series: [{ data: data.recent_sales.map((d: RecentSale) => d.net_sales) }]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: 'payments',
|
||
|
|
avatarIcon: 'tabler-credit-card-pay',
|
||
|
|
date: data.payment_methods.map((d: PaymentDataItem) => d.payment_method_name),
|
||
|
|
series: [{ data: data.payment_methods.map((d: PaymentDataItem) => d.total_amount) }]
|
||
|
|
},
|
||
|
|
]
|
||
|
|
}
|
||
|
|
|
||
|
|
if (isLoading) return <Loading />
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Grid container spacing={6}>
|
||
|
|
<Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
|
||
|
|
<DistributedBarChartOrder
|
||
|
|
isLoading={isLoading}
|
||
|
|
title='Total Customers'
|
||
|
|
value={data?.overview.total_customers as number}
|
||
|
|
avatarIcon={'tabler-users'}
|
||
|
|
avatarColor='primary'
|
||
|
|
avatarSkin='light'
|
||
|
|
/>
|
||
|
|
</Grid>
|
||
|
|
<Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
|
||
|
|
<DistributedBarChartOrder
|
||
|
|
isLoading={isLoading}
|
||
|
|
title='Total Orders'
|
||
|
|
value={data?.overview.total_orders 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'
|
||
|
|
value={data?.overview.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 Sales'
|
||
|
|
value={data?.overview.total_sales as number}
|
||
|
|
avatarIcon={'tabler-currency-dollar'}
|
||
|
|
avatarColor='success'
|
||
|
|
avatarSkin='light'
|
||
|
|
/>
|
||
|
|
</Grid>
|
||
|
|
<Grid size={{ xs: 12, lg: 12 }}>
|
||
|
|
<EarningReportsWithTabs data={transformSalesData(data!)} />
|
||
|
|
</Grid>
|
||
|
|
</Grid>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default DashboardOverview
|