From 10acc8f3872ee5b7139aa05a1215f98fb6d329d0 Mon Sep 17 00:00:00 2001 From: efrilm Date: Mon, 11 Aug 2025 22:14:26 +0700 Subject: [PATCH] Update Report --- .../dashboards/daily-report/page.tsx | 472 ++++++++-------- .../daily-report/report-generator.tsx | 519 ++++++++++++++++++ .../dashboards/daily-report/report-header.tsx | 123 +++++ 3 files changed, 885 insertions(+), 229 deletions(-) create mode 100644 src/views/dashboards/daily-report/report-generator.tsx create mode 100644 src/views/dashboards/daily-report/report-header.tsx diff --git a/src/app/[lang]/(dashboard)/(private)/dashboards/daily-report/page.tsx b/src/app/[lang]/(dashboard)/(private)/dashboards/daily-report/page.tsx index 40e686e..da88704 100644 --- a/src/app/[lang]/(dashboard)/(private)/dashboards/daily-report/page.tsx +++ b/src/app/[lang]/(dashboard)/(private)/dashboards/daily-report/page.tsx @@ -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(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 (
{/* Control Panel */} -
-
-
-

Generator Laporan Transaksi Harian

- -
-

Klik tombol download untuk mengeksport laporan ke PDF

-
-
+ {/* Report Template */}
{/* Header */} -
-
-
- -
-

- Apskel -

-

{outlet?.name}

-

{outlet?.address}

-
-
-
-

Laporan Transaksi Harian

-
- Laporan Operasional -
-
-
-
- - {/* Information Section */} -
-
-
-
- Tanggal Laporan -

{formatDate(now)}

-
-
- Periode Operasional -

- {formatDateDDMMYYYY(now)} / {formatDateDDMMYYYY(now)} -

-
-
-
-
- Dicetak Oleh -

{user.name}

-
-
- Waktu Cetak -

{formatDatetime(now)}

-
-
-
-
+ {/* Performance Summary */} -
+

1. Ringkasan Kinerja

-
-
-

Total Transaksi

-

{sales?.summary.total_orders}

-
-
-

Item Terjual

-

{sales?.summary.total_items}

-
-
-

Margin Laba Kotor

-

{profitLoss?.summary.gross_profit_margin.toFixed(2)}%

-
-
-
- Pendapatan Kotor + TOTAL PENJUALAN (termasuk rasik) - {formatCurrency(profitLoss?.summary.gross_profit ?? 0)} + {formatCurrency(profitLoss?.summary.total_revenue ?? 0)}
- Total Diskon - - -{formatCurrency(profitLoss?.summary.total_discount ?? 0)} - + Total Terjual + {productSummary.totalQuantitySold}
- Pajak + HPP - {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 + )} + %
- Pendapatan Bersih - - {formatCurrency(profitLoss?.summary.net_profit ?? 0)} + Laba Kotor + + {formatCurrency(profitLoss?.summary.gross_profit ?? 0)} |{' '} + {(profitLoss?.summary.gross_profit_margin ?? 0).toFixed(0)}%
+
- HPP (COGS) - - {formatCurrency( - calculateCOGS(profitLoss?.summary.total_revenue ?? 0, profitLoss?.summary.gross_profit ?? 0) - )} + Biaya lain² + + {formatCurrency(profitLoss?.summary.total_tax ?? 0)} |{' '} + {(((profitLoss?.summary.total_tax ?? 0) / (profitLoss?.summary.total_revenue || 1)) * 100).toFixed(0)} + %
- Laba Kotor - - {formatCurrency(profitLoss?.summary.gross_profit ?? 0)} + Laba/Rugi + + {formatCurrency(profitLoss?.summary.net_profit ?? 0)} |{' '} + {(profitLoss?.summary.net_profit_margin ?? 0).toFixed(0)}%
+ {/* Profit Loss Product Table */} +
+

+ Laba Rugi Per Produk +

+ +
+ + + + + + + + + + + + + {profitLoss?.product_data?.map((item, index) => ( + + + + + + + + + )) || []} + + + + + + + + + + + +
ProdukQtyPendapatanHPPLaba KotorMargin (%)
{item.product_name}{item.quantity_sold}{formatCurrency(item.revenue)}{formatCurrency(item.cost)}{formatCurrency(item.gross_profit)} + {(item.gross_profit_margin ?? 0).toFixed(1)}% +
TOTAL{profitLossProductSummary.totalQuantity}{formatCurrency(profitLossProductSummary.totalRevenue)}{formatCurrency(profitLossProductSummary.totalCost)} + {formatCurrency(profitLossProductSummary.totalGrossProfit)} + + {profitLossProductSummary.totalRevenue > 0 + ? ( + (profitLossProductSummary.totalGrossProfit / profitLossProductSummary.totalRevenue) * + 100 + ).toFixed(1) + : 0} + % +
+
+
+ + {/* Payment Method Summary */} +
+

+ 2. Ringkasan Metode Pembayaran +

+ +
+ + + + + + + + + + + + {paymentAnalytics?.data?.map((payment, index) => ( + + + + + + + + )) || []} + + + + + + + + + + +
Metode PembayaranTipeJumlah OrderTotal AmountPersentase
{payment.payment_method_name} + + {payment.payment_method_type.toUpperCase()} + + {payment.order_count} + {formatCurrency(payment.total_amount)} + + {(payment.percentage ?? 0).toFixed(1)}% +
TOTAL{paymentAnalytics?.summary.total_orders ?? 0} + {formatCurrency(paymentAnalytics?.summary.total_amount ?? 0)} + 100.0%
+
+
+ {/* Transaction Summary */}

- 2. Ringkasan Transaksi + 3. Ringkasan Transaksi

@@ -286,23 +385,23 @@ const DailyPOSReport = () => { - {products?.data.map((item, index) => ( + {products?.data?.map((item, index) => ( {item.product_name} {item.category_name} {item.quantity_sold} - {item.order_count} + {item.order_count ?? 0} {formatCurrency(item.revenue)} {formatCurrency(item.average_price)} - ))} + )) || []} TOTAL - {productSummary.totalQuantitySold} - {productSummary.totalOrders} + {productSummary.totalQuantitySold ?? 0} + {productSummary.totalOrders ?? 0} {formatCurrency(productSummary.totalRevenue ?? 0)} @@ -311,92 +410,7 @@ const DailyPOSReport = () => {
- {/* Financial Summary */} -
-

- 3. Ringkasan Finansial -

- -
-
-

Pendapatan

-
-
- Penjualan Kotor - - {formatCurrency(sales?.summary.total_sales ?? 0)} - -
-
- Diskon - - -{formatCurrency(sales?.summary.total_discount ?? 0)} - -
-
- Net Sales - - {formatCurrency(sales?.summary.net_sales ?? 0)} - -
-
-
- -
-

Profitabilitas

-
-
- Laba Kotor - - {formatCurrency(profitLoss?.summary.gross_profit ?? 0)} - -
-
- Margin Laba - - {profitLoss?.summary.net_profit_margin.toFixed(2) ?? 0}% - -
-
- HPP - - {formatCurrency( - calculateCOGS(profitLoss?.summary.total_revenue ?? 0, profitLoss?.summary.gross_profit ?? 0) - )} - -
-
-
-
- -
-
-
-

Rata-rata per Transaksi

-

- {formatCurrency( - calculateAveragePerTransaction(sales?.summary.net_sales ?? 0, sales?.summary.total_orders ?? 0) - )} -

-
-
-

Item per Transaksi

-

- {Math.round(((sales?.summary.total_items ?? 0) / (sales?.summary.total_orders ?? 0)) * 10) / 10} -

-
-
-

Efisiensi Operasional

-

- {Math.round(profitLoss?.summary.profitability_ratio ?? 0)}% -

-
-
-
-
+ {/* Profit Loss Product Table */} {/* Footer */}
diff --git a/src/views/dashboards/daily-report/report-generator.tsx b/src/views/dashboards/daily-report/report-generator.tsx new file mode 100644 index 0000000..46ee875 --- /dev/null +++ b/src/views/dashboards/daily-report/report-generator.tsx @@ -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 = ({ + // 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 ( + + + Generator {reportTitle} + + } + action={ + + {isGenerating ? 'Generating...' : downloadButtonText} + + } + sx={{ pb: 2 }} + /> + + + + + {/* Filter Controls */} + + + {labels.filterLabel || 'Filter Tanggal:'} + + + + onFilterTypeChange(e.target.value as 'single' | 'range')} + sx={{ gap: 3 }} + > + + } + label={ + + {labels.singleDateLabel || 'Hari Tunggal'} + + } + /> + + } + label={ + + {labels.rangeDateLabel || 'Rentang Tanggal'} + + } + /> + + + + {/* Single Date Filter */} + {filterType === 'single' && ( + + + + {labels.selectDateLabel || 'Pilih Tanggal:'} + + + + 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 + } + }} + /> + + {showQuickActions && ( + + + {quickActions.single?.map((action, index) => ( + + {action.label} + + ))} + + + )} + + )} + + {/* Date Range Filter */} + {filterType === 'range' && ( + + + + + {labels.fromLabel || 'Dari:'} + + + 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 + } + }} + /> + + + + + + {labels.toLabel || 'Sampai:'} + + + 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 + } + }} + /> + + + {showQuickActions && ( + + + {quickActions.range?.map((action, index) => ( + + {action.label} + + ))} + + + )} + + )} + + + + + {labels.periodLabel || 'Periode:'}{' '} + + + + {labels.exportHelpText || 'Klik tombol download untuk mengeksport laporan ke PDF'} + + + + {/* Custom content dapat ditambahkan di sini */} + {children} + + + ) +} + +export default ReportGeneratorComponent diff --git a/src/views/dashboards/daily-report/report-header.tsx b/src/views/dashboards/daily-report/report-header.tsx new file mode 100644 index 0000000..a6c9d99 --- /dev/null +++ b/src/views/dashboards/daily-report/report-header.tsx @@ -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 = ({ + outlet, + reportTitle, + reportSubtitle = 'Laporan Operasional', + brandName = 'Apskel', + brandColor, + className, + periode +}) => { + // Hooks + const theme = useTheme() + + return ( + + + + {/* Left Section - Brand & Outlet Info */} + + + + + {brandName} + + {outlet?.name && ( + + {outlet.name} + + )} + {outlet?.address && ( + + {outlet.address} + + )} + + + + {/* Right Section - Report Info */} + + + {reportTitle} + + {periode && ( + + + {periode} + + + )} + {reportSubtitle && ( + + + {reportSubtitle} + + + )} + + + + + + ) +} + +export default ReportHeader