update report
This commit is contained in:
efrilm
parent
f1cf351ca4
commit
d059f31eaa
@ -331,50 +331,54 @@ const DailyPOSReport = () => {
|
||||
|
||||
{/* Performance Summary */}
|
||||
<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
|
||||
</h3>
|
||||
|
||||
<div className='space-y-4'>
|
||||
<div className='flex justify-between items-center py-2 border-b border-gray-200'>
|
||||
<span className='text-gray-700'>Total Penjualan</span>
|
||||
<span className='font-semibold text-gray-800'>
|
||||
<span className='text-lg text-gray-700'>Total Penjualan</span>
|
||||
<span className='text-lg font-semibold text-gray-800'>
|
||||
{formatCurrency(profitLoss?.summary.total_revenue ?? 0)}
|
||||
</span>
|
||||
</div>
|
||||
<div className='flex justify-between items-center py-2 border-b border-gray-200'>
|
||||
<span className='text-gray-700'>Total Diskon</span>
|
||||
<span className='font-semibold text-gray-800'>
|
||||
<span className='text-lg text-gray-700'>Total Diskon</span>
|
||||
<span className='text-lg font-semibold text-gray-800'>
|
||||
{formatCurrency(profitLoss?.summary.total_discount ?? 0)}
|
||||
</span>
|
||||
</div>
|
||||
<div className='flex justify-between items-center py-2 border-b border-gray-200'>
|
||||
<span className='text-gray-700'>Total Pajak</span>
|
||||
<span className='font-semibold text-gray-800'>{formatCurrency(profitLoss?.summary.total_tax ?? 0)}</span>
|
||||
<span className='text-lg text-gray-700'>Total Pajak</span>
|
||||
<span className='text-lg font-semibold text-gray-800'>
|
||||
{formatCurrency(profitLoss?.summary.total_tax ?? 0)}
|
||||
</span>
|
||||
</div>
|
||||
<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='font-bold text-gray-800'>{formatCurrency(profitLoss?.summary.total_revenue ?? 0)}</span>
|
||||
<span className='text-lg text-gray-700 font-bold'>Total</span>
|
||||
<span className='text-lg font-bold text-gray-800'>
|
||||
{formatCurrency(profitLoss?.summary.total_revenue ?? 0)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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
|
||||
</h3>
|
||||
|
||||
<div className='space-y-4'>
|
||||
<div className='flex justify-between items-center py-2 border-b border-gray-200'>
|
||||
<span className='text-gray-700'>Total Invoice</span>
|
||||
<span className='font-semibold text-gray-800'>{profitLoss?.summary.total_orders ?? 0}</span>
|
||||
<span className='text-lg text-gray-700'>Total Invoice</span>
|
||||
<span className='text-lg font-semibold text-gray-800'>{profitLoss?.summary.total_orders ?? 0}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Payment Method Summary */}
|
||||
<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
|
||||
</h3>
|
||||
|
||||
@ -382,20 +386,20 @@ const DailyPOSReport = () => {
|
||||
<table className='w-full'>
|
||||
<thead>
|
||||
<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-center p-3 font-semibold'>Tipe</th>
|
||||
<th className='text-center p-3 font-semibold'>Jumlah Order</th>
|
||||
<th className='text-right p-3 font-semibold'>Total Amount</th>
|
||||
<th className='text-center p-3 font-semibold'>Persentase</th>
|
||||
<th className='text-left text-lg p-3 font-semibold'>Metode Pembayaran</th>
|
||||
<th className='text-center text-lg p-3 font-semibold'>Tipe</th>
|
||||
<th className='text-center text-lg p-3 font-semibold'>Jumlah Order</th>
|
||||
<th className='text-right text-lg p-3 font-semibold'>Total Amount</th>
|
||||
<th className='text-center text-lg p-3 font-semibold'>Persentase</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{paymentAnalytics?.data?.map((payment, index) => (
|
||||
<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'>
|
||||
<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'
|
||||
? 'bg-green-100 text-green-800'
|
||||
: 'bg-blue-100 text-blue-800'
|
||||
@ -404,11 +408,11 @@ const DailyPOSReport = () => {
|
||||
{payment.payment_method_type.toUpperCase()}
|
||||
</span>
|
||||
</td>
|
||||
<td className='p-3 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-center text-gray-700'>{payment.order_count}</td>
|
||||
<td className='p-3 text-lg text-right font-semibold text-gray-800'>
|
||||
{formatCurrency(payment.total_amount)}
|
||||
</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)}%
|
||||
</td>
|
||||
</tr>
|
||||
@ -416,10 +420,10 @@ const DailyPOSReport = () => {
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<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 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-center font-bold'>{paymentAnalytics?.summary.total_orders ?? 0}</td>
|
||||
<td className='p-3 text-lg text-right font-bold'>
|
||||
{formatCurrency(paymentAnalytics?.summary.total_amount ?? 0)}
|
||||
</td>
|
||||
<td className='p-3 text-center font-bold'></td>
|
||||
@ -431,7 +435,7 @@ const DailyPOSReport = () => {
|
||||
|
||||
{/* Category Summary */}
|
||||
<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
|
||||
</h3>
|
||||
|
||||
@ -439,17 +443,17 @@ const DailyPOSReport = () => {
|
||||
<table className='w-full'>
|
||||
<thead>
|
||||
<tr className='text-gray-800 border-b-2 border-gray-300'>
|
||||
<th className='text-left p-3 font-semibold'>Nama</th>
|
||||
<th className='text-center p-3 font-semibold'>Qty</th>
|
||||
<th className='text-right p-3 font-semibold'>Pendapatan</th>
|
||||
<th className='text-left text-lg p-3 font-semibold'>Nama</th>
|
||||
<th className='text-center text-lg p-3 font-semibold'>Qty</th>
|
||||
<th className='text-right text-lg p-3 font-semibold'>Pendapatan</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{category?.data?.map((c, index) => (
|
||||
<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-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 font-medium text-gray-800'>{c.category_name}</td>
|
||||
<td className='p-3 text-lg text-center text-gray-700'>{c.total_quantity}</td>
|
||||
<td className='p-3 text-lg text-right font-semibold' style={{ color: '#36175e' }}>
|
||||
{formatCurrency(c.total_revenue)}
|
||||
</td>
|
||||
</tr>
|
||||
@ -457,9 +461,11 @@ const DailyPOSReport = () => {
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr className='text-gray-800 border-t-2 border-gray-300'>
|
||||
<td className='p-3 font-bold'>TOTAL</td>
|
||||
<td className='p-3 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 font-bold'>TOTAL</td>
|
||||
<td className='p-3 text-lg text-center font-bold'>{categorySummary?.totalQuantity ?? 0}</td>
|
||||
<td className='p-3 text-lg text-right font-bold'>
|
||||
{formatCurrency(categorySummary?.totalRevenue ?? 0)}
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
@ -468,7 +474,7 @@ const DailyPOSReport = () => {
|
||||
|
||||
{/* Transaction Summary */}
|
||||
<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
|
||||
</h3>
|
||||
|
||||
@ -482,9 +488,9 @@ const DailyPOSReport = () => {
|
||||
</colgroup>
|
||||
<thead>
|
||||
<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-center p-3 font-semibold border-r border-gray-300'>Qty</th>
|
||||
<th className='text-right p-3 font-semibold'>Pendapatan</th>
|
||||
<th className='text-left text-lg p-3 font-semibold border-r border-gray-300'>Produk</th>
|
||||
<th className='text-center text-lg p-3 font-semibold border-r border-gray-300'>Qty</th>
|
||||
<th className='text-right text-lg p-3 font-semibold'>Pendapatan</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -520,7 +526,7 @@ const DailyPOSReport = () => {
|
||||
style={{ pageBreakInside: 'avoid' }}
|
||||
>
|
||||
<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' }}
|
||||
>
|
||||
{categoryName.toUpperCase()}
|
||||
@ -540,15 +546,15 @@ const DailyPOSReport = () => {
|
||||
style={{ pageBreakInside: 'avoid' }}
|
||||
>
|
||||
<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' }}
|
||||
>
|
||||
{item.product_name}
|
||||
</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}
|
||||
</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)}
|
||||
</td>
|
||||
</tr>
|
||||
@ -571,13 +577,13 @@ const DailyPOSReport = () => {
|
||||
className='bg-gray-200 border-b-2 border-gray-400'
|
||||
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}
|
||||
</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}
|
||||
</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)}
|
||||
</td>
|
||||
</tr>
|
||||
@ -589,11 +595,11 @@ const DailyPOSReport = () => {
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<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-center font-bold border-r border-gray-300'>
|
||||
<td className='p-3 text-lg font-bold border-r border-gray-300'>TOTAL KESELURUHAN</td>
|
||||
<td className='p-3 text-lg text-center font-bold border-r border-gray-300'>
|
||||
{productSummary.totalQuantitySold ?? 0}
|
||||
</td>
|
||||
<td className='p-3 text-right font-bold'>
|
||||
<td className='p-3 text-lg text-right font-bold'>
|
||||
{formatCurrency(productSummary.totalRevenue ?? 0)}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@ -38,8 +38,8 @@ const ReportHeader: FC<ReportHeaderProps> = ({
|
||||
<Box sx={{ p: theme.spacing(8, 8, 6) }}>
|
||||
<Box sx={{ textAlign: 'center' }}>
|
||||
<Typography
|
||||
variant='h4'
|
||||
component='h3'
|
||||
variant='h3'
|
||||
component='h2'
|
||||
sx={{
|
||||
fontWeight: 700,
|
||||
color: '#222222'
|
||||
@ -49,7 +49,7 @@ const ReportHeader: FC<ReportHeaderProps> = ({
|
||||
</Typography>
|
||||
{periode && (
|
||||
<Typography
|
||||
variant='body2'
|
||||
variant='body1'
|
||||
sx={{
|
||||
color: '#222222',
|
||||
mt: 2
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user