feat: product recipes
This commit is contained in:
ferdiansyah783
@@ -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
|
||||
@@ -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'>
|
||||
{/* 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}
|
||||
</Typography>
|
||||
<div className='flex items-center gap-2 mb-3'>
|
||||
<Chip
|
||||
icon={<TablerIcon name='barcode' className='text-sm' />}
|
||||
label={product.sku}
|
||||
size='small'
|
||||
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>
|
||||
|
||||
{product.description && (
|
||||
<Typography variant='body1' className='text-gray-600 mb-4'>
|
||||
{getPlainText(product.description)}
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</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' />
|
||||
<>
|
||||
<div className='space-y-6'>
|
||||
{/* Header Card */}
|
||||
<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>
|
||||
<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={
|
||||
<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)}
|
||||
</Typography>
|
||||
</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
|
||||
<Chip
|
||||
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' className='text-sm'>
|
||||
{formatDate(product.created_at)}
|
||||
</Typography>
|
||||
</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 variant='body2'>
|
||||
<span className='font-semibold'>Base Cost:</span> {formatCurrency(product?.cost || 0)}
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
{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>
|
||||
{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'
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className='text-right font-medium'>
|
||||
{formatCurrency(item.ingredient.cost * item.quantity)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
|
||||
{/* 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
|
||||
)
|
||||
)}
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
|
||||
<Button
|
||||
variant='outlined'
|
||||
fullWidth
|
||||
className='mt-4'
|
||||
startIcon={<i className='tabler-plus' />}
|
||||
onClick={() => handleOpenProductRecipe(variantData)}
|
||||
>
|
||||
Add Ingredient
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))
|
||||
) : (
|
||||
<Card 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'>
|
||||
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>
|
||||
))}
|
||||
</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></TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
|
||||
<Button
|
||||
variant='outlined'
|
||||
fullWidth
|
||||
className='mt-4'
|
||||
startIcon={<i className='tabler-plus' />}
|
||||
onClick={() => handleOpenProductRecipe({ variant: undefined })}
|
||||
>
|
||||
Add Ingredient
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user