feat(FE-62,63): enhance warehouse stock information display in MovementForm

This commit is contained in:
rstubryan
2025-10-18 08:40:06 +07:00
parent 0676411dd5
commit c4de085e11
@@ -25,10 +25,7 @@ import {
DeliverySchema, DeliverySchema,
} from '@/components/pages/inventory/movement/form/MovementForm.schema'; } from '@/components/pages/inventory/movement/form/MovementForm.schema';
import { useMovementFormHandlers } from './useMovementFormHandlers'; import { useMovementFormHandlers } from './useMovementFormHandlers';
import { import { SupplierApi, WarehouseApi } from '@/services/api/master-data';
SupplierApi,
WarehouseApi,
} from '@/services/api/master-data';
import { ProductWarehouseApi } from '@/services/api/inventory'; import { ProductWarehouseApi } from '@/services/api/inventory';
import { toast } from 'react-hot-toast'; import { toast } from 'react-hot-toast';
import FileInput from '@/components/input/FileInput'; import FileInput from '@/components/input/FileInput';
@@ -273,6 +270,36 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
quantity: number; quantity: number;
} }
const allProductWarehousesUrl = `${ProductWarehouseApi.basePath}`;
const { data: allProductWarehouses } = useSWR(
allProductWarehousesUrl,
ProductWarehouseApi.getAllFetcher
);
const warehouseStockMap = useMemo(() => {
if (!isResponseSuccess(allProductWarehouses)) return new Map();
const stockMap = new Map<
number,
{ totalQty: number; productCount: number }
>();
allProductWarehouses.data.forEach((pw) => {
const warehouseId = pw.warehouse.id;
const existing = stockMap.get(warehouseId) || {
totalQty: 0,
productCount: 0,
};
stockMap.set(warehouseId, {
totalQty: existing.totalQty + pw.quantity,
productCount: existing.productCount + 1,
});
});
return stockMap;
}, [allProductWarehouses]);
// Warehouse selection // Warehouse selection
const [warehouseSelectInputValue, setWarehouseSelectInputValue] = const [warehouseSelectInputValue, setWarehouseSelectInputValue] =
useState(''); useState('');
@@ -282,15 +309,22 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
WarehouseApi.getAllFetcher WarehouseApi.getAllFetcher
); );
const warehouseOptions = isResponseSuccess(warehouses) const warehouseOptions = isResponseSuccess(warehouses)
? warehouses?.data.map((w) => ({ ? warehouses?.data.map((w) => {
const stockInfo = warehouseStockMap.get(w.id);
const stockLabel = stockInfo
? ` (Stock: ${stockInfo.totalQty.toLocaleString('id-ID')} items, ${stockInfo.productCount} produk)`
: ' (Kosong)';
return {
value: w.id, value: w.id,
label: w.name, label: `${w.name}${stockLabel}`,
area: w.area?.name, area: w.area?.name,
location: location:
'type' in w && (w.type === 'LOKASI' || w.type === 'KANDANG') 'type' in w && (w.type === 'LOKASI' || w.type === 'KANDANG')
? w.location?.name ? w.location?.name
: undefined, : undefined,
})) };
})
: []; : [];
// Product Warehouse selection - Filter by source warehouse // Product Warehouse selection - Filter by source warehouse
@@ -361,7 +395,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
const handleDeliveryCostPerItemChange = useCallback( const handleDeliveryCostPerItemChange = useCallback(
(idx: number, value: string) => { (idx: number, value: string) => {
const numValue = parseFloat(value) || 0; const numValue = parseFloat(value) || 0;
formik.setFieldValue(`deliveries.${idx}.delivery_cost_per_item`, numValue); formik.setFieldValue(
`deliveries.${idx}.delivery_cost_per_item`,
numValue
);
const delivery = formik.values.deliveries?.[idx]; const delivery = formik.values.deliveries?.[idx];
if (delivery) { if (delivery) {
@@ -389,7 +426,11 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
); );
// If delivery_cost is set, recalculate delivery_cost_per_item // If delivery_cost is set, recalculate delivery_cost_per_item
if (delivery.delivery_cost && delivery.delivery_cost > 0 && productQty > 0) { if (
delivery.delivery_cost &&
delivery.delivery_cost > 0 &&
productQty > 0
) {
const perItem = delivery.delivery_cost / productQty; const perItem = delivery.delivery_cost / productQty;
if (Math.abs((delivery.delivery_cost_per_item || 0) - perItem) > 0.01) { if (Math.abs((delivery.delivery_cost_per_item || 0) - perItem) > 0.01) {
formik.setFieldValue( formik.setFieldValue(
@@ -410,7 +451,11 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
} }
} }
}); });
}, [formik.values.deliveries?.map(d => d.products.reduce((sum, p) => sum + p.product_qty, 0)).join(',')]); }, [
formik.values.deliveries
?.map((d) => d.products.reduce((sum, p) => sum + p.product_qty, 0))
.join(','),
]);
useEffect(() => { useEffect(() => {
if ( if (
@@ -1147,7 +1192,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
name={`deliveries.${idx}.delivery_cost_per_item`} name={`deliveries.${idx}.delivery_cost_per_item`}
value={delivery.delivery_cost_per_item || ''} value={delivery.delivery_cost_per_item || ''}
onChange={(e) => onChange={(e) =>
handleDeliveryCostPerItemChange(idx, e.target.value) handleDeliveryCostPerItemChange(
idx,
e.target.value
)
} }
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
{...isRepeaterInputError( {...isRepeaterInputError(