update report
This commit is contained in:
efrilm
parent
d059f31eaa
commit
e551ae7feb
@ -22,10 +22,9 @@ const DailyPOSReport = () => {
|
|||||||
startDate: new Date(),
|
startDate: new Date(),
|
||||||
endDate: new Date()
|
endDate: new Date()
|
||||||
})
|
})
|
||||||
const [filterType, setFilterType] = useState<'single' | 'range'>('single') // 'single' or 'range'
|
const [filterType, setFilterType] = useState<'single' | 'range'>('single')
|
||||||
const [isGeneratingPDF, setIsGeneratingPDF] = useState(false)
|
const [isGeneratingPDF, setIsGeneratingPDF] = useState(false)
|
||||||
|
|
||||||
// Use selectedDate for single date filter, or dateRange for range filter
|
|
||||||
const getDateParams = () => {
|
const getDateParams = () => {
|
||||||
if (filterType === 'single') {
|
if (filterType === 'single') {
|
||||||
return {
|
return {
|
||||||
@ -66,12 +65,10 @@ const DailyPOSReport = () => {
|
|||||||
setNow(new Date())
|
setNow(new Date())
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
// Format date for input field (YYYY-MM-DD)
|
|
||||||
const formatDateForInput = (date: Date) => {
|
const formatDateForInput = (date: Date) => {
|
||||||
return date.toISOString().split('T')[0]
|
return date.toISOString().split('T')[0]
|
||||||
}
|
}
|
||||||
|
|
||||||
// Get display text for the report period
|
|
||||||
const getReportPeriodText = () => {
|
const getReportPeriodText = () => {
|
||||||
if (filterType === 'single') {
|
if (filterType === 'single') {
|
||||||
return `${formatDateDDMMYYYY(selectedDate)} - ${formatDateDDMMYYYY(selectedDate)}`
|
return `${formatDateDDMMYYYY(selectedDate)} - ${formatDateDDMMYYYY(selectedDate)}`
|
||||||
@ -80,13 +77,10 @@ const DailyPOSReport = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Get report title based on filter type
|
|
||||||
const getReportTitle = () => {
|
const getReportTitle = () => {
|
||||||
if (filterType === 'single') {
|
if (filterType === 'single') {
|
||||||
return 'Laporan Transaksi'
|
return 'Laporan Transaksi'
|
||||||
} else {
|
} else {
|
||||||
const daysDiff = Math.ceil((dateRange.endDate.getTime() - dateRange.startDate.getTime()) / (1000 * 3600 * 24)) + 1
|
|
||||||
// return `Laporan Transaksi ${daysDiff} Hari`
|
|
||||||
return `Laporan Transaksi`
|
return `Laporan Transaksi`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -99,27 +93,17 @@ const DailyPOSReport = () => {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
// Set loading state
|
|
||||||
setIsGeneratingPDF(true)
|
setIsGeneratingPDF(true)
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// Import jsPDF dan html2canvas
|
|
||||||
const jsPDF = (await import('jspdf')).default
|
const jsPDF = (await import('jspdf')).default
|
||||||
const html2canvas = (await import('html2canvas')).default
|
const html2canvas = (await import('html2canvas')).default
|
||||||
|
|
||||||
// Pastikan element terlihat penuh
|
|
||||||
const originalOverflow = reportElement.style.overflow
|
const originalOverflow = reportElement.style.overflow
|
||||||
reportElement.style.overflow = 'visible'
|
reportElement.style.overflow = 'visible'
|
||||||
|
|
||||||
// Wait untuk memastikan rendering selesai
|
|
||||||
await new Promise(resolve => setTimeout(resolve, 300))
|
await new Promise(resolve => setTimeout(resolve, 300))
|
||||||
|
|
||||||
console.log('Starting PDF generation...')
|
|
||||||
|
|
||||||
// Update loading message
|
|
||||||
console.log('Capturing content...')
|
|
||||||
|
|
||||||
// Capture canvas dengan setting yang optimal
|
|
||||||
const canvas = await html2canvas(reportElement, {
|
const canvas = await html2canvas(reportElement, {
|
||||||
scale: 1.5,
|
scale: 1.5,
|
||||||
useCORS: true,
|
useCORS: true,
|
||||||
@ -132,18 +116,12 @@ const DailyPOSReport = () => {
|
|||||||
width: reportElement.scrollWidth,
|
width: reportElement.scrollWidth,
|
||||||
scrollX: 0,
|
scrollX: 0,
|
||||||
scrollY: 0,
|
scrollY: 0,
|
||||||
// Pastikan capture semua content
|
|
||||||
windowWidth: Math.max(reportElement.scrollWidth, window.innerWidth),
|
windowWidth: Math.max(reportElement.scrollWidth, window.innerWidth),
|
||||||
windowHeight: Math.max(reportElement.scrollHeight, window.innerHeight)
|
windowHeight: Math.max(reportElement.scrollHeight, window.innerHeight)
|
||||||
})
|
})
|
||||||
|
|
||||||
console.log('Canvas captured:', canvas.width, 'x', canvas.height)
|
|
||||||
console.log('Generating PDF pages...')
|
|
||||||
|
|
||||||
// Restore overflow
|
|
||||||
reportElement.style.overflow = originalOverflow
|
reportElement.style.overflow = originalOverflow
|
||||||
|
|
||||||
// Create PDF
|
|
||||||
const pdf = new jsPDF({
|
const pdf = new jsPDF({
|
||||||
orientation: 'portrait',
|
orientation: 'portrait',
|
||||||
unit: 'mm',
|
unit: 'mm',
|
||||||
@ -151,43 +129,30 @@ const DailyPOSReport = () => {
|
|||||||
compress: true
|
compress: true
|
||||||
})
|
})
|
||||||
|
|
||||||
// A4 dimensions
|
|
||||||
const pdfWidth = 210
|
const pdfWidth = 210
|
||||||
const pdfHeight = 297
|
const pdfHeight = 297
|
||||||
const margin = 5 // Small margin to prevent cutoff
|
const margin = 5
|
||||||
|
|
||||||
// Calculate scaling
|
|
||||||
const availableWidth = pdfWidth - 2 * margin
|
const availableWidth = pdfWidth - 2 * margin
|
||||||
const availableHeight = pdfHeight - 2 * margin
|
const availableHeight = pdfHeight - 2 * margin
|
||||||
|
|
||||||
const imgWidth = availableWidth
|
const imgWidth = availableWidth
|
||||||
const imgHeight = (canvas.height * availableWidth) / canvas.width
|
const imgHeight = (canvas.height * availableWidth) / canvas.width
|
||||||
|
|
||||||
console.log('PDF dimensions - Canvas:', canvas.width, 'x', canvas.height)
|
|
||||||
console.log('PDF dimensions - Image:', imgWidth, 'x', imgHeight)
|
|
||||||
console.log('Available height per page:', availableHeight)
|
|
||||||
|
|
||||||
// Split content across pages
|
|
||||||
let yPosition = margin
|
let yPosition = margin
|
||||||
let sourceY = 0
|
let sourceY = 0
|
||||||
let pageCount = 1
|
let pageCount = 1
|
||||||
let remainingHeight = imgHeight
|
let remainingHeight = imgHeight
|
||||||
|
|
||||||
while (remainingHeight > 0) {
|
while (remainingHeight > 0) {
|
||||||
console.log(`Processing page ${pageCount}, remaining height: ${remainingHeight}`)
|
|
||||||
|
|
||||||
if (pageCount > 1) {
|
if (pageCount > 1) {
|
||||||
pdf.addPage()
|
pdf.addPage()
|
||||||
yPosition = margin
|
yPosition = margin
|
||||||
}
|
}
|
||||||
|
|
||||||
// Calculate how much content fits on this page
|
|
||||||
const heightForThisPage = Math.min(remainingHeight, availableHeight)
|
const heightForThisPage = Math.min(remainingHeight, availableHeight)
|
||||||
|
|
||||||
// Calculate source dimensions for cropping
|
|
||||||
const sourceHeight = (heightForThisPage * canvas.height) / imgHeight
|
const sourceHeight = (heightForThisPage * canvas.height) / imgHeight
|
||||||
|
|
||||||
// Create temporary canvas for this page portion
|
|
||||||
const tempCanvas = document.createElement('canvas')
|
const tempCanvas = document.createElement('canvas')
|
||||||
const tempCtx = tempCanvas.getContext('2d')
|
const tempCtx = tempCanvas.getContext('2d')
|
||||||
|
|
||||||
@ -198,41 +163,21 @@ const DailyPOSReport = () => {
|
|||||||
tempCanvas.width = canvas.width
|
tempCanvas.width = canvas.width
|
||||||
tempCanvas.height = sourceHeight
|
tempCanvas.height = sourceHeight
|
||||||
|
|
||||||
// Draw the portion we need
|
tempCtx.drawImage(canvas, 0, sourceY, canvas.width, sourceHeight, 0, 0, canvas.width, sourceHeight)
|
||||||
tempCtx.drawImage(
|
|
||||||
canvas,
|
|
||||||
0,
|
|
||||||
sourceY,
|
|
||||||
canvas.width,
|
|
||||||
sourceHeight, // Source rectangle
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
canvas.width,
|
|
||||||
sourceHeight // Destination rectangle
|
|
||||||
)
|
|
||||||
|
|
||||||
// Convert to image data
|
|
||||||
const pageImageData = tempCanvas.toDataURL('image/jpeg', 0.9)
|
const pageImageData = tempCanvas.toDataURL('image/jpeg', 0.9)
|
||||||
|
|
||||||
// Add to PDF
|
|
||||||
pdf.addImage(pageImageData, 'JPEG', margin, yPosition, imgWidth, heightForThisPage)
|
pdf.addImage(pageImageData, 'JPEG', margin, yPosition, imgWidth, heightForThisPage)
|
||||||
|
|
||||||
// Update for next page
|
|
||||||
sourceY += sourceHeight
|
sourceY += sourceHeight
|
||||||
remainingHeight -= heightForThisPage
|
remainingHeight -= heightForThisPage
|
||||||
pageCount++
|
pageCount++
|
||||||
|
|
||||||
// Safety check to prevent infinite loop
|
|
||||||
if (pageCount > 20) {
|
if (pageCount > 20) {
|
||||||
console.warn('Too many pages, breaking loop')
|
console.warn('Too many pages, breaking loop')
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(`Generated ${pageCount - 1} pages`)
|
|
||||||
console.log('Finalizing PDF...')
|
|
||||||
|
|
||||||
// Add metadata
|
|
||||||
pdf.setProperties({
|
pdf.setProperties({
|
||||||
title: getReportTitle(),
|
title: getReportTitle(),
|
||||||
subject: 'Transaction Report',
|
subject: 'Transaction Report',
|
||||||
@ -240,23 +185,16 @@ const DailyPOSReport = () => {
|
|||||||
creator: 'Apskel'
|
creator: 'Apskel'
|
||||||
})
|
})
|
||||||
|
|
||||||
// Generate filename
|
|
||||||
const fileName =
|
const fileName =
|
||||||
filterType === 'single'
|
filterType === 'single'
|
||||||
? `laporan-transaksi-${formatDateForInput(selectedDate)}.pdf`
|
? `laporan-transaksi-${formatDateForInput(selectedDate)}.pdf`
|
||||||
: `laporan-transaksi-${formatDateForInput(dateRange.startDate)}-to-${formatDateForInput(dateRange.endDate)}.pdf`
|
: `laporan-transaksi-${formatDateForInput(dateRange.startDate)}-to-${formatDateForInput(dateRange.endDate)}.pdf`
|
||||||
|
|
||||||
console.log('Saving PDF:', fileName)
|
|
||||||
|
|
||||||
// Save PDF
|
|
||||||
pdf.save(fileName)
|
pdf.save(fileName)
|
||||||
|
|
||||||
console.log('PDF generated successfully!')
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error generating PDF:', error)
|
console.error('Error generating PDF:', error)
|
||||||
alert(`Terjadi kesalahan saat membuat PDF: ${error}`)
|
alert(`Terjadi kesalahan saat membuat PDF: ${error}`)
|
||||||
} finally {
|
} finally {
|
||||||
// Reset loading state
|
|
||||||
setIsGeneratingPDF(false)
|
setIsGeneratingPDF(false)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -268,15 +206,9 @@ const DailyPOSReport = () => {
|
|||||||
<div className='fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm'>
|
<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='bg-white rounded-lg shadow-xl p-8 max-w-sm w-full mx-4'>
|
||||||
<div className='text-center'>
|
<div className='text-center'>
|
||||||
{/* Animated Spinner */}
|
|
||||||
<div className='inline-block animate-spin rounded-full h-12 w-12 border-4 border-gray-200 border-t-purple-600 mb-4'></div>
|
<div className='inline-block animate-spin rounded-full h-12 w-12 border-4 border-gray-200 border-t-purple-600 mb-4'></div>
|
||||||
|
|
||||||
{/* Loading Message */}
|
|
||||||
<h3 className='text-lg font-semibold text-gray-800 mb-2'>{message}</h3>
|
<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>
|
<p className='text-sm text-gray-600'>Mohon tunggu, proses ini mungkin membutuhkan beberapa detik...</p>
|
||||||
|
|
||||||
{/* Progress Steps */}
|
|
||||||
<div className='mt-6 space-y-2'>
|
<div className='mt-6 space-y-2'>
|
||||||
<div className='flex items-center text-xs text-gray-500'>
|
<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>
|
<div className='w-2 h-2 bg-green-500 rounded-full mr-2 flex-shrink-0'></div>
|
||||||
@ -297,12 +229,25 @@ const DailyPOSReport = () => {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 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 (
|
return (
|
||||||
<div className='min-h-screen'>
|
<div className='min-h-screen'>
|
||||||
<LoadingOverlay isVisible={isGeneratingPDF} message='Membuat PDF Laporan...' />
|
<LoadingOverlay isVisible={isGeneratingPDF} message='Membuat PDF Laporan...' />
|
||||||
{/* Control Panel */}
|
|
||||||
<ReportGeneratorComponent
|
<ReportGeneratorComponent
|
||||||
// Props wajib
|
|
||||||
reportTitle='Laporan Penjualan'
|
reportTitle='Laporan Penjualan'
|
||||||
filterType={filterType}
|
filterType={filterType}
|
||||||
selectedDate={selectedDate}
|
selectedDate={selectedDate}
|
||||||
@ -311,15 +256,9 @@ const DailyPOSReport = () => {
|
|||||||
onSingleDateChange={setSelectedDate}
|
onSingleDateChange={setSelectedDate}
|
||||||
onDateRangeChange={setDateRange}
|
onDateRangeChange={setDateRange}
|
||||||
onGeneratePDF={handleGeneratePDF}
|
onGeneratePDF={handleGeneratePDF}
|
||||||
// Props opsional
|
|
||||||
// isGenerating={isGenerating}
|
|
||||||
// customQuickActions={customQuickActions}
|
|
||||||
// labels={customLabels}
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Report Template */}
|
|
||||||
<div ref={reportRef} className='max-w-4xl mx-auto bg-white min-h-[297mm]' style={{ width: '210mm' }}>
|
<div ref={reportRef} className='max-w-4xl mx-auto bg-white min-h-[297mm]' style={{ width: '210mm' }}>
|
||||||
{/* Header */}
|
|
||||||
<ReportHeader
|
<ReportHeader
|
||||||
outlet={outlet}
|
outlet={outlet}
|
||||||
reportTitle={getReportTitle()}
|
reportTitle={getReportTitle()}
|
||||||
@ -331,54 +270,55 @@ const DailyPOSReport = () => {
|
|||||||
|
|
||||||
{/* Performance Summary */}
|
{/* Performance Summary */}
|
||||||
<div className='p-8'>
|
<div className='p-8'>
|
||||||
<h3 className='text-2xl font-bold mb-6' style={{ color: '#36175e' }}>
|
<h3 className='text-3xl font-bold mb-8' style={{ color: '#36175e' }}>
|
||||||
Ringkasan
|
Ringkasan
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
<div className='space-y-4'>
|
<div className='space-y-5'>
|
||||||
<div className='flex justify-between items-center py-2 border-b border-gray-200'>
|
<div className='flex justify-between items-center py-3 border-b border-gray-200'>
|
||||||
<span className='text-lg text-gray-700'>Total Penjualan</span>
|
<span className='text-xl text-gray-700'>Total Penjualan</span>
|
||||||
<span className='text-lg font-semibold text-gray-800'>
|
<span className='text-xl 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-3 border-b border-gray-200'>
|
||||||
<span className='text-lg text-gray-700'>Total Diskon</span>
|
<span className='text-xl text-gray-700'>Total Diskon</span>
|
||||||
<span className='text-lg font-semibold text-gray-800'>
|
<span className='text-xl 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-3 border-b border-gray-200'>
|
||||||
<span className='text-lg text-gray-700'>Total Pajak</span>
|
<span className='text-xl text-gray-700'>Total Pajak</span>
|
||||||
<span className='text-lg font-semibold text-gray-800'>
|
<span className='text-xl font-semibold text-gray-800'>
|
||||||
{formatCurrency(profitLoss?.summary.total_tax ?? 0)}
|
{formatCurrency(profitLoss?.summary.total_tax ?? 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-3 border-b-2 border-gray-300'>
|
||||||
<span className='text-lg text-gray-700 font-bold'>Total</span>
|
<span className='text-xl text-gray-700 font-bold'>Total</span>
|
||||||
<span className='text-lg font-bold text-gray-800'>
|
<span className='text-xl font-bold text-gray-800'>
|
||||||
{formatCurrency(profitLoss?.summary.total_revenue ?? 0)}
|
{formatCurrency(profitLoss?.summary.total_revenue ?? 0)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Invoice */}
|
||||||
<div className='px-8 pb-8'>
|
<div className='px-8 pb-8'>
|
||||||
<h3 className='text-2xl font-bold mb-6' style={{ color: '#36175e' }}>
|
<h3 className='text-3xl font-bold mb-8' style={{ color: '#36175e' }}>
|
||||||
Invoice
|
Invoice
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
<div className='space-y-4'>
|
<div className='space-y-5'>
|
||||||
<div className='flex justify-between items-center py-2 border-b border-gray-200'>
|
<div className='flex justify-between items-center py-3 border-b border-gray-200'>
|
||||||
<span className='text-lg text-gray-700'>Total Invoice</span>
|
<span className='text-xl text-gray-700'>Total Invoice</span>
|
||||||
<span className='text-lg font-semibold text-gray-800'>{profitLoss?.summary.total_orders ?? 0}</span>
|
<span className='text-xl 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-2xl font-bold mb-6' style={{ color: '#36175e' }}>
|
<h3 className='text-3xl font-bold mb-8' style={{ color: '#36175e' }}>
|
||||||
Ringkasan Metode Pembayaran
|
Ringkasan Metode Pembayaran
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
@ -386,20 +326,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 text-lg p-3 font-semibold'>Metode Pembayaran</th>
|
<th className='text-left text-xl p-4 font-semibold'>Metode Pembayaran</th>
|
||||||
<th className='text-center text-lg p-3 font-semibold'>Tipe</th>
|
<th className='text-center text-xl p-4 font-semibold'>Tipe</th>
|
||||||
<th className='text-center text-lg p-3 font-semibold'>Jumlah Order</th>
|
<th className='text-center text-xl p-4 font-semibold'>Jumlah Order</th>
|
||||||
<th className='text-right text-lg p-3 font-semibold'>Total Amount</th>
|
<th className='text-right text-xl p-4 font-semibold'>Total Amount</th>
|
||||||
<th className='text-center text-lg p-3 font-semibold'>Persentase</th>
|
<th className='text-center text-xl p-4 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 text-lg font-medium text-gray-800'>{payment.payment_method_name}</td>
|
<td className='p-4 text-xl font-medium text-gray-800'>{payment.payment_method_name}</td>
|
||||||
<td className='p-3 text-center'>
|
<td className='p-4 text-center'>
|
||||||
<span
|
<span
|
||||||
className={`px-2 py-1 rounded-full text-base font-medium ${
|
className={`px-3 py-1 rounded-full text-lg 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'
|
||||||
@ -408,11 +348,11 @@ const DailyPOSReport = () => {
|
|||||||
{payment.payment_method_type.toUpperCase()}
|
{payment.payment_method_type.toUpperCase()}
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td className='p-3 text-lg text-center text-gray-700'>{payment.order_count}</td>
|
<td className='p-4 text-xl text-center text-gray-700'>{payment.order_count}</td>
|
||||||
<td className='p-3 text-lg text-right font-semibold text-gray-800'>
|
<td className='p-4 text-xl text-right font-semibold text-gray-800'>
|
||||||
{formatCurrency(payment.total_amount)}
|
{formatCurrency(payment.total_amount)}
|
||||||
</td>
|
</td>
|
||||||
<td className='p-3 text-lg text-center font-medium' style={{ color: '#36175e' }}>
|
<td className='p-4 text-xl text-center font-medium' style={{ color: '#36175e' }}>
|
||||||
{(payment.percentage ?? 0).toFixed(1)}%
|
{(payment.percentage ?? 0).toFixed(1)}%
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -420,13 +360,13 @@ 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 text-lg font-bold'>TOTAL</td>
|
<td className='p-4 text-xl font-bold'>TOTAL</td>
|
||||||
<td className='p-3'></td>
|
<td className='p-4'></td>
|
||||||
<td className='p-3 text-lg text-center font-bold'>{paymentAnalytics?.summary.total_orders ?? 0}</td>
|
<td className='p-4 text-xl text-center font-bold'>{paymentAnalytics?.summary.total_orders ?? 0}</td>
|
||||||
<td className='p-3 text-lg text-right font-bold'>
|
<td className='p-4 text-xl 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-4 text-center font-bold'></td>
|
||||||
</tr>
|
</tr>
|
||||||
</tfoot>
|
</tfoot>
|
||||||
</table>
|
</table>
|
||||||
@ -435,7 +375,7 @@ const DailyPOSReport = () => {
|
|||||||
|
|
||||||
{/* Category Summary */}
|
{/* Category Summary */}
|
||||||
<div className='px-8 pb-8'>
|
<div className='px-8 pb-8'>
|
||||||
<h3 className='text-2xl font-bold mb-6' style={{ color: '#36175e' }}>
|
<h3 className='text-3xl font-bold mb-8' style={{ color: '#36175e' }}>
|
||||||
Ringkasan Kategori
|
Ringkasan Kategori
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
@ -443,17 +383,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 text-lg p-3 font-semibold'>Nama</th>
|
<th className='text-left text-xl p-4 font-semibold'>Nama</th>
|
||||||
<th className='text-center text-lg p-3 font-semibold'>Qty</th>
|
<th className='text-center text-xl p-4 font-semibold'>Qty</th>
|
||||||
<th className='text-right text-lg p-3 font-semibold'>Pendapatan</th>
|
<th className='text-right text-xl p-4 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 text-lg font-medium text-gray-800'>{c.category_name}</td>
|
<td className='p-4 text-xl 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-4 text-xl text-center text-gray-700'>{c.total_quantity}</td>
|
||||||
<td className='p-3 text-lg text-right font-semibold' style={{ color: '#36175e' }}>
|
<td className='p-4 text-xl text-right font-semibold' style={{ color: '#36175e' }}>
|
||||||
{formatCurrency(c.total_revenue)}
|
{formatCurrency(c.total_revenue)}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -461,9 +401,9 @@ 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 text-lg font-bold'>TOTAL</td>
|
<td className='p-4 text-xl font-bold'>TOTAL</td>
|
||||||
<td className='p-3 text-lg text-center font-bold'>{categorySummary?.totalQuantity ?? 0}</td>
|
<td className='p-4 text-xl text-center font-bold'>{categorySummary?.totalQuantity ?? 0}</td>
|
||||||
<td className='p-3 text-lg text-right font-bold'>
|
<td className='p-4 text-xl text-right font-bold'>
|
||||||
{formatCurrency(categorySummary?.totalRevenue ?? 0)}
|
{formatCurrency(categorySummary?.totalRevenue ?? 0)}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -472,134 +412,129 @@ const DailyPOSReport = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Transaction Summary */}
|
{/* Product Summary - Dipisah per kategori dengan tabel terpisah */}
|
||||||
<div className='px-8 pb-8'>
|
<div className='px-8 pb-8'>
|
||||||
<h3 className='text-2xl font-bold mb-6' style={{ color: '#36175e' }}>
|
<h3 className='text-3xl font-bold mb-8 pb-4' style={{ color: '#36175e', pageBreakAfter: 'avoid' }}>
|
||||||
Ringkasan Item
|
Ringkasan Item Per Kategori
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
<div className='bg-gray-50 rounded-lg border border-gray-200 overflow-visible'>
|
<div className='space-y-12'>
|
||||||
<div className='overflow-x-auto'>
|
{Object.keys(groupedProducts)
|
||||||
<table className='w-full table-fixed' style={{ minWidth: '100%' }}>
|
.sort()
|
||||||
<colgroup>
|
.map(categoryName => {
|
||||||
<col style={{ width: '50%' }} />
|
const categoryProducts = groupedProducts[categoryName]
|
||||||
<col style={{ width: '20%' }} />
|
const categoryTotalQty = categoryProducts.reduce((sum, item) => sum + (item.quantity_sold || 0), 0)
|
||||||
<col style={{ width: '30%' }} />
|
const categoryTotalRevenue = categoryProducts.reduce((sum, item) => sum + (item.revenue || 0), 0)
|
||||||
</colgroup>
|
|
||||||
<thead>
|
|
||||||
<tr className='text-gray-800 border-b-2 border-gray-300'>
|
|
||||||
<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>
|
|
||||||
{(() => {
|
|
||||||
// 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[]>
|
|
||||||
) || {}
|
|
||||||
|
|
||||||
const rows: JSX.Element[] = []
|
return (
|
||||||
let globalIndex = 0
|
<div
|
||||||
|
key={categoryName}
|
||||||
|
className='mb-12 break-inside-avoid'
|
||||||
|
style={{
|
||||||
|
pageBreakInside: 'avoid',
|
||||||
|
breakInside: 'avoid',
|
||||||
|
display: 'block',
|
||||||
|
marginTop: '24px',
|
||||||
|
marginBottom: '24px',
|
||||||
|
paddingTop: '12px',
|
||||||
|
paddingBottom: '12px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Category Title */}
|
||||||
|
<h4
|
||||||
|
className='text-2xl font-bold mb-0 px-4 py-4 bg-gray-100 rounded-t-lg'
|
||||||
|
style={{
|
||||||
|
color: '#36175e',
|
||||||
|
pageBreakAfter: 'avoid',
|
||||||
|
breakAfter: 'avoid'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{categoryName.toUpperCase()}
|
||||||
|
</h4>
|
||||||
|
|
||||||
// Sort categories alphabetically
|
{/* Category Table */}
|
||||||
Object.keys(groupedProducts)
|
<div
|
||||||
.sort()
|
className='bg-gray-50 rounded-b-lg border-l-2 border-r-2 border-b-2 border-gray-300'
|
||||||
.forEach(categoryName => {
|
style={{
|
||||||
const categoryProducts = groupedProducts[categoryName]
|
pageBreakInside: 'avoid',
|
||||||
|
breakInside: 'avoid'
|
||||||
// Category header row
|
}}
|
||||||
rows.push(
|
>
|
||||||
<tr
|
<table className='w-full' style={{ borderCollapse: 'collapse', tableLayout: 'fixed' }}>
|
||||||
key={`category-${categoryName}`}
|
<colgroup>
|
||||||
className='bg-gray-100 border-b border-gray-300'
|
<col style={{ width: '50%' }} />
|
||||||
style={{ pageBreakInside: 'avoid' }}
|
<col style={{ width: '20%' }} />
|
||||||
>
|
<col style={{ width: '30%' }} />
|
||||||
<td
|
</colgroup>
|
||||||
className='p-3 text-lg font-bold text-gray-900 border-r border-gray-300'
|
<thead>
|
||||||
style={{ color: '#36175e' }}
|
<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>
|
||||||
{categoryName.toUpperCase()}
|
<th className='text-center text-xl p-5 font-semibold border-r border-gray-300'>Qty</th>
|
||||||
</td>
|
<th className='text-right text-xl p-5 font-semibold'>Pendapatan</th>
|
||||||
<td className='p-3 border-r border-gray-300'></td>
|
|
||||||
<td className='p-3'></td>
|
|
||||||
</tr>
|
</tr>
|
||||||
)
|
</thead>
|
||||||
|
<tbody>
|
||||||
// Product rows for this category
|
{categoryProducts.map((item, index) => (
|
||||||
categoryProducts.forEach((item, index) => {
|
|
||||||
globalIndex++
|
|
||||||
rows.push(
|
|
||||||
<tr
|
<tr
|
||||||
key={`product-${item.product_name}-${index}`}
|
key={index}
|
||||||
className={`${globalIndex % 2 === 0 ? 'bg-white' : 'bg-gray-50'} border-b border-gray-200`}
|
className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}
|
||||||
style={{ pageBreakInside: 'avoid' }}
|
style={{ pageBreakInside: 'avoid' }}
|
||||||
>
|
>
|
||||||
<td
|
<td className='p-5 text-xl 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}
|
{item.product_name}
|
||||||
</td>
|
</td>
|
||||||
<td className='p-3 text-lg text-center text-gray-700 border-r border-gray-200'>
|
<td className='p-5 text-xl text-center text-gray-700 border-r border-gray-200'>
|
||||||
{item.quantity_sold}
|
{item.quantity_sold}
|
||||||
</td>
|
</td>
|
||||||
<td className='p-3 text-lg text-right font-semibold text-gray-800'>
|
<td className='p-5 text-xl text-right font-semibold text-gray-800'>
|
||||||
{formatCurrency(item.revenue)}
|
{formatCurrency(item.revenue)}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
)
|
))}
|
||||||
})
|
</tbody>
|
||||||
|
<tfoot>
|
||||||
// Category subtotal row
|
<tr className='bg-gray-200 border-t-2 border-gray-400' style={{ pageBreakInside: 'avoid' }}>
|
||||||
const categoryTotalQty = categoryProducts.reduce(
|
<td className='p-5 text-xl font-bold text-gray-800 border-r border-gray-400'>
|
||||||
(sum, item) => sum + (item.quantity_sold || 0),
|
|
||||||
0
|
|
||||||
)
|
|
||||||
const categoryTotalRevenue = categoryProducts.reduce(
|
|
||||||
(sum, item) => sum + (item.revenue || 0),
|
|
||||||
0
|
|
||||||
)
|
|
||||||
|
|
||||||
rows.push(
|
|
||||||
<tr
|
|
||||||
key={`subtotal-${categoryName}`}
|
|
||||||
className='bg-gray-200 border-b-2 border-gray-400'
|
|
||||||
style={{ pageBreakInside: 'avoid' }}
|
|
||||||
>
|
|
||||||
<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-lg text-center font-semibold text-gray-800 border-r border-gray-400'>
|
<td className='p-5 text-xl text-center font-bold text-gray-800 border-r border-gray-400'>
|
||||||
{categoryTotalQty}
|
{categoryTotalQty}
|
||||||
</td>
|
</td>
|
||||||
<td className='p-3 text-lg text-right font-semibold text-gray-800'>
|
<td className='p-5 text-xl text-right font-bold text-gray-800'>
|
||||||
{formatCurrency(categoryTotalRevenue)}
|
{formatCurrency(categoryTotalRevenue)}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
)
|
</tfoot>
|
||||||
})
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
|
||||||
return rows
|
{/* Grand Total */}
|
||||||
})()}
|
<div
|
||||||
</tbody>
|
className='bg-purple-50 rounded-lg border-2 border-purple-300 mt-6'
|
||||||
|
style={{
|
||||||
|
pageBreakInside: 'avoid',
|
||||||
|
breakInside: 'avoid'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<table className='w-full' style={{ borderCollapse: 'collapse' }}>
|
||||||
<tfoot>
|
<tfoot>
|
||||||
<tr className='text-gray-800 border-t-2 border-gray-300' style={{ pageBreakInside: 'avoid' }}>
|
<tr className='text-gray-800'>
|
||||||
<td className='p-3 text-lg font-bold border-r border-gray-300'>TOTAL KESELURUHAN</td>
|
<td
|
||||||
<td className='p-3 text-lg text-center font-bold border-r border-gray-300'>
|
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}
|
{productSummary.totalQuantitySold ?? 0}
|
||||||
</td>
|
</td>
|
||||||
<td className='p-3 text-lg text-right font-bold'>
|
<td className='p-5 text-2xl text-right font-bold' style={{ width: '30%', color: '#36175e' }}>
|
||||||
{formatCurrency(productSummary.totalRevenue ?? 0)}
|
{formatCurrency(productSummary.totalRevenue ?? 0)}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -611,7 +546,7 @@ const DailyPOSReport = () => {
|
|||||||
|
|
||||||
{/* Footer */}
|
{/* Footer */}
|
||||||
<div className='px-8 py-6 border-t-2 border-gray-200 mt-8'>
|
<div className='px-8 py-6 border-t-2 border-gray-200 mt-8'>
|
||||||
<div className='flex justify-between items-center text-sm text-gray-600'>
|
<div className='flex justify-between items-center text-base text-gray-600'>
|
||||||
<p>© 2025 Apskel - Sistem POS Terpadu</p>
|
<p>© 2025 Apskel - Sistem POS Terpadu</p>
|
||||||
<p></p>
|
<p></p>
|
||||||
<p>Dicetak pada: {now.toLocaleDateString('id-ID')}</p>
|
<p>Dicetak pada: {now.toLocaleDateString('id-ID')}</p>
|
||||||
|
|||||||
@ -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='h3'
|
variant='h1'
|
||||||
component='h2'
|
component='h1'
|
||||||
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='body1'
|
variant='h5'
|
||||||
sx={{
|
sx={{
|
||||||
color: '#222222',
|
color: '#222222',
|
||||||
mt: 2
|
mt: 2
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user