From b3a41fe0e08a69522135ae0763f227e3102694c8 Mon Sep 17 00:00:00 2001 From: efrilm Date: Thu, 11 Sep 2025 16:55:18 +0700 Subject: [PATCH] Ingredient Detail Stock Adjustment Drawer --- .../IngredientDetailStockAdjustmentDrawer.tsx | 454 ++++++++++++++++++ .../products/ingredient/detail/index.tsx | 64 ++- 2 files changed, 511 insertions(+), 7 deletions(-) create mode 100644 src/views/apps/ecommerce/products/ingredient/detail/IngredientDetailStockAdjustmentDrawer.tsx diff --git a/src/views/apps/ecommerce/products/ingredient/detail/IngredientDetailStockAdjustmentDrawer.tsx b/src/views/apps/ecommerce/products/ingredient/detail/IngredientDetailStockAdjustmentDrawer.tsx new file mode 100644 index 0000000..216e1e9 --- /dev/null +++ b/src/views/apps/ecommerce/products/ingredient/detail/IngredientDetailStockAdjustmentDrawer.tsx @@ -0,0 +1,454 @@ +'use client' +// React Imports +import { useEffect, useState } from 'react' + +// MUI Imports +import Button from '@mui/material/Button' +import Drawer from '@mui/material/Drawer' +import IconButton from '@mui/material/IconButton' +import MenuItem from '@mui/material/MenuItem' +import Typography from '@mui/material/Typography' +import Grid from '@mui/material/Grid2' +import Box from '@mui/material/Box' +import Radio from '@mui/material/Radio' +import RadioGroup from '@mui/material/RadioGroup' +import FormControlLabel from '@mui/material/FormControlLabel' +import FormControl from '@mui/material/FormControl' + +// Third-party Imports +import { useForm, Controller } from 'react-hook-form' + +// Component Imports +import CustomTextField from '@core/components/mui/TextField' + +type Props = { + open: boolean + handleClose: () => void + setData?: (data: any) => void +} + +type StockAdjustmentType = { + tipeStok: 'perhitungan' | 'stokMasukKeluar' + gudang: string + tanggal: string + akun: string + nomor: string + referensi: string + tag: string + qtyTercatat: number + satuan: string + qtyAktual: number + selisih: number + hargaRataRata: number +} + +type FormValidateType = StockAdjustmentType + +// Vars +const initialData: StockAdjustmentType = { + tipeStok: 'perhitungan', + gudang: '', + tanggal: '11/09/2025', + akun: '8-80100 Penyesuaian Persediaan', + nomor: 'SA/00007', + referensi: '', + tag: '', + qtyTercatat: 0, + satuan: 'Pcs', + qtyAktual: 0, + selisih: 0, + hargaRataRata: 0 +} + +const IngredientDetailStockAdjustmentDrawer = (props: Props) => { + // Props + const { open, handleClose, setData } = props + + // States + const [formData, setFormData] = useState(initialData) + + // Hooks + const { + control, + reset: resetForm, + handleSubmit, + watch, + setValue, + formState: { errors } + } = useForm({ + defaultValues: initialData + }) + + // Watch values untuk kalkulasi otomatis + const qtyTercatat = watch('qtyTercatat') + const qtyAktual = watch('qtyAktual') + + // Kalkulasi selisih otomatis + useEffect(() => { + const selisih = qtyAktual - qtyTercatat + setValue('selisih', selisih) + }, [qtyTercatat, qtyAktual, setValue]) + + const onSubmit = (data: FormValidateType) => { + console.log('Stock adjustment data:', data) + if (setData) { + setData(data) + } + handleClose() + } + + const handleReset = () => { + handleClose() + resetForm(initialData) + setFormData(initialData) + } + + const formatNumber = (value: number) => { + return new Intl.NumberFormat('id-ID').format(value) + } + + const parseNumber = (value: string) => { + return parseInt(value.replace(/\./g, '')) || 0 + } + + return ( + + {/* Sticky Header */} + +
+ Penyesuaian Stok + + + +
+ + + {/* Scrollable Content */} + +
onSubmit(data))}> +
+ {/* Tipe Penyesuaian Stok */} +
+ + * Tipe penyesuaian stok + + ( + + + } + label={ + + Perhitungan Stok + + + + + } + /> + } + label={ + + Stok Masuk / Keluar + + + + + } + /> + + + )} + /> +
+ + {/* Gudang dan Tanggal */} + + + + * Gudang + + ( + + Pilih gudang + Gudang Utama + Gudang Cabang + Gudang Produksi + + )} + /> + + + + * Tanggal + + ( + + )} + /> + + + + {/* Akun dan Nomor */} + + + + * Akun + + + + + ( + + 8-80100 Penyesuaian Persediaan + 8-80200 Penyesuaian Stok Rusak + 8-80300 Penyesuaian Stok Hilang + + )} + /> + + + + Nomor + + + + + } + /> + + + + {/* Referensi dan Tag */} + + + + Referensi + + + + + } + /> + + + + Tag + + + + + ( + + Pilih Tag + Urgent + Regular + Maintenance + + )} + /> + + + + {/* Stock Details Section */} + + + {/* Qty Tercatat */} + + + Qty Tercatat + + ( + field.onChange(parseInt(e.target.value) || 0)} + /> + )} + /> + + + {/* Satuan */} + + + Satuan + + ( + + Pcs + Kg + Liter + Box + + )} + /> + + + {/* Qty Aktual */} + + + Qty Aktual + + ( + field.onChange(parseInt(e.target.value) || 0)} + /> + )} + /> + + + {/* Selisih */} + + + Selisih + + ( + + )} + /> + + + {/* Harga Rata-rata */} + + + Harga Rata-rata + + ( + field.onChange(parseNumber(e.target.value))} + /> + )} + /> + + + +
+ +
+ + {/* Sticky Footer */} + +
+ + +
+ + + ) +} + +export default IngredientDetailStockAdjustmentDrawer diff --git a/src/views/apps/ecommerce/products/ingredient/detail/index.tsx b/src/views/apps/ecommerce/products/ingredient/detail/index.tsx index 88c1d81..d3b4ccf 100644 --- a/src/views/apps/ecommerce/products/ingredient/detail/index.tsx +++ b/src/views/apps/ecommerce/products/ingredient/detail/index.tsx @@ -1,17 +1,67 @@ +'use client' + +import { useState } from 'react' import Grid from '@mui/material/Grid2' import IngredientDetailInfo from './IngredientDetailInfo' import IngredientDetailUnit from './IngredientDetailUnit' +import IngredientDetailStockAdjustmentDrawer from './IngredientDetailStockAdjustmentDrawer' // Sesuaikan dengan path file Anda +import { Button } from '@mui/material' const IngredientDetail = () => { + // State untuk mengontrol stock adjustment drawer + const [openStockAdjustmentDrawer, setOpenStockAdjustmentDrawer] = useState(false) + + // Function untuk membuka stock adjustment drawer + const handleOpenStockAdjustmentDrawer = () => { + setOpenStockAdjustmentDrawer(true) + } + + // Function untuk menutup stock adjustment drawer + const handleCloseStockAdjustmentDrawer = () => { + setOpenStockAdjustmentDrawer(false) + } + + // Function untuk handle data dari stock adjustment drawer + const handleSetStockAdjustmentData = (data: any) => { + console.log('Stock adjustment data received:', data) + // Anda bisa menambahkan logic untuk mengupdate state atau API call di sini + // Misalnya: update stock data, refresh ingredient data, dll. + } + return ( - - - + <> + + + + + + + + - - - - + + {/* Stock Adjustment Drawer */} + + ) }