gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-20 13:32:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(FE-62,63,65): refactor MovementForm and related types for improved clarity and consistency

Browse Source
This commit is contained in:
rstubryan
2025-10-15 12:00:17 +07:00
parent cf78687315
commit df73ee1fdf
4 changed files with 335 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/helper/form/FormActions.tsx
+1 -6
View File
@@ -76,12 +76,7 @@ export const FormActions = <T,>({
color='primary'
className='px-4'
isLoading={formik.isSubmitting}
disabled={
disableSubmit ||
!formik.isValid ||
!formik.dirty ||
formik.isSubmitting
}
disabled={disableSubmit || !formik.isValid || formik.isSubmitting}
>
Submit
</Button>
src/components/pages/inventory/movement/form/MovementForm.schema.ts
+80 -84
View File
@@ -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<ProductSchema> = Yup.object({
@@ -36,40 +37,34 @@ const ProductObjectSchema: Yup.ObjectSchema<ProductSchema> = 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<EkspedisiSchema> = 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<string | File>()
.typeError('Qty harus berupa angka!'),
});
const DeliveryObjectSchema: Yup.ObjectSchema<DeliverySchema> = 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<string | File>()
.required('Dokumen wajib diisi!')
.test(
'fileType',
@@ -86,44 +81,44 @@ const EkspedisiObjectSchema: Yup.ObjectSchema<EkspedisiSchema> = 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<typeof MovementFormSchema>;
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,
})),
})) ?? [],
});
src/components/pages/inventory/movement/form/MovementForm.tsx
+218 -250
View File
@@ -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<number[]>([]);
const [selectedEkspedisi, setSelectedEkspedisi] = useState<number[]>([]);
const [selectedDeliveries, setSelectedDeliveries] = useState<number[]>([]);
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,
})),
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,
})),
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,
})),
};
@@ -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 || []),
{
delivery_cost: 0,
delivery_cost_per_item: 0,
document: '',
driver_name: '',
vehicle_plate: '',
supplier: null,
supplier_id: 0,
products: [
{
product: null,
product_id: 0,
qty: 0,
supplier: null,
supplier_id: 0,
plat_nomor: '',
no_surat_jalan: '',
dokumen: '',
biaya_ekspedisi: 0,
biaya_ekspedisi_per_item: 0,
nama_sopir: '',
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 = <T extends 'product' | 'ekspedisi'>(
const isRepeaterInputError = <T extends 'products' | 'deliveries'>(
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;
const validateDeliveryQty = useCallback(
(deliveryIdx: number, deliveryProductIdx: number, qty: number) => {
const delivery = formik.values.deliveries?.[deliveryIdx];
if (!delivery) return true;
const deliveryProduct = delivery.products[deliveryProductIdx];
if (!deliveryProduct) return true;
const productId = deliveryProduct.product_id;
if (!productId) return true;
const relatedProduct = formik.values.product?.find(
const relatedProduct = formik.values.products?.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 invalidQtyRows =
formik.values.ekspedisi?.map((eks, idx) => {
const qty = Number(eks.qty) || 0;
return !validateEkspedisiQty(idx, qty);
}) ?? [];
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) => {
<TextInput
required
label='Alasan Transfer'
name='alasan_transfer'
value={formik.values.alasan_transfer}
name='transfer_reason'
value={formik.values.transfer_reason}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
isError={
formik.touched.alasan_transfer &&
Boolean(formik.errors.alasan_transfer)
formik.touched.transfer_reason &&
Boolean(formik.errors.transfer_reason)
}
errorMessage={formik.errors.alasan_transfer}
errorMessage={formik.errors.transfer_reason}
readOnly={type === 'detail'}
/>
<TextInput
required
label='Tanggal Transfer'
type='date'
name='tanggal_transfer'
value={formik.values.tanggal_transfer}
name='transfer_date'
value={formik.values.transfer_date}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
isError={
formik.touched.tanggal_transfer &&
Boolean(formik.errors.tanggal_transfer)
formik.touched.transfer_date &&
Boolean(formik.errors.transfer_date)
}
errorMessage={formik.errors.tanggal_transfer}
errorMessage={formik.errors.transfer_date}
readOnly={type === 'detail'}
/>
</div>
@@ -370,11 +394,11 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
<SelectInput
required
label='Gudang'
value={formik.values.warehouse_asal ?? undefined}
value={formik.values.source_warehouse}
onChange={(val) => {
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) => {
<div className='space-y-4'>
<TextInput
label='Area'
name='warehouse_asal_area'
name='source_warehouse_area'
value={
(formik.values.warehouse_asal as WarehouseOptionType)
(formik.values.source_warehouse as WarehouseOptionType)
?.area || '-'
}
readOnly
@@ -407,9 +431,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
/>
<TextInput
label='Lokasi'
name='warehouse_asal_location'
name='source_warehouse_location'
value={
(formik.values.warehouse_asal as WarehouseOptionType)
(formik.values.source_warehouse as WarehouseOptionType)
?.location || '-'
}
readOnly
@@ -428,11 +452,11 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
<SelectInput
required
label='Gudang'
value={formik.values.warehouse_tujuan ?? undefined}
value={formik.values.destination_warehouse}
onChange={(val) => {
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) => {
<div className='space-y-4'>
<TextInput
label='Area'
name='warehouse_tujuan_area'
name='destination_warehouse_area'
value={
(formik.values.warehouse_tujuan as WarehouseOptionType)
?.area || '-'
(
formik.values
.destination_warehouse as WarehouseOptionType
)?.area || '-'
}
readOnly
disabled
@@ -465,10 +493,12 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
/>
<TextInput
label='Lokasi'
name='warehouse_tujuan_location'
name='destination_warehouse_location'
value={
(formik.values.warehouse_tujuan as WarehouseOptionType)
?.location || '-'
(
formik.values
.destination_warehouse as WarehouseOptionType
)?.location || '-'
}
readOnly
disabled
@@ -495,15 +525,16 @@ 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) => {
</tr>
</thead>
<tbody>
{formik.values.product?.map((product, idx) => (
{formik.values.products?.map((product, idx) => (
<tr key={`product-row-${idx}-${product.product_id}`}>
{type !== 'detail' && (
<td>
@@ -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
)}
/>
</td>
<td>
<TextInput
required
type='number'
name={`product.${idx}.qty_product`}
value={product.qty_product ?? ''}
name={`products.${idx}.product_qty`}
value={product.product_qty ?? ''}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
{...isRepeaterInputError(
'product',
'qty_product',
'products',
'product_qty',
idx
)}
readOnly={type === 'detail'}
@@ -633,10 +668,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
</div>
</div>
{/* Ekspedisi table */}
{/* Deliveries table */}
<div className='card bg-base-100 shadow mb-4'>
<div className='card-body'>
<h2 className='card-title mb-4'>Ekspedisi</h2>
<h2 className='card-title mb-4'>Pengiriman</h2>
<div className='overflow-x-auto'>
<table className='table'>
<thead>
@@ -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) => {
<th>Qty</th>
<th>Supplier</th>
<th>Plat Nomor</th>
<th>No Surat Jalan</th>
<th>Dokumen</th>
<th>Biaya Ekspedisi (Rp.)</th>
<th>Biaya Ekspedisi / Item (Rp.)</th>
<th>Biaya Pengiriman (Rp.)</th>
<th>Biaya Per Item (Rp.)</th>
<th>Nama Sopir</th>
{type !== 'detail' && <th>Aksi</th>}
</tr>
</thead>
<tbody>
{formik.values.ekspedisi?.map((ekspedisi, idx) => (
<tr
key={`ekspedisi-row-${idx}-${ekspedisi.product_id}-${ekspedisi.supplier_id}`}
>
{formik.values.deliveries?.map((delivery, idx) => (
<tr key={`delivery-row-${idx}`}>
{type !== 'detail' && (
<td>
<input
type='checkbox'
className='checkbox'
checked={selectedEkspedisi.includes(idx)}
checked={selectedDeliveries.includes(idx)}
onChange={(e) => {
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) => {
<td>
<SelectInput
required
value={ekspedisi.product ?? undefined}
value={delivery.products[0]?.product ?? undefined}
onChange={(val) => {
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) => {
<TextInput
required
type='number'
name={`ekspedisi.${idx}.qty`}
value={ekspedisi.qty ?? ''}
name={`deliveries.${idx}.products.0.product_qty`}
value={delivery.products[0]?.product_qty ?? ''}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
{...isRepeaterInputError('ekspedisi', 'qty', idx)}
readOnly={type === 'detail'}
className={{
wrapper: 'w-full min-w-24',
@@ -746,14 +771,14 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
<td>
<SelectInput
required
value={ekspedisi.supplier ?? undefined}
value={delivery.supplier}
onChange={(val) => {
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
)}
/>
</td>
<td>
<TextInput
required
name={`ekspedisi.${idx}.plat_nomor`}
value={ekspedisi.plat_nomor ?? ''}
name={`deliveries.${idx}.vehicle_plate`}
value={delivery.vehicle_plate}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
{...isRepeaterInputError(
'ekspedisi',
'plat_nomor',
'deliveries',
'vehicle_plate',
idx
)}
readOnly={type === 'detail'}
className={{
wrapper: 'w-full min-w-24',
}}
/>
</td>
<td>
<TextInput
required
name={`ekspedisi.${idx}.no_surat_jalan`}
value={ekspedisi.no_surat_jalan ?? ''}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
{...isRepeaterInputError(
'ekspedisi',
'no_surat_jalan',
idx
)}
readOnly={type === 'detail'}
className={{
wrapper: 'w-full min-w-24',
}}
/>
</td>
<td>
<FileInput
required
name={`ekspedisi.${idx}.dokumen`}
name={`deliveries.${idx}.document`}
onChange={(e) => {
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',
}}
/>
</td>
<td>
<TextInput
required
type='number'
name={`ekspedisi.${idx}.biaya_ekspedisi`}
value={ekspedisi.biaya_ekspedisi ?? ''}
name={`deliveries.${idx}.delivery_cost`}
value={delivery.delivery_cost}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
{...isRepeaterInputError(
'ekspedisi',
'biaya_ekspedisi',
'deliveries',
'delivery_cost',
idx
)}
readOnly={type === 'detail'}
className={{
wrapper: 'w-full min-w-24',
}}
/>
</td>
<td>
<TextInput
disabled
onChange={formik.handleChange}
onBlur={formik.handleBlur}
{...isRepeaterInputError(
'ekspedisi',
'biaya_ekspedisi_per_item',
idx
)}
name={`ekspedisi.${idx}.biaya_ekspedisi_per_item`}
name={`deliveries.${idx}.delivery_cost_per_item`}
value={
ekspedisi.qty && ekspedisi.biaya_ekspedisi
? (
ekspedisi.biaya_ekspedisi / ekspedisi.qty
).toLocaleString('id-ID')
: '0'
delivery.delivery_cost_per_item?.toLocaleString(
'id-ID'
) ?? '0'
}
readOnly
className={{
wrapper: 'w-full min-w-24',
input: 'bg-base-200',
}}
/>
@@ -891,19 +863,16 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
<td>
<TextInput
required
name={`ekspedisi.${idx}.nama_sopir`}
value={ekspedisi.nama_sopir ?? ''}
name={`deliveries.${idx}.driver_name`}
value={delivery.driver_name}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
{...isRepeaterInputError(
'ekspedisi',
'nama_sopir',
'deliveries',
'driver_name',
idx
)}
readOnly={type === 'detail'}
className={{
wrapper: 'w-full min-w-24',
}}
/>
</td>
{type !== 'detail' && (
@@ -911,7 +880,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
<Button
type='button'
color='error'
onClick={() => removeEkspedisi(idx)}
onClick={() => removeDelivery(idx)}
>
<Icon
icon='material-symbols:delete-outline-rounded'
@@ -928,12 +897,11 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
</div>
{type !== 'detail' && (
<div className='flex justify-center items-center mt-4 gap-4'>
{selectedEkspedisi.length > 0 && (
{selectedDeliveries.length > 0 && (
<Button
type='button'
color='error'
onClick={bulkRemoveEkspedisi}
disabled={selectedEkspedisi.length === 0}
onClick={bulkRemoveDelivery}
className='w-fit'
>
<Icon
@@ -941,17 +909,17 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
width={24}
height={24}
/>
Hapus Ekspedisi Terpilih ({selectedEkspedisi.length})
Hapus Pengiriman Terpilih ({selectedDeliveries.length})
</Button>
)}
<Button
type='button'
color='success'
onClick={addEkspedisi}
onClick={addDelivery}
className='w-fit'
>
<Icon icon='ic:round-plus' width={24} height={24} />
Tambah Ekspedisi
Tambah Pengiriman
</Button>
</div>
)}
@@ -968,7 +936,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
: undefined
}
onDelete={deleteMovementClickHandler}
disableSubmit={invalidQtyRows.some(Boolean)}
disableSubmit={hasInvalidQty}
/>
{movementFormErrorMessage && (
src/types/api/inventory/movement.d.ts
Vendored
+32 -29
View File
@@ -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;
}[];
}[];
};