feat: product recipes
This commit is contained in:
ferdiansyah783
parent
b648349ebd
commit
c3780af341
@ -3,7 +3,7 @@
|
||||
import React from 'react'
|
||||
import { useDashboardAnalytics } from '../../../../../../services/queries/analytics'
|
||||
import Loading from '../../../../../../components/layout/shared/Loading'
|
||||
import { formatCurrency, formatDate } from '../../../../../../utils/transform'
|
||||
import { formatCurrency, formatDate, formatShortCurrency } from '../../../../../../utils/transform'
|
||||
import ProductSales from '../../../../../../views/dashboards/products/ProductSales'
|
||||
import PaymentMethodReport from '../../../../../../views/dashboards/payment-methods/PaymentMethodReport'
|
||||
import OrdersReport from '../../../../../../views/dashboards/orders/OrdersReport'
|
||||
@ -55,7 +55,7 @@ const DashboardOverview = () => {
|
||||
<MetricCard
|
||||
iconClass='tabler-cash'
|
||||
title='Total Sales'
|
||||
value={formatCurrency(salesData.overview.total_sales)}
|
||||
value={formatShortCurrency(salesData.overview.total_sales)}
|
||||
bgColor='bg-green-500'
|
||||
/>
|
||||
<MetricCard
|
||||
@ -68,7 +68,7 @@ const DashboardOverview = () => {
|
||||
<MetricCard
|
||||
iconClass='tabler-trending-up'
|
||||
title='Average Order Value'
|
||||
value={formatCurrency(salesData.overview.average_order_value)}
|
||||
value={formatShortCurrency(salesData.overview.average_order_value)}
|
||||
bgColor='bg-purple-500'
|
||||
/>
|
||||
<MetricCard
|
||||
|
||||
@ -1,66 +1,52 @@
|
||||
'use client'
|
||||
|
||||
// MUI Imports
|
||||
import Grid from '@mui/material/Grid2'
|
||||
|
||||
// Component Imports
|
||||
import DistributedBarChartOrder from '@views/dashboards/crm/DistributedBarChartOrder'
|
||||
|
||||
// Server Action Imports
|
||||
import Loading from '../../../../../../components/layout/shared/Loading'
|
||||
import React from 'react'
|
||||
import { useProfitLossAnalytics } from '../../../../../../services/queries/analytics'
|
||||
import { DailyData, ProductDataReport, ProfitLossReport } from '../../../../../../types/services/analytic'
|
||||
import EarningReportsWithTabs from '../../../../../../views/dashboards/crm/EarningReportsWithTabs'
|
||||
import { formatShortCurrency } from '../../../../../../utils/transform'
|
||||
import MultipleSeries from '../../../../../../views/dashboards/profit-loss/EarningReportWithTabs'
|
||||
import { DailyData, ProfitLossReport } from '../../../../../../types/services/analytic'
|
||||
|
||||
function formatMetricName(metric: string): string {
|
||||
const nameMap: { [key: string]: string } = {
|
||||
revenue: 'Revenue',
|
||||
cost: 'Cost',
|
||||
gross_profit: 'Gross Profit',
|
||||
gross_profit_margin: 'Gross Profit Margin (%)',
|
||||
tax: 'Tax',
|
||||
discount: 'Discount',
|
||||
net_profit: 'Net Profit',
|
||||
net_profit_margin: 'Net Profit Margin (%)',
|
||||
orders: 'Orders'
|
||||
const DashboardProfitloss = () => {
|
||||
// Sample data - replace with your actual data
|
||||
const { data: profitData, isLoading } = useProfitLossAnalytics()
|
||||
|
||||
const formatCurrency = (amount: any) => {
|
||||
return new Intl.NumberFormat('id-ID', {
|
||||
style: 'currency',
|
||||
currency: 'IDR',
|
||||
minimumFractionDigits: 0
|
||||
}).format(amount)
|
||||
}
|
||||
|
||||
return nameMap[metric] || metric.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())
|
||||
}
|
||||
|
||||
const DashboardProfitLoss = () => {
|
||||
const { data, isLoading } = useProfitLossAnalytics()
|
||||
const formatPercentage = (value: any) => {
|
||||
return `${value.toFixed(2)}%`
|
||||
}
|
||||
|
||||
const formatDate = (dateString: any) => {
|
||||
return new Date(dateString).toLocaleDateString('id-ID', {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric'
|
||||
year: 'numeric'
|
||||
})
|
||||
}
|
||||
|
||||
const metrics = ['cost', 'revenue', 'gross_profit', 'net_profit']
|
||||
const getProfitabilityColor = (margin: any) => {
|
||||
if (margin > 50) return 'text-green-600 bg-green-100'
|
||||
if (margin > 0) return 'text-yellow-600 bg-yellow-100'
|
||||
return 'text-red-600 bg-red-100'
|
||||
}
|
||||
|
||||
const transformSalesData = (data: ProfitLossReport) => {
|
||||
return [
|
||||
{
|
||||
type: 'products',
|
||||
avatarIcon: 'tabler-package',
|
||||
date: data.product_data.map((d: ProductDataReport) => d.product_name),
|
||||
series: [{ data: data.product_data.map((d: ProductDataReport) => d.revenue) }]
|
||||
function formatMetricName(metric: string): string {
|
||||
const nameMap: { [key: string]: string } = {
|
||||
revenue: 'Revenue',
|
||||
net_profit: 'Net Profit',
|
||||
}
|
||||
// {
|
||||
// type: 'profits',
|
||||
// avatarIcon: 'tabler-currency-dollar',
|
||||
// date: data.data.map((d: DailyData) => formatDate(d.date)),
|
||||
// series: metrics.map(metric => ({
|
||||
// name: formatMetricName(metric as string),
|
||||
// data: data.data.map((item: any) => item[metric] as number)
|
||||
// }))
|
||||
// }
|
||||
]
|
||||
|
||||
return nameMap[metric] || metric.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())
|
||||
}
|
||||
|
||||
const metrics = ['revenue', 'net_profit']
|
||||
|
||||
const transformMultipleData = (data: ProfitLossReport) => {
|
||||
return [
|
||||
{
|
||||
@ -75,58 +61,285 @@ const DashboardProfitLoss = () => {
|
||||
]
|
||||
}
|
||||
|
||||
if (isLoading) return <Loading />
|
||||
const MetricCard = ({ iconClass, title, value, subtitle, bgColor = 'bg-blue-500', isNegative = false }: any) => (
|
||||
<div className='bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 p-6'>
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='flex-1'>
|
||||
<h3 className='text-sm font-medium text-gray-600 mb-2'>{title}</h3>
|
||||
<p className={`text-2xl font-bold mb-1 ${isNegative ? 'text-red-600' : 'text-gray-900'}`}>{value}</p>
|
||||
{subtitle && <p className='text-sm text-gray-500'>{subtitle}</p>}
|
||||
</div>
|
||||
<div className={`p-3 rounded-full ${bgColor} bg-opacity-10`}>
|
||||
<i className={`${iconClass} text-[32px] ${bgColor.replace('bg-', 'text-')}`}></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<Grid container spacing={6}>
|
||||
<Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
|
||||
<DistributedBarChartOrder
|
||||
isLoading={isLoading}
|
||||
<>
|
||||
{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>
|
||||
|
||||
{/* Summary Metrics */}
|
||||
<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8'>
|
||||
<MetricCard
|
||||
iconClass='tabler-currency-dollar'
|
||||
title='Total Revenue'
|
||||
value={formatShortCurrency(profitData.summary.total_revenue)}
|
||||
bgColor='bg-green-500'
|
||||
/>
|
||||
<MetricCard
|
||||
iconClass='tabler-receipt'
|
||||
title='Total Cost'
|
||||
value={data?.summary.total_cost as number}
|
||||
avatarIcon={'tabler-currency-dollar'}
|
||||
avatarColor='primary'
|
||||
avatarSkin='light'
|
||||
value={formatShortCurrency(profitData.summary.total_cost)}
|
||||
bgColor='bg-red-500'
|
||||
/>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
|
||||
<DistributedBarChartOrder
|
||||
isLoading={isLoading}
|
||||
title='Total Rvenue'
|
||||
value={data?.summary.total_revenue as number}
|
||||
avatarIcon={'tabler-currency-dollar'}
|
||||
avatarColor='info'
|
||||
avatarSkin='light'
|
||||
/>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
|
||||
<DistributedBarChartOrder
|
||||
isLoading={isLoading}
|
||||
<MetricCard
|
||||
iconClass='tabler-trending-up'
|
||||
title='Gross Profit'
|
||||
value={data?.summary.gross_profit as number}
|
||||
avatarIcon={'tabler-trending-up'}
|
||||
avatarColor='warning'
|
||||
avatarSkin='light'
|
||||
value={formatShortCurrency(profitData.summary.gross_profit)}
|
||||
subtitle={`Margin: ${formatPercentage(profitData.summary.gross_profit_margin)}`}
|
||||
bgColor='bg-blue-500'
|
||||
isNegative={profitData.summary.gross_profit < 0}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
|
||||
<DistributedBarChartOrder
|
||||
isLoading={isLoading}
|
||||
title='Net Profit'
|
||||
value={data?.summary.net_profit as number}
|
||||
avatarIcon={'tabler-currency-dollar'}
|
||||
avatarColor='success'
|
||||
avatarSkin='light'
|
||||
<MetricCard
|
||||
iconClass='tabler-percentage'
|
||||
title='Profitability Ratio'
|
||||
value={formatPercentage(profitData.summary.profitability_ratio)}
|
||||
subtitle={`Avg Profit: ${formatShortCurrency(profitData.summary.average_profit)}`}
|
||||
bgColor='bg-purple-500'
|
||||
/>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, lg: 12 }}>
|
||||
<EarningReportsWithTabs data={transformSalesData(data!)} />
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, lg: 12 }}>
|
||||
<MultipleSeries data={transformMultipleData(data!)} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</div>
|
||||
|
||||
{/* Additional Summary Metrics */}
|
||||
<div className='grid grid-cols-1 md:grid-cols-3 gap-6 mb-8'>
|
||||
<div className='bg-white rounded-lg shadow-md p-6'>
|
||||
<div className='flex items-center mb-4'>
|
||||
<i className='tabler-wallet text-[24px] text-green-600 mr-2'></i>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Net Profit</h3>
|
||||
</div>
|
||||
<p className='text-3xl font-bold text-green-600 mb-2'>
|
||||
{formatShortCurrency(profitData.summary.net_profit)}
|
||||
</p>
|
||||
<p className='text-sm text-gray-600'>Margin: {formatPercentage(profitData.summary.net_profit_margin)}</p>
|
||||
</div>
|
||||
<div className='bg-white rounded-lg shadow-md p-6'>
|
||||
<div className='flex items-center mb-4'>
|
||||
<i className='tabler-shopping-cart text-[24px] text-blue-600 mr-2'></i>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Total Orders</h3>
|
||||
</div>
|
||||
<p className='text-3xl font-bold text-blue-600'>{profitData.summary.total_orders}</p>
|
||||
</div>
|
||||
<div className='bg-white rounded-lg shadow-md p-6'>
|
||||
<div className='flex items-center mb-4'>
|
||||
<i className='tabler-discount text-[24px] text-orange-600 mr-2'></i>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Tax & Discount</h3>
|
||||
</div>
|
||||
<p className='text-xl font-bold text-orange-600 mb-1'>
|
||||
{formatShortCurrency(profitData.summary.total_tax + profitData.summary.total_discount)}
|
||||
</p>
|
||||
<p className='text-sm text-gray-600'>
|
||||
Tax: {formatShortCurrency(profitData.summary.total_tax)} | Discount:{' '}
|
||||
{formatShortCurrency(profitData.summary.total_discount)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Profit Chart */}
|
||||
<div className='mb-8'>
|
||||
<MultipleSeries data={transformMultipleData(profitData)} />
|
||||
</div>
|
||||
|
||||
<div className='grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8'>
|
||||
{/* Daily Breakdown */}
|
||||
<div className='bg-white rounded-lg shadow-md'>
|
||||
<div className='p-6'>
|
||||
<div className='flex items-center mb-6'>
|
||||
<i className='tabler-calendar text-[24px] text-purple-500 mr-2'></i>
|
||||
<h2 className='text-xl font-semibold text-gray-900'>Daily Breakdown</h2>
|
||||
</div>
|
||||
<div className='overflow-x-auto'>
|
||||
<table className='min-w-full'>
|
||||
<thead>
|
||||
<tr className='bg-gray-50'>
|
||||
<th className='px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase'>Date</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Revenue</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Cost</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Profit</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Margin</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Orders</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className='bg-white divide-y divide-gray-200'>
|
||||
{profitData.data.map((day, index) => (
|
||||
<tr key={index} className='hover:bg-gray-50'>
|
||||
<td className='px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900'>
|
||||
{formatDate(day.date)}
|
||||
</td>
|
||||
<td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>
|
||||
{formatCurrency(day.revenue)}
|
||||
</td>
|
||||
<td className='px-4 py-4 whitespace-nowrap text-right text-sm text-red-600'>
|
||||
{formatCurrency(day.cost)}
|
||||
</td>
|
||||
<td
|
||||
className={`px-4 py-4 whitespace-nowrap text-right text-sm font-medium ${
|
||||
day.gross_profit >= 0 ? 'text-green-600' : 'text-red-600'
|
||||
}`}
|
||||
>
|
||||
{formatCurrency(day.gross_profit)}
|
||||
</td>
|
||||
<td className='px-4 py-4 whitespace-nowrap text-right'>
|
||||
<span
|
||||
className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getProfitabilityColor(
|
||||
day.gross_profit_margin
|
||||
)}`}
|
||||
>
|
||||
{formatPercentage(day.gross_profit_margin)}
|
||||
</span>
|
||||
</td>
|
||||
<td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>{day.orders}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Top Performing Products */}
|
||||
<div className='bg-white rounded-lg shadow-md'>
|
||||
<div className='p-6'>
|
||||
<div className='flex items-center mb-6'>
|
||||
<i className='tabler-trophy text-[24px] text-gold-500 mr-2'></i>
|
||||
<h2 className='text-xl font-semibold text-gray-900'>Top Performers</h2>
|
||||
</div>
|
||||
<div className='space-y-4'>
|
||||
{profitData.product_data
|
||||
.sort((a, b) => b.gross_profit - a.gross_profit)
|
||||
.slice(0, 5)
|
||||
.map((product, index) => (
|
||||
<div
|
||||
key={product.product_id}
|
||||
className='flex items-center justify-between p-4 bg-gray-50 rounded-lg'
|
||||
>
|
||||
<div className='flex items-center'>
|
||||
<span
|
||||
className={`w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-bold mr-3 ${
|
||||
index === 0
|
||||
? 'bg-yellow-500'
|
||||
: index === 1
|
||||
? 'bg-gray-400'
|
||||
: index === 2
|
||||
? 'bg-orange-500'
|
||||
: 'bg-blue-500'
|
||||
}`}
|
||||
>
|
||||
{index + 1}
|
||||
</span>
|
||||
<div>
|
||||
<h3 className='font-medium text-gray-900'>{product.product_name}</h3>
|
||||
<p className='text-sm text-gray-600'>{product.category_name}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='text-right'>
|
||||
<p className={`font-bold ${product.gross_profit >= 0 ? 'text-green-600' : 'text-red-600'}`}>
|
||||
{formatCurrency(product.gross_profit)}
|
||||
</p>
|
||||
<p className='text-xs text-gray-500'>{formatPercentage(product.gross_profit_margin)}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Product Analysis Table */}
|
||||
<div className='bg-white rounded-lg shadow-md'>
|
||||
<div className='p-6'>
|
||||
<div className='flex items-center mb-6'>
|
||||
<i className='tabler-package text-[24px] text-green-500 mr-2'></i>
|
||||
<h2 className='text-xl font-semibold text-gray-900'>Product Analysis</h2>
|
||||
</div>
|
||||
<div className='overflow-x-auto'>
|
||||
<table className='min-w-full'>
|
||||
<thead>
|
||||
<tr className='bg-gray-50'>
|
||||
<th className='px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase'>Product</th>
|
||||
<th className='px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase'>Category</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Qty</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Revenue</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Cost</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Profit</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Margin</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Per Unit</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className='bg-white divide-y divide-gray-200'>
|
||||
{profitData.product_data
|
||||
.sort((a, b) => b.gross_profit - a.gross_profit)
|
||||
.map(product => (
|
||||
<tr key={product.product_id} className='hover:bg-gray-50'>
|
||||
<td className='px-4 py-4 whitespace-nowrap'>
|
||||
<div className='text-sm font-medium text-gray-900'>{product.product_name}</div>
|
||||
</td>
|
||||
<td className='px-4 py-4 whitespace-nowrap'>
|
||||
<span className='inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800'>
|
||||
{product.category_name}
|
||||
</span>
|
||||
</td>
|
||||
<td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>
|
||||
{product.quantity_sold}
|
||||
</td>
|
||||
<td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>
|
||||
{formatCurrency(product.revenue)}
|
||||
</td>
|
||||
<td className='px-4 py-4 whitespace-nowrap text-right text-sm text-red-600'>
|
||||
{formatCurrency(product.cost)}
|
||||
</td>
|
||||
<td
|
||||
className={`px-4 py-4 whitespace-nowrap text-right text-sm font-medium ${
|
||||
product.gross_profit >= 0 ? 'text-green-600' : 'text-red-600'
|
||||
}`}
|
||||
>
|
||||
{formatCurrency(product.gross_profit)}
|
||||
</td>
|
||||
<td className='px-4 py-4 whitespace-nowrap text-right'>
|
||||
<span
|
||||
className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getProfitabilityColor(
|
||||
product.gross_profit_margin
|
||||
)}`}
|
||||
>
|
||||
{formatPercentage(product.gross_profit_margin)}
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
className={`px-4 py-4 whitespace-nowrap text-right text-sm ${
|
||||
product.profit_per_unit >= 0 ? 'text-green-600' : 'text-red-600'
|
||||
}`}
|
||||
>
|
||||
{formatCurrency(product.profit_per_unit)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default DashboardProfitLoss
|
||||
export default DashboardProfitloss
|
||||
|
||||
@ -6,6 +6,7 @@ import customerReducer from '@/redux-store/slices/customer'
|
||||
import paymentMethodReducer from '@/redux-store/slices/paymentMethod'
|
||||
import ingredientReducer from '@/redux-store/slices/ingredient'
|
||||
import orderReducer from '@/redux-store/slices/order'
|
||||
import productRecipeReducer from '@/redux-store/slices/productRecipe'
|
||||
|
||||
export const store = configureStore({
|
||||
reducer: {
|
||||
@ -13,7 +14,8 @@ export const store = configureStore({
|
||||
customerReducer,
|
||||
paymentMethodReducer,
|
||||
ingredientReducer,
|
||||
orderReducer
|
||||
orderReducer,
|
||||
productRecipeReducer
|
||||
},
|
||||
middleware: getDefaultMiddleware => getDefaultMiddleware({ serializableCheck: false })
|
||||
})
|
||||
|
||||
28
src/redux-store/slices/productRecipe.ts
Normal file
28
src/redux-store/slices/productRecipe.ts
Normal file
@ -0,0 +1,28 @@
|
||||
// Third-party Imports
|
||||
import type { PayloadAction } from '@reduxjs/toolkit'
|
||||
import { createSlice } from '@reduxjs/toolkit'
|
||||
|
||||
// Type Imports
|
||||
|
||||
// Data Imports
|
||||
|
||||
const initialState: { currentProductRecipe: any } = {
|
||||
currentProductRecipe: {}
|
||||
}
|
||||
|
||||
export const productRecipeSlice = createSlice({
|
||||
name: 'productRecipe',
|
||||
initialState,
|
||||
reducers: {
|
||||
setProductRecipe: (state, action: PayloadAction<any>) => {
|
||||
state.currentProductRecipe = action.payload
|
||||
},
|
||||
resetProductRecipe: state => {
|
||||
state.currentProductRecipe = initialState.currentProductRecipe
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export const { setProductRecipe, resetProductRecipe } = productRecipeSlice.actions
|
||||
|
||||
export default productRecipeSlice.reducer
|
||||
45
src/services/mutations/productRecipes.ts
Normal file
45
src/services/mutations/productRecipes.ts
Normal file
@ -0,0 +1,45 @@
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { toast } from 'react-toastify'
|
||||
import { ProductRecipeRequest } from '../../types/services/productRecipe'
|
||||
import { api } from '../api'
|
||||
|
||||
export const useProductRecipesMutation = () => {
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
const createProductRecipe = useMutation({
|
||||
mutationFn: async (newProductRecipe: ProductRecipeRequest) => {
|
||||
const { variant_id, ...rest } = newProductRecipe
|
||||
|
||||
const cleanRequest = variant_id ? newProductRecipe : rest
|
||||
|
||||
const response = await api.post('/product-recipes', cleanRequest)
|
||||
return response.data
|
||||
},
|
||||
onSuccess: () => {
|
||||
toast.success('Product Recipe created successfully!')
|
||||
queryClient.invalidateQueries({ queryKey: ['product-recipes'] })
|
||||
},
|
||||
onError: (error: any) => {
|
||||
toast.error(error.response?.data?.errors?.[0]?.cause || 'Create failed')
|
||||
}
|
||||
})
|
||||
|
||||
const updateProductRecipe = useMutation({
|
||||
mutationFn: async ({ id, payload }: { id: string; payload: ProductRecipeRequest }) => {
|
||||
const response = await api.put(`/product-recipes/${id}`, payload)
|
||||
return response.data
|
||||
},
|
||||
onSuccess: () => {
|
||||
toast.success('Product Recipe updated successfully!')
|
||||
queryClient.invalidateQueries({ queryKey: ['product-recipes'] })
|
||||
},
|
||||
onError: (error: any) => {
|
||||
toast.error(error.response?.data?.errors?.[0]?.cause || 'Update failed')
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
createProductRecipe,
|
||||
updateProductRecipe
|
||||
}
|
||||
}
|
||||
13
src/services/queries/productRecipes.ts
Normal file
13
src/services/queries/productRecipes.ts
Normal file
@ -0,0 +1,13 @@
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { ProductRecipe } from '../../types/services/productRecipe'
|
||||
import { api } from '../api'
|
||||
|
||||
export function useProductRecipesByProduct(productId: string) {
|
||||
return useQuery<ProductRecipe[]>({
|
||||
queryKey: ['product-recipes', productId],
|
||||
queryFn: async () => {
|
||||
const res = await api.get(`/product-recipes/product/${productId}`)
|
||||
return res.data.data
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -1,6 +1,7 @@
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { Products } from '../../types/services/product'
|
||||
import { Product, Products } from '../../types/services/product'
|
||||
import { api } from '../api'
|
||||
import { ProductRecipe } from '../../types/services/productRecipe'
|
||||
|
||||
interface ProductsQueryParams {
|
||||
page?: number
|
||||
@ -39,7 +40,7 @@ export function useProducts(params: ProductsQueryParams = {}) {
|
||||
}
|
||||
|
||||
export function useProductById(id: string) {
|
||||
return useQuery({
|
||||
return useQuery<Product>({
|
||||
queryKey: ['product', id],
|
||||
queryFn: async () => {
|
||||
const res = await api.get(`/products/${id}`)
|
||||
|
||||
56
src/types/services/productRecipe.ts
Normal file
56
src/types/services/productRecipe.ts
Normal file
@ -0,0 +1,56 @@
|
||||
export interface Product {
|
||||
ID: string;
|
||||
OrganizationID: string;
|
||||
CategoryID: string;
|
||||
SKU: string;
|
||||
Name: string;
|
||||
Description: string | null;
|
||||
Price: number;
|
||||
Cost: number;
|
||||
BusinessType: string;
|
||||
ImageURL: string;
|
||||
PrinterType: string;
|
||||
UnitID: string | null;
|
||||
HasIngredients: boolean;
|
||||
Metadata: Record<string, any>;
|
||||
IsActive: boolean;
|
||||
CreatedAt: string; // ISO date string
|
||||
UpdatedAt: string; // ISO date string
|
||||
}
|
||||
|
||||
export interface Ingredient {
|
||||
id: string;
|
||||
organization_id: string;
|
||||
outlet_id: string | null;
|
||||
name: string;
|
||||
unit_id: string;
|
||||
cost: number;
|
||||
stock: number;
|
||||
is_semi_finished: boolean;
|
||||
is_active: boolean;
|
||||
metadata: Record<string, any>;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface ProductRecipe {
|
||||
id: string;
|
||||
organization_id: string;
|
||||
outlet_id: string | null;
|
||||
product_id: string;
|
||||
variant_id: string | null;
|
||||
ingredient_id: string;
|
||||
quantity: number;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
product: Product;
|
||||
ingredient: Ingredient;
|
||||
}
|
||||
|
||||
export interface ProductRecipeRequest {
|
||||
product_id: string;
|
||||
variant_id: string | null;
|
||||
ingredient_id: string;
|
||||
quantity: number;
|
||||
outlet_id: string | null;
|
||||
}
|
||||
@ -7,12 +7,23 @@ export const formatCurrency = (amount: number) => {
|
||||
}
|
||||
|
||||
export const formatShortCurrency = (num: number): string => {
|
||||
if (num >= 1_000_000) {
|
||||
return (num / 1_000_000).toFixed(2) + 'M'
|
||||
} else if (num >= 1_000) {
|
||||
return (num / 1_000).toFixed(2) + 'k'
|
||||
const formatNumber = (value: number, suffix: string) => {
|
||||
const str = value.toFixed(2).replace(/\.00$/, '')
|
||||
return str + suffix
|
||||
}
|
||||
return num.toString()
|
||||
|
||||
const absNum = Math.abs(num)
|
||||
let result: string
|
||||
|
||||
if (absNum >= 1_000_000) {
|
||||
result = formatNumber(absNum / 1_000_000, 'M')
|
||||
} else if (absNum >= 1_000) {
|
||||
result = formatNumber(absNum / 1_000, 'k')
|
||||
} else {
|
||||
result = absNum.toString()
|
||||
}
|
||||
|
||||
return num < 0 ? '-' + 'Rp ' + result : 'Rp ' + result
|
||||
}
|
||||
|
||||
export const formatDate = (dateString: any) => {
|
||||
|
||||
160
src/views/apps/ecommerce/products/detail/AddRecipeDialog.tsx
Normal file
160
src/views/apps/ecommerce/products/detail/AddRecipeDialog.tsx
Normal file
@ -0,0 +1,160 @@
|
||||
'use client'
|
||||
|
||||
// MUI Imports
|
||||
import Dialog from '@mui/material/Dialog'
|
||||
import DialogContent from '@mui/material/DialogContent'
|
||||
import DialogTitle from '@mui/material/DialogTitle'
|
||||
|
||||
// Third-party Imports
|
||||
import { Autocomplete, Button, Grid2, MenuItem } from '@mui/material'
|
||||
import { useMemo, useState } from 'react'
|
||||
import CustomTextField from '../../../../../@core/components/mui/TextField'
|
||||
import DialogCloseButton from '../../../../../components/dialogs/DialogCloseButton'
|
||||
import { Product } from '../../../../../types/services/product'
|
||||
import { ProductRecipeRequest } from '../../../../../types/services/productRecipe'
|
||||
import { useOutlets } from '../../../../../services/queries/outlets'
|
||||
import { useDebounce } from 'use-debounce'
|
||||
import { useIngredients } from '../../../../../services/queries/ingredients'
|
||||
|
||||
// Component Imports
|
||||
|
||||
type PaymentMethodProps = {
|
||||
open: boolean
|
||||
setOpen: (open: boolean) => void
|
||||
product: Product
|
||||
}
|
||||
|
||||
const initialValues = {
|
||||
product_id: '',
|
||||
variant_id: '',
|
||||
ingredient_id: '',
|
||||
quantity: 0,
|
||||
outlet_id: ''
|
||||
}
|
||||
|
||||
const AddRecipeDialog = ({ open, setOpen, product }: PaymentMethodProps) => {
|
||||
const [formData, setFormData] = useState<ProductRecipeRequest>(initialValues)
|
||||
|
||||
const [outletInput, setOutletInput] = useState('')
|
||||
const [outletDebouncedInput] = useDebounce(outletInput, 500)
|
||||
const [ingredientInput, setIngredientInput] = useState('')
|
||||
const [ingredientDebouncedInput] = useDebounce(ingredientInput, 500)
|
||||
|
||||
const { data: outlets, isLoading: outletsLoading } = useOutlets({
|
||||
search: outletDebouncedInput
|
||||
})
|
||||
const { data: ingredients, isLoading: ingredientsLoading } = useIngredients({
|
||||
search: ingredientDebouncedInput
|
||||
})
|
||||
|
||||
const outletOptions = useMemo(() => outlets?.outlets || [], [outlets])
|
||||
const ingredientOptions = useMemo(() => ingredients?.data || [], [ingredients])
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
fullWidth
|
||||
open={open}
|
||||
onClose={() => setOpen(false)}
|
||||
maxWidth='sm'
|
||||
scroll='body'
|
||||
closeAfterTransition={false}
|
||||
sx={{ '& .MuiDialog-paper': { overflow: 'visible' } }}
|
||||
>
|
||||
<DialogCloseButton onClick={() => setOpen(false)} disableRipple>
|
||||
<i className='tabler-x' />
|
||||
</DialogCloseButton>
|
||||
<DialogTitle variant='h4' className='flex gap-2 flex-col text-center sm:pbs-16 sm:pbe-10 sm:pli-16'>
|
||||
Create Recipe
|
||||
</DialogTitle>
|
||||
<DialogContent className='pbs-0 sm:pli-16 sm:pbe-20 space-y-4'>
|
||||
{product.variants && (
|
||||
<CustomTextField
|
||||
select
|
||||
fullWidth
|
||||
label='Variant'
|
||||
value={formData.variant_id}
|
||||
onChange={e => setFormData({ ...formData, variant_id: e.target.value })}
|
||||
>
|
||||
{product.variants.map((variant, index) => (
|
||||
<MenuItem value={variant.id} key={index}>
|
||||
{variant.name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</CustomTextField>
|
||||
)}
|
||||
<Autocomplete
|
||||
options={outletOptions}
|
||||
loading={outletsLoading}
|
||||
getOptionLabel={option => option.name}
|
||||
value={outletOptions.find(p => p.id === formData.outlet_id) || null}
|
||||
onInputChange={(event, newOutlettInput) => {
|
||||
setOutletInput(newOutlettInput)
|
||||
}}
|
||||
onChange={(event, newValue) => {
|
||||
setFormData({
|
||||
...formData,
|
||||
outlet_id: newValue?.id || ''
|
||||
})
|
||||
}}
|
||||
renderInput={params => (
|
||||
<CustomTextField
|
||||
{...params}
|
||||
className=''
|
||||
label='Outlet'
|
||||
fullWidth
|
||||
InputProps={{
|
||||
...params.InputProps,
|
||||
endAdornment: <>{params.InputProps.endAdornment}</>
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Grid2 container spacing={2}>
|
||||
<Grid2 size={{ xs: 6 }}>
|
||||
<Autocomplete
|
||||
options={ingredientOptions || []}
|
||||
loading={ingredientsLoading}
|
||||
getOptionLabel={option => option.name}
|
||||
value={ingredientOptions?.find(p => p.id === formData.ingredient_id) || null}
|
||||
onInputChange={(event, newIngredientInput) => {
|
||||
setIngredientInput(newIngredientInput)
|
||||
}}
|
||||
onChange={(event, newValue) => {
|
||||
setFormData({
|
||||
...formData,
|
||||
ingredient_id: newValue?.id || ''
|
||||
})
|
||||
}}
|
||||
renderInput={params => (
|
||||
<CustomTextField
|
||||
{...params}
|
||||
className=''
|
||||
label='Ingredient'
|
||||
fullWidth
|
||||
InputProps={{
|
||||
...params.InputProps,
|
||||
endAdornment: <>{params.InputProps.endAdornment}</>
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Grid2>
|
||||
<Grid2 size={{ xs: 4 }}>
|
||||
<CustomTextField
|
||||
type='number'
|
||||
label='Quantity'
|
||||
fullWidth
|
||||
value={formData.quantity}
|
||||
onChange={e => setFormData({ ...formData, quantity: Number(e.target.value) })}
|
||||
/>
|
||||
</Grid2>
|
||||
<Grid2 size={{ xs: 2 }}>
|
||||
<Button variant='contained' color='primary' className='rounded-full' startIcon={<i className='tabler-plus' />} />
|
||||
</Grid2>
|
||||
</Grid2>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
export default AddRecipeDialog
|
||||
227
src/views/apps/ecommerce/products/detail/AddRecipeDrawer.tsx
Normal file
227
src/views/apps/ecommerce/products/detail/AddRecipeDrawer.tsx
Normal file
@ -0,0 +1,227 @@
|
||||
// React Imports
|
||||
import { useMemo, useState } from 'react'
|
||||
|
||||
// MUI Imports
|
||||
import Button from '@mui/material/Button'
|
||||
import Divider from '@mui/material/Divider'
|
||||
import Drawer from '@mui/material/Drawer'
|
||||
import IconButton from '@mui/material/IconButton'
|
||||
import Typography from '@mui/material/Typography'
|
||||
|
||||
// Third-party Imports
|
||||
import PerfectScrollbar from 'react-perfect-scrollbar'
|
||||
|
||||
// Type Imports
|
||||
|
||||
// Component Imports
|
||||
import CustomTextField from '@core/components/mui/TextField'
|
||||
import { Autocomplete } from '@mui/material'
|
||||
import { useDispatch, useSelector } from 'react-redux'
|
||||
import { useDebounce } from 'use-debounce'
|
||||
import { RootState } from '../../../../../redux-store'
|
||||
import { resetProductRecipe } from '../../../../../redux-store/slices/productRecipe'
|
||||
import { useProductRecipesMutation } from '../../../../../services/mutations/productRecipes'
|
||||
import { useIngredients } from '../../../../../services/queries/ingredients'
|
||||
import { useOutlets } from '../../../../../services/queries/outlets'
|
||||
import { Product } from '../../../../../types/services/product'
|
||||
import { ProductRecipeRequest } from '../../../../../types/services/productRecipe'
|
||||
|
||||
type Props = {
|
||||
open: boolean
|
||||
handleClose: () => void
|
||||
product: Product
|
||||
}
|
||||
|
||||
// Vars
|
||||
const initialData = {
|
||||
outlet_id: '',
|
||||
product_id: '',
|
||||
variant_id: '',
|
||||
ingredient_id: '',
|
||||
quantity: 0
|
||||
}
|
||||
|
||||
const AddRecipeDrawer = (props: Props) => {
|
||||
const dispatch = useDispatch()
|
||||
|
||||
// Props
|
||||
const { open, handleClose, product } = props
|
||||
|
||||
const { currentProductRecipe } = useSelector((state: RootState) => state.productRecipeReducer)
|
||||
|
||||
console.log('currentProductRecipe', currentProductRecipe)
|
||||
|
||||
const [outletInput, setOutletInput] = useState('')
|
||||
const [outletDebouncedInput] = useDebounce(outletInput, 500)
|
||||
const [ingredientInput, setIngredientInput] = useState('')
|
||||
const [ingredientDebouncedInput] = useDebounce(ingredientInput, 500)
|
||||
const [formData, setFormData] = useState<ProductRecipeRequest>(initialData)
|
||||
|
||||
const { data: outlets, isLoading: outletsLoading } = useOutlets({
|
||||
search: outletDebouncedInput
|
||||
})
|
||||
const { data: ingredients, isLoading: ingredientsLoading } = useIngredients({
|
||||
search: ingredientDebouncedInput
|
||||
})
|
||||
|
||||
const outletOptions = useMemo(() => outlets?.outlets || [], [outlets])
|
||||
const ingredientOptions = useMemo(() => ingredients?.data || [], [ingredients])
|
||||
|
||||
const { createProductRecipe, updateProductRecipe } = useProductRecipesMutation()
|
||||
|
||||
const handleSubmit = (e: any) => {
|
||||
e.preventDefault()
|
||||
|
||||
if (currentProductRecipe.id) {
|
||||
updateProductRecipe.mutate(
|
||||
{ id: currentProductRecipe.id, payload: formData },
|
||||
{
|
||||
onSuccess: () => {
|
||||
handleReset()
|
||||
}
|
||||
}
|
||||
)
|
||||
} else {
|
||||
createProductRecipe.mutate(
|
||||
{ ...formData, product_id: product.id, variant_id: currentProductRecipe.variant?.ID || '' },
|
||||
{
|
||||
onSuccess: () => {
|
||||
handleReset()
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
handleClose()
|
||||
dispatch(resetProductRecipe())
|
||||
setFormData(initialData)
|
||||
}
|
||||
|
||||
const handleInputChange = (e: any) => {
|
||||
setFormData({
|
||||
...formData,
|
||||
[e.target.name]: e.target.value
|
||||
})
|
||||
}
|
||||
|
||||
const setTitleDrawer = (recipe: any) => {
|
||||
let title = 'Original'
|
||||
|
||||
if (recipe?.variant?.Name) {
|
||||
title = recipe?.variant?.Name
|
||||
}
|
||||
|
||||
return title
|
||||
}
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
open={open}
|
||||
anchor='right'
|
||||
variant='temporary'
|
||||
onClose={handleReset}
|
||||
ModalProps={{ keepMounted: true }}
|
||||
sx={{ '& .MuiDrawer-paper': { width: { xs: 300, sm: 400 } } }}
|
||||
>
|
||||
<div className='flex items-center justify-between pli-6 plb-5'>
|
||||
<Typography variant='h5'>{setTitleDrawer(currentProductRecipe)} Variant Ingredient</Typography>
|
||||
<IconButton size='small' onClick={handleReset}>
|
||||
<i className='tabler-x text-2xl' />
|
||||
</IconButton>
|
||||
</div>
|
||||
<Divider />
|
||||
<PerfectScrollbar options={{ wheelPropagation: false, suppressScrollX: true }}>
|
||||
<div className='p-6'>
|
||||
<form onSubmit={handleSubmit} className='flex flex-col gap-5'>
|
||||
<Typography color='text.primary' className='font-medium'>
|
||||
Basic Information
|
||||
</Typography>
|
||||
<Autocomplete
|
||||
options={outletOptions}
|
||||
loading={outletsLoading}
|
||||
getOptionLabel={option => option.name}
|
||||
value={outletOptions.find(p => p.id === formData.outlet_id) || null}
|
||||
onInputChange={(event, newOutlettInput) => {
|
||||
setOutletInput(newOutlettInput)
|
||||
}}
|
||||
onChange={(event, newValue) => {
|
||||
setFormData({
|
||||
...formData,
|
||||
outlet_id: newValue?.id || ''
|
||||
})
|
||||
}}
|
||||
renderInput={params => (
|
||||
<CustomTextField
|
||||
{...params}
|
||||
className=''
|
||||
label='Outlet'
|
||||
fullWidth
|
||||
InputProps={{
|
||||
...params.InputProps,
|
||||
endAdornment: <>{params.InputProps.endAdornment}</>
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Autocomplete
|
||||
options={ingredientOptions || []}
|
||||
loading={ingredientsLoading}
|
||||
getOptionLabel={option => option.name}
|
||||
value={ingredientOptions?.find(p => p.id === formData.ingredient_id) || null}
|
||||
onInputChange={(event, newIngredientInput) => {
|
||||
setIngredientInput(newIngredientInput)
|
||||
}}
|
||||
onChange={(event, newValue) => {
|
||||
setFormData({
|
||||
...formData,
|
||||
ingredient_id: newValue?.id || ''
|
||||
})
|
||||
}}
|
||||
renderInput={params => (
|
||||
<CustomTextField
|
||||
{...params}
|
||||
className=''
|
||||
label='Ingredient'
|
||||
fullWidth
|
||||
InputProps={{
|
||||
...params.InputProps,
|
||||
endAdornment: <>{params.InputProps.endAdornment}</>
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<CustomTextField
|
||||
type='number'
|
||||
label='Quantity'
|
||||
fullWidth
|
||||
value={formData.quantity}
|
||||
onChange={e => setFormData({ ...formData, quantity: Number(e.target.value) })}
|
||||
/>
|
||||
<div className='flex items-center gap-4'>
|
||||
<Button
|
||||
variant='contained'
|
||||
type='submit'
|
||||
disabled={createProductRecipe.isPending || updateProductRecipe.isPending}
|
||||
>
|
||||
{currentProductRecipe?.id
|
||||
? updateProductRecipe.isPending
|
||||
? 'Updating...'
|
||||
: 'Update'
|
||||
: createProductRecipe.isPending
|
||||
? 'Adding...'
|
||||
: 'Add'}
|
||||
</Button>
|
||||
<Button variant='tonal' color='error' type='reset' onClick={handleReset}>
|
||||
Discard
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</PerfectScrollbar>
|
||||
</Drawer>
|
||||
)
|
||||
}
|
||||
|
||||
export default AddRecipeDrawer
|
||||
@ -2,319 +2,333 @@
|
||||
|
||||
import {
|
||||
Avatar,
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
CardContent,
|
||||
CardMedia,
|
||||
CardHeader,
|
||||
Chip,
|
||||
Divider,
|
||||
Grid,
|
||||
List,
|
||||
ListItem,
|
||||
ListItemIcon,
|
||||
ListItemText,
|
||||
Paper,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
Typography
|
||||
} from '@mui/material'
|
||||
import { useParams } from 'next/navigation'
|
||||
import React, { useEffect } from 'react'
|
||||
import { useState } from 'react'
|
||||
import { useDispatch } from 'react-redux'
|
||||
import Loading from '../../../../../components/layout/shared/Loading'
|
||||
import { setProduct } from '../../../../../redux-store/slices/product'
|
||||
import { setProductRecipe } from '../../../../../redux-store/slices/productRecipe'
|
||||
import { useProductRecipesByProduct } from '../../../../../services/queries/productRecipes'
|
||||
import { useProductById } from '../../../../../services/queries/products'
|
||||
import { ProductVariant } from '../../../../../types/services/product'
|
||||
import { formatCurrency, formatDate } from '../../../../../utils/transform'
|
||||
// Tabler icons (using class names)
|
||||
const TablerIcon = ({ name, className = '' }: { name: string; className?: string }) => (
|
||||
<i className={`tabler-${name} ${className}`} />
|
||||
)
|
||||
import { formatCurrency } from '../../../../../utils/transform'
|
||||
import AddRecipeDrawer from './AddRecipeDrawer'
|
||||
|
||||
const ProductDetail = () => {
|
||||
const dispatch = useDispatch()
|
||||
const params = useParams()
|
||||
|
||||
const [openProductRecipe, setOpenProductRecipe] = useState(false)
|
||||
|
||||
const { data: product, isLoading, error } = useProductById(params?.id as string)
|
||||
const { data: productRecipe, isLoading: isLoadingProductRecipe } = useProductRecipesByProduct(params?.id as string)
|
||||
|
||||
useEffect(() => {
|
||||
if (product) {
|
||||
dispatch(setProduct(product))
|
||||
const groupedByVariant = productRecipe?.reduce((acc: any, item: any) => {
|
||||
const variantId = item.variant_id
|
||||
if (!acc[variantId]) {
|
||||
acc[variantId] = {
|
||||
variant: item.product_variant,
|
||||
product: item.product,
|
||||
ingredients: []
|
||||
}
|
||||
}, [product, dispatch])
|
||||
}
|
||||
acc[variantId].ingredients.push(item)
|
||||
return acc
|
||||
}, {})
|
||||
|
||||
const getBusinessTypeColor = (type: string) => {
|
||||
switch (type.toLowerCase()) {
|
||||
case 'restaurant':
|
||||
return 'primary'
|
||||
case 'retail':
|
||||
return 'secondary'
|
||||
case 'cafe':
|
||||
return 'info'
|
||||
default:
|
||||
return 'default'
|
||||
}
|
||||
const handleOpenProductRecipe = (recipe: any) => {
|
||||
setOpenProductRecipe(true)
|
||||
dispatch(setProductRecipe(recipe))
|
||||
}
|
||||
|
||||
const getPrinterTypeColor = (type: string) => {
|
||||
switch (type.toLowerCase()) {
|
||||
case 'kitchen':
|
||||
return 'warning'
|
||||
case 'bar':
|
||||
return 'info'
|
||||
case 'receipt':
|
||||
return 'success'
|
||||
default:
|
||||
return 'default'
|
||||
}
|
||||
}
|
||||
|
||||
const getPlainText = (html: string) => {
|
||||
const doc = new DOMParser().parseFromString(html, 'text/html')
|
||||
return doc.body.textContent || ''
|
||||
}
|
||||
|
||||
if (isLoading) return <Loading />
|
||||
if (isLoading || isLoadingProductRecipe) return <Loading />
|
||||
|
||||
return (
|
||||
<div className='max-w-6xl mx-auto p-4 space-y-6'>
|
||||
<>
|
||||
<div className='space-y-6'>
|
||||
{/* Header Card */}
|
||||
<Card className='shadow-lg'>
|
||||
<Grid container>
|
||||
<Grid item xs={12} md={4}>
|
||||
<CardMedia
|
||||
component='img'
|
||||
sx={{ height: 300, objectFit: 'cover' }}
|
||||
image={product.image_url || '/placeholder-image.jpg'}
|
||||
alt={product.name}
|
||||
className='rounded-l-lg'
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={8}>
|
||||
<CardContent className='h-full flex flex-col justify-between'>
|
||||
<div>
|
||||
<div className='flex items-start justify-between mb-3'>
|
||||
<div>
|
||||
<Typography variant='h4' component='h1' className='font-bold text-gray-800 mb-2'>
|
||||
{product.name}
|
||||
<Card>
|
||||
<CardHeader
|
||||
avatar={<Avatar src={product?.image_url || ''} alt={product?.name} className='w-16 h-16' />}
|
||||
title={
|
||||
<div className='flex items-center gap-3'>
|
||||
<Typography variant='h4' component='h1' className='font-bold'>
|
||||
{product?.name}
|
||||
</Typography>
|
||||
<div className='flex items-center gap-2 mb-3'>
|
||||
<Chip
|
||||
icon={<TablerIcon name='barcode' className='text-sm' />}
|
||||
label={product.sku}
|
||||
label={product?.is_active ? 'Active' : 'Inactive'}
|
||||
color={product?.is_active ? 'success' : 'error'}
|
||||
size='small'
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
subheader={
|
||||
<div className='flex flex-col gap-1 mt-2'>
|
||||
<Typography variant='body2' color='textSecondary'>
|
||||
SKU: {product?.sku} • Category: {product?.business_type}
|
||||
</Typography>
|
||||
<div className='flex gap-4'>
|
||||
<Typography variant='body2'>
|
||||
<span className='font-semibold'>Price:</span> {formatCurrency(product?.price || 0)}
|
||||
</Typography>
|
||||
<Typography variant='body2'>
|
||||
<span className='font-semibold'>Base Cost:</span> {formatCurrency(product?.cost || 0)}
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
{productRecipe && (
|
||||
<div className='space-y-6'>
|
||||
{/* Recipe Details by Variant */}
|
||||
<div className='space-y-4'>
|
||||
<div className='flex items-center gap-2 mb-4'>
|
||||
<i className='tabler-chef-hat text-textPrimary text-xl' />
|
||||
<Typography variant='h5' component='h2' className='font-semibold'>
|
||||
Recipe Details
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
{Object.keys(groupedByVariant).length > 0 ? (
|
||||
Object.entries(groupedByVariant).map(([variantId, variantData]: any) => (
|
||||
<Card key={variantId} className=''>
|
||||
<CardHeader
|
||||
title={
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='flex items-center gap-3'>
|
||||
<i className='tabler-variant text-blue-600 text-lg' />
|
||||
<Typography variant='h6' className='font-semibold'>
|
||||
{variantData?.variant?.Name || 'Original'} Variant
|
||||
</Typography>
|
||||
</div>
|
||||
<div className='flex gap-4 text-sm'>
|
||||
<Chip
|
||||
label={`Cost: ${formatCurrency(variantData?.variant?.Cost || variantData.product?.Cost)}`}
|
||||
variant='outlined'
|
||||
color='primary'
|
||||
/>
|
||||
<Chip
|
||||
label={`Price Modifier: ${formatCurrency(variantData?.variant?.PriceModifier || 0)}`}
|
||||
variant='outlined'
|
||||
color='secondary'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<CardContent>
|
||||
<TableContainer component={Paper} variant='outlined'>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow className='bg-gray-50'>
|
||||
<TableCell className='font-semibold'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<i className='tabler-ingredients text-green-600' />
|
||||
Ingredient
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className='font-semibold text-center'>
|
||||
<div className='flex items-center justify-center gap-2'>
|
||||
<i className='tabler-scale text-orange-600' />
|
||||
Quantity
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className='font-semibold text-center'>
|
||||
<div className='flex items-center justify-center gap-2'>
|
||||
<i className='tabler-currency-dollar text-purple-600' />
|
||||
Unit Cost
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className='font-semibold text-center'>
|
||||
<div className='flex items-center justify-center gap-2'>
|
||||
<i className='tabler-package text-blue-600' />
|
||||
Stock Available
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className='font-semibold text-right'>
|
||||
<div className='flex items-center justify-end gap-2'>
|
||||
<i className='tabler-calculator text-red-600' />
|
||||
Total Cost
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{variantData.ingredients.map((item: any) => (
|
||||
<TableRow key={item.id} className='hover:bg-gray-50'>
|
||||
<TableCell>
|
||||
<div className='flex items-center gap-3'>
|
||||
<div className='w-2 h-2 rounded-full bg-green-500' />
|
||||
<div>
|
||||
<Typography variant='body2' className='font-medium capitalize'>
|
||||
{item.ingredient.name}
|
||||
</Typography>
|
||||
<Typography variant='caption' color='textSecondary'>
|
||||
{item.ingredient.is_semi_finished ? 'Semi-finished' : 'Raw ingredient'}
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className='text-center'>
|
||||
<Chip label={item.quantity} size='small' variant='outlined' color='primary' />
|
||||
</TableCell>
|
||||
<TableCell className='text-center'>{formatCurrency(item.ingredient.cost)}</TableCell>
|
||||
<TableCell className='text-center'>
|
||||
<Chip
|
||||
label={item.ingredient.stock}
|
||||
size='small'
|
||||
color={item.ingredient.stock > 5 ? 'success' : 'warning'}
|
||||
variant='outlined'
|
||||
/>
|
||||
<Chip
|
||||
icon={<TablerIcon name={product.is_active ? 'check-circle' : 'x-circle'} className='text-sm' />}
|
||||
label={product.is_active ? 'Active' : 'Inactive'}
|
||||
color={product.is_active ? 'success' : 'error'}
|
||||
size='small'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className='text-right font-medium'>
|
||||
{formatCurrency(item.ingredient.cost * item.quantity)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
|
||||
{product.description && (
|
||||
<Typography variant='body1' className='text-gray-600 mb-4'>
|
||||
{getPlainText(product.description)}
|
||||
{/* Variant Summary */}
|
||||
<Box className='mt-4 p-4 bg-blue-50 rounded-lg'>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Typography variant='body2' className='flex items-center gap-2'>
|
||||
<i className='tabler-list-numbers text-blue-600' />
|
||||
<span className='font-semibold'>Total Ingredients:</span>
|
||||
{variantData.ingredients.length}
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Typography variant='body2' className='flex items-center gap-2'>
|
||||
<i className='tabler-sum text-green-600' />
|
||||
<span className='font-semibold'>Total Recipe Cost:</span>
|
||||
{formatCurrency(
|
||||
variantData.ingredients.reduce(
|
||||
(sum: any, item: any) => sum + item.ingredient.cost * item.quantity,
|
||||
0
|
||||
)
|
||||
)}
|
||||
|
||||
<div className='grid grid-cols-2 gap-4 mb-4'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<TablerIcon name='currency-dollar' className='text-green-600 text-xl' />
|
||||
<div>
|
||||
<Typography variant='body2' className='text-gray-500'>
|
||||
Price
|
||||
</Typography>
|
||||
<Typography variant='h6' className='font-semibold text-green-600'>
|
||||
{formatCurrency(product.price)}
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex items-center gap-2'>
|
||||
<TablerIcon name='receipt' className='text-orange-600 text-xl' />
|
||||
<div>
|
||||
<Typography variant='body2' className='text-gray-500'>
|
||||
Cost
|
||||
</Typography>
|
||||
<Typography variant='h6' className='font-semibold text-orange-600'>
|
||||
{formatCurrency(product.cost)}
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex gap-2'>
|
||||
<Chip
|
||||
icon={<TablerIcon name='building-store' className='text-sm' />}
|
||||
label={product.business_type}
|
||||
color={getBusinessTypeColor(product.business_type)}
|
||||
size='small'
|
||||
/>
|
||||
<Chip
|
||||
icon={<TablerIcon name='printer' className='text-sm' />}
|
||||
label={product.printer_type}
|
||||
color={getPrinterTypeColor(product.printer_type)}
|
||||
size='small'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Card>
|
||||
</Box>
|
||||
|
||||
<Grid container spacing={3}>
|
||||
{/* Product Information */}
|
||||
<Grid item xs={12} md={8}>
|
||||
<Card className='shadow-md'>
|
||||
<CardContent>
|
||||
<Typography variant='h6' className='font-semibold mb-4 flex items-center gap-2'>
|
||||
<TablerIcon name='info-circle' className='text-blue-600 text-xl' />
|
||||
Product Information
|
||||
</Typography>
|
||||
<div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
|
||||
<div>
|
||||
<Typography variant='body2' className='text-gray-500 mb-1'>
|
||||
Product ID
|
||||
</Typography>
|
||||
<Typography variant='body1' className='font-mono text-sm bg-gray-100 p-2 rounded'>
|
||||
{product.id}
|
||||
</Typography>
|
||||
</div>
|
||||
<div>
|
||||
<Typography variant='body2' className='text-gray-500 mb-1'>
|
||||
Category ID
|
||||
</Typography>
|
||||
<Typography variant='body1' className='font-mono text-sm bg-gray-100 p-2 rounded'>
|
||||
{product.category_id}
|
||||
</Typography>
|
||||
</div>
|
||||
<div>
|
||||
<Typography variant='body2' className='text-gray-500 mb-1'>
|
||||
Organization ID
|
||||
</Typography>
|
||||
<Typography variant='body1' className='font-mono text-sm bg-gray-100 p-2 rounded'>
|
||||
{product.organization_id}
|
||||
</Typography>
|
||||
</div>
|
||||
<div>
|
||||
<Typography variant='body2' className='text-gray-500 mb-1'>
|
||||
Profit Margin
|
||||
</Typography>
|
||||
<Typography variant='body1' className='font-semibold text-green-600'>
|
||||
{formatCurrency(product.price - product.cost)}
|
||||
<span className='text-sm text-gray-500 ml-1'>
|
||||
({(((product.price - product.cost) / product.cost) * 100).toFixed(1)}%)
|
||||
</span>
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant='outlined'
|
||||
fullWidth
|
||||
className='mt-4'
|
||||
startIcon={<i className='tabler-plus' />}
|
||||
onClick={() => handleOpenProductRecipe(variantData)}
|
||||
>
|
||||
Add Ingredient
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Variants Section */}
|
||||
{product.variants && product.variants.length > 0 && (
|
||||
<Card className='shadow-md mt-4'>
|
||||
<CardContent>
|
||||
<Typography variant='h6' className='font-semibold mb-4 flex items-center gap-2'>
|
||||
<TablerIcon name='versions' className='text-purple-600 text-xl' />
|
||||
Product Variants
|
||||
<Badge badgeContent={product.variants.length} color='primary' />
|
||||
</Typography>
|
||||
<List>
|
||||
{product.variants.map((variant: ProductVariant, index: number) => (
|
||||
<React.Fragment key={variant.id}>
|
||||
<ListItem className='px-0'>
|
||||
<ListItemIcon>
|
||||
<Avatar className='bg-purple-100 text-purple-600 w-8 h-8 text-sm'>
|
||||
{variant.name.charAt(0)}
|
||||
</Avatar>
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary={
|
||||
))
|
||||
) : (
|
||||
<Card className=''>
|
||||
<CardHeader
|
||||
title={
|
||||
<div className='flex items-center justify-between'>
|
||||
<Typography variant='subtitle1' className='font-medium'>
|
||||
{variant.name}
|
||||
</Typography>
|
||||
<div className='flex gap-3'>
|
||||
<Typography variant='body2' className='text-green-600 font-semibold'>
|
||||
+{formatCurrency(variant.price_modifier)}
|
||||
</Typography>
|
||||
<Typography variant='body2' className='text-orange-600'>
|
||||
Cost: {formatCurrency(variant.cost)}
|
||||
<div className='flex items-center gap-3'>
|
||||
<i className='tabler-variant text-blue-600 text-lg' />
|
||||
<Typography variant='h6' className='font-semibold'>
|
||||
Original Variant
|
||||
</Typography>
|
||||
</div>
|
||||
<div className='flex gap-4 text-sm'>
|
||||
<Chip
|
||||
label={`Cost: ${formatCurrency(product?.cost || 0)}`}
|
||||
variant='outlined'
|
||||
color='primary'
|
||||
/>
|
||||
<Chip
|
||||
label={`Price Modifier: ${formatCurrency(product?.price || 0)}`}
|
||||
variant='outlined'
|
||||
color='secondary'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
secondary={
|
||||
<Typography variant='caption' className='text-gray-500'>
|
||||
Total Price: {formatCurrency(product.price + variant.price_modifier)}
|
||||
</Typography>
|
||||
}
|
||||
/>
|
||||
</ListItem>
|
||||
{index < product.variants.length - 1 && <Divider />}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</List>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</Grid>
|
||||
|
||||
{/* Metadata & Timestamps */}
|
||||
<Grid item xs={12} md={4}>
|
||||
<Card className='shadow-md'>
|
||||
<CardContent>
|
||||
<Typography variant='h6' className='font-semibold mb-4 flex items-center gap-2'>
|
||||
<TablerIcon name='clock' className='text-indigo-600 text-xl' />
|
||||
Timestamps
|
||||
</Typography>
|
||||
<div className='space-y-3'>
|
||||
<div>
|
||||
<Typography variant='body2' className='text-gray-500 mb-1'>
|
||||
Created
|
||||
</Typography>
|
||||
<Typography variant='body2' className='text-sm'>
|
||||
{formatDate(product.created_at)}
|
||||
</Typography>
|
||||
<TableContainer component={Paper} variant='outlined'>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow className='bg-gray-50'>
|
||||
<TableCell className='font-semibold'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<i className='tabler-ingredients text-green-600' />
|
||||
Ingredient
|
||||
</div>
|
||||
<Divider />
|
||||
<div>
|
||||
<Typography variant='body2' className='text-gray-500 mb-1'>
|
||||
Last Updated
|
||||
</Typography>
|
||||
<Typography variant='body2' className='text-sm'>
|
||||
{formatDate(product.updated_at)}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell className='font-semibold text-center'>
|
||||
<div className='flex items-center justify-center gap-2'>
|
||||
<i className='tabler-scale text-orange-600' />
|
||||
Quantity
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className='font-semibold text-center'>
|
||||
<div className='flex items-center justify-center gap-2'>
|
||||
<i className='tabler-currency-dollar text-purple-600' />
|
||||
Unit Cost
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className='font-semibold text-center'>
|
||||
<div className='flex items-center justify-center gap-2'>
|
||||
<i className='tabler-package text-blue-600' />
|
||||
Stock Available
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className='font-semibold text-right'>
|
||||
<div className='flex items-center justify-end gap-2'>
|
||||
<i className='tabler-calculator text-red-600' />
|
||||
Total Cost
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody></TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
|
||||
{Object.keys(product.metadata).length > 0 && (
|
||||
<>
|
||||
<Divider className='my-4' />
|
||||
<Typography variant='h6' className='font-semibold mb-3'>
|
||||
Metadata
|
||||
</Typography>
|
||||
<div className='space-y-2'>
|
||||
{Object.entries(product.metadata).map(([key, value]) => (
|
||||
<div key={key}>
|
||||
<Typography variant='body2' className='text-gray-500 mb-1 capitalize'>
|
||||
{key.replace(/_/g, ' ')}
|
||||
</Typography>
|
||||
<Typography variant='body2' className='text-sm bg-gray-50 p-2 rounded'>
|
||||
{typeof value === 'object' ? JSON.stringify(value, null, 2) : String(value)}
|
||||
</Typography>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<Button
|
||||
variant='outlined'
|
||||
fullWidth
|
||||
className='mt-4'
|
||||
startIcon={<i className='tabler-plus' />}
|
||||
onClick={() => handleOpenProductRecipe({ variant: undefined })}
|
||||
>
|
||||
Add Ingredient
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<AddRecipeDrawer open={openProductRecipe} handleClose={() => setOpenProductRecipe(false)} product={product!} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -9,7 +9,6 @@ import dynamic from 'next/dynamic'
|
||||
|
||||
// MUI Imports
|
||||
import TabContext from '@mui/lab/TabContext'
|
||||
import TabList from '@mui/lab/TabList'
|
||||
import TabPanel from '@mui/lab/TabPanel'
|
||||
import Card from '@mui/material/Card'
|
||||
import CardContent from '@mui/material/CardContent'
|
||||
@ -26,7 +25,6 @@ import classnames from 'classnames'
|
||||
// Components Imports
|
||||
import CustomAvatar from '@core/components/mui/Avatar'
|
||||
import OptionMenu from '@core/components/option-menu'
|
||||
import Loading from '../../../components/layout/shared/Loading'
|
||||
import { formatShortCurrency } from '../../../utils/transform'
|
||||
|
||||
// Styled Component Imports
|
||||
@ -207,38 +205,12 @@ const MultipleSeries = ({ data }: { data: TabType[] }) => {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader
|
||||
title='Profit Reports'
|
||||
subheader='Yearly Earnings Overview'
|
||||
title='Earnings Report'
|
||||
subheader='Monthly Earning Overview'
|
||||
action={<OptionMenu options={['Last Week', 'Last Month', 'Last Year']} />}
|
||||
/>
|
||||
<CardContent>
|
||||
<TabContext value={value}>
|
||||
{data.length > 1 && (
|
||||
<TabList
|
||||
variant='scrollable'
|
||||
scrollButtons='auto'
|
||||
onChange={handleChange}
|
||||
aria-label='earning report tabs'
|
||||
className='!border-0 mbe-10'
|
||||
sx={{
|
||||
'& .MuiTabs-indicator': { display: 'none !important' },
|
||||
'& .MuiTab-root': { padding: '0 !important', border: '0 !important' }
|
||||
}}
|
||||
>
|
||||
{renderTabs(data, value)}
|
||||
<Tab
|
||||
disabled
|
||||
value='add'
|
||||
label={
|
||||
<div className='flex flex-col items-center justify-center is-[110px] bs-[100px] border border-dashed rounded-xl'>
|
||||
<CustomAvatar variant='rounded' size={34}>
|
||||
<i className='tabler-plus text-textSecondary' />
|
||||
</CustomAvatar>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</TabList>
|
||||
)}
|
||||
{renderTabPanels(data, theme, options, colors)}
|
||||
</TabContext>
|
||||
</CardContent>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user