feat: report inventory

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

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

@@ -14,7 +14,7 @@ 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 reportRef = useRef<HTMLDivElement | null>(null)
 
   const [now, setNow] = useState(new Date())
   const [selectedDate, setSelectedDate] = useState(new Date())
@@ -22,7 +22,7 @@ const DailyPOSReport = () => {
     startDate: new Date(),
     endDate: new Date()
   })
-  const [filterType, setFilterType] = useState('single') // 'single' or 'range'
+  const [filterType, setFilterType] = useState<'single' | 'range'>('single') // 'single' or 'range'
 
   // Use selectedDate for single date filter, or dateRange for range filter
   const getDateParams = () => {

src/app/[lang]/(dashboard)/(private)/dashboards/profit-loss/page.tsx

@@ -1,14 +1,25 @@
 'use client'
 
-import React from 'react'
+import React, { useState } from 'react'
 import { useProfitLossAnalytics } from '../../../../../../services/queries/analytics'
-import { formatShortCurrency } from '../../../../../../utils/transform'
+import { formatDateDDMMYYYY, formatShortCurrency } from '../../../../../../utils/transform'
 import MultipleSeries from '../../../../../../views/dashboards/profit-loss/EarningReportWithTabs'
 import { DailyData, ProfitLossReport } from '../../../../../../types/services/analytic'
+import { TextField, Typography, useTheme } from '@mui/material'
 
 const DashboardProfitloss = () => {
+  const theme = useTheme()
+
+  const [filter, setFilter] = useState({
+    date_from: new Date().setDate(new Date().getDate() - 30).toString(),
+    date_to: new Date().toString()
+  })
+
   // Sample data - replace with your actual data
-  const { data: profitData, isLoading } = useProfitLossAnalytics()
+  const { data: profitData, isLoading } = useProfitLossAnalytics({
+    date_from: formatDateDDMMYYYY(filter.date_from),
+    date_to: formatDateDDMMYYYY(filter.date_to)
+  })
 
   const formatCurrency = (amount: any) => {
     return new Intl.NumberFormat('id-ID', {
@@ -91,11 +102,45 @@ const DashboardProfitloss = () => {
       {profitData && (
         <div>
           {/* Header */}
-          <div className='mb-8'>
-            <h1 className='text-3xl font-bold text-gray-900 mb-2'>Profit Analysis Dashboard</h1>
-            <p className='text-gray-600'>
-              {formatDate(profitData.date_from)} - {formatDate(profitData.date_to)}
-            </p>
+          <div className='mb-8 flex gap-4 items-center justify-between'>
+            <Typography variant='h1' className='text-3xl font-bold text-gray-900 mb-2'>
+              Profit Analysis Dashboard
+            </Typography>
+            <div className='flex items-center gap-4'>
+              <TextField
+                type='date'
+                value={new Date(profitData.date_from).toISOString().split('T')[0]}
+                onChange={e => {}}
+                size='small'
+                sx={{
+                  '& .MuiOutlinedInput-root': {
+                    '&.Mui-focused fieldset': {
+                      borderColor: 'primary.main'
+                    },
+                    '& fieldset': {
+                      borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
+                    }
+                  }
+                }}
+              />
+              <Typography>-</Typography>
+              <TextField
+                type='date'
+                value={new Date(profitData.date_to).toISOString().split('T')[0]}
+                onChange={e => {}}
+                size='small'
+                sx={{
+                  '& .MuiOutlinedInput-root': {
+                    '&.Mui-focused fieldset': {
+                      borderColor: 'primary.main'
+                    },
+                    '& fieldset': {
+                      borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
+                    }
+                  }
+                }}
+              />
+            </div>
           </div>
 
           {/* Summary Metrics */}

src/components/layout/vertical/VerticalMenu.tsx

@@ -92,40 +92,39 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
         </SubMenu>
         <MenuSection label={dictionary['navigation'].appsPages}>
           <SubMenu label={dictionary['navigation'].inventory} icon={<i className='tabler-salad' />}>
-            {/* <MenuItem href={`/${locale}/apps/ecommerce/dashboard`}>{dictionary['navigation'].dashboard}</MenuItem> */}
             <SubMenu label={dictionary['navigation'].products}>
-              <MenuItem href={`/${locale}/apps/ecommerce/products/list`}>{dictionary['navigation'].list}</MenuItem>
-              <MenuItem className='hidden' href={`/${locale}/apps/ecommerce/products/${params.id}/detail`}>
+              <MenuItem href={`/${locale}/apps/inventory/products/list`}>{dictionary['navigation'].list}</MenuItem>
+              <MenuItem className='hidden' href={`/${locale}/apps/inventory/products/${params.id}/detail`}>
                 {dictionary['navigation'].details}
               </MenuItem>
-              <MenuItem className='hidden' href={`/${locale}/apps/ecommerce/products/${params.id}/edit`}>
+              <MenuItem className='hidden' href={`/${locale}/apps/inventory/products/${params.id}/edit`}>
                 {dictionary['navigation'].edit}
               </MenuItem>
-              <MenuItem href={`/${locale}/apps/ecommerce/products/add`}>{dictionary['navigation'].add}</MenuItem>
-              <MenuItem href={`/${locale}/apps/ecommerce/products/category`}>
+              <MenuItem href={`/${locale}/apps/inventory/products/add`}>{dictionary['navigation'].add}</MenuItem>
+              <MenuItem href={`/${locale}/apps/inventory/products/category`}>
                 {dictionary['navigation'].category}
               </MenuItem>
-              <MenuItem href={`/${locale}/apps/ecommerce/products/units`}>{dictionary['navigation'].units}</MenuItem>
-              <MenuItem href={`/${locale}/apps/ecommerce/products/ingredients`}>
+              <MenuItem href={`/${locale}/apps/inventory/products/units`}>{dictionary['navigation'].units}</MenuItem>
+              <MenuItem href={`/${locale}/apps/inventory/products/ingredients`}>
                 {dictionary['navigation'].ingredients}
               </MenuItem>
             </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`}>
+              <MenuItem href={`/${locale}/apps/inventory/orders/list`}>{dictionary['navigation'].list}</MenuItem>
+              <MenuItem className='hidden' href={`/${locale}/apps/inventory/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>
+              <MenuItem href={`/${locale}/apps/inventory/customers/list`}>{dictionary['navigation'].list}</MenuItem>
             </SubMenu>
             <SubMenu label={dictionary['navigation'].stock}>
-              <MenuItem href={`/${locale}/apps/ecommerce/inventory/list`}>{dictionary['navigation'].list}</MenuItem>
-              <MenuItem href={`/${locale}/apps/ecommerce/inventory/adjustment`}>
-                {dictionary['navigation'].adjustment}
+              <MenuItem href={`/${locale}/apps/inventory/stock/list`}>{dictionary['navigation'].list}</MenuItem>
+              <MenuItem href={`/${locale}/apps/inventory/stock/restock`}>
+                {dictionary['navigation'].restock}
               </MenuItem>
             </SubMenu>
-            {/* <MenuItem href={`/${locale}/apps/ecommerce/settings`}>{dictionary['navigation'].settings}</MenuItem> */}
+            {/* <MenuItem href={`/${locale}/apps/inventory/settings`}>{dictionary['navigation'].settings}</MenuItem> */}
           </SubMenu>
           <SubMenu label={dictionary['navigation'].organization} icon={<i className='tabler-sitemap' />}>
             <SubMenu label={dictionary['navigation'].outlet}>

src/data/dictionaries/ar.json

@@ -18,7 +18,7 @@
     "products": "منتجات",
     "list": "قائمة",
     "add": "يضيف",
-    "adjustment": "تعديل",
+    "restock": "استرجاع",
     "category": "فئة",
     "overview": "نظرة عامة",
     "profitloss": "الربح والخسارة",

src/data/dictionaries/en.json

@@ -18,7 +18,7 @@
     "products": "Products",
     "list": "List",
     "add": "Add",
-    "adjustment": "Adjustment",
+    "restock": "Re stock",
     "category": "Category",
     "overview": "Overview",
     "profitloss": "Profit Loss",

src/data/dictionaries/fr.json

@@ -18,7 +18,7 @@
     "products": "Produits",
     "list": "Liste",
     "add": "Ajouter",
-    "adjustment": "Ajustement",
+    "restock": "Rapprocher",
     "category": "Catégorie",
     "overview": "Aperçu",
     "profitloss": "Profit et perte",

src/services/queries/analytics.ts

@@ -2,6 +2,7 @@ import { useQuery } from '@tanstack/react-query'
 import {
   CategoryReport,
   DashboardReport,
+  InventoryReport,
   PaymentReport,
   ProductSalesReport,
   ProfitLossReport,
@@ -194,3 +195,43 @@ export function useCategoryAnalytics(params: AnalyticQueryParams = {}) {
     }
   })
 }
+
+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

@@ -172,3 +172,56 @@ export interface CategoryDataReport {
   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/adjustment/AdjustmentStockDrawer.tsx

@@ -96,7 +96,7 @@ const AdjustmentStockDrawer = (props: Props) => {
       sx={{ '& .MuiDrawer-paper': { width: { xs: 300, sm: 400 } } }}
     >
       <div className='flex items-center justify-between pli-6 plb-5'>
-        <Typography variant='h5'>Adjust Inventory</Typography>
+        <Typography variant='h5'>Re Stock</Typography>
         <IconButton size='small' onClick={handleReset}>
           <i className='tabler-x text-textSecondary text-2xl' />
         </IconButton>

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

@@ -237,7 +237,7 @@ const StockListTable = () => {
               onClick={() => setAddInventoryOpen(!addInventoryOpen)}
               startIcon={<i className='tabler-plus' />}
             >
-              Adjust Stock
+              Re Stock
             </Button>
           </div>
         </div>

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
-              color='secondary'
-              variant='tonal'
-              className='max-sm:is-full is-auto'
-              startIcon={<i className='tabler-upload' />}
-            >
-              Export
-            </Button>
+            <Link href={getLocalizedUrl(`/apps/inventory/stock/export`, locale as Locale)}>
+              <Button
+                color='secondary'
+                variant='tonal'
+                className='max-sm:is-full is-auto'
+                startIcon={<i className='tabler-upload' />}
+              >
+                Export
+              </Button>
+            </Link>
             <Button
               variant='contained'
               className='max-sm:is-full'