425 lines
19 KiB
TypeScript
425 lines
19 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState } from 'react'
|
|
import { useProfitLossAnalytics } from '../../../../../../services/queries/analytics'
|
|
import { formatDateDDMMYYYY, formatForInputDate, formatShortCurrency } from '../../../../../../utils/transform'
|
|
import MultipleSeries from '../../../../../../views/dashboards/profit-loss/EarningReportWithTabs'
|
|
import { DailyData, ProfitLossReport } from '../../../../../../types/services/analytic'
|
|
import { TextField, Typography, useTheme } from '@mui/material'
|
|
import Loading from '../../../../../../components/layout/shared/Loading'
|
|
|
|
const DashboardProfitloss = () => {
|
|
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)
|
|
})
|
|
|
|
// Sample data - replace with your actual data
|
|
const { data: profitData, isLoading } = useProfitLossAnalytics({
|
|
date_from: filter.date_from,
|
|
date_to: filter.date_to
|
|
})
|
|
|
|
const formatCurrency = (amount: any) => {
|
|
return new Intl.NumberFormat('id-ID', {
|
|
style: 'currency',
|
|
currency: 'IDR',
|
|
minimumFractionDigits: 0
|
|
}).format(amount)
|
|
}
|
|
|
|
const formatPercentage = (value: any) => {
|
|
return `${value.toFixed(2)}%`
|
|
}
|
|
|
|
const formatDate = (dateString: any) => {
|
|
return new Date(dateString).toLocaleDateString('id-ID', {
|
|
day: 'numeric',
|
|
month: 'short',
|
|
year: 'numeric'
|
|
})
|
|
}
|
|
|
|
const getProfitabilityColor = (margin: any) => {
|
|
if (margin > 50) return 'text-green-600 bg-green-100'
|
|
if (margin > 0) return 'text-yellow-600 bg-yellow-100'
|
|
return 'text-red-600 bg-red-100'
|
|
}
|
|
|
|
function formatMetricName(metric: string): string {
|
|
const nameMap: { [key: string]: string } = {
|
|
revenue: 'Revenue',
|
|
net_profit: 'Net Profit'
|
|
}
|
|
|
|
return nameMap[metric] || metric.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())
|
|
}
|
|
|
|
const metrics = ['revenue', 'net_profit']
|
|
|
|
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)
|
|
}))
|
|
}
|
|
]
|
|
}
|
|
|
|
const MetricCard = ({
|
|
iconClass,
|
|
title,
|
|
value,
|
|
subtitle,
|
|
bgColor = 'bg-blue-500',
|
|
isNegative = false,
|
|
isCurrency = false
|
|
}: any) => (
|
|
<div className='bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 p-6'>
|
|
<div className='flex items-center justify-between'>
|
|
<div className='flex-1'>
|
|
<h3 className='text-sm font-medium text-gray-600 mb-2'>{title}</h3>
|
|
<p className={`text-2xl font-bold mb-1 ${isNegative ? 'text-red-600' : 'text-gray-900'}`}>
|
|
{isCurrency ? 'Rp ' + value : value}
|
|
</p>
|
|
{subtitle && <p className='text-sm text-gray-500'>{subtitle}</p>}
|
|
</div>
|
|
<div className={`px-4 py-3 rounded-full ${bgColor} bg-opacity-10`}>
|
|
<i className={`${iconClass} text-[32px] ${bgColor.replace('bg-', 'text-')}`}></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
return (
|
|
<>
|
|
<div>
|
|
{/* Header */}
|
|
<div className='mb-8 flex gap-4 items-center justify-between'>
|
|
<Typography variant='h1' className='text-3xl font-bold text-gray-900 mb-2'>
|
|
Profit Analysis Dashboard
|
|
</Typography>
|
|
<div className='flex items-center gap-4'>
|
|
<TextField
|
|
type='date'
|
|
value={formatForInputDate(profitData?.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={
|
|
profitData?.date_to
|
|
? new Date(profitData?.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>
|
|
|
|
{profitData ? (
|
|
<>
|
|
<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8'>
|
|
<MetricCard
|
|
iconClass='tabler-currency-dollar'
|
|
title='Total Revenue'
|
|
value={formatShortCurrency(profitData.summary.total_revenue)}
|
|
bgColor='bg-green-500'
|
|
isCurrency={true}
|
|
/>
|
|
<MetricCard
|
|
iconClass='tabler-receipt'
|
|
title='Total Cost'
|
|
value={formatShortCurrency(profitData.summary.total_cost)}
|
|
bgColor='bg-red-500'
|
|
isCurrency={true}
|
|
/>
|
|
<MetricCard
|
|
iconClass='tabler-trending-up'
|
|
title='Gross Profit'
|
|
value={formatShortCurrency(profitData.summary.gross_profit)}
|
|
subtitle={`Margin: ${formatPercentage(profitData.summary.gross_profit_margin)}`}
|
|
bgColor='bg-blue-500'
|
|
isNegative={profitData.summary.gross_profit < 0}
|
|
isCurrency={true}
|
|
/>
|
|
<MetricCard
|
|
iconClass='tabler-percentage'
|
|
title='Profitability Ratio'
|
|
value={formatPercentage(profitData.summary.profitability_ratio)}
|
|
subtitle={`Avg Profit: ${formatShortCurrency(profitData.summary.average_profit)}`}
|
|
bgColor='bg-purple-500'
|
|
/>
|
|
</div>
|
|
|
|
{/* Additional Summary Metrics */}
|
|
<div className='grid grid-cols-1 md:grid-cols-3 gap-6 mb-8'>
|
|
<div className='bg-white rounded-lg shadow-md p-6'>
|
|
<div className='flex items-center mb-4'>
|
|
<i className='tabler-wallet text-[24px] text-green-600 mr-2'></i>
|
|
<h3 className='text-lg font-semibold text-gray-900'>Net Profit</h3>
|
|
</div>
|
|
<p className='text-3xl font-bold text-green-600 mb-2'>
|
|
Rp {formatShortCurrency(profitData.summary.net_profit)}
|
|
</p>
|
|
<p className='text-sm text-gray-600'>
|
|
Margin: {formatPercentage(profitData.summary.net_profit_margin)}
|
|
</p>
|
|
</div>
|
|
<div className='bg-white rounded-lg shadow-md p-6'>
|
|
<div className='flex items-center mb-4'>
|
|
<i className='tabler-shopping-cart text-[24px] text-blue-600 mr-2'></i>
|
|
<h3 className='text-lg font-semibold text-gray-900'>Total Orders</h3>
|
|
</div>
|
|
<p className='text-3xl font-bold text-blue-600'>{profitData.summary.total_orders}</p>
|
|
</div>
|
|
<div className='bg-white rounded-lg shadow-md p-6'>
|
|
<div className='flex items-center mb-4'>
|
|
<i className='tabler-discount text-[24px] text-orange-600 mr-2'></i>
|
|
<h3 className='text-lg font-semibold text-gray-900'>Tax & Discount</h3>
|
|
</div>
|
|
<p className='text-xl font-bold text-orange-600 mb-1'>
|
|
Rp {formatShortCurrency(profitData.summary.total_tax + profitData.summary.total_discount)}
|
|
</p>
|
|
<p className='text-sm text-gray-600'>
|
|
Tax: {formatShortCurrency(profitData.summary.total_tax)} | Discount:{' '}
|
|
{formatShortCurrency(profitData.summary.total_discount)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Profit Chart */}
|
|
<div className='mb-8'>
|
|
<MultipleSeries data={transformMultipleData(profitData)} />
|
|
</div>
|
|
|
|
<div className='grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8'>
|
|
{/* Daily Breakdown */}
|
|
<div className='bg-white rounded-lg shadow-md'>
|
|
<div className='p-6'>
|
|
<div className='flex items-center mb-6'>
|
|
<i className='tabler-calendar text-[24px] text-purple-500 mr-2'></i>
|
|
<h2 className='text-xl font-semibold text-gray-900'>Daily Breakdown</h2>
|
|
</div>
|
|
<div className='overflow-x-auto'>
|
|
<table className='min-w-full'>
|
|
<thead>
|
|
<tr className='bg-gray-50'>
|
|
<th className='px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase'>Date</th>
|
|
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Revenue</th>
|
|
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Cost</th>
|
|
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Profit</th>
|
|
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Margin</th>
|
|
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Orders</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className='bg-white divide-y divide-gray-200'>
|
|
{profitData.data.map((day, index) => (
|
|
<tr key={index} className='hover:bg-gray-50'>
|
|
<td className='px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900'>
|
|
{formatDate(day.date)}
|
|
</td>
|
|
<td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>
|
|
{formatCurrency(day.revenue)}
|
|
</td>
|
|
<td className='px-4 py-4 whitespace-nowrap text-right text-sm text-red-600'>
|
|
{formatCurrency(day.cost)}
|
|
</td>
|
|
<td
|
|
className={`px-4 py-4 whitespace-nowrap text-right text-sm font-medium ${
|
|
day.gross_profit >= 0 ? 'text-green-600' : 'text-red-600'
|
|
}`}
|
|
>
|
|
{formatCurrency(day.gross_profit)}
|
|
</td>
|
|
<td className='px-4 py-4 whitespace-nowrap text-right'>
|
|
<span
|
|
className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getProfitabilityColor(
|
|
day.gross_profit_margin
|
|
)}`}
|
|
>
|
|
{formatPercentage(day.gross_profit_margin)}
|
|
</span>
|
|
</td>
|
|
<td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>
|
|
{day.orders}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Top Performing Products */}
|
|
<div className='bg-white rounded-lg shadow-md'>
|
|
<div className='p-6'>
|
|
<div className='flex items-center mb-6'>
|
|
<i className='tabler-trophy text-[24px] text-gold-500 mr-2'></i>
|
|
<h2 className='text-xl font-semibold text-gray-900'>Top Performers</h2>
|
|
</div>
|
|
<div className='space-y-4'>
|
|
{profitData.product_data
|
|
.sort((a, b) => b.gross_profit - a.gross_profit)
|
|
.slice(0, 5)
|
|
.map((product, index) => (
|
|
<div
|
|
key={product.product_id}
|
|
className='flex items-center justify-between p-4 bg-gray-50 rounded-lg'
|
|
>
|
|
<div className='flex items-center'>
|
|
<span
|
|
className={`w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-bold mr-3 ${
|
|
index === 0
|
|
? 'bg-yellow-500'
|
|
: index === 1
|
|
? 'bg-gray-400'
|
|
: index === 2
|
|
? 'bg-orange-500'
|
|
: 'bg-blue-500'
|
|
}`}
|
|
>
|
|
{index + 1}
|
|
</span>
|
|
<div>
|
|
<h3 className='font-medium text-gray-900'>{product.product_name}</h3>
|
|
<p className='text-sm text-gray-600'>{product.category_name}</p>
|
|
</div>
|
|
</div>
|
|
<div className='text-right'>
|
|
<p className={`font-bold ${product.gross_profit >= 0 ? 'text-green-600' : 'text-red-600'}`}>
|
|
{formatCurrency(product.gross_profit)}
|
|
</p>
|
|
<p className='text-xs text-gray-500'>{formatPercentage(product.gross_profit_margin)}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Product Analysis Table */}
|
|
<div className='bg-white rounded-lg shadow-md'>
|
|
<div className='p-6'>
|
|
<div className='flex items-center mb-6'>
|
|
<i className='tabler-package text-[24px] text-green-500 mr-2'></i>
|
|
<h2 className='text-xl font-semibold text-gray-900'>Product Analysis</h2>
|
|
</div>
|
|
<div className='overflow-x-auto'>
|
|
<table className='min-w-full'>
|
|
<thead>
|
|
<tr className='bg-gray-50'>
|
|
<th className='px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase'>Product</th>
|
|
<th className='px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase'>Category</th>
|
|
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Qty</th>
|
|
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Revenue</th>
|
|
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Cost</th>
|
|
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Profit</th>
|
|
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Margin</th>
|
|
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Per Unit</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className='bg-white divide-y divide-gray-200'>
|
|
{profitData.product_data
|
|
.sort((a, b) => b.gross_profit - a.gross_profit)
|
|
.map(product => (
|
|
<tr key={product.product_id} className='hover:bg-gray-50'>
|
|
<td className='px-4 py-4 whitespace-nowrap'>
|
|
<div className='text-sm font-medium text-gray-900'>{product.product_name}</div>
|
|
</td>
|
|
<td className='px-4 py-4 whitespace-nowrap'>
|
|
<span className='inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800'>
|
|
{product.category_name}
|
|
</span>
|
|
</td>
|
|
<td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>
|
|
{product.quantity_sold}
|
|
</td>
|
|
<td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>
|
|
{formatCurrency(product.revenue)}
|
|
</td>
|
|
<td className='px-4 py-4 whitespace-nowrap text-right text-sm text-red-600'>
|
|
{formatCurrency(product.cost)}
|
|
</td>
|
|
<td
|
|
className={`px-4 py-4 whitespace-nowrap text-right text-sm font-medium ${
|
|
product.gross_profit >= 0 ? 'text-green-600' : 'text-red-600'
|
|
}`}
|
|
>
|
|
{formatCurrency(product.gross_profit)}
|
|
</td>
|
|
<td className='px-4 py-4 whitespace-nowrap text-right'>
|
|
<span
|
|
className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getProfitabilityColor(
|
|
product.gross_profit_margin
|
|
)}`}
|
|
>
|
|
{formatPercentage(product.gross_profit_margin)}
|
|
</span>
|
|
</td>
|
|
<td
|
|
className={`px-4 py-4 whitespace-nowrap text-right text-sm ${
|
|
product.profit_per_unit >= 0 ? 'text-green-600' : 'text-red-600'
|
|
}`}
|
|
>
|
|
{formatCurrency(product.profit_per_unit)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<Loading />
|
|
)}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default DashboardProfitloss
|