feat/FE/US-34/TASK-52-53-slicing-ui-table-adjust-form-with-api

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<InventoryAdjustment | null>(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 (
+      <div className="w-full flex flex-row justify-center items-center p-4">
+        <span className="loading loading-spinner loading-xl" />
+      </div>
+    );
+  }
+
   return (
-    <section>
+    <section className="w-full p-4 flex flex-row justify-center">
-      <InventoryAdjustmentForm/>
+      <InventoryAdjustmentForm initialValues={finalData} />
     </section>
   );
-}
+};
 
 export default DetailInventoryAdjustment;

src/components/pages/inventory/adjustment/InventoryAdjustmentTable.tsx

@@ -156,11 +156,9 @@ const InventoryAdjustmentTable = () => {
 
         return (
           <div
-           className={`small mx-auto badge badge-soft ${
+            className={`small mx-auto badge badge-soft ${
-             type === 'INCREASE'
+              type === 'INCREASE' ? 'badge-success' : 'badge-error'
-               ? 'badge-success'
+            }`}
-               : 'badge-error'
-           }`}
           >
             {label}
           </div>
@@ -172,33 +170,33 @@ const InventoryAdjustmentTable = () => {
       header: 'Oleh',
       accessorFn: (row) => row.created_user?.name ?? '-',
     },
-    {
+    // {
-      id: 'actions',
+    //   id: 'actions',
-      header: 'Aksi',
+    //   header: 'Aksi',
-      cell: (props) => {
+    //   cell: (props) => {
-        const currentPageSize = props.table.getPaginationRowModel().rows.length;
+    //     const currentPageSize = props.table.getPaginationRowModel().rows.length;
-        const currentPageRows = props.table.getPaginationRowModel().flatRows;
+    //     const currentPageRows = props.table.getPaginationRowModel().flatRows;
-        const currentRowRelativeIndex =
+    //     const currentRowRelativeIndex =
-          currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
+    //       currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
 
-        const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
+    //     const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
 
-        return (
+    //     return (
-          <>
+    //       <>
-            {currentPageSize > 2 && (
+    //         {currentPageSize > 2 && (
-              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+    //           <RowDropdownOptions isLast2Rows={isLast2Rows}>
-                <RowOptionsMenu type='dropdown' props={props} />
+    //             <RowOptionsMenu type='dropdown' props={props} />
-              </RowDropdownOptions>
+    //           </RowDropdownOptions>
-            )}
+    //         )}
-            {currentPageSize <= 2 && (
+    //         {currentPageSize <= 2 && (
-              <RowCollapseOptions>
+    //           <RowCollapseOptions>
-                <RowOptionsMenu type='dropdown' props={props} />
+    //             <RowOptionsMenu type='dropdown' props={props} />
-              </RowCollapseOptions>
+    //           </RowCollapseOptions>
-            )}
+    //         )}
-          </>
+    //       </>
-        );
+    //     );
-      },
+    //   },
-    },
+    // },
   ];
 
   // Handler

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<OptionType[]>([]);
-  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<InventoryAdjustmentFormValues>({
+    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'
         >
           <div className='flex flex-col gap-4'>
+            {/* Text Input Before Quantity */}
+            {type === 'detail' && initialValues && (
+              <>
+                <TextInput
+                  label='Stok Sebelum'
+                  name='before_quantity'
+                  type='text'
+                  value={formatNumber(String(initialValues.before_quantity))}
+                  readOnly={true}
+                />
+                <TextInput
+                  label='Stok Setelah'
+                  name='after_quantity'
+                  type='text'
+                  readOnly={true}
+                  value={formatNumber(String(initialValues.after_quantity))}
+                />
+              </>
+            )}
+
             {/* Select Input Product Category */}
             <SelectInput
               required
@@ -333,6 +411,7 @@ const InventoryAdjustmentForm = ({
               variant='radio-primary'
               required
               bottomLabel='Pilih salah satu tipe transaksi'
+              disabled={type === 'detail'}
             />
 
             {/* Text Area Input Reason */}