feat: ingredient product
This commit is contained in:
ferdiansyah783
parent
f3dfad4cb3
commit
ea6205cfa7
@ -49,8 +49,6 @@ const AddRecipeDrawer = (props: Props) => {
|
|||||||
|
|
||||||
const { currentProductRecipe } = useSelector((state: RootState) => state.productRecipeReducer)
|
const { currentProductRecipe } = useSelector((state: RootState) => state.productRecipeReducer)
|
||||||
|
|
||||||
console.log('currentProductRecipe', currentProductRecipe)
|
|
||||||
|
|
||||||
const [outletInput, setOutletInput] = useState('')
|
const [outletInput, setOutletInput] = useState('')
|
||||||
const [outletDebouncedInput] = useDebounce(outletInput, 500)
|
const [outletDebouncedInput] = useDebounce(outletInput, 500)
|
||||||
const [ingredientInput, setIngredientInput] = useState('')
|
const [ingredientInput, setIngredientInput] = useState('')
|
||||||
|
|||||||
@ -93,6 +93,142 @@ const ProductDetail = () => {
|
|||||||
</Typography>
|
</Typography>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<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>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<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>
|
||||||
|
{productRecipe?.length &&
|
||||||
|
productRecipe
|
||||||
|
.filter((item: any) => item.variant_id === null)
|
||||||
|
.map((item: any, index: number) => (
|
||||||
|
<TableRow key={index} 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 */}
|
||||||
|
{productRecipe?.length && (
|
||||||
|
<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>
|
||||||
|
{productRecipe.filter((item: any) => item.variant_id === null).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(
|
||||||
|
productRecipe
|
||||||
|
.filter((item: any) => item.variant_id === null)
|
||||||
|
.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({ variant: undefined })}
|
||||||
|
>
|
||||||
|
Add Ingredient
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
{product?.variants?.length &&
|
{product?.variants?.length &&
|
||||||
product.variants.map((variantData: ProductVariant, index: number) => (
|
product.variants.map((variantData: ProductVariant, index: number) => (
|
||||||
<Card key={index}>
|
<Card key={index}>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user