Merge pull request 'efril' (#3) from efril into main

Reviewed-on: https://gits.altru.id/ferdiansyah/pos-dashboard-v2/pulls/3

src/app/[lang]/(dashboard)/(private)/apps/inventory/stock/export/page.tsx

@@ -0,0 +1,317 @@
+'use client'
+
+import { useInventoryAnalytics } from '@/services/queries/analytics'
+import { useOutletById } from '@/services/queries/outlets'
+import { formatDateDDMMYYYY } from '@/utils/transform'
+import ReportGeneratorComponent from '@/views/dashboards/daily-report/report-generator'
+import ReportHeader from '@/views/dashboards/daily-report/report-header'
+import { useRef, useState } from 'react'
+const ExportInventoryPage = () => {
+  const reportRef = useRef<HTMLDivElement | 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' | 'range'>('single') // 'single' or 'range'
+
+  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: inventory } = useInventoryAnalytics(dateParams)
+
+  const handleGeneratePDF = 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 Inventori`,
+        subject: 'Laporan Inventori',
+        author: 'Apskel POS System',
+        creator: 'Apskel'
+      })
+
+      // Save with optimized settings
+      const fileName =
+        filterType === 'single'
+          ? `laporan-inventory-${formatDateForInput(selectedDate)}.pdf`
+          : `laporan-inventory-${formatDateForInput(dateRange.startDate)}-to-${formatDateForInput(dateRange.endDate)}.pdf`
+
+      pdf.save(fileName, {
+        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.')
+    }
+  }
+
+  const formatDateForInput = (date: Date) => {
+    return date.toISOString().split('T')[0]
+  }
+
+  const getReportPeriodText = () => {
+    if (filterType === 'single') {
+      return `${formatDateDDMMYYYY(selectedDate)} - ${formatDateDDMMYYYY(selectedDate)}`
+    } else {
+      return `${formatDateDDMMYYYY(dateRange.startDate)} - ${formatDateDDMMYYYY(dateRange.endDate)}`
+    }
+  }
+
+  const productSummary = {
+    totalQuantity: inventory?.products?.reduce((sum, item) => sum + (item?.quantity || 0), 0) || 0,
+    totalIn: inventory?.products?.reduce((sum, item) => sum + (item?.total_in || 0), 0) || 0,
+    totalOut: inventory?.products?.reduce((sum, item) => sum + (item?.total_out || 0), 0) || 0
+  }
+
+  const ingredientSummary = {
+    totalQuantity: inventory?.ingredients?.reduce((sum, item) => sum + (item?.quantity || 0), 0) || 0,
+    totalIn: inventory?.ingredients?.reduce((sum, item) => sum + (item?.total_in || 0), 0) || 0,
+    totalOut: inventory?.ingredients?.reduce((sum, item) => sum + (item?.total_out || 0), 0) || 0
+  }
+
+  return (
+    <div className='min-h-screen'>
+      {/* Control Panel */}
+      <ReportGeneratorComponent
+        // Props wajib
+        reportTitle='Laporan Inventori'
+        filterType={filterType}
+        selectedDate={selectedDate}
+        dateRange={dateRange}
+        onFilterTypeChange={setFilterType}
+        onSingleDateChange={setSelectedDate}
+        onDateRangeChange={setDateRange}
+        onGeneratePDF={handleGeneratePDF}
+        // Props opsional
+        // isGenerating={isGenerating}
+        // customQuickActions={customQuickActions}
+        // labels={customLabels}
+      />
+      <div ref={reportRef} className='max-w-4xl mx-auto bg-white min-h-[297mm]' style={{ width: '210mm' }}>
+        {/* Header */}
+        <ReportHeader
+          outlet={outlet}
+          reportTitle='Laporan Inventori'
+          reportSubtitle='Laporan'
+          brandName='Apskel'
+          brandColor='#36175e'
+          periode={getReportPeriodText()}
+        />
+
+        {/* Ringkasan */}
+        <div className='p-8'>
+          <h3 className='text-xl font-bold mb-6' style={{ color: '#36175e' }}>
+            1. Ringkasan
+          </h3>
+
+          <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'>Total Item</span>
+                <span className='font-semibold text-gray-800'>{inventory?.summary.total_products}</span>
+              </div>
+              <div className='flex justify-between items-center py-2 border-b border-gray-200'>
+                <span className='text-gray-700'>Total Item Masuk</span>
+                <span className='font-semibold text-gray-800'>{inventory?.summary.low_stock_products}</span>
+              </div>
+              <div className='flex justify-between items-center py-2 border-b border-gray-200'>
+                <span className='text-gray-700'>Total Item Keluar</span>
+                <span className='font-semibold text-gray-800'>{inventory?.summary.zero_stock_products}</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'>Total Ingredient</span>
+                <span className='font-semibold text-gray-800'>{inventory?.summary.total_ingredients}</span>
+              </div>
+              <div className='flex justify-between items-center py-2 border-b border-gray-200'>
+                <span className='text-gray-700'>Total Ingredient Masuk</span>
+                <span className='font-semibold text-gray-800'>{inventory?.summary.low_stock_ingredients}</span>
+              </div>
+              <div className='flex justify-between items-center py-2 border-b border-gray-200'>
+                <span className='text-gray-700'>Total Ingredient Keluar</span>
+                <span className='font-semibold text-gray-800'>{inventory?.summary.zero_stock_ingredients}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Item */}
+        <div className='px-8 pb-8'>
+          <h3 className='text-xl font-bold mb-6' style={{ color: '#36175e' }}>
+            2. Item
+          </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'>Nama</th>
+                  <th className='text-center p-3 font-semibold'>Kategori</th>
+                  <th className='text-center p-3 font-semibold'>Stock</th>
+                  <th className='text-center p-3 font-semibold'>Masuk</th>
+                  <th className='text-center p-3 font-semibold'>Keluar</th>
+                </tr>
+              </thead>
+              <tbody>
+                {inventory?.products?.map((product, index) => {
+                  let rowClass = index % 2 === 0 ? 'bg-white' : 'bg-gray-50'
+
+                  if (product.is_zero_stock) {
+                    rowClass = 'bg-red-300' // Merah untuk stok habis
+                  } else if (product.is_low_stock) {
+                    rowClass = 'bg-yellow-300' // Kuning untuk stok sedikit
+                  }
+                  return (
+                    <tr key={index} className={rowClass}>
+                      <td className='p-3 font-medium text-gray-800'>{product.product_name}</td>
+                      <td className='p-3 font-medium text-gray-800'>{product.category_name}</td>
+
+                      <td className='p-3 text-center text-gray-700'>{product.quantity}</td>
+                      <td className='p-3 text-center text-gray-700'>{product.total_in}</td>
+                      <td className='p-3 text-center text-gray-700'>{product.total_out}</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'>{productSummary.totalQuantity ?? 0}</td>
+                  <td className='p-3 text-center font-bold'>{productSummary.totalIn ?? 0}</td>
+                  <td className='p-3 text-center font-bold'>{productSummary.totalOut ?? 0}</td>
+                </tr>
+              </tfoot>
+            </table>
+          </div>
+        </div>
+
+        {/* Ingredient */}
+        <div className='px-8 pb-8'>
+          <h3 className='text-xl font-bold mb-6' style={{ color: '#36175e' }}>
+            3. Ingredient
+          </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'>Nama</th>
+                  <th className='text-center p-3 font-semibold'>Stock</th>
+                  <th className='text-center p-3 font-semibold'>Masuk</th>
+                  <th className='text-center p-3 font-semibold'>Keluar</th>
+                </tr>
+              </thead>
+              <tbody>
+                {inventory?.ingredients?.map((ingredient, index) => {
+                  let rowClass = index % 2 === 0 ? 'bg-white' : 'bg-gray-50'
+
+                  if (ingredient.is_zero_stock) {
+                    rowClass = 'bg-red-300' // Merah untuk stok habis
+                  } else if (ingredient.is_low_stock) {
+                    rowClass = 'bg-yellow-300' // Kuning untuk stok sedikit
+                  }
+                  return (
+                    <tr key={index} className={rowClass}>
+                      <td className='p-3 font-medium text-gray-800'>{ingredient.ingredient_name}</td>
+                      <td className='p-3 text-center text-gray-700'>{ingredient.quantity}</td>
+                      <td className='p-3 text-center text-gray-700'>{ingredient.total_in}</td>
+                      <td className='p-3 text-center text-gray-700'>{ingredient.total_out}</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'>{ingredientSummary.totalQuantity ?? 0}</td>
+                  <td className='p-3 text-center font-bold'>{ingredientSummary.totalIn ?? 0}</td>
+                  <td className='p-3 text-center font-bold'>{ingredientSummary.totalOut ?? 0}</td>
+                </tr>
+              </tfoot>
+            </table>
+          </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 ExportInventoryPage

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

@@ -4,7 +4,8 @@ import {
   useProductSalesAnalytics,
   useProfitLossAnalytics,
   useSalesAnalytics,
-  usePaymentAnalytics
+  usePaymentAnalytics,
+  useCategoryAnalytics
 } from '@/services/queries/analytics'
 import { useOutletById } from '@/services/queries/outlets'
 import { formatCurrency, formatDate, formatDateDDMMYYYY, formatDatetime } from '@/utils/transform'
@@ -45,6 +46,7 @@ const DailyPOSReport = () => {
   const { data: profitLoss } = useProfitLossAnalytics(dateParams)
   const { data: products } = useProductSalesAnalytics(dateParams)
   const { data: paymentAnalytics } = usePaymentAnalytics(dateParams)
+  const { data: category } = useCategoryAnalytics(dateParams)
 
   const productSummary = {
     totalQuantitySold: products?.data?.reduce((sum, item) => sum + (item?.quantity_sold || 0), 0) || 0,
@@ -60,6 +62,13 @@ const DailyPOSReport = () => {
     totalQuantity: profitLoss?.product_data?.reduce((sum, item) => sum + (item?.quantity_sold || 0), 0) || 0
   }
 
+  const categorySummary = {
+    totalRevenue: category?.data?.reduce((sum, item) => sum + (item?.total_revenue || 0), 0) || 0,
+    orderCount: category?.data?.reduce((sum, item) => sum + (item?.order_count || 0), 0) || 0,
+    productCount: category?.data?.reduce((sum, item) => sum + (item?.product_count || 0), 0) || 0,
+    totalQuantity: category?.data?.reduce((sum, item) => sum + (item?.total_quantity || 0), 0) || 0
+  }
+
   useEffect(() => {
     setNow(new Date())
   }, [])
@@ -199,13 +208,13 @@ const DailyPOSReport = () => {
         {/* Performance Summary */}
         <div className='p-8'>
           <h3 className='text-xl font-bold mb-6' style={{ color: '#36175e' }}>
-            1. Ringkasan Kinerja
+            1. Ringkasan
           </h3>
 
           <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'>TOTAL PENJUALAN (termasuk rasik)</span>
+                <span className='text-gray-700'>Total Penjualan (termasuk rasik)</span>
                 <span className='font-semibold text-gray-800'>
                   {formatCurrency(profitLoss?.summary.total_revenue ?? 0)}
                 </span>
@@ -359,7 +368,50 @@ const DailyPOSReport = () => {
                   <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>
+                  <td className='p-3 text-center font-bold'></td>
+                </tr>
+              </tfoot>
+            </table>
+          </div>
+        </div>
+
+        {/* Category Summary */}
+        <div className='px-8 pb-8'>
+          <h3 className='text-xl font-bold mb-6' style={{ color: '#36175e' }}>
+            2. Ringkasan Kategori
+          </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'>Nama</th>
+                  <th className='text-center p-3 font-semibold'>Total Produk</th>
+                  <th className='text-center p-3 font-semibold'>Qty</th>
+                  <th className='text-right p-3 font-semibold'>Jumlah Order</th>
+                  <th className='text-center p-3 font-semibold'>Pendapatan</th>
+                </tr>
+              </thead>
+              <tbody>
+                {category?.data?.map((c, index) => (
+                  <tr key={index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
+                    <td className='p-3 font-medium text-gray-800'>{c.category_name}</td>
+                    <td className='p-3 text-center text-gray-700'>{c.product_count}</td>
+                    <td className='p-3 text-center text-gray-700'>{c.total_quantity}</td>
+                    <td className='p-3 text-center  text-gray-700'>{c.order_count}</td>
+                    <td className='p-3 text-right font-semibold' style={{ color: '#36175e' }}>
+                      {formatCurrency(c.total_revenue)}
+                    </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'>{categorySummary?.productCount ?? 0}</td>
+                  <td className='p-3 text-center font-bold'>{categorySummary?.totalQuantity ?? 0}</td>
+                  <td className='p-3 text-center font-bold'>{categorySummary?.orderCount ?? 0}</td>
+                  <td className='p-3 text-right font-bold'>{formatCurrency(categorySummary?.totalRevenue ?? 0)}</td>
                 </tr>
               </tfoot>
             </table>
@@ -369,7 +421,7 @@ const DailyPOSReport = () => {
         {/* Transaction Summary */}
         <div className='px-8 pb-8'>
           <h3 className='text-xl font-bold mb-6' style={{ color: '#36175e' }}>
-            3. Ringkasan Transaksi
+            4. Ringkasan Item
           </h3>
 
           <div className='bg-gray-50 rounded-lg border border-gray-200 overflow-hidden'>

src/services/queries/analytics.ts

@@ -1,5 +1,13 @@
 import { useQuery } from '@tanstack/react-query'
-import { DashboardReport, PaymentReport, ProductSalesReport, ProfitLossReport, SalesReport } from '../../types/services/analytic'
+import {
+  CategoryReport,
+  DashboardReport,
+  InventoryReport,
+  PaymentReport,
+  ProductSalesReport,
+  ProfitLossReport,
+  SalesReport
+} from '../../types/services/analytic'
 import { api } from '../api'
 import { formatDateDDMMYYYY } from '../../utils/transform'
 
@@ -157,3 +165,73 @@ export function useProfitLossAnalytics(params: AnalyticQueryParams = {}) {
     }
   })
 }
+
+export function useCategoryAnalytics(params: AnalyticQueryParams = {}) {
+  const today = new Date()
+  const monthAgo = new Date()
+  monthAgo.setDate(today.getDate() - 30)
+
+  const defaultDateTo = formatDateDDMMYYYY(today)
+  const defaultDateFrom = formatDateDDMMYYYY(monthAgo)
+
+  const { date_from = defaultDateFrom, date_to = defaultDateTo, ...filters } = params
+
+  return useQuery<CategoryReport>({
+    queryKey: ['analytics-categories', { date_from, date_to, ...filters }],
+    queryFn: async () => {
+      const queryParams = new URLSearchParams()
+
+      queryParams.append('date_from', date_from)
+      queryParams.append('date_to', date_to)
+
+      Object.entries(filters).forEach(([key, value]) => {
+        if (value !== undefined && value !== null && value !== '') {
+          queryParams.append(key, value.toString())
+        }
+      })
+
+      const res = await api.get(`/analytics/categories?${queryParams.toString()}`)
+      return res.data.data
+    }
+  })
+}
+
+export function useInventoryAnalytics(params: AnalyticQueryParams = {}) {
+  const today = new Date()
+  const monthAgo = new Date()
+  monthAgo.setDate(today.getDate() - 30)
+
+  const defaultDateTo = formatDateDDMMYYYY(today)
+  const defaultDateFrom = formatDateDDMMYYYY(monthAgo)
+
+  const { date_from = defaultDateFrom, date_to = defaultDateTo, ...filters } = params
+
+  const user = (() => {
+    try {
+      return JSON.parse(localStorage.getItem('user') || '{}')
+    } catch {
+      return {}
+    }
+  })()
+
+  const outletId = user?.outlet_id //
+
+  return useQuery<InventoryReport>({
+    queryKey: ['analytics-inventory', { date_from, date_to, ...filters }],
+    queryFn: async () => {
+      const queryParams = new URLSearchParams()
+
+      queryParams.append('date_from', date_from)
+      queryParams.append('date_to', date_to)
+
+      Object.entries(filters).forEach(([key, value]) => {
+        if (value !== undefined && value !== null && value !== '') {
+          queryParams.append(key, value.toString())
+        }
+      })
+
+      const res = await api.get(`/inventory/report/details/${outletId}?${queryParams.toString()}`)
+      return res.data.data
+    }
+  })
+}

src/types/services/analytic.ts

@@ -1,31 +1,31 @@
 export interface SalesSummary {
-  total_sales: number;
+  total_sales: number
-  total_orders: number;
+  total_orders: number
-  total_items: number;
+  total_items: number
-  average_order_value: number;
+  average_order_value: number
-  total_tax: number;
+  total_tax: number
-  total_discount: number;
+  total_discount: number
-  net_sales: number;
+  net_sales: number
 }
 
 export interface SalesDataItem {
-  date: string; // ISO string, e.g., "2025-08-03T00:00:00Z"
+  date: string // ISO string, e.g., "2025-08-03T00:00:00Z"
-  sales: number;
+  sales: number
-  orders: number;
+  orders: number
-  items: number;
+  items: number
-  tax: number;
+  tax: number
-  discount: number;
+  discount: number
-  net_sales: number;
+  net_sales: number
 }
 
 export interface SalesReport {
-  organization_id: string;
+  organization_id: string
-  outlet_id: string;
+  outlet_id: string
-  date_from: string; // ISO string with timezone, e.g., "2025-08-01T00:00:00+07:00"
+  date_from: string // ISO string with timezone, e.g., "2025-08-01T00:00:00+07:00"
-  date_to: string;   // ISO string with timezone
+  date_to: string // ISO string with timezone
-  group_by: string;  // e.g., "day", "month", etc.
+  group_by: string // e.g., "day", "month", etc.
-  summary: SalesSummary;
+  summary: SalesSummary
-  data: SalesDataItem[];
+  data: SalesDataItem[]
 }
 
 export interface ProductData {
@@ -105,53 +105,123 @@ export type DashboardReport = {
 }
 
 export interface ProfitLossReport {
-  organization_id: string;
+  organization_id: string
-  date_from: string; // ISO date string with timezone
+  date_from: string // ISO date string with timezone
-  date_to: string;   // ISO date string with timezone
+  date_to: string // ISO date string with timezone
-  group_by: string;
+  group_by: string
-  summary: Summary;
+  summary: Summary
-  data: DailyData[];
+  data: DailyData[]
-  product_data: ProductDataReport[];
+  product_data: ProductDataReport[]
 }
 
 export interface Summary {
-  total_revenue: number;
+  total_revenue: number
-  total_cost: number;
+  total_cost: number
-  gross_profit: number;
+  gross_profit: number
-  gross_profit_margin: number;
+  gross_profit_margin: number
-  total_tax: number;
+  total_tax: number
-  total_discount: number;
+  total_discount: number
-  net_profit: number;
+  net_profit: number
-  net_profit_margin: number;
+  net_profit_margin: number
-  total_orders: number;
+  total_orders: number
-  average_profit: number;
+  average_profit: number
-  profitability_ratio: number;
+  profitability_ratio: number
 }
 
 export interface DailyData {
-  date: string; // ISO date string with timezone
+  date: string // ISO date string with timezone
-  revenue: number;
+  revenue: number
-  cost: number;
+  cost: number
-  gross_profit: number;
+  gross_profit: number
-  gross_profit_margin: number;
+  gross_profit_margin: number
-  tax: number;
+  tax: number
-  discount: number;
+  discount: number
-  net_profit: number;
+  net_profit: number
-  net_profit_margin: number;
+  net_profit_margin: number
-  orders: number;
+  orders: number
 }
 
 export interface ProductDataReport {
-  product_id: string;
+  product_id: string
-  product_name: string;
+  product_name: string
-  category_id: string;
+  category_id: string
-  category_name: string;
+  category_name: string
-  quantity_sold: number;
+  quantity_sold: number
-  revenue: number;
+  revenue: number
-  cost: number;
+  cost: number
-  gross_profit: number;
+  gross_profit: number
-  gross_profit_margin: number;
+  gross_profit_margin: number
-  average_price: number;
+  average_price: number
-  average_cost: number;
+  average_cost: number
-  profit_per_unit: number;
+  profit_per_unit: number
+}
+
+export interface CategoryReport {
+  organization_id: string
+  outlet_id: string
+  date_from: string
+  date_to: string
+  data: CategoryDataReport[]
+}
+
+export interface CategoryDataReport {
+  category_id: string
+  category_name: string
+  total_revenue: number
+  total_quantity: number
+  product_count: number
+  order_count: number
+}
+
+export interface InventoryReport {
+  summary: InventorySummaryReport
+  products: InventoryProductReport[]
+  ingredients: InventoryIngredientReport[]
+}
+
+export interface InventorySummaryReport {
+  total_products: number
+  total_ingredients: number
+  total_value: number
+  low_stock_products: number
+  low_stock_ingredients: number
+  zero_stock_products: number
+  zero_stock_ingredients: number
+  total_sold_products: number
+  total_sold_ingredients: number
+  outlet_id: string
+  outlet_name: string
+  generated_at: string
+}
+
+export interface InventoryProductReport {
+  id: string
+  product_id: string
+  product_name: string
+  category_name: string
+  quantity: number
+  reorder_level: number
+  unit_cost: number
+  total_value: number
+  total_in: number
+  total_out: number
+  is_low_stock: boolean
+  is_zero_stock: boolean
+  updated_at: string
+}
+
+export interface InventoryIngredientReport {
+  id: string
+  ingredient_id: string
+  ingredient_name: string
+  unit_name: string
+  quantity: number
+  reorder_level: number
+  unit_cost: number
+  total_value: number
+  total_in: number
+  total_out: number
+  is_low_stock: boolean
+  is_zero_stock: boolean
+  updated_at: string
 }

src/views/apps/ecommerce/stock/list/StockListTable.tsx

@@ -41,6 +41,10 @@ import { useInventoriesMutation } from '../../../../../services/mutations/invent
 import { useInventories } from '../../../../../services/queries/inventories'
 import { Inventory } from '../../../../../types/services/inventory'
 import AddStockDrawer from './AddStockDrawer'
+import Link from 'next/link'
+import { getLocalizedUrl } from '@/utils/i18n'
+import { Locale } from '@/configs/i18n'
+import { useParams } from 'next/navigation'
 
 declare module '@tanstack/table-core' {
   interface FilterFns {
@@ -109,6 +113,9 @@ const StockListTable = () => {
   const [addInventoryOpen, setAddInventoryOpen] = useState(false)
   const [search, setSearch] = useState('')
 
+  // Hooks
+  const { lang: locale } = useParams()
+
   // Fetch products with pagination and search
   const { data, isLoading, error, isFetching } = useInventories({
     page: currentPage,
@@ -259,14 +266,16 @@ const StockListTable = () => {
               <MenuItem value='25'>25</MenuItem>
               <MenuItem value='50'>50</MenuItem>
             </CustomTextField>
-            <Button
+            <Link href={getLocalizedUrl(`/apps/inventory/stock/export`, locale as Locale)}>
-              color='secondary'
+              <Button
-              variant='tonal'
+                color='secondary'
-              className='max-sm:is-full is-auto'
+                variant='tonal'
-              startIcon={<i className='tabler-upload' />}
+                className='max-sm:is-full is-auto'
-            >
+                startIcon={<i className='tabler-upload' />}
-              Export
+              >
-            </Button>
+                Export
+              </Button>
+            </Link>
             <Button
               variant='contained'
               className='max-sm:is-full'