ferdiansyah/pos-dashboard-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update report

Browse Source
This commit is contained in:
efrilm 2025-10-04 17:17:50 +07:00
parent f1cf351ca4
commit d059f31eaa
2 changed files with 59 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
src/app/[lang]/(dashboard)/(private)/dashboards/daily-report/page.tsx
View File

@ -331,50 +331,54 @@ const DailyPOSReport = () => {
{/* Performance Summary */} {/* Performance Summary */}
<div className='p-8'> <div className='p-8'>
<h3 className='text-xl font-bold mb-6' style={{ color: '#36175e' }}> <h3 className='text-2xl font-bold mb-6' style={{ color: '#36175e' }}>
Ringkasan Ringkasan
</h3> </h3>
<div className='space-y-4'> <div className='space-y-4'>
<div className='flex justify-between items-center py-2 border-b border-gray-200'> <div className='flex justify-between items-center py-2 border-b border-gray-200'>
<span className='text-gray-700'>Total Penjualan</span> <span className='text-lg text-gray-700'>Total Penjualan</span>
<span className='font-semibold text-gray-800'> <span className='text-lg font-semibold text-gray-800'>
{formatCurrency(profitLoss?.summary.total_revenue ?? 0)} {formatCurrency(profitLoss?.summary.total_revenue ?? 0)}
</span> </span>
</div> </div>
<div className='flex justify-between items-center py-2 border-b border-gray-200'> <div className='flex justify-between items-center py-2 border-b border-gray-200'>
<span className='text-gray-700'>Total Diskon</span> <span className='text-lg text-gray-700'>Total Diskon</span>
<span className='font-semibold text-gray-800'> <span className='text-lg font-semibold text-gray-800'>
{formatCurrency(profitLoss?.summary.total_discount ?? 0)} {formatCurrency(profitLoss?.summary.total_discount ?? 0)}
</span> </span>
</div> </div>
<div className='flex justify-between items-center py-2 border-b border-gray-200'> <div className='flex justify-between items-center py-2 border-b border-gray-200'>
<span className='text-gray-700'>Total Pajak</span> <span className='text-lg text-gray-700'>Total Pajak</span>
<span className='font-semibold text-gray-800'>{formatCurrency(profitLoss?.summary.total_tax ?? 0)}</span> <span className='text-lg font-semibold text-gray-800'>
{formatCurrency(profitLoss?.summary.total_tax ?? 0)}
</span>
</div> </div>
<div className='flex justify-between items-center py-2 border-b border-gray-200'> <div className='flex justify-between items-center py-2 border-b border-gray-200'>
<span className='text-gray-700 font-bold'>Total</span> <span className='text-lg text-gray-700 font-bold'>Total</span>
<span className='font-bold text-gray-800'>{formatCurrency(profitLoss?.summary.total_revenue ?? 0)}</span> <span className='text-lg font-bold text-gray-800'>
{formatCurrency(profitLoss?.summary.total_revenue ?? 0)}
</span>
</div> </div>
</div> </div>
</div> </div>
<div className='px-8 pb-8'> <div className='px-8 pb-8'>
<h3 className='text-xl font-bold mb-6' style={{ color: '#36175e' }}> <h3 className='text-2xl font-bold mb-6' style={{ color: '#36175e' }}>
Invoice Invoice
</h3> </h3>
<div className='space-y-4'> <div className='space-y-4'>
<div className='flex justify-between items-center py-2 border-b border-gray-200'> <div className='flex justify-between items-center py-2 border-b border-gray-200'>
<span className='text-gray-700'>Total Invoice</span> <span className='text-lg text-gray-700'>Total Invoice</span>
<span className='font-semibold text-gray-800'>{profitLoss?.summary.total_orders ?? 0}</span> <span className='text-lg font-semibold text-gray-800'>{profitLoss?.summary.total_orders ?? 0}</span>
</div> </div>
</div> </div>
</div> </div>
{/* Payment Method Summary */} {/* Payment Method Summary */}
<div className='px-8 pb-8'> <div className='px-8 pb-8'>
<h3 className='text-xl font-bold mb-6' style={{ color: '#36175e' }}> <h3 className='text-2xl font-bold mb-6' style={{ color: '#36175e' }}>
Ringkasan Metode Pembayaran Ringkasan Metode Pembayaran
</h3> </h3>
@ -382,20 +386,20 @@ const DailyPOSReport = () => {
<table className='w-full'> <table className='w-full'>
<thead> <thead>
<tr className='text-gray-800 border-b-2 border-gray-300'> <tr className='text-gray-800 border-b-2 border-gray-300'>
<th className='text-left p-3 font-semibold'>Metode Pembayaran</th> <th className='text-left text-lg p-3 font-semibold'>Metode Pembayaran</th>
<th className='text-center p-3 font-semibold'>Tipe</th> <th className='text-center text-lg p-3 font-semibold'>Tipe</th>
<th className='text-center p-3 font-semibold'>Jumlah Order</th> <th className='text-center text-lg p-3 font-semibold'>Jumlah Order</th>
<th className='text-right p-3 font-semibold'>Total Amount</th> <th className='text-right text-lg p-3 font-semibold'>Total Amount</th>
<th className='text-center p-3 font-semibold'>Persentase</th> <th className='text-center text-lg p-3 font-semibold'>Persentase</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{paymentAnalytics?.data?.map((payment, index) => ( {paymentAnalytics?.data?.map((payment, index) => (
<tr key={index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}> <tr key={index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
<td className='p-3 font-medium text-gray-800'>{payment.payment_method_name}</td> <td className='p-3 text-lg font-medium text-gray-800'>{payment.payment_method_name}</td>
<td className='p-3 text-center'> <td className='p-3 text-center'>
<span <span
className={`px-2 py-1 rounded-full text-xs font-medium ${ className={`px-2 py-1 rounded-full text-base font-medium ${
payment.payment_method_type === 'cash' payment.payment_method_type === 'cash'
? 'bg-green-100 text-green-800' ? 'bg-green-100 text-green-800'
: 'bg-blue-100 text-blue-800' : 'bg-blue-100 text-blue-800'
@ -404,11 +408,11 @@ const DailyPOSReport = () => {
{payment.payment_method_type.toUpperCase()} {payment.payment_method_type.toUpperCase()}
</span> </span>
</td> </td>
<td className='p-3 text-center text-gray-700'>{payment.order_count}</td> <td className='p-3 text-lg text-center text-gray-700'>{payment.order_count}</td>
<td className='p-3 text-right font-semibold text-gray-800'> <td className='p-3 text-lg text-right font-semibold text-gray-800'>
{formatCurrency(payment.total_amount)} {formatCurrency(payment.total_amount)}
</td> </td>
<td className='p-3 text-center font-medium' style={{ color: '#36175e' }}> <td className='p-3 text-lg text-center font-medium' style={{ color: '#36175e' }}>
{(payment.percentage ?? 0).toFixed(1)}% {(payment.percentage ?? 0).toFixed(1)}%
</td> </td>
</tr> </tr>
@ -416,10 +420,10 @@ const DailyPOSReport = () => {
</tbody> </tbody>
<tfoot> <tfoot>
<tr className='text-gray-800 border-t-2 border-gray-300'> <tr className='text-gray-800 border-t-2 border-gray-300'>
<td className='p-3 font-bold'>TOTAL</td> <td className='p-3 text-lg font-bold'>TOTAL</td>
<td className='p-3'></td> <td className='p-3'></td>
<td className='p-3 text-center font-bold'>{paymentAnalytics?.summary.total_orders ?? 0}</td> <td className='p-3 text-lg text-center font-bold'>{paymentAnalytics?.summary.total_orders ?? 0}</td>
<td className='p-3 text-right font-bold'> <td className='p-3 text-lg text-right font-bold'>
{formatCurrency(paymentAnalytics?.summary.total_amount ?? 0)} {formatCurrency(paymentAnalytics?.summary.total_amount ?? 0)}
</td> </td>
<td className='p-3 text-center font-bold'></td> <td className='p-3 text-center font-bold'></td>
@ -431,7 +435,7 @@ const DailyPOSReport = () => {
{/* Category Summary */} {/* Category Summary */}
<div className='px-8 pb-8'> <div className='px-8 pb-8'>
<h3 className='text-xl font-bold mb-6' style={{ color: '#36175e' }}> <h3 className='text-2xl font-bold mb-6' style={{ color: '#36175e' }}>
Ringkasan Kategori Ringkasan Kategori
</h3> </h3>
@ -439,17 +443,17 @@ const DailyPOSReport = () => {
<table className='w-full'> <table className='w-full'>
<thead> <thead>
<tr className='text-gray-800 border-b-2 border-gray-300'> <tr className='text-gray-800 border-b-2 border-gray-300'>
<th className='text-left p-3 font-semibold'>Nama</th> <th className='text-left text-lg p-3 font-semibold'>Nama</th>
<th className='text-center p-3 font-semibold'>Qty</th> <th className='text-center text-lg p-3 font-semibold'>Qty</th>
<th className='text-right p-3 font-semibold'>Pendapatan</th> <th className='text-right text-lg p-3 font-semibold'>Pendapatan</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{category?.data?.map((c, index) => ( {category?.data?.map((c, index) => (
<tr key={index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}> <tr key={index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
<td className='p-3 font-medium text-gray-800'>{c.category_name}</td> <td className='p-3 text-lg font-medium text-gray-800'>{c.category_name}</td>
<td className='p-3 text-center text-gray-700'>{c.total_quantity}</td> <td className='p-3 text-lg text-center text-gray-700'>{c.total_quantity}</td>
<td className='p-3 text-right font-semibold' style={{ color: '#36175e' }}> <td className='p-3 text-lg text-right font-semibold' style={{ color: '#36175e' }}>
{formatCurrency(c.total_revenue)} {formatCurrency(c.total_revenue)}
</td> </td>
</tr> </tr>
@ -457,9 +461,11 @@ const DailyPOSReport = () => {
</tbody> </tbody>
<tfoot> <tfoot>
<tr className='text-gray-800 border-t-2 border-gray-300'> <tr className='text-gray-800 border-t-2 border-gray-300'>
<td className='p-3 font-bold'>TOTAL</td> <td className='p-3 text-lg font-bold'>TOTAL</td>
<td className='p-3 text-center font-bold'>{categorySummary?.totalQuantity ?? 0}</td> <td className='p-3 text-lg text-center font-bold'>{categorySummary?.totalQuantity ?? 0}</td>
<td className='p-3 text-right font-bold'>{formatCurrency(categorySummary?.totalRevenue ?? 0)}</td> <td className='p-3 text-lg text-right font-bold'>
{formatCurrency(categorySummary?.totalRevenue ?? 0)}
</td>
</tr> </tr>
</tfoot> </tfoot>
</table> </table>
@ -468,7 +474,7 @@ const DailyPOSReport = () => {
{/* Transaction Summary */} {/* Transaction Summary */}
<div className='px-8 pb-8'> <div className='px-8 pb-8'>
<h3 className='text-xl font-bold mb-6' style={{ color: '#36175e' }}> <h3 className='text-2xl font-bold mb-6' style={{ color: '#36175e' }}>
Ringkasan Item Ringkasan Item
</h3> </h3>
@ -482,9 +488,9 @@ const DailyPOSReport = () => {
</colgroup> </colgroup>
<thead> <thead>
<tr className='text-gray-800 border-b-2 border-gray-300'> <tr className='text-gray-800 border-b-2 border-gray-300'>
<th className='text-left p-3 font-semibold border-r border-gray-300'>Produk</th> <th className='text-left text-lg p-3 font-semibold border-r border-gray-300'>Produk</th>
<th className='text-center p-3 font-semibold border-r border-gray-300'>Qty</th> <th className='text-center text-lg p-3 font-semibold border-r border-gray-300'>Qty</th>
<th className='text-right p-3 font-semibold'>Pendapatan</th> <th className='text-right text-lg p-3 font-semibold'>Pendapatan</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -520,7 +526,7 @@ const DailyPOSReport = () => {
style={{ pageBreakInside: 'avoid' }} style={{ pageBreakInside: 'avoid' }}
> >
<td <td
className='p-3 font-bold text-gray-900 border-r border-gray-300' className='p-3 text-lg font-bold text-gray-900 border-r border-gray-300'
style={{ color: '#36175e' }} style={{ color: '#36175e' }}
> >
{categoryName.toUpperCase()} {categoryName.toUpperCase()}
@ -540,15 +546,15 @@ const DailyPOSReport = () => {
style={{ pageBreakInside: 'avoid' }} style={{ pageBreakInside: 'avoid' }}
> >
<td <td
className='p-3 pl-6 font-medium text-gray-800 border-r border-gray-200' className='p-3 text-lg pl-6 font-medium text-gray-800 border-r border-gray-200'
style={{ wordWrap: 'break-word' }} style={{ wordWrap: 'break-word' }}
> >
{item.product_name} {item.product_name}
</td> </td>
<td className='p-3 text-center text-gray-700 border-r border-gray-200'> <td className='p-3 text-lg text-center text-gray-700 border-r border-gray-200'>
{item.quantity_sold} {item.quantity_sold}
</td> </td>
<td className='p-3 text-right font-semibold text-gray-800'> <td className='p-3 text-lg text-right font-semibold text-gray-800'>
{formatCurrency(item.revenue)} {formatCurrency(item.revenue)}
</td> </td>
</tr> </tr>
@ -571,13 +577,13 @@ const DailyPOSReport = () => {
className='bg-gray-200 border-b-2 border-gray-400' className='bg-gray-200 border-b-2 border-gray-400'
style={{ pageBreakInside: 'avoid' }} style={{ pageBreakInside: 'avoid' }}
> >
<td className='p-3 pl-6 font-semibold text-gray-800 border-r border-gray-400'> <td className='p-3 text-lg pl-6 font-semibold text-gray-800 border-r border-gray-400'>
Subtotal {categoryName} Subtotal {categoryName}
</td> </td>
<td className='p-3 text-center font-semibold text-gray-800 border-r border-gray-400'> <td className='p-3 text-lg text-center font-semibold text-gray-800 border-r border-gray-400'>
{categoryTotalQty} {categoryTotalQty}
</td> </td>
<td className='p-3 text-right font-semibold text-gray-800'> <td className='p-3 text-lg text-right font-semibold text-gray-800'>
{formatCurrency(categoryTotalRevenue)} {formatCurrency(categoryTotalRevenue)}
</td> </td>
</tr> </tr>
@ -589,11 +595,11 @@ const DailyPOSReport = () => {
</tbody> </tbody>
<tfoot> <tfoot>
<tr className='text-gray-800 border-t-2 border-gray-300' style={{ pageBreakInside: 'avoid' }}> <tr className='text-gray-800 border-t-2 border-gray-300' style={{ pageBreakInside: 'avoid' }}>
<td className='p-3 font-bold border-r border-gray-300'>TOTAL KESELURUHAN</td> <td className='p-3 text-lg font-bold border-r border-gray-300'>TOTAL KESELURUHAN</td>
<td className='p-3 text-center font-bold border-r border-gray-300'> <td className='p-3 text-lg text-center font-bold border-r border-gray-300'>
{productSummary.totalQuantitySold ?? 0} {productSummary.totalQuantitySold ?? 0}
</td> </td>
<td className='p-3 text-right font-bold'> <td className='p-3 text-lg text-right font-bold'>
{formatCurrency(productSummary.totalRevenue ?? 0)} {formatCurrency(productSummary.totalRevenue ?? 0)}
</td> </td>
</tr> </tr>

6
src/views/dashboards/daily-report/report-header.tsx
View File

@ -38,8 +38,8 @@ const ReportHeader: FC<ReportHeaderProps> = ({
<Box sx={{ p: theme.spacing(8, 8, 6) }}> <Box sx={{ p: theme.spacing(8, 8, 6) }}>
<Box sx={{ textAlign: 'center' }}> <Box sx={{ textAlign: 'center' }}>
<Typography <Typography
variant='h4' variant='h3'
component='h3' component='h2'
sx={{ sx={{
fontWeight: 700, fontWeight: 700,
color: '#222222' color: '#222222'
@ -49,7 +49,7 @@ const ReportHeader: FC<ReportHeaderProps> = ({
</Typography> </Typography>
{periode && ( {periode && (
<Typography <Typography
variant='body2' variant='body1'
sx={{ sx={{
color: '#222222', color: '#222222',
mt: 2 mt: 2