From df73ee1fdfc19bdcf935445b5f6d799c108de191 Mon Sep 17 00:00:00 2001 From: rstubryan Date: Wed, 15 Oct 2025 12:00:17 +0700 Subject: [PATCH] feat(FE-62,63,65): refactor MovementForm and related types for improved clarity and consistency --- src/components/helper/form/FormActions.tsx | 7 +- .../movement/form/MovementForm.schema.ts | 164 +++--- .../inventory/movement/form/MovementForm.tsx | 476 ++++++++---------- src/types/api/inventory/movement.d.ts | 61 +-- 4 files changed, 335 insertions(+), 373 deletions(-) diff --git a/src/components/helper/form/FormActions.tsx b/src/components/helper/form/FormActions.tsx index 54600d00..92c2a92c 100644 --- a/src/components/helper/form/FormActions.tsx +++ b/src/components/helper/form/FormActions.tsx @@ -76,12 +76,7 @@ export const FormActions = ({ color='primary' className='px-4' isLoading={formik.isSubmitting} - disabled={ - disableSubmit || - !formik.isValid || - !formik.dirty || - formik.isSubmitting - } + disabled={disableSubmit || !formik.isValid || formik.isSubmitting} > Submit diff --git a/src/components/pages/inventory/movement/form/MovementForm.schema.ts b/src/components/pages/inventory/movement/form/MovementForm.schema.ts index 453ca40b..cb0d228d 100644 --- a/src/components/pages/inventory/movement/form/MovementForm.schema.ts +++ b/src/components/pages/inventory/movement/form/MovementForm.schema.ts @@ -7,27 +7,28 @@ export type ProductSchema = { label: string; } | null; product_id: number; - qty_product: number; + product_qty: number; }; -export type EkspedisiSchema = { - product: { - value: number; - label: string; - } | null; - product_id: number; - qty: number; +export type DeliverySchema = { + delivery_cost: number; + delivery_cost_per_item?: number | undefined; + document: string | File; + driver_name: string; + vehicle_plate: string; supplier: { value: number; label: string; } | null; supplier_id: number; - plat_nomor: string; - no_surat_jalan: string; - dokumen: string | File; - biaya_ekspedisi: number; - biaya_ekspedisi_per_item?: number | undefined; - nama_sopir: string; + products: { + product: { + value: number; + label: string; + } | null; + product_id: number; + product_qty: number; + }[]; }; const ProductObjectSchema: Yup.ObjectSchema = Yup.object({ @@ -36,40 +37,34 @@ const ProductObjectSchema: Yup.ObjectSchema = Yup.object({ label: Yup.string().required(), }).nullable(), product_id: Yup.number().required('Produk wajib diisi!'), - qty_product: Yup.number() + product_qty: Yup.number() .required('Qty wajib diisi!') .min(1, 'Qty minimal 1!') .typeError('Qty harus berupa angka!'), }); -const EkspedisiObjectSchema: Yup.ObjectSchema = Yup.object({ +const DeliveryProductObjectSchema = Yup.object({ product: Yup.object({ value: Yup.number().min(1).required(), label: Yup.string().required(), }).nullable(), product_id: Yup.number().required('Produk wajib diisi!'), - qty: Yup.number() + product_qty: Yup.number() .required('Qty wajib diisi!') .min(1, 'Qty minimal 1!') - .typeError('Qty harus berupa angka!') - .test('max-product-qty', 'Qty melebihi stok produk!', function (value) { - const { product_id } = this.parent; - const products = (this.options.context?.product ?? []) as { - product_id: number; - qty_product: number; - }[]; - const product = products.find((p) => p.product_id === product_id); - if (!product) return true; - return (value ?? 0) <= Number(product.qty_product); - }), - supplier: Yup.object({ - value: Yup.number().min(1).required(), - label: Yup.string().required(), - }).nullable(), - supplier_id: Yup.number().required('Supplier wajib diisi!'), - plat_nomor: Yup.string().required('Plat nomor wajib diisi!'), - no_surat_jalan: Yup.string().required('No surat jalan wajib diisi!'), - dokumen: Yup.mixed() + .typeError('Qty harus berupa angka!'), +}); + +const DeliveryObjectSchema: Yup.ObjectSchema = Yup.object({ + delivery_cost: Yup.number() + .required('Biaya pengiriman wajib diisi!') + .min(0, 'Biaya minimal 0!') + .typeError('Biaya harus berupa angka!'), + delivery_cost_per_item: Yup.number() + .transform((value) => (isNaN(value) ? undefined : value)) + .min(0, 'Biaya per item minimal 0!') + .typeError('Biaya per item harus berupa angka!'), + document: Yup.mixed() .required('Dokumen wajib diisi!') .test( 'fileType', @@ -86,44 +81,44 @@ const EkspedisiObjectSchema: Yup.ObjectSchema = Yup.object({ typeof value === 'string' || (value instanceof File && value.size <= 2 * 1024 * 1024) ), - biaya_ekspedisi: Yup.number() - .required('Biaya ekspedisi wajib diisi!') - .min(0, 'Biaya minimal 0!') - .typeError('Biaya harus berupa angka!'), - biaya_ekspedisi_per_item: Yup.number() - .transform((value) => (isNaN(value) ? undefined : value)) - .min(0, 'Biaya per item minimal 0!') - .typeError('Biaya per item harus berupa angka!') - .optional() - .default(undefined), - nama_sopir: Yup.string().required('Nama sopir wajib diisi!'), + driver_name: Yup.string().required('Nama sopir wajib diisi!'), + vehicle_plate: Yup.string().required('Plat nomor wajib diisi!'), + supplier: Yup.object({ + value: Yup.number().min(1).required(), + label: Yup.string().required(), + }).nullable(), + supplier_id: Yup.number().required('Supplier wajib diisi!'), + products: Yup.array() + .of(DeliveryProductObjectSchema) + .min(1, 'Minimal harus ada 1 produk!') + .required('Produk wajib diisi!'), }); export const MovementFormSchema = Yup.object({ - alasan_transfer: Yup.string().required('Alasan transfer wajib diisi!'), - tanggal_transfer: Yup.string().required('Tanggal transfer wajib diisi!'), - warehouse_asal: Yup.object({ + transfer_reason: Yup.string().required('Alasan transfer wajib diisi!'), + transfer_date: Yup.string().required('Tanggal transfer wajib diisi!'), + source_warehouse: Yup.object({ value: Yup.number().min(1).required(), label: Yup.string().required(), }).nullable(), - warehouse_asal_id: Yup.number() + source_warehouse_id: Yup.number() .required('Gudang asal wajib diisi!') .typeError('Gudang asal wajib diisi!'), - warehouse_tujuan: Yup.object({ + destination_warehouse: Yup.object({ value: Yup.number().min(1).required(), label: Yup.string().required(), }).nullable(), - warehouse_tujuan_id: Yup.number() + destination_warehouse_id: Yup.number() .required('Gudang tujuan wajib diisi!') .typeError('Gudang tujuan wajib diisi!'), - product: Yup.array() + products: Yup.array() .of(ProductObjectSchema) .min(1, 'Minimal harus ada 1 produk!') .required('Produk wajib diisi!'), - ekspedisi: Yup.array() - .of(EkspedisiObjectSchema) - .min(1, 'Minimal harus ada 1 ekspedisi!') - .required('Ekspedisi wajib diisi!'), + deliveries: Yup.array() + .of(DeliveryObjectSchema) + .min(1, 'Minimal harus ada 1 pengiriman!') + .required('Pengiriman wajib diisi!'), }); export const UpdateMovementFormSchema = MovementFormSchema; @@ -133,40 +128,41 @@ export type MovementFormValues = Yup.InferType; export const getMovementFormInitialValues = ( initialValues?: Movement ): MovementFormValues => ({ - alasan_transfer: initialValues?.alasan_transfer ?? '', - tanggal_transfer: initialValues?.tanggal_transfer ?? '', - warehouse_asal: initialValues?.warehouse_asal + transfer_reason: initialValues?.transfer_reason ?? '', + transfer_date: initialValues?.transfer_date ?? '', + source_warehouse: initialValues?.source_warehouse ? { - value: initialValues.warehouse_asal.id, - label: initialValues.warehouse_asal.name, + value: initialValues.source_warehouse.id, + label: initialValues.source_warehouse.name, } : null, - warehouse_asal_id: initialValues?.warehouse_asal?.id ?? 0, - warehouse_tujuan: initialValues?.warehouse_tujuan + source_warehouse_id: initialValues?.source_warehouse?.id ?? 0, + destination_warehouse: initialValues?.destination_warehouse ? { - value: initialValues.warehouse_tujuan.id, - label: initialValues.warehouse_tujuan.name, + value: initialValues.destination_warehouse.id, + label: initialValues.destination_warehouse.name, } : null, - warehouse_tujuan_id: initialValues?.warehouse_tujuan?.id ?? 0, - product: - initialValues?.product?.map((p) => ({ + destination_warehouse_id: initialValues?.destination_warehouse?.id ?? 0, + products: + initialValues?.products?.map((p) => ({ product: { value: p.product.id, label: p.product.name }, product_id: p.product.id, - qty_product: p.qty_product, + product_qty: p.product_qty, })) ?? [], - ekspedisi: - initialValues?.ekspedisi?.map((e) => ({ - product: { value: e.product_id, label: '' }, - product_id: e.product_id, - qty: e.qty, - supplier: { value: e.supplier.id, label: e.supplier.name }, - supplier_id: e.supplier.id, - plat_nomor: e.plat_nomor, - no_surat_jalan: e.no_surat_jalan, - dokumen: e.dokumen, - biaya_ekspedisi: e.biaya_ekspedisi, - biaya_ekspedisi_per_item: e.biaya_ekspedisi, - nama_sopir: e.nama_sopir, + deliveries: + initialValues?.deliveries?.map((d) => ({ + delivery_cost: d.delivery_cost, + delivery_cost_per_item: d.delivery_cost_per_item, + document: d.document, + driver_name: d.driver_name, + vehicle_plate: d.vehicle_plate, + supplier: { value: d.supplier.id, label: d.supplier.name }, + supplier_id: d.supplier.id, + products: d.products.map((p) => ({ + product: { value: p.product.id, label: p.product.name }, + product_id: p.product.id, + product_qty: p.product_qty, + })), })) ?? [], }); diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx index dd927665..183fe760 100644 --- a/src/components/pages/inventory/movement/form/MovementForm.tsx +++ b/src/components/pages/inventory/movement/form/MovementForm.tsx @@ -22,7 +22,7 @@ import { UpdateMovementFormSchema, getMovementFormInitialValues, ProductSchema, - EkspedisiSchema, + DeliverySchema, } from '@/components/pages/inventory/movement/form/MovementForm.schema'; import { useMovementFormHandlers } from './useMovementFormHandlers'; import { @@ -41,7 +41,7 @@ interface MovementFormProps { const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => { const [, setMovementFormErrorMessage] = useState(''); const [selectedProducts, setSelectedProducts] = useState([]); - const [selectedEkspedisi, setSelectedEkspedisi] = useState([]); + const [selectedDeliveries, setSelectedDeliveries] = useState([]); const { deleteModal, @@ -64,31 +64,30 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => { type === 'edit' ? UpdateMovementFormSchema : MovementFormSchema, validateOnChange: true, validateOnBlur: true, - validateOnMount: true, + validateOnMount: false, + enableReinitialize: true, onSubmit: async (values) => { setMovementFormErrorMessage(''); const payload: CreateMovementPayload = { - alasan_transfer: values.alasan_transfer, - tanggal_transfer: values.tanggal_transfer, - warehouse_asal_id: values.warehouse_asal_id, - warehouse_tujuan_id: values.warehouse_tujuan_id, - product: (values.product ?? []).map((p) => ({ + transfer_reason: values.transfer_reason, + transfer_date: values.transfer_date, + source_warehouse_id: values.source_warehouse_id, + destination_warehouse_id: values.destination_warehouse_id, + products: values.products.map((p) => ({ product_id: p.product_id, - qty_product: p.qty_product, + product_qty: p.product_qty, })), - ekspedisi: (values.ekspedisi ?? []).map((e) => ({ - product_id: e.product_id, - qty: e.qty, - supplier_id: e.supplier_id, - plat_nomor: e.plat_nomor, - no_surat_jalan: e.no_surat_jalan, - dokumen: - e.dokumen instanceof File ? e.dokumen : (e.dokumen as string), - biaya_ekspedisi: e.biaya_ekspedisi, - biaya_ekspedisi_per_item: e.qty - ? e.biaya_ekspedisi / e.qty - : e.biaya_ekspedisi, - nama_sopir: e.nama_sopir, + deliveries: values.deliveries.map((d) => ({ + delivery_cost: d.delivery_cost, + delivery_cost_per_item: d.delivery_cost_per_item ?? 0, + document: d.document instanceof File ? d.document : d.document, + driver_name: d.driver_name, + vehicle_plate: d.vehicle_plate, + supplier_id: d.supplier_id, + products: d.products.map((p) => ({ + product_id: p.product_id, + product_qty: p.product_qty, + })), })), }; @@ -105,65 +104,67 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => { const addProduct = () => { const newProducts = [ - ...(formik.values.product || []), + ...(formik.values.products || []), { product: null, product_id: 0, - qty_product: 0, + product_qty: 0, }, ]; - formik.setFieldValue('product', newProducts); + formik.setFieldValue('products', newProducts); }; const removeProduct = useCallback( (i: number) => { const updatedProducts = - formik.values.product?.reduce((acc: ProductSchema[], item, index) => { + formik.values.products?.reduce((acc: ProductSchema[], item, index) => { if (index !== i) { acc.push(item); } return acc; }, []) ?? []; - formik.setFieldValue('product', updatedProducts); + formik.setFieldValue('products', updatedProducts); }, [formik] ); const bulkRemoveProduct = useCallback(() => { const updatedProducts = - formik.values.product?.filter( + formik.values.products?.filter( (_, idx) => !selectedProducts.includes(idx) ) ?? []; - formik.setFieldValue('product', updatedProducts); + formik.setFieldValue('products', updatedProducts); setSelectedProducts([]); }, [formik, selectedProducts]); - const addEkspedisi = () => { - const newEkspedisi = [ - ...(formik.values.ekspedisi || []), + const addDelivery = () => { + formik.setFieldValue('deliveries', [ + ...(formik.values.deliveries || []), { - product: null, - product_id: 0, - qty: 0, + delivery_cost: 0, + delivery_cost_per_item: 0, + document: '', + driver_name: '', + vehicle_plate: '', supplier: null, supplier_id: 0, - plat_nomor: '', - no_surat_jalan: '', - dokumen: '', - biaya_ekspedisi: 0, - biaya_ekspedisi_per_item: 0, - nama_sopir: '', + products: [ + { + product: null, + product_id: 0, + product_qty: 0, + }, + ], }, - ]; - formik.setFieldValue('ekspedisi', newEkspedisi); + ]); }; - const removeEkspedisi = useCallback( + const removeDelivery = useCallback( (i: number) => { - const updatedEkspedisi = - formik.values.ekspedisi?.reduce( - (acc: EkspedisiSchema[], item, index) => { + const updatedDeliveries = + formik.values.deliveries?.reduce( + (acc: DeliverySchema[], item, index) => { if (index !== i) { acc.push(item); } @@ -172,23 +173,23 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => { [] ) ?? []; - formik.setFieldValue('ekspedisi', updatedEkspedisi); + formik.setFieldValue('deliveries', updatedDeliveries); }, [formik] ); - const bulkRemoveEkspedisi = useCallback(() => { - const updatedEkspedisi = - formik.values.ekspedisi?.filter( - (_, idx) => !selectedEkspedisi.includes(idx) + const bulkRemoveDelivery = useCallback(() => { + const updatedDeliveries = + formik.values.deliveries?.filter( + (_, idx) => !selectedDeliveries.includes(idx) ) ?? []; - formik.setFieldValue('ekspedisi', updatedEkspedisi); - setSelectedEkspedisi([]); - }, [formik, selectedEkspedisi]); + formik.setFieldValue('deliveries', updatedDeliveries); + setSelectedDeliveries([]); + }, [formik, selectedDeliveries]); - const isRepeaterInputError = ( + const isRepeaterInputError = ( arrayName: T, - column: T extends 'product' ? keyof ProductSchema : keyof EkspedisiSchema, + column: T extends 'products' ? keyof ProductSchema : keyof DeliverySchema, idx: number ) => { if ( @@ -260,57 +261,80 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => { ? suppliers?.data.map((s) => ({ value: s.id, label: s.name })) : []; - const { setValues: formikSetValues } = formik; - useEffect(() => { - formikSetValues(formikInitialValues); - }, [formikSetValues, formikInitialValues]); - - useEffect(() => { - formik.values.ekspedisi?.forEach((eks, idx) => { - if (eks.qty && eks.biaya_ekspedisi) { - const perItem = eks.biaya_ekspedisi / eks.qty; + formik.values.deliveries?.forEach((delivery, idx) => { + const productQty = delivery.products.reduce( + (sum, p) => sum + p.product_qty, + 0 + ); + if (productQty && delivery.delivery_cost) { + const perItem = delivery.delivery_cost / productQty; formik.setFieldValue( - `ekspedisi.${idx}.biaya_ekspedisi_per_item`, + `deliveries.${idx}.delivery_cost_per_item`, perItem ); } }); - }, [formik.values.ekspedisi]); + }, [formik.values.deliveries]); const getFilteredProductOptions = useCallback(() => { return ( - formik.values.product + formik.values.products ?.filter((p) => p.product) .map((p) => ({ value: p.product_id, label: (p.product as OptionType)?.label, })) ?? [] ); - }, [formik.values.product]); + }, [formik.values.products]); - const validateEkspedisiQty = (ekspedisiIdx: number, qty: number) => { - const productId = formik.values.ekspedisi?.[ekspedisiIdx]?.product_id; - if (!productId) return true; - const relatedProduct = formik.values.product?.find( - (p) => p.product_id === productId - ); - if (!relatedProduct) return true; - const totalQtyUsed = - formik.values.ekspedisi?.reduce((total, eks, i) => { - if (eks.product_id === productId && i !== ekspedisiIdx) { - return total + (Number(eks.qty) || 0); - } - return total; - }, 0) || 0; - return totalQtyUsed + qty <= Number(relatedProduct.qty_product); - }; + const validateDeliveryQty = useCallback( + (deliveryIdx: number, deliveryProductIdx: number, qty: number) => { + const delivery = formik.values.deliveries?.[deliveryIdx]; + if (!delivery) return true; - const invalidQtyRows = - formik.values.ekspedisi?.map((eks, idx) => { - const qty = Number(eks.qty) || 0; - return !validateEkspedisiQty(idx, qty); - }) ?? []; + const deliveryProduct = delivery.products[deliveryProductIdx]; + if (!deliveryProduct) return true; + + const productId = deliveryProduct.product_id; + if (!productId) return true; + + const relatedProduct = formik.values.products?.find( + (p) => p.product_id === productId + ); + if (!relatedProduct) return true; + + const totalQtyUsed = + formik.values.deliveries?.reduce((total, d) => { + const productQty = d.products.reduce((sum, p, pIdx) => { + if ( + p.product_id === productId && + !(d === delivery && pIdx === deliveryProductIdx) + ) { + return sum + (Number(p.product_qty) || 0); + } + return sum; + }, 0); + return total + productQty; + }, 0) || 0; + + return totalQtyUsed + qty <= Number(relatedProduct.product_qty); + }, + [formik.values.deliveries, formik.values.products] + ); + + const invalidQtyRows = useMemo( + () => + formik.values.deliveries?.flatMap((delivery, deliveryIdx) => + delivery.products.map((product, productIdx) => { + const qty = Number(product.product_qty) || 0; + return !validateDeliveryQty(deliveryIdx, productIdx, qty); + }) + ) ?? [], + [formik.values.deliveries, formik.values.products, validateDeliveryQty] + ); + + const hasInvalidQty = invalidQtyRows.some(Boolean); return ( <> @@ -332,30 +356,30 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => { @@ -370,11 +394,11 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => { { - formik.setFieldValue('warehouse_asal', val); + formik.setFieldValue('source_warehouse', val); formik.setFieldValue( - 'warehouse_asal_id', + 'source_warehouse_id', (val as WarehouseOptionType)?.value ); }} @@ -382,10 +406,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => { onInputChange={setWarehouseSelectInputValue} isLoading={isLoadingWarehouses} isError={ - formik.touched.warehouse_asal_id && - Boolean(formik.errors.warehouse_asal_id) + formik.touched.source_warehouse_id && + Boolean(formik.errors.source_warehouse_id) } - errorMessage={formik.errors.warehouse_asal_id as string} + errorMessage={formik.errors.source_warehouse_id as string} isDisabled={type === 'detail'} isClearable /> @@ -394,9 +418,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
{ /> { { - formik.setFieldValue('warehouse_tujuan', val); + formik.setFieldValue('destination_warehouse', val); formik.setFieldValue( - 'warehouse_tujuan_id', + 'destination_warehouse_id', (val as WarehouseOptionType)?.value ); }} @@ -440,10 +464,12 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => { onInputChange={setWarehouseSelectInputValue} isLoading={isLoadingWarehouses} isError={ - formik.touched.warehouse_tujuan_id && - Boolean(formik.errors.warehouse_tujuan_id) + formik.touched.destination_warehouse_id && + Boolean(formik.errors.destination_warehouse_id) + } + errorMessage={ + formik.errors.destination_warehouse_id as string } - errorMessage={formik.errors.warehouse_tujuan_id as string} isDisabled={type === 'detail'} isClearable /> @@ -452,10 +478,12 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
{ /> { type='checkbox' className='checkbox' checked={ - formik.values.product?.length === + formik.values.products?.length === selectedProducts.length && - formik.values.product?.length > 0 + formik.values.products?.length > 0 } onChange={(e) => { if (e.target.checked) { setSelectedProducts( - formik.values.product?.map((_, idx) => idx) ?? - [] + formik.values.products?.map( + (_, idx) => idx + ) ?? [] ); } else { setSelectedProducts([]); @@ -518,7 +549,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => { - {formik.values.product?.map((product, idx) => ( + {formik.values.products?.map((product, idx) => ( {type !== 'detail' && ( @@ -547,11 +578,11 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => { value={product.product ?? undefined} onChange={(val) => { formik.setFieldValue( - `product.${idx}.product`, + `products.${idx}.product`, val ); formik.setFieldValue( - `product.${idx}.product_id`, + `products.${idx}.product_id`, (val as OptionType)?.value ); }} @@ -560,20 +591,24 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => { isLoading={isLoadingProducts} isDisabled={type === 'detail'} isClearable - {...isRepeaterInputError('product', 'product', idx)} + {...isRepeaterInputError( + 'products', + 'product', + idx + )} /> {
- {/* Ekspedisi table */} + {/* Deliveries table */}
-

Ekspedisi

+

Pengiriman

@@ -647,19 +682,19 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => { type='checkbox' className='checkbox' checked={ - formik.values.ekspedisi?.length === - selectedEkspedisi.length && - formik.values.ekspedisi?.length > 0 + formik.values.deliveries?.length === + selectedDeliveries.length && + formik.values.deliveries?.length > 0 } onChange={(e) => { if (e.target.checked) { - setSelectedEkspedisi( - formik.values.ekspedisi?.map( + setSelectedDeliveries( + formik.values.deliveries?.map( (_, idx) => idx ) ?? [] ); } else { - setSelectedEkspedisi([]); + setSelectedDeliveries([]); } }} /> @@ -669,34 +704,31 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => { - - - + + {type !== 'detail' && } - {formik.values.ekspedisi?.map((ekspedisi, idx) => ( - + {formik.values.deliveries?.map((delivery, idx) => ( + {type !== 'detail' && ( - {type !== 'detail' && ( @@ -911,7 +880,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => { )} )} @@ -968,7 +936,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => { : undefined } onDelete={deleteMovementClickHandler} - disableSubmit={invalidQtyRows.some(Boolean)} + disableSubmit={hasInvalidQty} /> {movementFormErrorMessage && ( diff --git a/src/types/api/inventory/movement.d.ts b/src/types/api/inventory/movement.d.ts index d7f2776a..11da41a5 100644 --- a/src/types/api/inventory/movement.d.ts +++ b/src/types/api/inventory/movement.d.ts @@ -5,47 +5,50 @@ import { Warehouse } from '@/types/api/master-data/warehouse'; export type BaseMovement = { id: number; - alasan_transfer: string; - tanggal_transfer: string; - warehouse_asal: Warehouse; - warehouse_tujuan: Warehouse; - product: { + transfer_reason: string; + transfer_date: string; + source_warehouse: Warehouse; + destination_warehouse: Warehouse; + products: { product: Product; - qty_product: number; + product_qty: number; }[]; - ekspedisi: { - product_id: number; - qty: number; + deliveries: { + delivery_cost: number; + delivery_cost_per_item: number; + document: string; + driver_name: string; + vehicle_plate: string; supplier: Supplier; - plat_nomor: string; - no_surat_jalan: string; - dokumen: string; - biaya_ekspedisi: number; - nama_sopir: string; + products: { + product: Product; + product_qty: number; + }[]; }[]; }; export type Movement = BaseMetadata & BaseMovement; export type CreateMovementPayload = { - alasan_transfer: string; - tanggal_transfer: string; - warehouse_asal_id: number; - warehouse_tujuan_id: number; - product: { + transfer_reason: string; + transfer_date: string; + source_warehouse_id: number; + destination_warehouse_id: number; + products: { product_id: number; - qty_product: number; + product_qty: number; }[]; - ekspedisi: { - product_id: number; - qty: number; + deliveries: { + delivery_cost: number; + delivery_cost_per_item: number; + document: string | File; + driver_name: string; + vehicle_plate: string; supplier_id: number; - plat_nomor: string; - no_surat_jalan: string; - dokumen: string | File; - biaya_ekspedisi: number; - biaya_ekspedisi_per_item?: number; - nama_sopir: string; + products: { + product_id: number; + product_qty: number; + }[]; }[]; };
Qty Supplier Plat NomorNo Surat Jalan DokumenBiaya Ekspedisi (Rp.)Biaya Ekspedisi / Item (Rp.)Biaya Pengiriman (Rp.)Biaya Per Item (Rp.) Nama SopirAksi
{ if (e.target.checked) { - setSelectedEkspedisi([ - ...selectedEkspedisi, + setSelectedDeliveries([ + ...selectedDeliveries, idx, ]); } else { - setSelectedEkspedisi( - selectedEkspedisi.filter((i) => i !== idx) + setSelectedDeliveries( + selectedDeliveries.filter((i) => i !== idx) ); } }} @@ -706,24 +738,18 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => { { formik.setFieldValue( - `ekspedisi.${idx}.product`, + `deliveries.${idx}.products.0.product`, val ); formik.setFieldValue( - `ekspedisi.${idx}.product_id`, + `deliveries.${idx}.products.0.product_id`, (val as OptionType)?.value ); - formik.setFieldValue(`ekspedisi.${idx}.qty`, ''); }} options={getFilteredProductOptions()} - {...isRepeaterInputError( - 'ekspedisi', - 'product', - idx - )} isDisabled={type === 'detail'} isClearable /> @@ -732,11 +758,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => { { { formik.setFieldValue( - `ekspedisi.${idx}.supplier`, + `deliveries.${idx}.supplier`, val ); formik.setFieldValue( - `ekspedisi.${idx}.supplier_id`, + `deliveries.${idx}.supplier_id`, (val as OptionType)?.value ); }} @@ -762,128 +787,75 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => { isLoading={isLoadingSuppliers} isDisabled={type === 'detail'} isClearable - {...isRepeaterInputError( - 'ekspedisi', - 'supplier', - idx - )} /> - - { const file = e.target.files?.[0]; if (file) { - const allowedTypes = [ - 'application/pdf', - 'image/jpeg', - 'image/jpg', - ]; - if (!allowedTypes.includes(file.type)) { - toast.error( - 'Mohon upload file berformat PDF atau JPEG/JPG.' - ); - return; - } if (file.size > 2 * 1024 * 1024) { toast.error('Ukuran dokumen maksimal 2 MB!'); return; } formik.setFieldValue( - `ekspedisi.${idx}.dokumen`, + `deliveries.${idx}.document`, file ); } }} {...isRepeaterInputError( - 'ekspedisi', - 'dokumen', + 'deliveries', + 'document', idx )} readOnly={type === 'detail'} - className={{ - wrapper: 'w-full min-w-24', - }} /> @@ -891,19 +863,16 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {