133 lines
4.2 KiB
TypeScript
133 lines
4.2 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 { useProfitLossAnalytics } from '../../../../../../services/queries/analytics'
|
|
import { DailyData, ProductDataReport, ProfitLossReport } from '../../../../../../types/services/analytic'
|
|
import EarningReportsWithTabs from '../../../../../../views/dashboards/crm/EarningReportsWithTabs'
|
|
import MultipleSeries from '../../../../../../views/dashboards/profit-loss/EarningReportWithTabs'
|
|
|
|
function formatMetricName(metric: string): string {
|
|
const nameMap: { [key: string]: string } = {
|
|
revenue: 'Revenue',
|
|
cost: 'Cost',
|
|
gross_profit: 'Gross Profit',
|
|
gross_profit_margin: 'Gross Profit Margin (%)',
|
|
tax: 'Tax',
|
|
discount: 'Discount',
|
|
net_profit: 'Net Profit',
|
|
net_profit_margin: 'Net Profit Margin (%)',
|
|
orders: 'Orders'
|
|
}
|
|
|
|
return nameMap[metric] || metric.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())
|
|
}
|
|
|
|
const DashboardProfitLoss = () => {
|
|
const { data, isLoading } = useProfitLossAnalytics()
|
|
|
|
const formatDate = (dateString: any) => {
|
|
return new Date(dateString).toLocaleDateString('id-ID', {
|
|
month: 'short',
|
|
day: 'numeric'
|
|
})
|
|
}
|
|
|
|
const metrics = ['cost', 'revenue', 'gross_profit', 'net_profit']
|
|
|
|
const transformSalesData = (data: ProfitLossReport) => {
|
|
return [
|
|
{
|
|
type: 'products',
|
|
avatarIcon: 'tabler-package',
|
|
date: data.product_data.map((d: ProductDataReport) => d.product_name),
|
|
series: [{ data: data.product_data.map((d: ProductDataReport) => d.revenue) }]
|
|
}
|
|
// {
|
|
// type: 'profits',
|
|
// avatarIcon: 'tabler-currency-dollar',
|
|
// date: data.data.map((d: DailyData) => formatDate(d.date)),
|
|
// series: metrics.map(metric => ({
|
|
// name: formatMetricName(metric as string),
|
|
// data: data.data.map((item: any) => item[metric] as number)
|
|
// }))
|
|
// }
|
|
]
|
|
}
|
|
|
|
const transformMultipleData = (data: ProfitLossReport) => {
|
|
return [
|
|
{
|
|
type: 'profits',
|
|
avatarIcon: 'tabler-currency-dollar',
|
|
date: data.data.map((d: DailyData) => formatDate(d.date)),
|
|
series: metrics.map(metric => ({
|
|
name: formatMetricName(metric as string),
|
|
data: data.data.map((item: any) => item[metric] as number)
|
|
}))
|
|
}
|
|
]
|
|
}
|
|
|
|
if (isLoading) return <Loading />
|
|
|
|
return (
|
|
<Grid container spacing={6}>
|
|
<Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
|
|
<DistributedBarChartOrder
|
|
isLoading={isLoading}
|
|
title='Total Cost'
|
|
value={data?.summary.total_cost as number}
|
|
avatarIcon={'tabler-currency-dollar'}
|
|
avatarColor='primary'
|
|
avatarSkin='light'
|
|
/>
|
|
</Grid>
|
|
<Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
|
|
<DistributedBarChartOrder
|
|
isLoading={isLoading}
|
|
title='Total Rvenue'
|
|
value={data?.summary.total_revenue as number}
|
|
avatarIcon={'tabler-currency-dollar'}
|
|
avatarColor='info'
|
|
avatarSkin='light'
|
|
/>
|
|
</Grid>
|
|
<Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
|
|
<DistributedBarChartOrder
|
|
isLoading={isLoading}
|
|
title='Gross Profit'
|
|
value={data?.summary.gross_profit 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='Net Profit'
|
|
value={data?.summary.net_profit as number}
|
|
avatarIcon={'tabler-currency-dollar'}
|
|
avatarColor='success'
|
|
avatarSkin='light'
|
|
/>
|
|
</Grid>
|
|
<Grid size={{ xs: 12, lg: 12 }}>
|
|
<EarningReportsWithTabs data={transformSalesData(data!)} />
|
|
</Grid>
|
|
<Grid size={{ xs: 12, lg: 12 }}>
|
|
<MultipleSeries data={transformMultipleData(data!)} />
|
|
</Grid>
|
|
</Grid>
|
|
)
|
|
}
|
|
|
|
export default DashboardProfitLoss
|