feat: daily report

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

@@ -0,0 +1,414 @@
+'use client'
+
+import Logo from '@/@core/svg/Logo'
+import { useProductSalesAnalytics, useProfitLossAnalytics, useSalesAnalytics } from '@/services/queries/analytics'
+import { useOutletById } from '@/services/queries/outlets'
+import { formatCurrency, formatDate, formatDateDDMMYYYY, formatDatetime } from '@/utils/transform'
+import React, { useEffect, useRef, useState } from 'react'
+
+const DailyPOSReport = () => {
+  const reportRef = useRef<HTMLElement | null>(null)
+
+  const [now, setNow] = useState(new Date())
+
+  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 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)
+  }
+
+  useEffect(() => {
+    setNow(new Date())
+  }, [])
+
+  const calculateCOGS = (totalRevenue: number, grossProfit: number) => {
+    return totalRevenue - grossProfit
+  }
+
+  const calculateAveragePerTransaction = (totalRevenue: number, totalOrders: number) => {
+    if (totalOrders === 0) return 0
+    return totalRevenue / totalOrders
+  }
+
+  const generatePDF = async () => {
+    const reportElement = reportRef.current
+
+    try {
+      // Import jsPDF dan html2canvas
+      const jsPDF = (await import('jspdf')).default
+      const html2canvas = (await import('html2canvas')).default
+
+      // Optimized canvas capture dengan scale lebih rendah
+      const canvas = await html2canvas(reportElement!, {
+        scale: 1.5, // Reduced from 2 to 1.5
+        useCORS: true,
+        allowTaint: true,
+        backgroundColor: '#ffffff',
+        logging: false, // Disable logging for performance
+        removeContainer: true, // Clean up after capture
+        imageTimeout: 0, // No timeout for image loading
+        height: reportElement!.scrollHeight,
+        width: reportElement!.scrollWidth
+      })
+
+      // Compress canvas using JPEG with quality setting
+      const imgData = canvas.toDataURL('image/jpeg', 0.85) // JPEG with 85% quality instead of PNG
+
+      // Create PDF with compression
+      const pdf = new jsPDF({
+        orientation: 'portrait',
+        unit: 'mm',
+        format: 'a4',
+        compress: true // Enable built-in compression
+      })
+
+      const imgWidth = 210
+      const pageHeight = 295
+      const imgHeight = (canvas.height * imgWidth) / canvas.width
+      let heightLeft = imgHeight
+      let position = 0
+
+      // Add first page with compressed image
+      pdf.addImage(imgData, 'JPEG', 0, position, imgWidth, imgHeight, '', 'FAST') // Use FAST compression
+      heightLeft -= pageHeight
+
+      // Handle multiple pages if needed
+      while (heightLeft >= 0) {
+        position = heightLeft - imgHeight
+        pdf.addPage()
+        pdf.addImage(imgData, 'JPEG', 0, position, imgWidth, imgHeight, '', 'FAST')
+        heightLeft -= pageHeight
+      }
+
+      // Additional compression options
+      pdf.setProperties({
+        title: `Laporan Transaksi Harian`,
+        subject: 'Daily Transaction Report',
+        author: 'Apskel POS System',
+        creator: 'Apskel'
+      })
+
+      // Save with optimized settings
+      pdf.save(`laporan-transaksi-harian.pdf`, {
+        returnPromise: true
+      })
+
+      // Clean up canvas to free memory
+      canvas.width = canvas.height = 0
+    } catch (error) {
+      console.error('Error generating PDF:', error)
+      alert('Terjadi kesalahan saat membuat PDF. Pastikan jsPDF dan html2canvas sudah terinstall.')
+    }
+  }
+
+  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>
+
+      {/* 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>
+
+        {/* Performance Summary */}
+        <div className='px-8 pb-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='font-semibold text-gray-800'>
+                  {formatCurrency(profitLoss?.summary.gross_profit ?? 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>
+              </div>
+              <div className='flex justify-between items-center py-2 border-b border-gray-200'>
+                <span className='text-gray-700'>Pajak</span>
+                <span className='font-semibold text-gray-800'>
+                  {formatCurrency(profitLoss?.summary.total_tax ?? 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>
+              </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>
+              </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>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Transaction Summary */}
+        <div className='px-8 pb-8'>
+          <h3 className='text-xl font-bold mb-6' style={{ color: '#36175e' }}>
+            2. Ringkasan Transaksi
+          </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-left p-3 font-semibold'>Kategori</th>
+                  <th className='text-center p-3 font-semibold'>Qty</th>
+                  <th className='text-right p-3 font-semibold'>Order</th>
+                  <th className='text-right p-3 font-semibold'>Pendapatan</th>
+                  <th className='text-right p-3 font-semibold'>Rata Rata</th>
+                </tr>
+              </thead>
+              <tbody>
+                {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-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-right font-bold'>{formatCurrency(productSummary.totalRevenue ?? 0)}</td>
+                  <td className='p-3 text-right font-bold'></td>
+                </tr>
+              </tfoot>
+            </table>
+          </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>
+
+        {/* Footer */}
+        <div className='px-8 py-6 border-t-2 border-gray-200 mt-8'>
+          <div className='flex justify-between items-center text-sm text-gray-600'>
+            <p>© 2025 Apskel - Sistem POS Terpadu</p>
+            <p></p>
+            <p>Dicetak pada: {now.toLocaleDateString('id-ID')}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default DailyPOSReport

src/app/[lang]/layout.tsx

@@ -31,8 +31,7 @@ import { ReactQueryProvider } from '../../providers/ReactQueryProvider'
 
 export const metadata = {
   title: 'APSKEL',
-  description:
-    'Apsekel'
+  description: 'Apsekel'
 }
 
 const RootLayout = async (props: ChildrenType & { params: Promise<{ lang: Locale }> }) => {

src/components/layout/vertical/VerticalMenu.tsx

@@ -88,6 +88,7 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
           <MenuItem href={`/${locale}/dashboards/products`}>{dictionary['navigation'].products}</MenuItem>
           <MenuItem href={`/${locale}/dashboards/orders`}>{dictionary['navigation'].orders}</MenuItem>
           <MenuItem href={`/${locale}/dashboards/payment-methods`}>{dictionary['navigation'].paymentMethods}</MenuItem>
+          <MenuItem href={`/${locale}/dashboards/daily-report`}>{dictionary['navigation'].dailyReport}</MenuItem>
         </SubMenu>
         <MenuSection label={dictionary['navigation'].appsPages}>
           <SubMenu label={dictionary['navigation'].eCommerce} icon={<i className='tabler-shopping-cart' />}>
@@ -111,7 +112,9 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
             </SubMenu>
             <SubMenu label={dictionary['navigation'].orders}>
               <MenuItem href={`/${locale}/apps/ecommerce/orders/list`}>{dictionary['navigation'].list}</MenuItem>
-              <MenuItem className='hidden' href={`/${locale}/apps/ecommerce/orders/${params.id}/details`}>{dictionary['navigation'].details}</MenuItem>
+              <MenuItem className='hidden' href={`/${locale}/apps/ecommerce/orders/${params.id}/details`}>
+                {dictionary['navigation'].details}
+              </MenuItem>
             </SubMenu>
             <SubMenu label={dictionary['navigation'].customers}>
               <MenuItem href={`/${locale}/apps/ecommerce/customers/list`}>{dictionary['navigation'].list}</MenuItem>

src/data/dictionaries/ar.json

@@ -110,6 +110,7 @@
     "menuLevels": "مستويات القائمة",
     "menuLevel2": "مستوى القائمة 2",
     "menuLevel3": "مستوى القائمة 3",
-    "disabledMenu": "قائمة المعوقين"
+    "disabledMenu": "قائمة المعوقين",
+    "dailyReport": "تقرير يومي"
   }
 }

src/data/dictionaries/en.json

@@ -110,6 +110,7 @@
     "menuLevels": "Menu Levels",
     "menuLevel2": "Menu Level 2",
     "menuLevel3": "Menu Level 3",
-    "disabledMenu": "Disabled Menu"
+    "disabledMenu": "Disabled Menu",
+    "dailyReport": "Daily Report"
   }
 }

src/data/dictionaries/fr.json

@@ -110,6 +110,7 @@
     "menuLevels": "Niveaux de menus",
     "menuLevel2": "Niveau menu 2",
     "menuLevel3": "Niveau menu 3",
-    "disabledMenu": "Menu désactivé"
+    "disabledMenu": "Menu désactivé",
+    "dailyReport": "Rapport quotidien"
   }
 }

src/services/queries/outlets.ts

@@ -1,6 +1,6 @@
-import { useQuery } from "@tanstack/react-query"
-import { Outlets } from "../../types/services/outlet"
-import { api } from "../api"
+import { useQuery } from '@tanstack/react-query'
+import { Outlet, Outlets } from '../../types/services/outlet'
+import { api } from '../api'
 
 interface OutletsQueryParams {
   page?: number
@@ -31,6 +31,28 @@ export function useOutlets(params: OutletsQueryParams = {}) {
 
       const res = await api.get(`/outlets/list?${queryParams.toString()}`)
       return res.data.data
+    }
+  })
+}
+
+export function useOutletById() {
+  const user = (() => {
+    try {
+      return JSON.parse(localStorage.getItem('user') || '{}')
+    } catch {
+      return {}
+    }
+  })()
+
+  const outletId = user?.outlet_id // atau sesuai struktur data user
+
+  return useQuery<Outlet>({
+    queryKey: ['outlet', outletId],
+    queryFn: async () => {
+      if (!outletId) throw new Error('Outlet ID not found in localStorage')
+      const res = await api.get(`/outlets/detail/${outletId}`)
+      return res.data.data
     },
+    enabled: !!outletId // query hanya jalan kalau ada outletId
   })
 }

src/utils/transform.ts

@@ -23,9 +23,23 @@ export const formatDate = (dateString: any) => {
   })
 }
 
-export const formatDateDDMMYYYY = (date: Date) => {
+export const formatDateDDMMYYYY = (dateString: Date | string) => {
+  const date = new Date(dateString)
   const day = String(date.getDate()).padStart(2, '0')
   const month = String(date.getMonth() + 1).padStart(2, '0')
   const year = date.getFullYear()
   return `${day}-${month}-${year}`
 }
+
+export const formatDatetime = (dateString: string | number | Date) => {
+  const date = new Date(dateString)
+
+  const day = String(date.getDate()).padStart(2, '0')
+  const month = date.toLocaleString('id-ID', { month: 'long' }) // Aug
+  const year = date.getFullYear()
+
+  const hours = String(date.getHours()).padStart(2, '0')
+  const minutes = String(date.getMinutes()).padStart(2, '0')
+
+  return `${day} ${month} ${year} ${hours}:${minutes}`
+}