Compare commits
No commits in common. "16ad569297442000452422e9d288ba07323f5957" and "7a8bd59bb47fe22369ac156aecde89d6bd4500d4" have entirely different histories.
16ad569297
...
7a8bd59bb4
@ -1,317 +0,0 @@
|
|||||||
'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
|
|
||||||
@ -14,7 +14,7 @@ import ReportHeader from '@/views/dashboards/daily-report/report-header'
|
|||||||
import React, { useEffect, useRef, useState } from 'react'
|
import React, { useEffect, useRef, useState } from 'react'
|
||||||
|
|
||||||
const DailyPOSReport = () => {
|
const DailyPOSReport = () => {
|
||||||
const reportRef = useRef<HTMLDivElement | null>(null)
|
const reportRef = useRef<HTMLElement | null>(null)
|
||||||
|
|
||||||
const [now, setNow] = useState(new Date())
|
const [now, setNow] = useState(new Date())
|
||||||
const [selectedDate, setSelectedDate] = useState(new Date())
|
const [selectedDate, setSelectedDate] = useState(new Date())
|
||||||
@ -22,7 +22,7 @@ const DailyPOSReport = () => {
|
|||||||
startDate: new Date(),
|
startDate: new Date(),
|
||||||
endDate: new Date()
|
endDate: new Date()
|
||||||
})
|
})
|
||||||
const [filterType, setFilterType] = useState<'single' | 'range'>('single') // 'single' or 'range'
|
const [filterType, setFilterType] = useState('single') // 'single' or 'range'
|
||||||
|
|
||||||
// Use selectedDate for single date filter, or dateRange for range filter
|
// Use selectedDate for single date filter, or dateRange for range filter
|
||||||
const getDateParams = () => {
|
const getDateParams = () => {
|
||||||
|
|||||||
@ -1,25 +1,14 @@
|
|||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
import React, { useState } from 'react'
|
import React from 'react'
|
||||||
import { useProfitLossAnalytics } from '../../../../../../services/queries/analytics'
|
import { useProfitLossAnalytics } from '../../../../../../services/queries/analytics'
|
||||||
import { formatDateDDMMYYYY, formatShortCurrency } from '../../../../../../utils/transform'
|
import { formatShortCurrency } from '../../../../../../utils/transform'
|
||||||
import MultipleSeries from '../../../../../../views/dashboards/profit-loss/EarningReportWithTabs'
|
import MultipleSeries from '../../../../../../views/dashboards/profit-loss/EarningReportWithTabs'
|
||||||
import { DailyData, ProfitLossReport } from '../../../../../../types/services/analytic'
|
import { DailyData, ProfitLossReport } from '../../../../../../types/services/analytic'
|
||||||
import { TextField, Typography, useTheme } from '@mui/material'
|
|
||||||
|
|
||||||
const DashboardProfitloss = () => {
|
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
|
// 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) => {
|
const formatCurrency = (amount: any) => {
|
||||||
return new Intl.NumberFormat('id-ID', {
|
return new Intl.NumberFormat('id-ID', {
|
||||||
@ -102,45 +91,11 @@ const DashboardProfitloss = () => {
|
|||||||
{profitData && (
|
{profitData && (
|
||||||
<div>
|
<div>
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className='mb-8 flex gap-4 items-center justify-between'>
|
<div className='mb-8'>
|
||||||
<Typography variant='h1' className='text-3xl font-bold text-gray-900 mb-2'>
|
<h1 className='text-3xl font-bold text-gray-900 mb-2'>Profit Analysis Dashboard</h1>
|
||||||
Profit Analysis Dashboard
|
<p className='text-gray-600'>
|
||||||
</Typography>
|
{formatDate(profitData.date_from)} - {formatDate(profitData.date_to)}
|
||||||
<div className='flex items-center gap-4'>
|
</p>
|
||||||
<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>
|
</div>
|
||||||
|
|
||||||
{/* Summary Metrics */}
|
{/* Summary Metrics */}
|
||||||
|
|||||||
@ -92,39 +92,40 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
|
|||||||
</SubMenu>
|
</SubMenu>
|
||||||
<MenuSection label={dictionary['navigation'].appsPages}>
|
<MenuSection label={dictionary['navigation'].appsPages}>
|
||||||
<SubMenu label={dictionary['navigation'].inventory} icon={<i className='tabler-salad' />}>
|
<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}>
|
<SubMenu label={dictionary['navigation'].products}>
|
||||||
<MenuItem href={`/${locale}/apps/inventory/products/list`}>{dictionary['navigation'].list}</MenuItem>
|
<MenuItem href={`/${locale}/apps/ecommerce/products/list`}>{dictionary['navigation'].list}</MenuItem>
|
||||||
<MenuItem className='hidden' href={`/${locale}/apps/inventory/products/${params.id}/detail`}>
|
<MenuItem className='hidden' href={`/${locale}/apps/ecommerce/products/${params.id}/detail`}>
|
||||||
{dictionary['navigation'].details}
|
{dictionary['navigation'].details}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
<MenuItem className='hidden' href={`/${locale}/apps/inventory/products/${params.id}/edit`}>
|
<MenuItem className='hidden' href={`/${locale}/apps/ecommerce/products/${params.id}/edit`}>
|
||||||
{dictionary['navigation'].edit}
|
{dictionary['navigation'].edit}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
<MenuItem href={`/${locale}/apps/inventory/products/add`}>{dictionary['navigation'].add}</MenuItem>
|
<MenuItem href={`/${locale}/apps/ecommerce/products/add`}>{dictionary['navigation'].add}</MenuItem>
|
||||||
<MenuItem href={`/${locale}/apps/inventory/products/category`}>
|
<MenuItem href={`/${locale}/apps/ecommerce/products/category`}>
|
||||||
{dictionary['navigation'].category}
|
{dictionary['navigation'].category}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
<MenuItem href={`/${locale}/apps/inventory/products/units`}>{dictionary['navigation'].units}</MenuItem>
|
<MenuItem href={`/${locale}/apps/ecommerce/products/units`}>{dictionary['navigation'].units}</MenuItem>
|
||||||
<MenuItem href={`/${locale}/apps/inventory/products/ingredients`}>
|
<MenuItem href={`/${locale}/apps/ecommerce/products/ingredients`}>
|
||||||
{dictionary['navigation'].ingredients}
|
{dictionary['navigation'].ingredients}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
</SubMenu>
|
</SubMenu>
|
||||||
<SubMenu label={dictionary['navigation'].orders}>
|
<SubMenu label={dictionary['navigation'].orders}>
|
||||||
<MenuItem href={`/${locale}/apps/inventory/orders/list`}>{dictionary['navigation'].list}</MenuItem>
|
<MenuItem href={`/${locale}/apps/ecommerce/orders/list`}>{dictionary['navigation'].list}</MenuItem>
|
||||||
<MenuItem className='hidden' href={`/${locale}/apps/inventory/orders/${params.id}/details`}>
|
<MenuItem className='hidden' href={`/${locale}/apps/ecommerce/orders/${params.id}/details`}>
|
||||||
{dictionary['navigation'].details}
|
{dictionary['navigation'].details}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
</SubMenu>
|
</SubMenu>
|
||||||
<SubMenu label={dictionary['navigation'].customers}>
|
<SubMenu label={dictionary['navigation'].customers}>
|
||||||
<MenuItem href={`/${locale}/apps/inventory/customers/list`}>{dictionary['navigation'].list}</MenuItem>
|
<MenuItem href={`/${locale}/apps/ecommerce/customers/list`}>{dictionary['navigation'].list}</MenuItem>
|
||||||
</SubMenu>
|
</SubMenu>
|
||||||
<SubMenu label={dictionary['navigation'].stock}>
|
<SubMenu label={dictionary['navigation'].stock}>
|
||||||
<MenuItem href={`/${locale}/apps/inventory/stock/list`}>{dictionary['navigation'].list}</MenuItem>
|
<MenuItem href={`/${locale}/apps/ecommerce/inventory/list`}>{dictionary['navigation'].list}</MenuItem>
|
||||||
<MenuItem href={`/${locale}/apps/inventory/stock/restock`}>
|
<MenuItem href={`/${locale}/apps/ecommerce/inventory/adjustment`}>
|
||||||
{dictionary['navigation'].restock}
|
{dictionary['navigation'].adjustment}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
</SubMenu>
|
</SubMenu>
|
||||||
{/* <MenuItem href={`/${locale}/apps/inventory/settings`}>{dictionary['navigation'].settings}</MenuItem> */}
|
{/* <MenuItem href={`/${locale}/apps/ecommerce/settings`}>{dictionary['navigation'].settings}</MenuItem> */}
|
||||||
</SubMenu>
|
</SubMenu>
|
||||||
<SubMenu label={dictionary['navigation'].organization} icon={<i className='tabler-sitemap' />}>
|
<SubMenu label={dictionary['navigation'].organization} icon={<i className='tabler-sitemap' />}>
|
||||||
<SubMenu label={dictionary['navigation'].outlet}>
|
<SubMenu label={dictionary['navigation'].outlet}>
|
||||||
|
|||||||
@ -18,7 +18,7 @@
|
|||||||
"products": "منتجات",
|
"products": "منتجات",
|
||||||
"list": "قائمة",
|
"list": "قائمة",
|
||||||
"add": "يضيف",
|
"add": "يضيف",
|
||||||
"restock": "استرجاع",
|
"adjustment": "تعديل",
|
||||||
"category": "فئة",
|
"category": "فئة",
|
||||||
"overview": "نظرة عامة",
|
"overview": "نظرة عامة",
|
||||||
"profitloss": "الربح والخسارة",
|
"profitloss": "الربح والخسارة",
|
||||||
|
|||||||
@ -18,7 +18,7 @@
|
|||||||
"products": "Products",
|
"products": "Products",
|
||||||
"list": "List",
|
"list": "List",
|
||||||
"add": "Add",
|
"add": "Add",
|
||||||
"restock": "Re stock",
|
"adjustment": "Adjustment",
|
||||||
"category": "Category",
|
"category": "Category",
|
||||||
"overview": "Overview",
|
"overview": "Overview",
|
||||||
"profitloss": "Profit Loss",
|
"profitloss": "Profit Loss",
|
||||||
|
|||||||
@ -18,7 +18,7 @@
|
|||||||
"products": "Produits",
|
"products": "Produits",
|
||||||
"list": "Liste",
|
"list": "Liste",
|
||||||
"add": "Ajouter",
|
"add": "Ajouter",
|
||||||
"restock": "Rapprocher",
|
"adjustment": "Ajustement",
|
||||||
"category": "Catégorie",
|
"category": "Catégorie",
|
||||||
"overview": "Aperçu",
|
"overview": "Aperçu",
|
||||||
"profitloss": "Profit et perte",
|
"profitloss": "Profit et perte",
|
||||||
|
|||||||
@ -2,7 +2,6 @@ import { useQuery } from '@tanstack/react-query'
|
|||||||
import {
|
import {
|
||||||
CategoryReport,
|
CategoryReport,
|
||||||
DashboardReport,
|
DashboardReport,
|
||||||
InventoryReport,
|
|
||||||
PaymentReport,
|
PaymentReport,
|
||||||
ProductSalesReport,
|
ProductSalesReport,
|
||||||
ProfitLossReport,
|
ProfitLossReport,
|
||||||
@ -195,43 +194,3 @@ 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
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|||||||
@ -172,56 +172,3 @@ export interface CategoryDataReport {
|
|||||||
product_count: number
|
product_count: number
|
||||||
order_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
|
|
||||||
}
|
|
||||||
|
|||||||
@ -96,7 +96,7 @@ const AdjustmentStockDrawer = (props: Props) => {
|
|||||||
sx={{ '& .MuiDrawer-paper': { width: { xs: 300, sm: 400 } } }}
|
sx={{ '& .MuiDrawer-paper': { width: { xs: 300, sm: 400 } } }}
|
||||||
>
|
>
|
||||||
<div className='flex items-center justify-between pli-6 plb-5'>
|
<div className='flex items-center justify-between pli-6 plb-5'>
|
||||||
<Typography variant='h5'>Re Stock</Typography>
|
<Typography variant='h5'>Adjust Inventory</Typography>
|
||||||
<IconButton size='small' onClick={handleReset}>
|
<IconButton size='small' onClick={handleReset}>
|
||||||
<i className='tabler-x text-textSecondary text-2xl' />
|
<i className='tabler-x text-textSecondary text-2xl' />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
|
|||||||
@ -237,7 +237,7 @@ const StockListTable = () => {
|
|||||||
onClick={() => setAddInventoryOpen(!addInventoryOpen)}
|
onClick={() => setAddInventoryOpen(!addInventoryOpen)}
|
||||||
startIcon={<i className='tabler-plus' />}
|
startIcon={<i className='tabler-plus' />}
|
||||||
>
|
>
|
||||||
Re Stock
|
Adjust Stock
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -41,10 +41,6 @@ import { useInventoriesMutation } from '../../../../../services/mutations/invent
|
|||||||
import { useInventories } from '../../../../../services/queries/inventories'
|
import { useInventories } from '../../../../../services/queries/inventories'
|
||||||
import { Inventory } from '../../../../../types/services/inventory'
|
import { Inventory } from '../../../../../types/services/inventory'
|
||||||
import AddStockDrawer from './AddStockDrawer'
|
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' {
|
declare module '@tanstack/table-core' {
|
||||||
interface FilterFns {
|
interface FilterFns {
|
||||||
@ -113,9 +109,6 @@ const StockListTable = () => {
|
|||||||
const [addInventoryOpen, setAddInventoryOpen] = useState(false)
|
const [addInventoryOpen, setAddInventoryOpen] = useState(false)
|
||||||
const [search, setSearch] = useState('')
|
const [search, setSearch] = useState('')
|
||||||
|
|
||||||
// Hooks
|
|
||||||
const { lang: locale } = useParams()
|
|
||||||
|
|
||||||
// Fetch products with pagination and search
|
// Fetch products with pagination and search
|
||||||
const { data, isLoading, error, isFetching } = useInventories({
|
const { data, isLoading, error, isFetching } = useInventories({
|
||||||
page: currentPage,
|
page: currentPage,
|
||||||
@ -266,7 +259,6 @@ const StockListTable = () => {
|
|||||||
<MenuItem value='25'>25</MenuItem>
|
<MenuItem value='25'>25</MenuItem>
|
||||||
<MenuItem value='50'>50</MenuItem>
|
<MenuItem value='50'>50</MenuItem>
|
||||||
</CustomTextField>
|
</CustomTextField>
|
||||||
<Link href={getLocalizedUrl(`/apps/inventory/stock/export`, locale as Locale)}>
|
|
||||||
<Button
|
<Button
|
||||||
color='secondary'
|
color='secondary'
|
||||||
variant='tonal'
|
variant='tonal'
|
||||||
@ -275,7 +267,6 @@ const StockListTable = () => {
|
|||||||
>
|
>
|
||||||
Export
|
Export
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
|
||||||
<Button
|
<Button
|
||||||
variant='contained'
|
variant='contained'
|
||||||
className='max-sm:is-full'
|
className='max-sm:is-full'
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user