764 lines
29 KiB
TypeScript
764 lines
29 KiB
TypeScript
'use client'
|
|
|
|
import {
|
|
useProductSalesAnalytics,
|
|
useProfitLossAnalytics,
|
|
useSalesAnalytics,
|
|
usePaymentAnalytics,
|
|
useCategoryAnalytics
|
|
} from '@/services/queries/analytics'
|
|
import { useOutletById } from '@/services/queries/outlets'
|
|
import { formatCurrency, formatDate, formatDateDDMMYYYY, formatDatetime } from '@/utils/transform'
|
|
import ReportGeneratorComponent from '@/views/dashboards/daily-report/report-generator'
|
|
import ReportHeader from '@/views/dashboards/daily-report/report-header'
|
|
import React, { useEffect, useRef, useState } from 'react'
|
|
|
|
const DailyPOSReport = () => {
|
|
const reportRef = useRef<HTMLDivElement | null>(null)
|
|
|
|
const [now, setNow] = useState(new Date())
|
|
const [selectedDate, setSelectedDate] = useState(new Date())
|
|
const [dateRange, setDateRange] = useState({
|
|
startDate: new Date(),
|
|
endDate: new Date()
|
|
})
|
|
const [filterType, setFilterType] = useState<'single' | 'range'>('single')
|
|
const [isGeneratingPDF, setIsGeneratingPDF] = useState(false)
|
|
|
|
// PDF Font Size Configuration
|
|
const PDF_FONT_SIZES = {
|
|
heading: 20,
|
|
subheading: 20,
|
|
tableContent: 14,
|
|
tableHeader: 14,
|
|
tableFooter: 14,
|
|
grandTotal: 18,
|
|
footer: 11
|
|
}
|
|
|
|
// PDF Spacing Configuration
|
|
const PDF_SPACING = {
|
|
cellPadding: 5,
|
|
cellPaddingLarge: 6,
|
|
sectionGap: 20,
|
|
headerGap: 15
|
|
}
|
|
|
|
const getDateParams = () => {
|
|
if (filterType === 'single') {
|
|
return {
|
|
date_from: formatDateDDMMYYYY(selectedDate),
|
|
date_to: formatDateDDMMYYYY(selectedDate)
|
|
}
|
|
} else {
|
|
return {
|
|
date_from: formatDateDDMMYYYY(dateRange.startDate),
|
|
date_to: formatDateDDMMYYYY(dateRange.endDate)
|
|
}
|
|
}
|
|
}
|
|
|
|
const dateParams = getDateParams()
|
|
|
|
const { data: outlet } = useOutletById()
|
|
const { data: sales } = useSalesAnalytics(dateParams)
|
|
const { data: profitLoss } = useProfitLossAnalytics(dateParams)
|
|
const { data: products } = useProductSalesAnalytics(dateParams)
|
|
const { data: paymentAnalytics } = usePaymentAnalytics(dateParams)
|
|
const { data: category } = useCategoryAnalytics(dateParams)
|
|
|
|
const productSummary = {
|
|
totalQuantitySold: products?.data?.reduce((sum, item) => sum + (item?.quantity_sold || 0), 0) || 0,
|
|
totalRevenue: products?.data?.reduce((sum, item) => sum + (item?.revenue || 0), 0) || 0,
|
|
totalOrders: products?.data?.reduce((sum, item) => sum + (item?.order_count || 0), 0) || 0
|
|
}
|
|
|
|
const categorySummary = {
|
|
totalRevenue: category?.data?.reduce((sum, item) => sum + (item?.total_revenue || 0), 0) || 0,
|
|
orderCount: category?.data?.reduce((sum, item) => sum + (item?.order_count || 0), 0) || 0,
|
|
productCount: category?.data?.reduce((sum, item) => sum + (item?.product_count || 0), 0) || 0,
|
|
totalQuantity: category?.data?.reduce((sum, item) => sum + (item?.total_quantity || 0), 0) || 0
|
|
}
|
|
|
|
useEffect(() => {
|
|
setNow(new Date())
|
|
}, [])
|
|
|
|
const formatDateForInput = (date: Date) => {
|
|
return date.toISOString().split('T')[0]
|
|
}
|
|
|
|
const getReportPeriodText = () => {
|
|
if (filterType === 'single') {
|
|
return `${formatDateDDMMYYYY(selectedDate)} - ${formatDateDDMMYYYY(selectedDate)}`
|
|
} else {
|
|
return `${formatDateDDMMYYYY(dateRange.startDate)} - ${formatDateDDMMYYYY(dateRange.endDate)}`
|
|
}
|
|
}
|
|
|
|
const getReportTitle = () => {
|
|
if (filterType === 'single') {
|
|
return 'Laporan Transaksi'
|
|
} else {
|
|
return `Laporan Transaksi`
|
|
}
|
|
}
|
|
|
|
const handleGeneratePDF = async () => {
|
|
const reportElement = reportRef.current
|
|
|
|
if (!reportElement) {
|
|
alert('Report element tidak ditemukan')
|
|
return
|
|
}
|
|
|
|
setIsGeneratingPDF(true)
|
|
|
|
try {
|
|
const jsPDF = (await import('jspdf')).default
|
|
const html2canvas = (await import('html2canvas')).default
|
|
const autoTable = (await import('jspdf-autotable')).default
|
|
|
|
const pdf = new jsPDF({
|
|
orientation: 'portrait',
|
|
unit: 'mm',
|
|
format: 'a4',
|
|
compress: true
|
|
})
|
|
|
|
// Capture header section only (tanpa tabel kategori)
|
|
const headerElement = reportElement.querySelector('.report-header-section') as HTMLElement
|
|
if (headerElement) {
|
|
const headerCanvas = await html2canvas(headerElement, {
|
|
scale: 2,
|
|
useCORS: true,
|
|
backgroundColor: '#ffffff',
|
|
logging: false,
|
|
windowWidth: 794
|
|
})
|
|
|
|
const headerImgWidth = 190
|
|
const headerImgHeight = (headerCanvas.height * headerImgWidth) / headerCanvas.width
|
|
const headerImgData = headerCanvas.toDataURL('image/jpeg', 0.95)
|
|
|
|
pdf.addImage(headerImgData, 'JPEG', 10, 10, headerImgWidth, headerImgHeight)
|
|
}
|
|
|
|
let currentY = 80 // Start position after header
|
|
|
|
// Add summary sections with autoTable
|
|
pdf.setFontSize(PDF_FONT_SIZES.heading)
|
|
pdf.setTextColor(54, 23, 94)
|
|
pdf.setFont('helvetica', 'bold')
|
|
pdf.text('Ringkasan', 14, currentY)
|
|
currentY += 15
|
|
|
|
// Summary table
|
|
autoTable(pdf, {
|
|
startY: currentY,
|
|
head: [],
|
|
body: [
|
|
['Total Penjualan', formatCurrency(profitLoss?.summary.total_revenue ?? 0)],
|
|
['Total Diskon', formatCurrency(profitLoss?.summary.total_discount ?? 0)],
|
|
['Total Pajak', formatCurrency(profitLoss?.summary.total_tax ?? 0)],
|
|
['Total', formatCurrency(profitLoss?.summary.total_revenue ?? 0)]
|
|
],
|
|
theme: 'plain',
|
|
styles: { fontSize: PDF_FONT_SIZES.tableContent, cellPadding: PDF_SPACING.cellPadding },
|
|
columnStyles: {
|
|
0: { fontStyle: 'normal', textColor: [60, 60, 60] },
|
|
1: { halign: 'right', fontStyle: 'bold', textColor: [60, 60, 60] }
|
|
},
|
|
margin: { left: 14, right: 14 }
|
|
})
|
|
|
|
currentY = (pdf as any).lastAutoTable.finalY + 20
|
|
|
|
// Invoice section
|
|
pdf.setFontSize(PDF_FONT_SIZES.heading)
|
|
pdf.text('Invoice', 14, currentY)
|
|
currentY += 15
|
|
|
|
autoTable(pdf, {
|
|
startY: currentY,
|
|
head: [],
|
|
body: [['Total Invoice', String(profitLoss?.summary.total_orders ?? 0)]],
|
|
theme: 'plain',
|
|
styles: { fontSize: PDF_FONT_SIZES.tableContent, cellPadding: PDF_SPACING.cellPadding },
|
|
columnStyles: {
|
|
0: { fontStyle: 'normal', textColor: [60, 60, 60] },
|
|
1: { halign: 'right', fontStyle: 'bold', textColor: [60, 60, 60] }
|
|
},
|
|
margin: { left: 14, right: 14 }
|
|
})
|
|
|
|
pdf.addPage()
|
|
currentY = 20
|
|
// Payment Method Summary
|
|
pdf.setFontSize(PDF_FONT_SIZES.heading)
|
|
pdf.text('Ringkasan Metode Pembayaran', 14, currentY)
|
|
currentY += 15
|
|
|
|
const paymentBody =
|
|
paymentAnalytics?.data?.map(payment => [
|
|
payment.payment_method_name,
|
|
payment.payment_method_type.toUpperCase(),
|
|
String(payment.order_count),
|
|
formatCurrency(payment.total_amount),
|
|
`${(payment.percentage ?? 0).toFixed(1)}%`
|
|
]) || []
|
|
|
|
autoTable(pdf, {
|
|
startY: currentY,
|
|
head: [['Metode Pembayaran', 'Tipe', 'Jumlah Order', 'Total Amount', 'Persentase']],
|
|
body: paymentBody,
|
|
foot: [
|
|
[
|
|
'TOTAL',
|
|
'',
|
|
String(paymentAnalytics?.summary.total_orders ?? 0),
|
|
formatCurrency(paymentAnalytics?.summary.total_amount ?? 0),
|
|
''
|
|
]
|
|
],
|
|
theme: 'striped',
|
|
styles: { fontSize: PDF_FONT_SIZES.tableContent, cellPadding: PDF_SPACING.cellPadding },
|
|
headStyles: {
|
|
fillColor: [54, 23, 94],
|
|
textColor: 255,
|
|
fontStyle: 'bold',
|
|
fontSize: PDF_FONT_SIZES.tableHeader
|
|
},
|
|
footStyles: {
|
|
fillColor: [220, 220, 220],
|
|
textColor: [60, 60, 60],
|
|
fontStyle: 'bold',
|
|
fontSize: PDF_FONT_SIZES.tableFooter
|
|
},
|
|
columnStyles: {
|
|
1: { halign: 'center' },
|
|
2: { halign: 'center' },
|
|
3: { halign: 'right' },
|
|
4: { halign: 'center' }
|
|
},
|
|
margin: { left: 14, right: 14 }
|
|
})
|
|
|
|
currentY = (pdf as any).lastAutoTable.finalY + 20
|
|
|
|
// Category Summary
|
|
pdf.setFontSize(PDF_FONT_SIZES.heading)
|
|
pdf.text('Ringkasan Kategori', 14, currentY)
|
|
currentY += 15
|
|
|
|
const categoryBody =
|
|
category?.data?.map(c => [c.category_name, String(c.total_quantity), formatCurrency(c.total_revenue)]) || []
|
|
|
|
autoTable(pdf, {
|
|
startY: currentY,
|
|
head: [['Nama', 'Qty', 'Pendapatan']],
|
|
body: categoryBody,
|
|
foot: [
|
|
['TOTAL', String(categorySummary?.totalQuantity ?? 0), formatCurrency(categorySummary?.totalRevenue ?? 0)]
|
|
],
|
|
theme: 'striped',
|
|
styles: { fontSize: PDF_FONT_SIZES.tableContent, cellPadding: PDF_SPACING.cellPadding },
|
|
headStyles: {
|
|
fillColor: [54, 23, 94],
|
|
textColor: 255,
|
|
fontStyle: 'bold',
|
|
fontSize: PDF_FONT_SIZES.tableHeader
|
|
},
|
|
footStyles: {
|
|
fillColor: [220, 220, 220],
|
|
textColor: [60, 60, 60],
|
|
fontStyle: 'bold',
|
|
fontSize: PDF_FONT_SIZES.tableFooter
|
|
},
|
|
columnStyles: {
|
|
1: { halign: 'center' },
|
|
2: { halign: 'right' }
|
|
},
|
|
margin: { left: 14, right: 14 }
|
|
})
|
|
|
|
// Group products by category
|
|
const groupedProducts =
|
|
products?.data?.reduce(
|
|
(acc, item) => {
|
|
const categoryName = item.category_name || 'Tidak Berkategori'
|
|
if (!acc[categoryName]) {
|
|
acc[categoryName] = []
|
|
}
|
|
acc[categoryName].push(item)
|
|
return acc
|
|
},
|
|
{} as Record<string, any[]>
|
|
) || {}
|
|
|
|
// Add new page for product details
|
|
pdf.addPage()
|
|
currentY = 20
|
|
|
|
pdf.setFontSize(PDF_FONT_SIZES.heading)
|
|
pdf.text('Ringkasan Item Per Kategori', 14, currentY)
|
|
currentY += 10
|
|
|
|
// Loop through each category
|
|
Object.keys(groupedProducts)
|
|
.sort((a, b) => {
|
|
const productsA = groupedProducts[a]
|
|
const productsB = groupedProducts[b]
|
|
const orderA = productsA[0]?.category_order ?? 999
|
|
const orderB = productsB[0]?.category_order ?? 999
|
|
return orderA - orderB
|
|
})
|
|
.forEach(categoryName => {
|
|
const categoryProducts = groupedProducts[categoryName].sort((a, b) => {
|
|
// Sort by product_sku ASC
|
|
const skuA = a.product_sku || ''
|
|
const skuB = b.product_sku || ''
|
|
return skuA.localeCompare(skuB)
|
|
})
|
|
const categoryTotalQty = categoryProducts.reduce((sum, item) => sum + (item.quantity_sold || 0), 0)
|
|
const categoryTotalRevenue = categoryProducts.reduce((sum, item) => sum + (item.revenue || 0), 0)
|
|
|
|
const productBody = categoryProducts.map(item => [
|
|
item.product_name,
|
|
String(item.quantity_sold),
|
|
formatCurrency(item.revenue)
|
|
])
|
|
|
|
// Check if we need a new page
|
|
const estimatedHeight = (productBody.length + 3) * 12 // Adjusted for larger font
|
|
if (currentY + estimatedHeight > 270) {
|
|
pdf.addPage()
|
|
currentY = 20
|
|
}
|
|
|
|
// Category header
|
|
pdf.setFontSize(20)
|
|
pdf.setFont('helvetica', 'bold')
|
|
pdf.setTextColor(54, 23, 94)
|
|
pdf.text(categoryName.toUpperCase(), 16, currentY)
|
|
currentY += 15
|
|
|
|
// Category table
|
|
autoTable(pdf, {
|
|
startY: currentY,
|
|
head: [['Produk', 'Qty', 'Pendapatan']],
|
|
body: productBody,
|
|
foot: [[`Subtotal ${categoryName}`, String(categoryTotalQty), formatCurrency(categoryTotalRevenue)]],
|
|
theme: 'striped',
|
|
styles: { fontSize: PDF_FONT_SIZES.tableContent, cellPadding: PDF_SPACING.cellPadding },
|
|
headStyles: {
|
|
fillColor: [54, 23, 94],
|
|
textColor: 255,
|
|
fontStyle: 'bold',
|
|
fontSize: PDF_FONT_SIZES.tableHeader
|
|
},
|
|
footStyles: { fillColor: [200, 200, 200], textColor: [60, 60, 60], fontStyle: 'bold', fontSize: 20 },
|
|
columnStyles: {
|
|
0: { cellWidth: 90 },
|
|
1: { halign: 'center', cellWidth: 40 },
|
|
2: { halign: 'right', cellWidth: 52 }
|
|
},
|
|
margin: { left: 14, right: 14 }
|
|
})
|
|
|
|
currentY = (pdf as any).lastAutoTable.finalY + 15
|
|
})
|
|
|
|
// Grand Total
|
|
if (currentY > 250) {
|
|
pdf.addPage()
|
|
currentY = 20
|
|
}
|
|
|
|
autoTable(pdf, {
|
|
startY: currentY,
|
|
head: [],
|
|
body: [
|
|
['TOTAL KESELURUHAN', String(productSummary.totalQuantitySold), formatCurrency(productSummary.totalRevenue)]
|
|
],
|
|
theme: 'plain',
|
|
styles: { fontSize: PDF_FONT_SIZES.grandTotal, cellPadding: 6, fontStyle: 'bold', textColor: [54, 23, 94] },
|
|
columnStyles: {
|
|
0: { cellWidth: 90 },
|
|
1: { halign: 'center', cellWidth: 40 },
|
|
2: { halign: 'right', cellWidth: 52 }
|
|
},
|
|
margin: { left: 14, right: 14 },
|
|
didDrawCell: data => {
|
|
pdf.setDrawColor(54, 23, 94)
|
|
pdf.setLineWidth(0.5)
|
|
}
|
|
})
|
|
|
|
// Footer
|
|
const pageCount = pdf.getNumberOfPages()
|
|
for (let i = 1; i <= pageCount; i++) {
|
|
pdf.setPage(i)
|
|
pdf.setFontSize(11)
|
|
pdf.setTextColor(120, 120, 120)
|
|
pdf.text('© 2025 Apskel - Sistem POS Terpadu', 14, 287)
|
|
pdf.text(`Dicetak pada: ${now.toLocaleDateString('id-ID')}`, 190, 287, { align: 'right' })
|
|
}
|
|
|
|
const fileName =
|
|
filterType === 'single'
|
|
? `laporan-transaksi-${formatDateForInput(selectedDate)}.pdf`
|
|
: `laporan-transaksi-${formatDateForInput(dateRange.startDate)}-to-${formatDateForInput(dateRange.endDate)}.pdf`
|
|
|
|
pdf.save(fileName)
|
|
} catch (error) {
|
|
console.error('Error generating PDF:', error)
|
|
alert(`Terjadi kesalahan saat membuat PDF: ${error}`)
|
|
} finally {
|
|
setIsGeneratingPDF(false)
|
|
}
|
|
}
|
|
|
|
const LoadingOverlay = ({ isVisible, message = 'Generating PDF...' }: { isVisible: boolean; message?: string }) => {
|
|
if (!isVisible) return null
|
|
|
|
return (
|
|
<div className='fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm'>
|
|
<div className='bg-white rounded-lg shadow-xl p-8 max-w-sm w-full mx-4'>
|
|
<div className='text-center'>
|
|
<div className='inline-block animate-spin rounded-full h-12 w-12 border-4 border-gray-200 border-t-purple-600 mb-4'></div>
|
|
<h3 className='text-lg font-semibold text-gray-800 mb-2'>{message}</h3>
|
|
<p className='text-sm text-gray-600'>Mohon tunggu, proses ini mungkin membutuhkan beberapa detik...</p>
|
|
<div className='mt-6 space-y-2'>
|
|
<div className='flex items-center text-xs text-gray-500'>
|
|
<div className='w-2 h-2 bg-green-500 rounded-full mr-2 flex-shrink-0'></div>
|
|
<span>Capturing report content</span>
|
|
</div>
|
|
<div className='flex items-center text-xs text-gray-500'>
|
|
<div className='w-2 h-2 bg-blue-500 rounded-full mr-2 flex-shrink-0 animate-pulse'></div>
|
|
<span>Processing pages</span>
|
|
</div>
|
|
<div className='flex items-center text-xs text-gray-500'>
|
|
<div className='w-2 h-2 bg-gray-300 rounded-full mr-2 flex-shrink-0'></div>
|
|
<span>Finalizing PDF</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// Group products by category
|
|
const groupedProducts =
|
|
products?.data?.reduce(
|
|
(acc, item) => {
|
|
const categoryName = item.category_name || 'Tidak Berkategori'
|
|
if (!acc[categoryName]) {
|
|
acc[categoryName] = []
|
|
}
|
|
acc[categoryName].push(item)
|
|
return acc
|
|
},
|
|
{} as Record<string, any[]>
|
|
) || {}
|
|
|
|
return (
|
|
<div className='min-h-screen'>
|
|
<LoadingOverlay isVisible={isGeneratingPDF} message='Membuat PDF Laporan...' />
|
|
|
|
<ReportGeneratorComponent
|
|
reportTitle='Laporan Penjualan'
|
|
filterType={filterType}
|
|
selectedDate={selectedDate}
|
|
dateRange={dateRange}
|
|
onFilterTypeChange={setFilterType}
|
|
onSingleDateChange={setSelectedDate}
|
|
onDateRangeChange={setDateRange}
|
|
onGeneratePDF={handleGeneratePDF}
|
|
/>
|
|
|
|
<div ref={reportRef} className='max-w-4xl mx-auto bg-white min-h-[297mm]' style={{ width: '210mm' }}>
|
|
{/* Wrap header in a section for easy capture */}
|
|
<div className='report-header-section'>
|
|
<ReportHeader
|
|
outlet={outlet}
|
|
reportTitle={getReportTitle()}
|
|
reportSubtitle='Laporan Bulanan'
|
|
brandName='Apskel'
|
|
brandColor='#36175e'
|
|
periode={getReportPeriodText()}
|
|
/>
|
|
</div>
|
|
|
|
{/* Performance Summary */}
|
|
<div className='p-8'>
|
|
<h3 className='text-3xl font-bold mb-8' style={{ color: '#36175e' }}>
|
|
Ringkasan
|
|
</h3>
|
|
|
|
<div className='space-y-5'>
|
|
<div className='flex justify-between items-center py-3 border-b border-gray-200'>
|
|
<span className='text-xl text-gray-700'>Total Penjualan</span>
|
|
<span className='text-xl font-semibold text-gray-800'>
|
|
{formatCurrency(profitLoss?.summary.total_revenue ?? 0)}
|
|
</span>
|
|
</div>
|
|
<div className='flex justify-between items-center py-3 border-b border-gray-200'>
|
|
<span className='text-xl text-gray-700'>Total Diskon</span>
|
|
<span className='text-xl font-semibold text-gray-800'>
|
|
{formatCurrency(profitLoss?.summary.total_discount ?? 0)}
|
|
</span>
|
|
</div>
|
|
<div className='flex justify-between items-center py-3 border-b border-gray-200'>
|
|
<span className='text-xl text-gray-700'>Total Pajak</span>
|
|
<span className='text-xl font-semibold text-gray-800'>
|
|
{formatCurrency(profitLoss?.summary.total_tax ?? 0)}
|
|
</span>
|
|
</div>
|
|
<div className='flex justify-between items-center py-3 border-b-2 border-gray-300'>
|
|
<span className='text-xl text-gray-700 font-bold'>Total</span>
|
|
<span className='text-xl font-bold text-gray-800'>
|
|
{formatCurrency(profitLoss?.summary.total_revenue ?? 0)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Invoice */}
|
|
<div className='px-8 pb-8'>
|
|
<h3 className='text-3xl font-bold mb-8' style={{ color: '#36175e' }}>
|
|
Invoice
|
|
</h3>
|
|
|
|
<div className='space-y-5'>
|
|
<div className='flex justify-between items-center py-3 border-b border-gray-200'>
|
|
<span className='text-xl text-gray-700'>Total Invoice</span>
|
|
<span className='text-xl 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-3xl font-bold mb-8' style={{ color: '#36175e' }}>
|
|
Ringkasan Metode Pembayaran
|
|
</h3>
|
|
|
|
<div className='bg-gray-50 rounded-lg border border-gray-200 overflow-hidden'>
|
|
<table className='w-full'>
|
|
<thead>
|
|
<tr className='text-gray-800 border-b-2 border-gray-300'>
|
|
<th className='text-left text-xl p-4 font-semibold'>Metode Pembayaran</th>
|
|
<th className='text-center text-xl p-4 font-semibold'>Tipe</th>
|
|
<th className='text-center text-xl p-4 font-semibold'>Jumlah Order</th>
|
|
<th className='text-right text-xl p-4 font-semibold'>Total Amount</th>
|
|
<th className='text-center text-xl p-4 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-4 text-xl font-medium text-gray-800'>{payment.payment_method_name}</td>
|
|
<td className='p-4 text-center'>
|
|
<span
|
|
className={`px-3 py-1 rounded-full text-lg font-medium ${
|
|
payment.payment_method_type === 'cash'
|
|
? 'bg-green-100 text-green-800'
|
|
: 'bg-blue-100 text-blue-800'
|
|
}`}
|
|
>
|
|
{payment.payment_method_type.toUpperCase()}
|
|
</span>
|
|
</td>
|
|
<td className='p-4 text-xl text-center text-gray-700'>{payment.order_count}</td>
|
|
<td className='p-4 text-xl text-right font-semibold text-gray-800'>
|
|
{formatCurrency(payment.total_amount)}
|
|
</td>
|
|
<td className='p-4 text-xl text-center font-medium' style={{ color: '#36175e' }}>
|
|
{(payment.percentage ?? 0).toFixed(1)}%
|
|
</td>
|
|
</tr>
|
|
)) || []}
|
|
</tbody>
|
|
<tfoot>
|
|
<tr className='text-gray-800 border-t-2 border-gray-300'>
|
|
<td className='p-4 text-xl font-bold'>TOTAL</td>
|
|
<td className='p-4'></td>
|
|
<td className='p-4 text-xl text-center font-bold'>{paymentAnalytics?.summary.total_orders ?? 0}</td>
|
|
<td className='p-4 text-xl text-right font-bold'>
|
|
{formatCurrency(paymentAnalytics?.summary.total_amount ?? 0)}
|
|
</td>
|
|
<td className='p-4 text-center font-bold'></td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Category Summary */}
|
|
<div className='px-8 pb-8'>
|
|
<h3 className='text-3xl font-bold mb-8' style={{ color: '#36175e' }}>
|
|
Ringkasan Kategori
|
|
</h3>
|
|
|
|
<div className='bg-gray-50 rounded-lg border border-gray-200 overflow-hidden'>
|
|
<table className='w-full'>
|
|
<thead>
|
|
<tr className='text-gray-800 border-b-2 border-gray-300'>
|
|
<th className='text-left text-xl p-4 font-semibold'>Nama</th>
|
|
<th className='text-center text-xl p-4 font-semibold'>Qty</th>
|
|
<th className='text-right text-xl p-4 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-4 text-xl font-medium text-gray-800'>{c.category_name}</td>
|
|
<td className='p-4 text-xl text-center text-gray-700'>{c.total_quantity}</td>
|
|
<td className='p-4 text-xl text-right font-semibold' style={{ color: '#36175e' }}>
|
|
{formatCurrency(c.total_revenue)}
|
|
</td>
|
|
</tr>
|
|
)) || []}
|
|
</tbody>
|
|
<tfoot>
|
|
<tr className='text-gray-800 border-t-2 border-gray-300'>
|
|
<td className='p-4 text-xl font-bold'>TOTAL</td>
|
|
<td className='p-4 text-xl text-center font-bold'>{categorySummary?.totalQuantity ?? 0}</td>
|
|
<td className='p-4 text-xl text-right font-bold'>
|
|
{formatCurrency(categorySummary?.totalRevenue ?? 0)}
|
|
</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Product Summary - Dipisah per kategori dengan tabel terpisah */}
|
|
<div className='px-8 pb-8'>
|
|
<h3 className='text-3xl font-bold mb-8' style={{ color: '#36175e' }}>
|
|
Ringkasan Item Per Kategori
|
|
</h3>
|
|
|
|
<div className='space-y-12'>
|
|
{Object.keys(groupedProducts)
|
|
.sort((a, b) => {
|
|
const productsA = groupedProducts[a]
|
|
const productsB = groupedProducts[b]
|
|
const orderA = productsA[0]?.category_order ?? 999
|
|
const orderB = productsB[0]?.category_order ?? 999
|
|
return orderA - orderB
|
|
})
|
|
.map((categoryName, catIndex) => {
|
|
const categoryProducts = groupedProducts[categoryName].sort((a, b) => {
|
|
// Sort by product_sku ASC
|
|
const skuA = a.product_sku || ''
|
|
const skuB = b.product_sku || ''
|
|
return skuA.localeCompare(skuB)
|
|
})
|
|
const categoryTotalQty = categoryProducts.reduce((sum, item) => sum + (item.quantity_sold || 0), 0)
|
|
const categoryTotalRevenue = categoryProducts.reduce((sum, item) => sum + (item.revenue || 0), 0)
|
|
|
|
return (
|
|
<div key={categoryName} style={{ display: 'block', marginBottom: '70px' }}>
|
|
<h4
|
|
className='text-2xl font-bold mb-0 px-4 py-4 bg-gray-100 rounded-t-lg'
|
|
style={{ color: '#36175e' }}
|
|
>
|
|
{categoryName.toUpperCase()}
|
|
</h4>
|
|
|
|
<div className='bg-gray-50 rounded-b-lg border-l-2 border-r-2 border-b-2 border-gray-300'>
|
|
<table
|
|
className='w-full'
|
|
style={{ borderCollapse: 'collapse', tableLayout: 'fixed', width: '100%' }}
|
|
>
|
|
<colgroup>
|
|
<col style={{ width: '50%' }} />
|
|
<col style={{ width: '20%' }} />
|
|
<col style={{ width: '30%' }} />
|
|
</colgroup>
|
|
<thead>
|
|
<tr className='text-gray-800 border-b-2 border-gray-300 bg-gray-100'>
|
|
<th className='text-left text-xl p-5 font-semibold border-r border-gray-300'>Produk</th>
|
|
<th className='text-center text-xl p-5 font-semibold border-r border-gray-300'>Qty</th>
|
|
<th className='text-right text-xl p-5 font-semibold'>Pendapatan</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{categoryProducts.map((item, index) => (
|
|
<tr key={index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
|
|
<td className='p-5 text-xl font-medium text-gray-800 border-r border-gray-200'>
|
|
{item.product_name}
|
|
</td>
|
|
<td className='p-5 text-xl text-center text-gray-700 border-r border-gray-200'>
|
|
{item.quantity_sold}
|
|
</td>
|
|
<td className='p-5 text-xl text-right font-semibold text-gray-800'>
|
|
{formatCurrency(item.revenue)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
<tfoot>
|
|
<tr className='bg-gray-200 border-t-2 border-gray-400'>
|
|
<td className='p-5 text-xl font-bold text-gray-800 border-r border-gray-400'>
|
|
Subtotal {categoryName}
|
|
</td>
|
|
<td className='p-5 text-xl text-center font-bold text-gray-800 border-r border-gray-400'>
|
|
{categoryTotalQty}
|
|
</td>
|
|
<td className='p-5 text-xl text-right font-bold text-gray-800'>
|
|
{formatCurrency(categoryTotalRevenue)}
|
|
</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
|
|
{/* Grand Total */}
|
|
<div className='bg-purple-50 rounded-lg border-2 border-purple-300 mt-6'>
|
|
<table className='w-full' style={{ borderCollapse: 'collapse' }}>
|
|
<tfoot>
|
|
<tr className='text-gray-800'>
|
|
<td
|
|
className='p-5 text-2xl font-bold border-r-2 border-purple-300'
|
|
style={{ width: '50%', color: '#36175e' }}
|
|
>
|
|
TOTAL KESELURUHAN
|
|
</td>
|
|
<td
|
|
className='p-5 text-2xl text-center font-bold border-r-2 border-purple-300'
|
|
style={{ width: '20%', color: '#36175e' }}
|
|
>
|
|
{productSummary.totalQuantitySold ?? 0}
|
|
</td>
|
|
<td className='p-5 text-2xl text-right font-bold' style={{ width: '30%', color: '#36175e' }}>
|
|
{formatCurrency(productSummary.totalRevenue ?? 0)}
|
|
</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className='px-8 py-6 border-t-2 border-gray-200 mt-8'>
|
|
<div className='flex justify-between items-center text-base text-gray-600'>
|
|
<p>© 2025 Apskel - Sistem POS Terpadu</p>
|
|
<p></p>
|
|
<p>Dicetak pada: {now.toLocaleDateString('id-ID')}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default DailyPOSReport
|