efril #1
@ -1,58 +1,95 @@
|
||||
'use client'
|
||||
|
||||
import Logo from '@/@core/svg/Logo'
|
||||
import { useProductSalesAnalytics, useProfitLossAnalytics, useSalesAnalytics } from '@/services/queries/analytics'
|
||||
import {
|
||||
useProductSalesAnalytics,
|
||||
useProfitLossAnalytics,
|
||||
useSalesAnalytics,
|
||||
usePaymentAnalytics
|
||||
} 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<HTMLElement | 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') // 'single' or 'range'
|
||||
|
||||
// Use selectedDate for single date filter, or dateRange for range filter
|
||||
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({
|
||||
date_from: formatDateDDMMYYYY(now),
|
||||
date_to: formatDateDDMMYYYY(now)
|
||||
})
|
||||
const { data: profitLoss } = useProfitLossAnalytics({
|
||||
date_from: formatDateDDMMYYYY(now),
|
||||
date_to: formatDateDDMMYYYY(now)
|
||||
})
|
||||
const { data: products } = useProductSalesAnalytics({
|
||||
date_from: formatDateDDMMYYYY(now),
|
||||
date_to: formatDateDDMMYYYY(now)
|
||||
})
|
||||
|
||||
const user = (() => {
|
||||
try {
|
||||
return JSON.parse(localStorage.getItem('user') || '{}')
|
||||
} catch {
|
||||
return {}
|
||||
}
|
||||
})()
|
||||
const { data: sales } = useSalesAnalytics(dateParams)
|
||||
const { data: profitLoss } = useProfitLossAnalytics(dateParams)
|
||||
const { data: products } = useProductSalesAnalytics(dateParams)
|
||||
const { data: paymentAnalytics } = usePaymentAnalytics(dateParams)
|
||||
|
||||
const productSummary = {
|
||||
totalQuantitySold: products?.data.reduce((sum, item) => sum + item.quantity_sold, 0),
|
||||
totalRevenue: products?.data.reduce((sum, item) => sum + item.revenue, 0),
|
||||
totalOrders: products?.data.reduce((sum, item) => sum + item.order_count, 0)
|
||||
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
|
||||
}
|
||||
|
||||
// Calculate profit loss product summary
|
||||
const profitLossProductSummary = {
|
||||
totalRevenue: profitLoss?.product_data?.reduce((sum, item) => sum + (item?.revenue || 0), 0) || 0,
|
||||
totalCost: profitLoss?.product_data?.reduce((sum, item) => sum + (item?.cost || 0), 0) || 0,
|
||||
totalGrossProfit: profitLoss?.product_data?.reduce((sum, item) => sum + (item?.gross_profit || 0), 0) || 0,
|
||||
totalQuantity: profitLoss?.product_data?.reduce((sum, item) => sum + (item?.quantity_sold || 0), 0) || 0
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setNow(new Date())
|
||||
}, [])
|
||||
|
||||
const calculateCOGS = (totalRevenue: number, grossProfit: number) => {
|
||||
return totalRevenue - grossProfit
|
||||
// Format date for input field (YYYY-MM-DD)
|
||||
const formatDateForInput = (date: Date) => {
|
||||
return date.toISOString().split('T')[0]
|
||||
}
|
||||
|
||||
const calculateAveragePerTransaction = (totalRevenue: number, totalOrders: number) => {
|
||||
if (totalOrders === 0) return 0
|
||||
return totalRevenue / totalOrders
|
||||
// Get display text for the report period
|
||||
const getReportPeriodText = () => {
|
||||
if (filterType === 'single') {
|
||||
return `${formatDateDDMMYYYY(selectedDate)} - ${formatDateDDMMYYYY(selectedDate)}`
|
||||
} else {
|
||||
return `${formatDateDDMMYYYY(dateRange.startDate)} - ${formatDateDDMMYYYY(dateRange.endDate)}`
|
||||
}
|
||||
}
|
||||
|
||||
const generatePDF = async () => {
|
||||
// Get report title based on filter type
|
||||
const getReportTitle = () => {
|
||||
if (filterType === 'single') {
|
||||
return 'Laporan Transaksi'
|
||||
} else {
|
||||
const daysDiff = Math.ceil((dateRange.endDate.getTime() - dateRange.startDate.getTime()) / (1000 * 3600 * 24)) + 1
|
||||
// return `Laporan Transaksi ${daysDiff} Hari`
|
||||
return `Laporan Transaksi`
|
||||
}
|
||||
}
|
||||
|
||||
const handleGeneratePDF = async () => {
|
||||
const reportElement = reportRef.current
|
||||
|
||||
try {
|
||||
@ -104,14 +141,19 @@ const DailyPOSReport = () => {
|
||||
|
||||
// Additional compression options
|
||||
pdf.setProperties({
|
||||
title: `Laporan Transaksi Harian`,
|
||||
title: `${getReportTitle()}`,
|
||||
subject: 'Daily Transaction Report',
|
||||
author: 'Apskel POS System',
|
||||
creator: 'Apskel'
|
||||
})
|
||||
|
||||
// Save with optimized settings
|
||||
pdf.save(`laporan-transaksi-harian.pdf`, {
|
||||
const fileName =
|
||||
filterType === 'single'
|
||||
? `laporan-transaksi-${formatDateForInput(selectedDate)}.pdf`
|
||||
: `laporan-transaksi-${formatDateForInput(dateRange.startDate)}-to-${formatDateForInput(dateRange.endDate)}.pdf`
|
||||
|
||||
pdf.save(fileName, {
|
||||
returnPromise: true
|
||||
})
|
||||
|
||||
@ -126,151 +168,208 @@ const DailyPOSReport = () => {
|
||||
return (
|
||||
<div className='min-h-screen'>
|
||||
{/* Control Panel */}
|
||||
<div className='max-w-4xl mx-auto mb-6'>
|
||||
<div className='bg-white rounded-lg p-4 border border-gray-200'>
|
||||
<div className='flex items-center justify-between'>
|
||||
<h1 className='text-2xl font-bold text-gray-800'>Generator Laporan Transaksi Harian</h1>
|
||||
<button
|
||||
onClick={generatePDF}
|
||||
className='flex items-center gap-2 px-4 py-2 text-white rounded-lg hover:opacity-90 transition-opacity'
|
||||
style={{ backgroundColor: '#36175e' }}
|
||||
>
|
||||
Download PDF
|
||||
</button>
|
||||
</div>
|
||||
<p className='text-gray-600 mt-2'>Klik tombol download untuk mengeksport laporan ke PDF</p>
|
||||
</div>
|
||||
</div>
|
||||
<ReportGeneratorComponent
|
||||
// Props wajib
|
||||
reportTitle='Laporan Penjualan'
|
||||
filterType={filterType}
|
||||
selectedDate={selectedDate}
|
||||
dateRange={dateRange}
|
||||
onFilterTypeChange={setFilterType}
|
||||
onSingleDateChange={setSelectedDate}
|
||||
onDateRangeChange={setDateRange}
|
||||
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' }}>
|
||||
{/* Header */}
|
||||
<div className='p-8 pb-6 border-b-2' style={{ borderColor: '#36175e' }}>
|
||||
<div className='flex items-start justify-between'>
|
||||
<div className='flex items-center gap-4'>
|
||||
<Logo />
|
||||
<div>
|
||||
<h1 className='text-3xl font-bold' style={{ color: '#36175e' }}>
|
||||
Apskel
|
||||
</h1>
|
||||
<h2 className='text-xl font-semibold text-gray-800 mt-1'>{outlet?.name}</h2>
|
||||
<p className='text-gray-600 text-sm mt-1'>{outlet?.address}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='text-right'>
|
||||
<h3 className='text-2xl font-bold text-gray-800'>Laporan Transaksi Harian</h3>
|
||||
<div className='flex items-center justify-end gap-2 mt-2'>
|
||||
<span className='text-sm text-gray-600'>Laporan Operasional</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Information Section */}
|
||||
<div className='p-8 pb-6'>
|
||||
<div className='grid grid-cols-2 gap-6'>
|
||||
<div className='space-y-3'>
|
||||
<div>
|
||||
<span className='text-sm font-medium text-gray-500'>Tanggal Laporan</span>
|
||||
<p className='text-lg font-semibold text-gray-800'>{formatDate(now)}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className='text-sm font-medium text-gray-500'>Periode Operasional</span>
|
||||
<p className='text-lg font-semibold text-gray-800'>
|
||||
{formatDateDDMMYYYY(now)} / {formatDateDDMMYYYY(now)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='space-y-3'>
|
||||
<div>
|
||||
<span className='text-sm font-medium text-gray-500'>Dicetak Oleh</span>
|
||||
<p className='text-lg font-semibold text-gray-800'>{user.name}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className='text-sm font-medium text-gray-500'>Waktu Cetak</span>
|
||||
<p className='text-lg font-semibold text-gray-800'>{formatDatetime(now)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ReportHeader
|
||||
outlet={outlet}
|
||||
reportTitle={getReportTitle()}
|
||||
reportSubtitle='Laporan Bulanan'
|
||||
brandName='Apskel'
|
||||
brandColor='#36175e'
|
||||
periode={getReportPeriodText()}
|
||||
/>
|
||||
|
||||
{/* Performance Summary */}
|
||||
<div className='px-8 pb-8'>
|
||||
<div className='p-8'>
|
||||
<h3 className='text-xl font-bold mb-6' style={{ color: '#36175e' }}>
|
||||
1. Ringkasan Kinerja
|
||||
</h3>
|
||||
|
||||
<div className='grid grid-cols-3 gap-4 mb-6'>
|
||||
<div className='bg-gray-50 p-4 rounded-lg border border-gray-200'>
|
||||
<p className='text-sm text-gray-600 mb-1'>Total Transaksi</p>
|
||||
<p className='text-2xl font-bold text-gray-800'>{sales?.summary.total_orders}</p>
|
||||
</div>
|
||||
<div className='bg-gray-50 p-4 rounded-lg border border-gray-200'>
|
||||
<p className='text-sm text-gray-600 mb-1'>Item Terjual</p>
|
||||
<p className='text-2xl font-bold text-gray-800'>{sales?.summary.total_items}</p>
|
||||
</div>
|
||||
<div className='bg-gray-50 p-4 rounded-lg border border-gray-200'>
|
||||
<p className='text-sm text-gray-600 mb-1'>Margin Laba Kotor</p>
|
||||
<p className='text-2xl font-bold text-gray-800'>{profitLoss?.summary.gross_profit_margin.toFixed(2)}%</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='grid grid-cols-2 gap-6'>
|
||||
<div className='space-y-4'>
|
||||
<div className='flex justify-between items-center py-2 border-b border-gray-200'>
|
||||
<span className='text-gray-700'>Pendapatan Kotor</span>
|
||||
<span className='text-gray-700'>TOTAL PENJUALAN (termasuk rasik)</span>
|
||||
<span className='font-semibold text-gray-800'>
|
||||
{formatCurrency(profitLoss?.summary.gross_profit ?? 0)}
|
||||
{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-red-600'>
|
||||
-{formatCurrency(profitLoss?.summary.total_discount ?? 0)}
|
||||
</span>
|
||||
<span className='text-gray-700'>Total Terjual</span>
|
||||
<span className='font-semibold text-gray-800'>{productSummary.totalQuantitySold}</span>
|
||||
</div>
|
||||
<div className='flex justify-between items-center py-2 border-b border-gray-200'>
|
||||
<span className='text-gray-700'>Pajak</span>
|
||||
<span className='text-gray-700'>HPP</span>
|
||||
<span className='font-semibold text-gray-800'>
|
||||
{formatCurrency(profitLoss?.summary.total_tax ?? 0)}
|
||||
{formatCurrency(profitLoss?.summary.total_cost ?? 0)} |{' '}
|
||||
{(((profitLoss?.summary.total_cost ?? 0) / (profitLoss?.summary.total_revenue || 1)) * 100).toFixed(
|
||||
0
|
||||
)}
|
||||
%
|
||||
</span>
|
||||
</div>
|
||||
<div className='flex justify-between items-center py-2 border-b-2 border-gray-300'>
|
||||
<span className='text-lg font-semibold text-gray-800'>Pendapatan Bersih</span>
|
||||
<span className='text-lg font-bold' style={{ color: '#36175e' }}>
|
||||
{formatCurrency(profitLoss?.summary.net_profit ?? 0)}
|
||||
<span className='text-lg font-semibold text-green-800'>Laba Kotor</span>
|
||||
<span className='text-lg font-bold text-green-800'>
|
||||
{formatCurrency(profitLoss?.summary.gross_profit ?? 0)} |{' '}
|
||||
{(profitLoss?.summary.gross_profit_margin ?? 0).toFixed(0)}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='space-y-4'>
|
||||
<div className='flex justify-between items-center py-2 border-b border-gray-200'>
|
||||
<span className='text-gray-700'>HPP (COGS)</span>
|
||||
<span
|
||||
className={`font-semibold ${
|
||||
calculateCOGS(profitLoss?.summary.total_revenue ?? 0, profitLoss?.summary.gross_profit ?? 0) < 0
|
||||
? 'text-red-600'
|
||||
: 'text-gray-800'
|
||||
}`}
|
||||
>
|
||||
{formatCurrency(
|
||||
calculateCOGS(profitLoss?.summary.total_revenue ?? 0, profitLoss?.summary.gross_profit ?? 0)
|
||||
)}
|
||||
<span className='text-gray-700'>Biaya lain²</span>
|
||||
<span className='font-semibold text-gray-800'>
|
||||
{formatCurrency(profitLoss?.summary.total_tax ?? 0)} |{' '}
|
||||
{(((profitLoss?.summary.total_tax ?? 0) / (profitLoss?.summary.total_revenue || 1)) * 100).toFixed(0)}
|
||||
%
|
||||
</span>
|
||||
</div>
|
||||
<div className='flex justify-between items-center py-2 border-b-2 border-gray-300'>
|
||||
<span className='text-lg font-semibold text-gray-800'>Laba Kotor</span>
|
||||
<span className='text-lg font-bold' style={{ color: '#36175e' }}>
|
||||
{formatCurrency(profitLoss?.summary.gross_profit ?? 0)}
|
||||
<span className='text-lg font-bold text-blue-800'>Laba/Rugi</span>
|
||||
<span className='text-lg font-bold text-blue-800'>
|
||||
{formatCurrency(profitLoss?.summary.net_profit ?? 0)} |{' '}
|
||||
{(profitLoss?.summary.net_profit_margin ?? 0).toFixed(0)}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Profit Loss Product Table */}
|
||||
<div className='px-8 pb-8'>
|
||||
<h3 className='text-lg font-medium mb-6' style={{ color: '#36175e' }}>
|
||||
Laba Rugi Per Produk
|
||||
</h3>
|
||||
|
||||
<div className='bg-gray-50 rounded-lg border border-gray-200 overflow-hidden'>
|
||||
<table className='w-full'>
|
||||
<thead>
|
||||
<tr style={{ backgroundColor: '#36175e' }} className='text-white'>
|
||||
<th className='text-left p-3 font-semibold'>Produk</th>
|
||||
<th className='text-center p-3 font-semibold'>Qty</th>
|
||||
<th className='text-right p-3 font-semibold'>Pendapatan</th>
|
||||
<th className='text-right p-3 font-semibold'>HPP</th>
|
||||
<th className='text-right p-3 font-semibold'>Laba Kotor</th>
|
||||
<th className='text-center p-3 font-semibold'>Margin (%)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{profitLoss?.product_data?.map((item, index) => (
|
||||
<tr key={index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
|
||||
<td className='p-3 font-medium text-gray-800'>{item.product_name}</td>
|
||||
<td className='p-3 text-center text-gray-700'>{item.quantity_sold}</td>
|
||||
<td className='p-3 text-right font-semibold text-gray-800'>{formatCurrency(item.revenue)}</td>
|
||||
<td className='p-3 text-right font-semibold text-red-600'>{formatCurrency(item.cost)}</td>
|
||||
<td className='p-3 text-right font-semibold text-green-600'>{formatCurrency(item.gross_profit)}</td>
|
||||
<td className='p-3 text-center font-semibold' style={{ color: '#36175e' }}>
|
||||
{(item.gross_profit_margin ?? 0).toFixed(1)}%
|
||||
</td>
|
||||
</tr>
|
||||
)) || []}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr style={{ backgroundColor: '#36175e' }} className='text-white'>
|
||||
<td className='p-3 font-bold'>TOTAL</td>
|
||||
<td className='p-3 text-center font-bold'>{profitLossProductSummary.totalQuantity}</td>
|
||||
<td className='p-3 text-right font-bold'>{formatCurrency(profitLossProductSummary.totalRevenue)}</td>
|
||||
<td className='p-3 text-right font-bold'>{formatCurrency(profitLossProductSummary.totalCost)}</td>
|
||||
<td className='p-3 text-right font-bold'>
|
||||
{formatCurrency(profitLossProductSummary.totalGrossProfit)}
|
||||
</td>
|
||||
<td className='p-3 text-center font-bold'>
|
||||
{profitLossProductSummary.totalRevenue > 0
|
||||
? (
|
||||
(profitLossProductSummary.totalGrossProfit / profitLossProductSummary.totalRevenue) *
|
||||
100
|
||||
).toFixed(1)
|
||||
: 0}
|
||||
%
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Payment Method Summary */}
|
||||
<div className='px-8 pb-8'>
|
||||
<h3 className='text-xl font-bold mb-6' style={{ color: '#36175e' }}>
|
||||
2. Ringkasan Metode Pembayaran
|
||||
</h3>
|
||||
|
||||
<div className='bg-gray-50 rounded-lg border border-gray-200 overflow-hidden'>
|
||||
<table className='w-full'>
|
||||
<thead>
|
||||
<tr style={{ backgroundColor: '#36175e' }} className='text-white'>
|
||||
<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>
|
||||
</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-center'>
|
||||
<span
|
||||
className={`px-2 py-1 rounded-full text-xs 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-3 text-center text-gray-700'>{payment.order_count}</td>
|
||||
<td className='p-3 text-right font-semibold text-gray-800'>
|
||||
{formatCurrency(payment.total_amount)}
|
||||
</td>
|
||||
<td className='p-3 text-center font-medium' style={{ color: '#36175e' }}>
|
||||
{(payment.percentage ?? 0).toFixed(1)}%
|
||||
</td>
|
||||
</tr>
|
||||
)) || []}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr style={{ backgroundColor: '#36175e' }} className='text-white'>
|
||||
<td className='p-3 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'>
|
||||
{formatCurrency(paymentAnalytics?.summary.total_amount ?? 0)}
|
||||
</td>
|
||||
<td className='p-3 text-center font-bold'>100.0%</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Transaction Summary */}
|
||||
<div className='px-8 pb-8'>
|
||||
<h3 className='text-xl font-bold mb-6' style={{ color: '#36175e' }}>
|
||||
2. Ringkasan Transaksi
|
||||
3. Ringkasan Transaksi
|
||||
</h3>
|
||||
|
||||
<div className='bg-gray-50 rounded-lg border border-gray-200 overflow-hidden'>
|
||||
@ -286,23 +385,23 @@ const DailyPOSReport = () => {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{products?.data.map((item, index) => (
|
||||
{products?.data?.map((item, index) => (
|
||||
<tr key={index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
|
||||
<td className='p-3 font-medium text-gray-800'>{item.product_name}</td>
|
||||
<td className='p-3 font-medium text-gray-800'>{item.category_name}</td>
|
||||
<td className='p-3 text-center text-gray-700'>{item.quantity_sold}</td>
|
||||
<td className='p-3 text-right text-gray-700'>{item.order_count}</td>
|
||||
<td className='p-3 text-center text-gray-700'>{item.order_count ?? 0}</td>
|
||||
<td className='p-3 text-right font-semibold text-gray-800'>{formatCurrency(item.revenue)}</td>
|
||||
<td className='p-3 text-right font-medium text-gray-800'>{formatCurrency(item.average_price)}</td>
|
||||
</tr>
|
||||
))}
|
||||
)) || []}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr style={{ backgroundColor: '#36175e' }} className='text-white'>
|
||||
<td className='p-3 font-bold'>TOTAL</td>
|
||||
<td className='p-3 text-center'></td>
|
||||
<td className='p-3 font-bold'>{productSummary.totalQuantitySold}</td>
|
||||
<td className='p-3 text-right font-bold'>{productSummary.totalOrders}</td>
|
||||
<td className='p-3 text-center font-bold'>{productSummary.totalQuantitySold ?? 0}</td>
|
||||
<td className='p-3 text-right font-bold'>{productSummary.totalOrders ?? 0}</td>
|
||||
<td className='p-3 text-right font-bold'>{formatCurrency(productSummary.totalRevenue ?? 0)}</td>
|
||||
<td className='p-3 text-right font-bold'></td>
|
||||
</tr>
|
||||
@ -311,92 +410,7 @@ const DailyPOSReport = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Financial Summary */}
|
||||
<div className='px-8 pb-8'>
|
||||
<h3 className='text-xl font-bold mb-6' style={{ color: '#36175e' }}>
|
||||
3. Ringkasan Finansial
|
||||
</h3>
|
||||
|
||||
<div className='grid grid-cols-2 gap-8'>
|
||||
<div className='bg-gray-50 p-6 rounded-lg border border-gray-200'>
|
||||
<h4 className='font-semibold text-gray-800 mb-4'>Pendapatan</h4>
|
||||
<div className='space-y-3'>
|
||||
<div className='flex justify-between'>
|
||||
<span className='text-gray-600'>Penjualan Kotor</span>
|
||||
<span className='font-medium' style={{ color: '#36175e' }}>
|
||||
{formatCurrency(sales?.summary.total_sales ?? 0)}
|
||||
</span>
|
||||
</div>
|
||||
<div className='flex justify-between'>
|
||||
<span className='text-gray-600'>Diskon</span>
|
||||
<span className='font-medium text-red-600'>
|
||||
-{formatCurrency(sales?.summary.total_discount ?? 0)}
|
||||
</span>
|
||||
</div>
|
||||
<div className='flex justify-between border-t pt-3'>
|
||||
<span className='font-semibold text-gray-600'>Net Sales</span>
|
||||
<span className='font-bold' style={{ color: '#36175e' }}>
|
||||
{formatCurrency(sales?.summary.net_sales ?? 0)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='bg-gray-50 p-6 rounded-lg border border-gray-200'>
|
||||
<h4 className='font-semibold text-gray-800 mb-4'>Profitabilitas</h4>
|
||||
<div className='space-y-3'>
|
||||
<div className='flex justify-between'>
|
||||
<span className='text-gray-600'>Laba Kotor</span>
|
||||
<span className='font-medium' style={{ color: '#36175e' }}>
|
||||
{formatCurrency(profitLoss?.summary.gross_profit ?? 0)}
|
||||
</span>
|
||||
</div>
|
||||
<div className='flex justify-between'>
|
||||
<span className='text-gray-600'>Margin Laba</span>
|
||||
<span className='font-medium' style={{ color: '#36175e' }}>
|
||||
{profitLoss?.summary.net_profit_margin.toFixed(2) ?? 0}%
|
||||
</span>
|
||||
</div>
|
||||
<div className='flex justify-between border-t pt-3'>
|
||||
<span className='font-semibold text-gray-600'>HPP</span>
|
||||
<span className='font-bold text-red-600'>
|
||||
{formatCurrency(
|
||||
calculateCOGS(profitLoss?.summary.total_revenue ?? 0, profitLoss?.summary.gross_profit ?? 0)
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className='mt-8 p-6 rounded-lg border-2'
|
||||
style={{ borderColor: '#36175e', backgroundColor: 'rgba(54, 23, 94, 0.05)' }}
|
||||
>
|
||||
<div className='grid grid-cols-3 gap-6 text-center'>
|
||||
<div>
|
||||
<p className='text-sm text-gray-600 mb-1'>Rata-rata per Transaksi</p>
|
||||
<p className='text-xl font-bold' style={{ color: '#36175e' }}>
|
||||
{formatCurrency(
|
||||
calculateAveragePerTransaction(sales?.summary.net_sales ?? 0, sales?.summary.total_orders ?? 0)
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className='text-sm text-gray-600 mb-1'>Item per Transaksi</p>
|
||||
<p className='text-xl font-bold' style={{ color: '#36175e' }}>
|
||||
{Math.round(((sales?.summary.total_items ?? 0) / (sales?.summary.total_orders ?? 0)) * 10) / 10}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className='text-sm text-gray-600 mb-1'>Efisiensi Operasional</p>
|
||||
<p className='text-xl font-bold' style={{ color: '#36175e' }}>
|
||||
{Math.round(profitLoss?.summary.profitability_ratio ?? 0)}%
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Profit Loss Product Table */}
|
||||
|
||||
{/* Footer */}
|
||||
<div className='px-8 py-6 border-t-2 border-gray-200 mt-8'>
|
||||
|
||||
519
src/views/dashboards/daily-report/report-generator.tsx
Normal file
519
src/views/dashboards/daily-report/report-generator.tsx
Normal file
@ -0,0 +1,519 @@
|
||||
import React, { ReactNode } from 'react'
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
Button,
|
||||
Typography,
|
||||
FormControl,
|
||||
FormControlLabel,
|
||||
Radio,
|
||||
RadioGroup,
|
||||
TextField,
|
||||
Box,
|
||||
Chip,
|
||||
Divider,
|
||||
Grid,
|
||||
useTheme
|
||||
} from '@mui/material'
|
||||
import { styled } from '@mui/material/styles'
|
||||
|
||||
// Type definitions
|
||||
interface DateRange {
|
||||
startDate: Date
|
||||
endDate: Date
|
||||
}
|
||||
|
||||
interface QuickAction {
|
||||
label: string
|
||||
handler: () => void
|
||||
}
|
||||
|
||||
interface CustomQuickActions {
|
||||
single?: QuickAction[]
|
||||
range?: QuickAction[]
|
||||
}
|
||||
|
||||
interface Labels {
|
||||
filterLabel?: string
|
||||
singleDateLabel?: string
|
||||
rangeDateLabel?: string
|
||||
selectDateLabel?: string
|
||||
fromLabel?: string
|
||||
toLabel?: string
|
||||
todayLabel?: string
|
||||
yesterdayLabel?: string
|
||||
last7DaysLabel?: string
|
||||
last30DaysLabel?: string
|
||||
periodLabel?: string
|
||||
exportHelpText?: string
|
||||
}
|
||||
|
||||
interface ReportGeneratorProps {
|
||||
// Required props
|
||||
reportTitle: string
|
||||
filterType: 'single' | 'range'
|
||||
selectedDate: Date
|
||||
dateRange: DateRange
|
||||
onFilterTypeChange: (filterType: 'single' | 'range') => void
|
||||
onSingleDateChange: (date: Date) => void
|
||||
onDateRangeChange: (dateRange: DateRange) => void
|
||||
onGeneratePDF: () => void
|
||||
|
||||
// Optional props dengan default values
|
||||
maxWidth?: string
|
||||
showQuickActions?: boolean
|
||||
customQuickActions?: CustomQuickActions | null
|
||||
periodFormat?: string
|
||||
downloadButtonText?: string
|
||||
cardShadow?: string
|
||||
primaryColor?: string
|
||||
|
||||
// Optional helper functions
|
||||
formatDateForInput?: ((date: Date) => string) | null
|
||||
getReportPeriodText?: (() => string) | null
|
||||
|
||||
// Additional customization
|
||||
className?: string
|
||||
style?: React.CSSProperties
|
||||
children?: ReactNode
|
||||
|
||||
// Loading state
|
||||
isGenerating?: boolean
|
||||
|
||||
// Custom labels
|
||||
labels?: Labels
|
||||
}
|
||||
|
||||
// Custom styled components yang responsif terhadap theme
|
||||
const StyledCard = styled(Card)(({ theme }) => ({
|
||||
maxWidth: '1024px',
|
||||
margin: '0 auto 24px',
|
||||
boxShadow: theme.palette.mode === 'dark' ? '0 2px 10px rgba(20, 21, 33, 0.3)' : '0 2px 10px rgba(58, 53, 65, 0.1)',
|
||||
borderRadius: '8px',
|
||||
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.background.paper : '#ffffff'
|
||||
}))
|
||||
|
||||
const PurpleButton = styled(Button)(({ theme }) => ({
|
||||
backgroundColor: '#36175e',
|
||||
color: 'white',
|
||||
textTransform: 'none',
|
||||
fontWeight: 500,
|
||||
padding: '8px 24px',
|
||||
'&:hover': {
|
||||
backgroundColor: '#2d1350',
|
||||
opacity: 0.9
|
||||
},
|
||||
'&:disabled': {
|
||||
backgroundColor: theme.palette.mode === 'dark' ? '#444' : '#ccc',
|
||||
color: theme.palette.mode === 'dark' ? '#888' : '#666'
|
||||
}
|
||||
}))
|
||||
|
||||
const QuickActionButton = styled(Button)(({ theme }) => ({
|
||||
backgroundColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.08)' : '#f8f7fa',
|
||||
color: theme.palette.mode === 'dark' ? theme.palette.text.secondary : '#6f6b7d',
|
||||
textTransform: 'none',
|
||||
fontSize: '0.875rem',
|
||||
padding: '6px 16px',
|
||||
borderRadius: '6px',
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.16)' : '#ebe9f1'
|
||||
}
|
||||
}))
|
||||
|
||||
const InfoBox = styled(Box)(({ theme }) => ({
|
||||
marginTop: theme.spacing(3),
|
||||
padding: theme.spacing(2),
|
||||
backgroundColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.04)' : '#f8f7fa',
|
||||
borderRadius: theme.shape.borderRadius,
|
||||
border: theme.palette.mode === 'dark' ? '1px solid rgba(231, 227, 252, 0.12)' : 'none'
|
||||
}))
|
||||
|
||||
const ReportGeneratorComponent: React.FC<ReportGeneratorProps> = ({
|
||||
// Required props
|
||||
reportTitle,
|
||||
filterType,
|
||||
selectedDate,
|
||||
dateRange,
|
||||
onFilterTypeChange,
|
||||
onSingleDateChange,
|
||||
onDateRangeChange,
|
||||
onGeneratePDF,
|
||||
|
||||
// Optional props dengan default values
|
||||
maxWidth = '1024px',
|
||||
showQuickActions = true,
|
||||
customQuickActions = null,
|
||||
periodFormat = 'id-ID',
|
||||
downloadButtonText = 'Download PDF',
|
||||
cardShadow,
|
||||
primaryColor = '#36175e',
|
||||
|
||||
// Optional helper functions
|
||||
formatDateForInput = null,
|
||||
getReportPeriodText = null,
|
||||
|
||||
// Additional customization
|
||||
className = '',
|
||||
style = {},
|
||||
children = null,
|
||||
|
||||
// Loading state
|
||||
isGenerating = false,
|
||||
|
||||
// Custom labels
|
||||
labels = {
|
||||
filterLabel: 'Filter Tanggal:',
|
||||
singleDateLabel: 'Hari Tunggal',
|
||||
rangeDateLabel: 'Rentang Tanggal',
|
||||
selectDateLabel: 'Pilih Tanggal:',
|
||||
fromLabel: 'Dari:',
|
||||
toLabel: 'Sampai:',
|
||||
todayLabel: 'Hari Ini',
|
||||
yesterdayLabel: 'Kemarin',
|
||||
last7DaysLabel: '7 Hari Terakhir',
|
||||
last30DaysLabel: '30 Hari Terakhir',
|
||||
periodLabel: 'Periode:',
|
||||
exportHelpText: 'Klik tombol download untuk mengeksport laporan ke PDF'
|
||||
}
|
||||
}) => {
|
||||
const theme = useTheme()
|
||||
|
||||
// Dynamic colors berdasarkan theme
|
||||
const textPrimary = theme.palette.text.primary
|
||||
const textSecondary = theme.palette.text.secondary
|
||||
const dynamicCardShadow =
|
||||
cardShadow ||
|
||||
(theme.palette.mode === 'dark' ? '0 2px 10px rgba(20, 21, 33, 0.3)' : '0 2px 10px rgba(58, 53, 65, 0.1)')
|
||||
|
||||
// Default format date function
|
||||
const defaultFormatDateForInput = (date: Date): string => {
|
||||
return date.toISOString().split('T')[0]
|
||||
}
|
||||
|
||||
// Default period text function
|
||||
const defaultGetReportPeriodText = (): string => {
|
||||
if (filterType === 'single') {
|
||||
return selectedDate.toLocaleDateString(periodFormat, {
|
||||
weekday: 'long',
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})
|
||||
} else {
|
||||
return `${dateRange.startDate.toLocaleDateString(periodFormat)} - ${dateRange.endDate.toLocaleDateString(periodFormat)}`
|
||||
}
|
||||
}
|
||||
|
||||
// Use provided functions or defaults
|
||||
const formatDate = formatDateForInput || defaultFormatDateForInput
|
||||
const getPeriodText = getReportPeriodText || defaultGetReportPeriodText
|
||||
|
||||
// Quick action handlers
|
||||
const handleToday = (): void => {
|
||||
onSingleDateChange(new Date())
|
||||
}
|
||||
|
||||
const handleYesterday = (): void => {
|
||||
const yesterday = new Date()
|
||||
yesterday.setDate(yesterday.getDate() - 1)
|
||||
onSingleDateChange(yesterday)
|
||||
}
|
||||
|
||||
const handleLast7Days = (): void => {
|
||||
const today = new Date()
|
||||
const weekAgo = new Date()
|
||||
weekAgo.setDate(today.getDate() - 6)
|
||||
onDateRangeChange({ startDate: weekAgo, endDate: today })
|
||||
}
|
||||
|
||||
const handleLast30Days = (): void => {
|
||||
const today = new Date()
|
||||
const monthAgo = new Date()
|
||||
monthAgo.setDate(today.getDate() - 29)
|
||||
onDateRangeChange({ startDate: monthAgo, endDate: today })
|
||||
}
|
||||
|
||||
// Default quick actions
|
||||
const defaultQuickActions: CustomQuickActions = {
|
||||
single: [
|
||||
{ label: labels.todayLabel || 'Hari Ini', handler: handleToday },
|
||||
{ label: labels.yesterdayLabel || 'Kemarin', handler: handleYesterday }
|
||||
],
|
||||
range: [
|
||||
{ label: labels.last7DaysLabel || '7 Hari Terakhir', handler: handleLast7Days },
|
||||
{ label: labels.last30DaysLabel || '30 Hari Terakhir', handler: handleLast30Days }
|
||||
]
|
||||
}
|
||||
|
||||
const quickActions = customQuickActions || defaultQuickActions
|
||||
|
||||
return (
|
||||
<StyledCard
|
||||
className={className}
|
||||
style={{
|
||||
...style,
|
||||
maxWidth,
|
||||
boxShadow: dynamicCardShadow
|
||||
}}
|
||||
>
|
||||
<CardHeader
|
||||
title={
|
||||
<Typography
|
||||
variant='h4'
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
color: textPrimary
|
||||
}}
|
||||
>
|
||||
Generator {reportTitle}
|
||||
</Typography>
|
||||
}
|
||||
action={
|
||||
<PurpleButton
|
||||
onClick={onGeneratePDF}
|
||||
variant='contained'
|
||||
disabled={isGenerating}
|
||||
sx={{ backgroundColor: primaryColor }}
|
||||
>
|
||||
{isGenerating ? 'Generating...' : downloadButtonText}
|
||||
</PurpleButton>
|
||||
}
|
||||
sx={{ pb: 2 }}
|
||||
/>
|
||||
|
||||
<CardContent>
|
||||
<Divider sx={{ mb: 3 }} />
|
||||
|
||||
{/* Filter Controls */}
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<Typography
|
||||
variant='subtitle2'
|
||||
sx={{
|
||||
mb: 2,
|
||||
fontWeight: 600,
|
||||
color: textPrimary
|
||||
}}
|
||||
>
|
||||
{labels.filterLabel || 'Filter Tanggal:'}
|
||||
</Typography>
|
||||
|
||||
<FormControl component='fieldset' sx={{ mb: 3 }}>
|
||||
<RadioGroup
|
||||
row
|
||||
value={filterType}
|
||||
onChange={e => onFilterTypeChange(e.target.value as 'single' | 'range')}
|
||||
sx={{ gap: 3 }}
|
||||
>
|
||||
<FormControlLabel
|
||||
value='single'
|
||||
control={
|
||||
<Radio
|
||||
sx={{
|
||||
color: primaryColor,
|
||||
'&.Mui-checked': { color: primaryColor }
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label={
|
||||
<Typography variant='body2' sx={{ color: textSecondary }}>
|
||||
{labels.singleDateLabel || 'Hari Tunggal'}
|
||||
</Typography>
|
||||
}
|
||||
/>
|
||||
<FormControlLabel
|
||||
value='range'
|
||||
control={
|
||||
<Radio
|
||||
sx={{
|
||||
color: primaryColor,
|
||||
'&.Mui-checked': { color: primaryColor }
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label={
|
||||
<Typography variant='body2' sx={{ color: textSecondary }}>
|
||||
{labels.rangeDateLabel || 'Rentang Tanggal'}
|
||||
</Typography>
|
||||
}
|
||||
/>
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
|
||||
{/* Single Date Filter */}
|
||||
{filterType === 'single' && (
|
||||
<Grid container spacing={2} alignItems='center'>
|
||||
<Grid item xs={12} sm='auto'>
|
||||
<Typography
|
||||
variant='subtitle2'
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
color: textPrimary
|
||||
}}
|
||||
>
|
||||
{labels.selectDateLabel || 'Pilih Tanggal:'}
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm='auto'>
|
||||
<TextField
|
||||
type='date'
|
||||
value={formatDate(selectedDate)}
|
||||
onChange={e => onSingleDateChange(new Date(e.target.value))}
|
||||
size='small'
|
||||
sx={{
|
||||
'& .MuiOutlinedInput-root': {
|
||||
'&.Mui-focused fieldset': {
|
||||
borderColor: primaryColor
|
||||
},
|
||||
'& fieldset': {
|
||||
borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
|
||||
}
|
||||
},
|
||||
'& .MuiInputBase-input': {
|
||||
color: textPrimary
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
{showQuickActions && (
|
||||
<Grid item xs={12} sm='auto'>
|
||||
<Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
|
||||
{quickActions.single?.map((action, index) => (
|
||||
<QuickActionButton key={index} onClick={action.handler}>
|
||||
{action.label}
|
||||
</QuickActionButton>
|
||||
))}
|
||||
</Box>
|
||||
</Grid>
|
||||
)}
|
||||
</Grid>
|
||||
)}
|
||||
|
||||
{/* Date Range Filter */}
|
||||
{filterType === 'range' && (
|
||||
<Grid container spacing={2} alignItems='center'>
|
||||
<Grid item xs={12} sm='auto'>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Typography
|
||||
variant='subtitle2'
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
color: textPrimary
|
||||
}}
|
||||
>
|
||||
{labels.fromLabel || 'Dari:'}
|
||||
</Typography>
|
||||
<TextField
|
||||
type='date'
|
||||
value={formatDate(dateRange.startDate)}
|
||||
onChange={e =>
|
||||
onDateRangeChange({
|
||||
...dateRange,
|
||||
startDate: new Date(e.target.value)
|
||||
})
|
||||
}
|
||||
size='small'
|
||||
sx={{
|
||||
'& .MuiOutlinedInput-root': {
|
||||
'&.Mui-focused fieldset': {
|
||||
borderColor: primaryColor
|
||||
},
|
||||
'& fieldset': {
|
||||
borderColor:
|
||||
theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
|
||||
}
|
||||
},
|
||||
'& .MuiInputBase-input': {
|
||||
color: textPrimary
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm='auto'>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Typography
|
||||
variant='subtitle2'
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
color: textPrimary
|
||||
}}
|
||||
>
|
||||
{labels.toLabel || 'Sampai:'}
|
||||
</Typography>
|
||||
<TextField
|
||||
type='date'
|
||||
value={formatDate(dateRange.endDate)}
|
||||
onChange={e =>
|
||||
onDateRangeChange({
|
||||
...dateRange,
|
||||
endDate: new Date(e.target.value)
|
||||
})
|
||||
}
|
||||
size='small'
|
||||
sx={{
|
||||
'& .MuiOutlinedInput-root': {
|
||||
'&.Mui-focused fieldset': {
|
||||
borderColor: primaryColor
|
||||
},
|
||||
'& fieldset': {
|
||||
borderColor:
|
||||
theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
|
||||
}
|
||||
},
|
||||
'& .MuiInputBase-input': {
|
||||
color: textPrimary
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Grid>
|
||||
{showQuickActions && (
|
||||
<Grid item xs={12} sm='auto'>
|
||||
<Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
|
||||
{quickActions.range?.map((action, index) => (
|
||||
<QuickActionButton key={index} onClick={action.handler}>
|
||||
{action.label}
|
||||
</QuickActionButton>
|
||||
))}
|
||||
</Box>
|
||||
</Grid>
|
||||
)}
|
||||
</Grid>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<InfoBox>
|
||||
<Typography variant='body2' sx={{ color: textSecondary }}>
|
||||
{labels.periodLabel || 'Periode:'}{' '}
|
||||
<Chip
|
||||
label={getPeriodText()}
|
||||
size='small'
|
||||
sx={{
|
||||
backgroundColor: primaryColor,
|
||||
color: 'white',
|
||||
fontWeight: 500,
|
||||
ml: 1
|
||||
}}
|
||||
/>
|
||||
</Typography>
|
||||
<Typography
|
||||
variant='body2'
|
||||
sx={{
|
||||
color: textSecondary,
|
||||
mt: 1
|
||||
}}
|
||||
>
|
||||
{labels.exportHelpText || 'Klik tombol download untuk mengeksport laporan ke PDF'}
|
||||
</Typography>
|
||||
</InfoBox>
|
||||
|
||||
{/* Custom content dapat ditambahkan di sini */}
|
||||
{children}
|
||||
</CardContent>
|
||||
</StyledCard>
|
||||
)
|
||||
}
|
||||
|
||||
export default ReportGeneratorComponent
|
||||
123
src/views/dashboards/daily-report/report-header.tsx
Normal file
123
src/views/dashboards/daily-report/report-header.tsx
Normal file
@ -0,0 +1,123 @@
|
||||
'use client'
|
||||
|
||||
// React Imports
|
||||
import type { FC } from 'react'
|
||||
|
||||
// MUI Imports
|
||||
import { Box, Typography, Divider } from '@mui/material'
|
||||
import { useTheme } from '@mui/material/styles'
|
||||
|
||||
// Component Imports
|
||||
import Logo from '@core/svg/Logo'
|
||||
|
||||
// Type Imports
|
||||
import type { Outlet } from '@/types/services/outlet'
|
||||
|
||||
// Props Interface
|
||||
export interface ReportHeaderProps {
|
||||
outlet?: Outlet
|
||||
reportTitle: string
|
||||
reportSubtitle?: string
|
||||
brandName?: string
|
||||
brandColor?: string
|
||||
className?: string
|
||||
periode?: string
|
||||
}
|
||||
|
||||
const ReportHeader: FC<ReportHeaderProps> = ({
|
||||
outlet,
|
||||
reportTitle,
|
||||
reportSubtitle = 'Laporan Operasional',
|
||||
brandName = 'Apskel',
|
||||
brandColor,
|
||||
className,
|
||||
periode
|
||||
}) => {
|
||||
// Hooks
|
||||
const theme = useTheme()
|
||||
|
||||
return (
|
||||
<Box className={className}>
|
||||
<Box sx={{ p: theme.spacing(8, 8, 6) }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
|
||||
{/* Left Section - Brand & Outlet Info */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||
<Logo />
|
||||
<Box>
|
||||
<Typography
|
||||
variant='h3'
|
||||
component='h1'
|
||||
sx={{
|
||||
fontWeight: 700,
|
||||
color: brandColor || theme.palette.primary.main
|
||||
}}
|
||||
>
|
||||
{brandName}
|
||||
</Typography>
|
||||
{outlet?.name && (
|
||||
<Typography
|
||||
variant='h5'
|
||||
component='h2'
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
mt: 1,
|
||||
color: theme.palette.text.primary
|
||||
}}
|
||||
>
|
||||
{outlet.name}
|
||||
</Typography>
|
||||
)}
|
||||
{outlet?.address && (
|
||||
<Typography
|
||||
variant='body2'
|
||||
sx={{
|
||||
mt: 1,
|
||||
color: theme.palette.text.secondary
|
||||
}}
|
||||
>
|
||||
{outlet.address}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Right Section - Report Info */}
|
||||
<Box sx={{ textAlign: 'right' }}>
|
||||
<Typography
|
||||
variant='h4'
|
||||
component='h3'
|
||||
sx={{
|
||||
fontWeight: 700,
|
||||
color: theme.palette.text.primary
|
||||
}}
|
||||
>
|
||||
{reportTitle}
|
||||
</Typography>
|
||||
{periode && (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 2, mt: 2 }}>
|
||||
<Typography variant='body2' sx={{ color: theme.palette.text.secondary }}>
|
||||
{periode}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
{reportSubtitle && (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 2, mt: 2 }}>
|
||||
<Typography variant='body2' sx={{ color: theme.palette.text.secondary }}>
|
||||
{reportSubtitle}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Divider
|
||||
sx={{
|
||||
borderWidth: 2,
|
||||
borderColor: brandColor || theme.palette.primary.main
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
export default ReportHeader
|
||||
Loading…
x
Reference in New Issue
Block a user