From b75b5956eb8de95326735a018bfe24d7a176fcfb Mon Sep 17 00:00:00 2001 From: randy-ar Date: Sat, 11 Oct 2025 13:12:05 +0700 Subject: [PATCH] feat/FE/US-34/TASK-52-53-slicing-ui-table-adjust-form-with-api --- src/app/inventory/adjustment/detail/page.tsx | 47 +++++++++-- .../adjustment/InventoryAdjustmentTable.tsx | 58 +++++++------ .../form/InventoryAdjustmentForm.tsx | 83 ++++++++++++++++++- 3 files changed, 151 insertions(+), 37 deletions(-) diff --git a/src/app/inventory/adjustment/detail/page.tsx b/src/app/inventory/adjustment/detail/page.tsx index 2325c4a0..432fa3fd 100644 --- a/src/app/inventory/adjustment/detail/page.tsx +++ b/src/app/inventory/adjustment/detail/page.tsx @@ -1,11 +1,48 @@ -import InventoryAdjustmentForm from "@/components/pages/inventory/adjustment/form/InventoryAdjustmentForm"; +'use client'; + +import { useEffect, useState } from 'react'; +import { useRouter } from 'next/navigation'; +import useSWR from 'swr'; +import InventoryAdjustmentForm from '@/components/pages/inventory/adjustment/form/InventoryAdjustmentForm'; +import { inventoryAdjustmentApi } from '@/services/api/inventory'; +import type { InventoryAdjustment } from '@/types/api/inventory/adjustment'; const DetailInventoryAdjustment = () => { + const router = useRouter(); + const [inventoryAdjustment, setInventoryAdjustment] = useState(null); + + // Ambil data dari router state + useEffect(() => { + console.log("Router State"); + console.log(window.history.state); + const state = window.history.state?.usr as + | { inventoryAdjustment?: InventoryAdjustment } + | undefined; + + if (state?.inventoryAdjustment) { + // jika object dikirim via router.push(state) + setInventoryAdjustment(state.inventoryAdjustment); + } + }, [router]); + + const finalData = inventoryAdjustment; + + console.log("Final Data"); + console.log(finalData); + + if (!finalData) { + return ( +
+ +
+ ); + } + return ( -
- +
+
); -} +}; -export default DetailInventoryAdjustment; \ No newline at end of file +export default DetailInventoryAdjustment; diff --git a/src/components/pages/inventory/adjustment/InventoryAdjustmentTable.tsx b/src/components/pages/inventory/adjustment/InventoryAdjustmentTable.tsx index 800d03bd..449ae3a7 100644 --- a/src/components/pages/inventory/adjustment/InventoryAdjustmentTable.tsx +++ b/src/components/pages/inventory/adjustment/InventoryAdjustmentTable.tsx @@ -156,11 +156,9 @@ const InventoryAdjustmentTable = () => { return (
{label}
@@ -172,33 +170,33 @@ const InventoryAdjustmentTable = () => { header: 'Oleh', accessorFn: (row) => row.created_user?.name ?? '-', }, - { - id: 'actions', - header: 'Aksi', - cell: (props) => { - const currentPageSize = props.table.getPaginationRowModel().rows.length; - const currentPageRows = props.table.getPaginationRowModel().flatRows; - const currentRowRelativeIndex = - currentPageRows.findIndex((r) => r.id === props.row.id) + 1; + // { + // id: 'actions', + // header: 'Aksi', + // cell: (props) => { + // const currentPageSize = props.table.getPaginationRowModel().rows.length; + // const currentPageRows = props.table.getPaginationRowModel().flatRows; + // const currentRowRelativeIndex = + // currentPageRows.findIndex((r) => r.id === props.row.id) + 1; - const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2; + // const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2; - return ( - <> - {currentPageSize > 2 && ( - - - - )} - {currentPageSize <= 2 && ( - - - - )} - - ); - }, - }, + // return ( + // <> + // {currentPageSize > 2 && ( + // + // + // + // )} + // {currentPageSize <= 2 && ( + // + // + // + // )} + // + // ); + // }, + // }, ]; // Handler diff --git a/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx b/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx index f4d34b74..cbb52d45 100644 --- a/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx +++ b/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx @@ -31,6 +31,37 @@ interface InventoryAdjustmentFormProps { type?: 'add' | 'edit' | 'detail'; initialValues?: InventoryAdjustment; } +// type = 'detail', +// initialValues = { +// id: 1, +// product_warehouse: { +// product: { +// id: 1, +// name: 'Product 1', +// }, +// warehouse: { +// id: 1, +// name: 'Warehouse 1', +// }, +// quantity: 100, +// product_id: 1, +// warehouse_id: 1, +// id: 1, +// }, +// before_quantity: 100, +// after_quantity: 100, +// quantity: 10, +// transaction_type: 'INCREASE', +// note: 'Note', +// created_user: { +// id: 1, +// id_user: 1, +// name: 'User 1', +// email: 'user1@example.com', +// }, +// created_at: '2025-10-10T18:51:40.9383Z', +// updated_at: '2025-10-10T18:51:40.9383Z', +// }, const InventoryAdjustmentForm = ({ type = 'add', initialValues, @@ -45,7 +76,7 @@ const InventoryAdjustmentForm = ({ useState(''); const [disabledProduct, setDisabledProduct] = useState(true); const [optionsProduct, setOptionsProduct] = useState([]); - const [quantityLabel, setQuantityLabel] = useState('Kurangi Stok'); + const [quantityLabel, setQuantityLabel] = useState('Tambah Stok'); const [transactionType, setTransactionType] = useState('increment'); // Submit Handler @@ -93,6 +124,7 @@ const InventoryAdjustmentForm = ({ // Formik const formik = useFormik({ + enableReinitialize: true, initialValues: formikInitialValues, validationSchema: InventoryAdjustmentFormSchema, onSubmit: async (values) => { @@ -191,7 +223,33 @@ const InventoryAdjustmentForm = ({ // Effect useEffect(() => { - formikSetValues(formikInitialValues); + if (initialValues?.product_warehouse?.product?.id) { + setSelectedProductCategories( + String(initialValues.product_warehouse.product.id) + ); + setDisabledProduct(false); + formik.setFieldValue('product_id', initialValues.product_warehouse.product.id); + formik.setFieldValue('product', { + value: initialValues.product_warehouse.product.id, + label: initialValues.product_warehouse.product.name, + }); + formik.setFieldValue('warehouse_id', initialValues.product_warehouse.warehouse.id); + formik.setFieldValue('warehouse', { + value: initialValues.product_warehouse.warehouse.id, + label: initialValues.product_warehouse.warehouse.name, + }); + formik.setFieldValue('quantity', initialValues.product_warehouse.quantity); + formik.setFieldValue('transaction_type', initialValues.transaction_type.toLowerCase()); + formik.setFieldValue('note', initialValues.note); + } + if (initialValues?.transaction_type) { + const type = initialValues.transaction_type.toLowerCase(); + setTransactionType(type); + setQuantityLabel(type === 'increase' ? 'Tambah Stok' : 'Kurangi Stok'); + } + }, []); + useEffect(() => { + // formikSetValues(formikInitialValues); }, [formikSetValues, formikInitialValues]); useEffect(() => { if (isResponseSuccess(products)) { @@ -237,6 +295,26 @@ const InventoryAdjustmentForm = ({ className='w-full mt-8 flex flex-col gap-6' >
+ {/* Text Input Before Quantity */} + {type === 'detail' && initialValues && ( + <> + + + + )} + {/* Select Input Product Category */} {/* Text Area Input Reason */}