fix(FE-51-54): fixing bug and layout form adjustment

src/app/inventory/adjustment/detail/page.tsx

@@ -2,9 +2,7 @@
 
 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 = () => {

src/app/inventory/adjustment/page.tsx

@@ -1,4 +1,3 @@
-import InventoryAdjustmentForm from '@/components/pages/inventory/adjustment/form/InventoryAdjustmentForm';
 import InventoryAdjustmentTable from '@/components/pages/inventory/adjustment/InventoryAdjustmentTable';
 
 const InventoryAdjustment = () => {

src/components/input/RadioInput.tsx

@@ -14,7 +14,7 @@ export interface RadioInputProps {
   name: string;
   value?: string;
   options: RadioOption[];
-  variant?: string; // contoh: 'radio-primary', 'radio-secondary', dll
+  variant?: string;
   className?: {
     wrapper?: string;
     label?: string;
@@ -41,7 +41,6 @@ const RadioInput = ({
   variant = 'radio-primary',
   className,
   isError,
-  isValid,
   errorMessage,
   required = false,
   disabled = false,

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

@@ -1,11 +1,8 @@
 'use client';
 
 import Button from '@/components/Button';
-import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import Table from '@/components/Table';
-import RowCollapseOptions from '@/components/table/RowCollapseOptions';
-import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { cn } from '@/lib/helper';
@@ -14,45 +11,13 @@ import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { InventoryAdjustment } from '@/types/api/inventory/adjustment';
 import { Icon } from '@iconify/react';
 import {
-  CellContext,
   ColumnDef,
   ColumnSort,
   SortingState,
 } from '@tanstack/react-table';
-import { ChangeEventHandler, useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import useSWR from 'swr';
 
-const RowOptionsMenu = ({
-  type = 'dropdown',
-  props,
-}: {
-  type: 'dropdown' | 'collapse';
-  props: CellContext<InventoryAdjustment, unknown>;
-}) => {
-  return (
-    <div
-      tabIndex={type === 'dropdown' ? 0 : undefined}
-      className={cn(
-        {
-          'dropdown-content': type === 'dropdown',
-          'mt-2': type === 'collapse',
-        },
-        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-      )}
-    >
-      <Button
-        href={`/inventory/adjustment/detail?inventoryAdjustmentId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
-        Detail
-      </Button>
-    </div>
-  );
-};
-
 const InventoryAdjustmentTable = () => {
   const {
     state: tableFilterState,
@@ -82,15 +47,12 @@ const InventoryAdjustmentTable = () => {
   const {
     data: inventoryAdjustments,
     isLoading,
-    mutate: refreshInventoryAdjustments,
   } = useSWR(
     `${inventoryAdjustmentApi.basePath}${getTableFilterQueryString()}`,
     inventoryAdjustmentApi.getAllFetcher
   );
 
   // State
-  const [selectedInventoryAdjustment, setSelectedInventoryAdjustment] =
-    useState<InventoryAdjustment | undefined>(undefined);
   const [sorting, setSorting] = useState<SortingState>([]);
 
   // Columns
@@ -170,40 +132,9 @@ 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;
-
-    //     const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
-
-    //     return (
-    //       <>
-    //         {currentPageSize > 2 && (
-    //           <RowDropdownOptions isLast2Rows={isLast2Rows}>
-    //             <RowOptionsMenu type='dropdown' props={props} />
-    //           </RowDropdownOptions>
-    //         )}
-    //         {currentPageSize <= 2 && (
-    //           <RowCollapseOptions>
-    //             <RowOptionsMenu type='dropdown' props={props} />
-    //           </RowCollapseOptions>
-    //         )}
-    //       </>
-    //     );
-    //   },
-    // },
   ];
 
   // Handler
-  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
-    updateFilter('search', e.target.value);
-  };
-
   const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
     const newVal = val as OptionType;
     setPageSize(newVal.value as number);
@@ -240,7 +171,7 @@ const InventoryAdjustmentTable = () => {
     updateSortingFilter('productSort', productSortFilter);
     updateSortingFilter('warehouseSort', warehouseSortFilter);
     updateSortingFilter('stockSort', stockSortFilter);
-  }, [sorting]);
+  }, [sorting, updateSortingFilter]);
 
   // Utils Function
   const formatNumber = (value: string) => {
@@ -259,7 +190,7 @@ const InventoryAdjustmentTable = () => {
             <div className='flex flex-row'>
               <Button href='/inventory/adjustment/add' color='primary'>
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Stock Adjustment
+                Tambah
               </Button>
 
               {/* <DebouncedTextInput

src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.schema.ts

@@ -4,28 +4,36 @@ export const InventoryAdjustmentFormSchema = Yup.object({
   product_category: Yup.object({
     value: Yup.number().required('ID Kategori Produk wajib diisi!'),
     label: Yup.string().required('Nama Kategori Produk wajib diisi!'),
-  }).nullable(),
+  })
+    .nullable(),
+
   product_category_id: Yup.number().nullable(),
 
   product: Yup.object({
     value: Yup.number().required('ID Produk wajib diisi!'),
     label: Yup.string().required('Nama Produk wajib diisi!'),
-  }).required('Produk wajib diisi!'),
-  product_id: Yup.number().required('ID Produk wajib diisi!'),
+  })
+    .nullable(),
+
+  product_id: Yup.number().nullable(),
 
   warehouse: Yup.object({
     value: Yup.number().required('ID Gudang wajib diisi!'),
     label: Yup.string().required('Nama Gudang wajib diisi!'),
-  }).required('Gudang wajib diisi!'),
-  warehouse_id: Yup.number().required('ID Gudang wajib diisi!'),
-  
+  })
+    .nullable(),
+
+  warehouse_id: Yup.number().nullable(),
+
   transaction_type: Yup.string()
     .oneOf(['increase', 'decrease'], 'Tipe transaksi tidak valid')
     .required('Tipe transaksi wajib diisi'),
+
   quantity: Yup.number()
     .typeError('Kuantitas harus berupa angka')
     .min(1, 'Minimal kuantitas adalah 1')
     .required('Kuantitas wajib diisi'),
+
   note: Yup.string().required('Catatan wajib diisi!'),
 });
 

src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx

@@ -8,7 +8,7 @@ import {
 } from '@/types/api/inventory/adjustment';
 import { useFormik } from 'formik';
 import { useRouter } from 'next/navigation';
-import { use, useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import toast from 'react-hot-toast';
 import {
   InventoryAdjustmentFormSchema,
@@ -31,37 +31,7 @@ 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,
@@ -77,7 +47,6 @@ const InventoryAdjustmentForm = ({
   const [disabledProduct, setDisabledProduct] = useState(true);
   const [optionsProduct, setOptionsProduct] = useState<OptionType[]>([]);
   const [quantityLabel, setQuantityLabel] = useState('Tambah Stok');
-  const [transactionType, setTransactionType] = useState('increment');
 
   // Submit Handler
   const createInventoryAdjustmentHandler = useCallback(
@@ -99,23 +68,14 @@ const InventoryAdjustmentForm = ({
     [router]
   );
 
-  const formikInitialValues = useMemo<InventoryAdjustmentFormValues>(() => {
+  const formikInitialValues = useMemo<Partial<InventoryAdjustmentFormValues>>(() => {
     return {
       product_category_id: initialValues?.product_category?.id ?? 0,
       product_id: initialValues?.product?.id ?? 0,
       warehouse_id: initialValues?.warehouse?.id ?? 0,
-      product_category: {
-        value: initialValues?.product_category?.id ?? 0,
-        label: initialValues?.product_category?.name ?? '',
-      },
-      product: {
-        value: initialValues?.product?.id ?? 0,
-        label: initialValues?.product?.name ?? '',
-      },
-      warehouse: {
-        value: initialValues?.warehouse?.id ?? 0,
-        label: initialValues?.warehouse?.name ?? '',
-      },
+      product_category: undefined,
+      product: undefined,
+      warehouse: undefined,
       quantity: initialValues?.quantity ?? 0,
       transaction_type: initialValues?.transaction_type ?? 'increase',
       note: initialValues?.note ?? '',
@@ -125,7 +85,7 @@ const InventoryAdjustmentForm = ({
   // Formik
   const formik = useFormik<InventoryAdjustmentFormValues>({
     enableReinitialize: true,
-    initialValues: formikInitialValues,
+    initialValues: formikInitialValues as InventoryAdjustmentFormValues,
     validationSchema: InventoryAdjustmentFormSchema,
     onSubmit: async (values) => {
       setInventoryAdjustmentFormErrorMessage('');
@@ -198,10 +158,7 @@ const InventoryAdjustmentForm = ({
     setDisabledProduct(disabled);
     if (disabled) {
       formik.setFieldValue('product_id', 0);
-      formik.setFieldValue('product', {
-        value: 0,
-        label: '',
-      });
+      formik.setFieldValue('product', null);
     }
   };
 
@@ -219,6 +176,15 @@ const InventoryAdjustmentForm = ({
     formik.setFieldValue('warehouse_id', (val as OptionType)?.value);
   };
 
+  const resetHandler = () => {
+    formik.resetForm();
+    setQuantityLabel('Tambah Stok');
+    productCategoryChangeHandler(null);
+    productChangeHandler(null);
+    warehouseChangeHandler(null);
+  };
+
+
   const { setValues: formikSetValues } = formik;
 
   // Effect
@@ -228,28 +194,39 @@ const InventoryAdjustmentForm = ({
         String(initialValues.product_warehouse.product.id)
       );
       setDisabledProduct(false);
-      formik.setFieldValue('product_id', initialValues.product_warehouse.product.id);
+      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_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(
+        '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');
     }
-  }, []);
+  }, [formik, initialValues, setQuantityLabel, setDisabledProduct, setSelectedProductCategories]);
   useEffect(() => {
-    // formikSetValues(formikInitialValues);
+    formikSetValues(formikInitialValues as InventoryAdjustmentFormValues);
   }, [formikSetValues, formikInitialValues]);
   useEffect(() => {
     if (isResponseSuccess(products)) {
@@ -284,8 +261,8 @@ const InventoryAdjustmentForm = ({
           </Button>
 
           <h1 className='text-2xl font-bold text-center'>
-            {type === 'add' && 'Tambah Stock Adjustment'}
-            {type === 'detail' && 'Detail Stock Adjustment'}
+            {type === 'add' && 'Tambah Penyesuaian Persediaan'}
+            {type === 'detail' && 'Detail Penyesuaian Persediaan'}
           </h1>
         </header>
 
@@ -386,6 +363,7 @@ const InventoryAdjustmentForm = ({
               errorMessage={formik.errors.quantity as string}
               readOnly={type === 'detail'}
             />
+
             {/* Radio Button Flag Stock */}
             <RadioInput
               name='transaction_type'
@@ -397,7 +375,6 @@ const InventoryAdjustmentForm = ({
               value={formik.values.transaction_type}
               onChange={(e) => {
                 formik.handleChange(e);
-                // kamu juga bisa menambahkan efek tambahan
                 setQuantityLabel(
                   e.target.value === 'increase' ? 'Tambah Stok' : 'Kurangi Stok'
                 );
@@ -430,31 +407,31 @@ const InventoryAdjustmentForm = ({
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'detail' && (
               <div className='flex flex-row justify-end gap-2'>
-                <Button type='reset' color='warning' className='px-4'>
+                <Button type='button' color='warning' className='px-4' onClick={resetHandler}>
                   Reset
                 </Button>
                 <Button
                   type='submit'
                   color='primary'
                   isLoading={formik.isSubmitting}
-                  disabled={!formik.isValid || formik.isSubmitting}
+                  disabled={!formik.isValid || formik.isSubmitting || formik.values.product == undefined}
                   className='px-4'
                 >
                   Submit
                 </Button>
               </div>
             )}
-            {InventoryAdjustmentFormErrorMessage && (
-              <div role='alert' className='alert alert-error'>
-                <Icon
-                  icon='material-symbols:error-outline'
-                  width={24}
-                  height={24}
-                />
-                <span>{InventoryAdjustmentFormErrorMessage}</span>
-              </div>
-            )}
           </div>
+          {InventoryAdjustmentFormErrorMessage && (
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{InventoryAdjustmentFormErrorMessage}</span>
+            </div>
+          )}
         </form>
       </section>
     </>

src/components/pages/master-data/customer/form/CustomerForm.tsx

@@ -41,7 +41,6 @@ const CustomerForm = ({
   const [customerFormErrorMessage, setCustomerFormErrorMessage] = useState('');
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [picSelectInputValue, setPicSelectInputValue] = useState('');
-  const [typeSelectInputValue, setTypeSelectInputValue] = useState('');
 
   // Fetch Data
   const picUrl = `${UserApi.basePath}?${new URLSearchParams({
@@ -252,7 +251,6 @@ const CustomerForm = ({
               }
               onChange={typeChangeHandler}
               options={typeOptions}
-              onInputChange={setTypeSelectInputValue}
               isError={formik.touched.type && Boolean(formik.errors.type)}
               errorMessage={formik.errors.type as string}
               isDisabled={formType === 'detail'}

src/components/pages/master-data/supplier/form/SupplierForm.tsx

@@ -42,8 +42,6 @@ const SupplierForm = ({
   // Setup State
   const [supplierFormErrorMessage, setSupplierFormErrorMessage] = useState('');
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-  const [typeSelectInputValue, setTypeSelectInputValue] = useState('');
-  const [categorySelectInputValue, setCategorySelectInputValue] = useState('');
   const [hatcheryTagInputValue, setHatcheryTagInputValue] = useState('');
 
   // -- Options data mapping
@@ -108,8 +106,6 @@ const SupplierForm = ({
   };
 
   // Memo
-  console.log('Memo');
-  console.log(initialValues);
   const formikInitialValues = useMemo<SupplierFormValues>(() => {
     return {
       name: initialValues?.name ?? '',
@@ -125,7 +121,7 @@ const SupplierForm = ({
       account_number: initialValues?.account_number ?? '',
       due_date: initialValues?.due_date ?? 1,
     };
-  }, [initialValues]);
+  }, [initialValues, typeOptions, categoryOptions]);
 
   // Formik
   const formik = useFormik<SupplierFormValues>({
@@ -260,7 +256,6 @@ const SupplierForm = ({
               }
               onChange={typeChangeHandler}
               options={typeOptions}
-              onInputChange={setTypeSelectInputValue}
               isError={formik.touched.type && Boolean(formik.errors.type)}
               errorMessage={formik.errors.type as string}
               isDisabled={formType === 'detail'}
@@ -278,7 +273,6 @@ const SupplierForm = ({
               }
               onChange={categoryChangeHandler}
               options={categoryOptions}
-              onInputChange={setCategorySelectInputValue}
               isError={
                 formik.touched.category && Boolean(formik.errors.category)
               }

src/config/constant.ts

@@ -85,7 +85,7 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
     icon: 'material-symbols:box-outline-rounded',
     submenu: [
       {
-        title: 'Penyesuaian Stok',
+        title: 'Penyesuaian Persediaan',
         link: '/inventory/adjustment',
         icon: 'material-symbols:box-edit-outline-rounded',
       }

src/types/api/inventory/adjustment.d.ts

@@ -1,4 +1,3 @@
-import { ProductCategory } from '@/types/api/master-data/product-category';
 import { Product } from '@/types/api/master-data/product';
 import { Warehouse } from '../master-data/warehouse';