Update Report

src/app/[lang]/(dashboard)/(private)/dashboards/daily-report/page.tsx

@@ -1,58 +1,95 @@
 'use client'
 
-import Logo from '@/@core/svg/Logo'
+import {
-import { useProductSalesAnalytics, useProfitLossAnalytics, useSalesAnalytics } from '@/services/queries/analytics'
+  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({
+  const { data: sales } = useSalesAnalytics(dateParams)
-    date_from: formatDateDDMMYYYY(now),
+  const { data: profitLoss } = useProfitLossAnalytics(dateParams)
-    date_to: formatDateDDMMYYYY(now)
+  const { data: products } = useProductSalesAnalytics(dateParams)
-  })
+  const { data: paymentAnalytics } = usePaymentAnalytics(dateParams)
-  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 productSummary = {
-    totalQuantitySold: products?.data.reduce((sum, item) => sum + item.quantity_sold, 0),
+    totalQuantitySold: products?.data?.reduce((sum, item) => sum + (item?.quantity_sold || 0), 0) || 0,
-    totalRevenue: products?.data.reduce((sum, item) => sum + item.revenue, 0),
+    totalRevenue: products?.data?.reduce((sum, item) => sum + (item?.revenue || 0), 0) || 0,
-    totalOrders: products?.data.reduce((sum, item) => sum + item.order_count, 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) => {
+  // Format date for input field (YYYY-MM-DD)
-    return totalRevenue - grossProfit
+  const formatDateForInput = (date: Date) => {
+    return date.toISOString().split('T')[0]
   }
 
-  const calculateAveragePerTransaction = (totalRevenue: number, totalOrders: number) => {
+  // Get display text for the report period
-    if (totalOrders === 0) return 0
+  const getReportPeriodText = () => {
-    return totalRevenue / totalOrders
+    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'>
+      <ReportGeneratorComponent
-        <div className='bg-white rounded-lg p-4 border border-gray-200'>
+        // Props wajib
-          <div className='flex items-center justify-between'>
+        reportTitle='Laporan Penjualan'
-            <h1 className='text-2xl font-bold text-gray-800'>Generator Laporan Transaksi Harian</h1>
+        filterType={filterType}
-            <button
+        selectedDate={selectedDate}
-              onClick={generatePDF}
+        dateRange={dateRange}
-              className='flex items-center gap-2 px-4 py-2 text-white rounded-lg hover:opacity-90 transition-opacity'
+        onFilterTypeChange={setFilterType}
-              style={{ backgroundColor: '#36175e' }}
+        onSingleDateChange={setSelectedDate}
-            >
+        onDateRangeChange={setDateRange}
-              Download PDF
+        onGeneratePDF={handleGeneratePDF}
-            </button>
+        // Props opsional
-          </div>
+        // isGenerating={isGenerating}
-          <p className='text-gray-600 mt-2'>Klik tombol download untuk mengeksport laporan ke PDF</p>
+        // customQuickActions={customQuickActions}
-        </div>
+        // labels={customLabels}
-      </div>
+      />
 
       {/* 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' }}>
+        <ReportHeader
-          <div className='flex items-start justify-between'>
+          outlet={outlet}
-            <div className='flex items-center gap-4'>
+          reportTitle={getReportTitle()}
-              <Logo />
+          reportSubtitle='Laporan Bulanan'
-              <div>
+          brandName='Apskel'
-                <h1 className='text-3xl font-bold' style={{ color: '#36175e' }}>
+          brandColor='#36175e'
-                  Apskel
+          periode={getReportPeriodText()}
-                </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>
 
         {/* 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='text-gray-700'>Total Terjual</span>
-                <span className='font-semibold text-red-600'>
+                <span className='font-semibold text-gray-800'>{productSummary.totalQuantitySold}</span>
-                  -{formatCurrency(profitLoss?.summary.total_discount ?? 0)}
-                </span>
               </div>
               <div className='flex justify-between items-center py-2 border-b border-gray-200'>
-                <span className='text-gray-700'>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-semibold text-green-800'>Laba Kotor</span>
-                <span className='text-lg font-bold' style={{ color: '#36175e' }}>
+                <span className='text-lg font-bold text-green-800'>
-                  {formatCurrency(profitLoss?.summary.net_profit ?? 0)}
+                  {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='text-gray-700'>Biaya lain²</span>
-                <span
+                <span className='font-semibold text-gray-800'>
-                  className={`font-semibold ${
+                  {formatCurrency(profitLoss?.summary.total_tax ?? 0)} |{' '}
-                    calculateCOGS(profitLoss?.summary.total_revenue ?? 0, profitLoss?.summary.gross_profit ?? 0) < 0
+                  {(((profitLoss?.summary.total_tax ?? 0) / (profitLoss?.summary.total_revenue || 1)) * 100).toFixed(0)}
-                      ? 'text-red-600'
+                  %
-                      : 'text-gray-800'
-                  }`}
-                >
-                  {formatCurrency(
-                    calculateCOGS(profitLoss?.summary.total_revenue ?? 0, profitLoss?.summary.gross_profit ?? 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 text-blue-800'>Laba/Rugi</span>
-                <span className='text-lg font-bold' style={{ color: '#36175e' }}>
+                <span className='text-lg font-bold text-blue-800'>
-                  {formatCurrency(profitLoss?.summary.gross_profit ?? 0)}
+                  {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-center font-bold'>{productSummary.totalQuantitySold ?? 0}</td>
-                  <td className='p-3 text-right font-bold'>{productSummary.totalOrders}</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 */}
+        {/* Profit Loss Product Table */}
-        <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>
 
         {/* Footer */}
         <div className='px-8 py-6 border-t-2 border-gray-200 mt-8'>

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<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

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<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