refactor(FE-Storyless): enhance MovementForm schema and validation, improve handling of product quantities and delivery costs

This commit is contained in:
rstubryan
2025-11-02 21:33:38 +07:00
parent 901b61a172
commit d793824520
2 changed files with 98 additions and 36 deletions
@@ -1,34 +1,82 @@
import * as Yup from 'yup';
import { Movement } from '@/types/api/inventory/movement';
type MovementFormSchemaType = {
transfer_reason: string;
transfer_date: string;
source_warehouse?: {
value: number;
label: string;
area?: string;
location?: string;
} | null;
source_warehouse_id: number;
destination_warehouse?: {
value: number;
label: string;
area?: string;
location?: string;
} | null;
destination_warehouse_id: number;
products: {
product?: {
value: number;
label: string;
} | null;
product_id: number;
product_qty: number | string;
}[];
deliveries: {
delivery_cost?: number | string;
delivery_cost_per_item?: number | string;
document?: File | string | null;
document_path?: string | null;
driver_name: string;
vehicle_plate: string;
supplier?: {
value: number;
label: string;
} | null;
supplier_id: number;
products: {
product?: {
value: number;
label: string;
} | null;
product_id: number;
product_qty: number | string;
}[];
}[];
};
export type ProductSchema = {
product: {
product?: {
value: number;
label: string;
} | null;
product_id: number;
product_qty: number;
product_qty: number | string;
};
export type DeliverySchema = {
delivery_cost?: number | undefined;
delivery_cost_per_item?: number | undefined;
delivery_cost?: number | string;
delivery_cost_per_item?: number | string;
document?: File | string | null;
document_path?: string | null;
driver_name: string;
vehicle_plate: string;
supplier: {
supplier?: {
value: number;
label: string;
} | null;
supplier_id: number;
products: {
product: {
product?: {
value: number;
label: string;
} | null;
product_id: number;
product_qty: number;
product_qty: number | string;
}[];
};
@@ -102,7 +150,7 @@ const DeliveryObjectSchema: Yup.ObjectSchema<DeliverySchema> = Yup.object({
.required('Produk wajib diisi!'),
});
export const MovementFormSchema = Yup.object({
export const MovementFormSchema: Yup.ObjectSchema<MovementFormSchemaType> = Yup.object({
transfer_reason: Yup.string().required('Alasan transfer wajib diisi!'),
transfer_date: Yup.string().required('Tanggal transfer wajib diisi!'),
source_warehouse: Yup.object({
@@ -173,8 +173,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
}
return {
delivery_cost: d.delivery_cost ?? 0,
delivery_cost_per_item: d.delivery_cost_per_item ?? 0,
delivery_cost: parseInt((d.delivery_cost || '').toString()) || 0,
delivery_cost_per_item:
parseInt((d.delivery_cost_per_item || '').toString()) || 0,
document_index: documentIndex,
document_path: d.document_path,
driver_name: d.driver_name,
@@ -182,7 +183,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
supplier_id: d.supplier_id,
products: d.products.map((p) => ({
product_id: p.product_id,
product_qty: p.product_qty,
product_qty: parseInt(p.product_qty.toString()) || 0,
})),
};
});
@@ -194,7 +195,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
destination_warehouse_id: values.destination_warehouse_id,
products: values.products.map((p) => ({
product_id: p.product_id,
product_qty: p.product_qty,
product_qty: parseInt(p.product_qty.toString()) || 0,
})),
deliveries: deliveriesPayload,
};
@@ -304,7 +305,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
{
product: null,
product_id: 0,
product_qty: 0,
product_qty: '',
},
];
formik.setFieldValue('products', newProducts);
@@ -339,8 +340,8 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
formik.setFieldValue('deliveries', [
...(formik.values.deliveries || []),
{
delivery_cost: undefined,
delivery_cost_per_item: undefined,
delivery_cost: '',
delivery_cost_per_item: '',
document: null,
driver_name: '',
vehicle_plate: '',
@@ -350,7 +351,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
{
product: null,
product_id: 0,
product_qty: 0,
product_qty: '',
},
],
},
@@ -392,7 +393,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
const delivery = formik.values.deliveries?.[idx];
if (delivery) {
const productQty = delivery.products.reduce(
(sum, p) => sum + p.product_qty,
(sum, p) => sum + (parseInt(p.product_qty.toString()) || 0),
0
);
if (productQty > 0 && value > 0) {
@@ -416,7 +417,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
const delivery = formik.values.deliveries?.[idx];
if (delivery) {
const productQty = delivery.products.reduce(
(sum, p) => sum + p.product_qty,
(sum, p) => sum + (parseInt(p.product_qty.toString()) || 0),
0
);
if (productQty > 0 && value > 0) {
@@ -690,36 +691,38 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
useEffect(() => {
formik.values.deliveries?.forEach((delivery, idx) => {
const productQty = delivery.products.reduce(
(sum, p) => sum + p.product_qty,
(sum, p) => sum + (parseInt(p.product_qty.toString()) || 0),
0
);
if (
delivery.delivery_cost &&
delivery.delivery_cost > 0 &&
productQty > 0
) {
const perItem = delivery.delivery_cost / productQty;
if (Math.abs((delivery.delivery_cost_per_item || 0) - perItem) > 0.01) {
const deliveryCost =
parseInt((delivery.delivery_cost || '').toString()) || 0;
const deliveryCostPerItem =
parseInt((delivery.delivery_cost_per_item || '').toString()) || 0;
if (deliveryCost > 0 && productQty > 0) {
const perItem = deliveryCost / productQty;
if (Math.abs(deliveryCostPerItem - perItem) > 0.01) {
formik.setFieldValue(
`deliveries.${idx}.delivery_cost_per_item`,
perItem
);
}
} else if (
delivery.delivery_cost_per_item &&
delivery.delivery_cost_per_item > 0 &&
productQty > 0
) {
const totalCost = delivery.delivery_cost_per_item * productQty;
if (Math.abs((delivery.delivery_cost || 0) - totalCost) > 0.01) {
} else if (deliveryCostPerItem > 0 && productQty > 0) {
const totalCost = deliveryCostPerItem * productQty;
if (Math.abs(deliveryCost - totalCost) > 0.01) {
formik.setFieldValue(`deliveries.${idx}.delivery_cost`, totalCost);
}
}
});
}, [
formik.values.deliveries
?.map((d) => d.products.reduce((sum, p) => sum + p.product_qty, 0))
?.map((d) =>
d.products.reduce(
(sum, p) => sum + (parseInt(p.product_qty.toString()) || 0),
0
)
)
.join(','),
]);
@@ -765,6 +768,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
required
label='Alasan Transfer'
name='transfer_reason'
placeholder='Masukkan alasan transfer...'
value={formik.values.transfer_reason}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
@@ -802,6 +806,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
<SelectInput
required
label='Gudang'
placeholder='Pilih gudang asal...'
value={formik.values.source_warehouse}
onChange={(val) => {
formik.setFieldTouched('source_warehouse', true);
@@ -869,6 +874,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
<SelectInput
required
label='Gudang'
placeholder='Pilih gudang tujuan...'
value={formik.values.destination_warehouse}
onChange={(val) => {
formik.setFieldTouched('destination_warehouse', true);
@@ -1055,8 +1061,8 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
}
placeholder={
!formik.values.source_warehouse_id
? 'Pilih gudang asal terlebih dahulu'
: 'Pilih produk'
? 'Pilih gudang asal terlebih dahulu...'
: 'Pilih produk...'
}
isClearable
{...isRepeaterInputError(
@@ -1074,6 +1080,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
<NumberInput
required
name={`products.${idx}.product_qty`}
placeholder='Masukkan kuantitas...'
value={product.product_qty ?? ''}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
@@ -1294,6 +1301,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
<td>
<SelectInput
required
placeholder='Pilih produk...'
value={delivery.products[0]?.product ?? undefined}
onChange={(val) => {
formik.setFieldTouched(
@@ -1334,6 +1342,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
<NumberInput
required
name={`deliveries.${idx}.products.0.product_qty`}
placeholder='Masukkan kuantitas...'
value={delivery.products[0]?.product_qty ?? ''}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
@@ -1364,6 +1373,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
<td>
<SelectInput
required
placeholder='Pilih supplier...'
value={delivery.supplier}
onChange={(val) => {
formik.setFieldTouched(
@@ -1403,6 +1413,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
<TextInput
required
name={`deliveries.${idx}.vehicle_plate`}
placeholder='Masukkan plat nomor...'
value={delivery.vehicle_plate}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
@@ -1480,6 +1491,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
<NumberInput
required
name={`deliveries.${idx}.delivery_cost`}
placeholder='Masukkan biaya pengiriman...'
value={delivery.delivery_cost || ''}
onChange={handleDeliveryCostChangeWrapper(idx)}
onBlur={formik.handleBlur}
@@ -1504,6 +1516,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
<NumberInput
required
name={`deliveries.${idx}.delivery_cost_per_item`}
placeholder='Masukkan biaya per item...'
value={delivery.delivery_cost_per_item || ''}
onChange={handleDeliveryCostPerItemChangeWrapper(
idx
@@ -1530,6 +1543,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
<TextInput
required
name={`deliveries.${idx}.driver_name`}
placeholder='Masukkan nama sopir...'
value={delivery.driver_name}
onChange={formik.handleChange}
onBlur={formik.handleBlur}