Merge branch 'development' into 'staging'

Development

See merge request mbugroup/lti-web-client!331

Dockerfile

@@ -1,25 +1,38 @@
-FROM node:20-alpine
-
-RUN apk add --no-cache git bash build-base curl
+# =========================
+# Builder stage
+# =========================
+FROM golang:1.23-alpine AS builder
 
+RUN apk add --no-cache git ca-certificates tzdata
 WORKDIR /app
 
-COPY package*.json ./
-RUN npm ci
+COPY go.mod go.sum ./
+RUN go mod download
 
 COPY . .
 
-# Buat config agar Next tahu output: export
-RUN echo "const config = { output: 'export', images: { unoptimized: true } }; export default config;" > next.config.mjs
+# Build API binary
+RUN CGO_ENABLED=0 GOOS=linux GOARCH=amd64 \
+    go build -trimpath -ldflags="-s -w" -o lti-api ./cmd/api
 
-# Build project (Next.js 15 otomatis static export)
-RUN NEXT_DISABLE_TURBOPACK=1 npx next build
+# Build SEED binary (pastikan cmd/seed ada)
+RUN CGO_ENABLED=0 GOOS=linux GOARCH=amd64 \
+    go build -trimpath -ldflags="-s -w" -o lti-seed ./cmd/seed
 
-# Copy static assets dan hasil build agar bisa diakses
-RUN mkdir -p .next/server/app/_next && \
-    cp -r .next/static .next/server/app/_next/static && \
-    cp -r public/* .next/server/app/
+# =========================
+# Runtime stage
+# =========================
+FROM alpine:3.20
 
-EXPOSE 3000
+RUN apk add --no-cache ca-certificates tzdata curl bash postgresql-client \
+  && adduser -D -H -u 10001 appuser
 
-CMD ["npx", "serve", ".next/server/app", "-l", "3000"]
+WORKDIR /app
+
+COPY --from=builder /app/lti-api /app/lti-api
+COPY --from=builder /app/lti-seed /app/lti-seed
+
+USER appuser
+EXPOSE 8081
+
+CMD ["/app/lti-api"]

docker-compose.yaml

@@ -1,39 +0,0 @@
-version: '3.9'
-
-services:
-  dev-web-lti:
-    container_name: dev-web-lti
-    build:
-      context: .
-      dockerfile: Dockerfile
-    ports:
-      - '3002:3000'
-    env_file:
-      - .env
-    environment:
-      NODE_ENV: production
-      APP_ENV: production
-    networks:
-      - dev-lti-network
-    restart: always
-    deploy:
-      resources:
-        limits:
-          cpus: '3.0'
-          memory: 3G
-        reservations:
-          cpus: '1.0'
-          memory: 512M
-    extra_hosts:
-      - 'host.docker.internal:host-gateway'
-    # Optional: aktifkan healthcheck jika punya endpoint
-    # healthcheck:
-    #   test: ["CMD-SHELL", "curl -fsS http://localhost:3000/api/healthz || exit 1"]
-    #   interval: 10s
-    #   timeout: 3s
-    #   retries: 10
-    #   start_period: 15s
-
-networks:
-  dev-lti-network:
-    external: true

src/app/finance/page.tsx

@@ -3,7 +3,12 @@
 import FinanceTable from '@/components/pages/finance/FinanceTable';
 
 const Finance = () => {
-  return <FinanceTable />;
+  return (
+    <section className='size-full p-6'>
+      <div className='flex flex-row gap-4'></div>
+      <FinanceTable />
+    </section>
+  );
 };
 
 export default Finance;

src/app/inventory/adjustment/page.tsx

@@ -2,7 +2,7 @@ import InventoryAdjustmentTable from '@/components/pages/inventory/adjustment/In
 
 const InventoryAdjustment = () => {
   return (
-    <section className='w-full'>
+    <section className='w-full p-4'>
       <InventoryAdjustmentTable />
     </section>
   );

src/app/master-data/area/page.tsx

@@ -1,7 +1,11 @@
 import AreasTable from '@/components/pages/master-data/area/AreasTable';
 
 const Nonstock = () => {
-  return <AreasTable />;
+  return (
+    <section className='w-full p-4'>
+      <AreasTable />
+    </section>
+  );
 };
 
 export default Nonstock;

src/app/master-data/bank/page.tsx

@@ -1,7 +1,11 @@
 import BanksTable from '@/components/pages/master-data/bank/BanksTable';
 
 const Bank = () => {
-  return <BanksTable />;
+  return (
+    <section className='w-full p-4'>
+      <BanksTable />
+    </section>
+  );
 };
 
 export default Bank;

src/app/master-data/customer/page.tsx

@@ -1,7 +1,11 @@
 import CustomersTable from '@/components/pages/master-data/customer/CustomersTable';
 
 const Customer = () => {
-  return <CustomersTable />;
+  return (
+    <section className='w-full p-4'>
+      <CustomersTable />
+    </section>
+  );
 };
 
 export default Customer;

src/app/master-data/flock/page.tsx

@@ -1,7 +1,11 @@
 import FlockTable from '@/components/pages/master-data/flock/FlocksTable';
 
 const Flock = () => {
-  return <FlockTable />;
+  return (
+    <section className='w-full p-4'>
+      <FlockTable />
+    </section>
+  );
 };
 
 export default Flock;

src/app/master-data/kandang/page.tsx

@@ -1,7 +1,11 @@
 import KandangsTable from '@/components/pages/master-data/kandang/KandangsTable';
 
 const Nonstock = () => {
-  return <KandangsTable />;
+  return (
+    <section className='w-full p-4'>
+      <KandangsTable />
+    </section>
+  );
 };
 
 export default Nonstock;

src/app/master-data/location/page.tsx

@@ -1,7 +1,11 @@
 import LocationsTable from '@/components/pages/master-data/location/LocationsTable';
 
 const Nonstock = () => {
-  return <LocationsTable />;
+  return (
+    <section className='w-full p-4'>
+      <LocationsTable />
+    </section>
+  );
 };
 
 export default Nonstock;

src/app/master-data/nonstock/page.tsx

@@ -1,7 +1,11 @@
 import NonstocksTable from '@/components/pages/master-data/nonstock/NonstocksTable';
 
 const Nonstock = () => {
-  return <NonstocksTable />;
+  return (
+    <section className='w-full p-4'>
+      <NonstocksTable />
+    </section>
+  );
 };
 
 export default Nonstock;

src/app/master-data/product-category/page.tsx

@@ -1,7 +1,11 @@
 import ProductCategoryTable from '@/components/pages/master-data/product-category/ProductCategoryTable';
 
 const ProductCategory = () => {
-  return <ProductCategoryTable />;
+  return (
+    <section className='w-full p-4'>
+      <ProductCategoryTable />
+    </section>
+  );
 };
 
 export default ProductCategory;

src/app/master-data/product/page.tsx

@@ -1,7 +1,11 @@
 import ProductsTable from '@/components/pages/master-data/product/ProductTable';
 
 const Product = () => {
-  return <ProductsTable />;
+  return (
+    <section className='w-full p-4'>
+      <ProductsTable />
+    </section>
+  );
 };
 
 export default Product;

src/app/master-data/production-standard/page.tsx

@@ -1,7 +1,11 @@
 import ProductionStandardTable from '@/components/pages/master-data/production-standard/ProductionStandardTable';
 
 const ProductionStandardPage = () => {
-  return <ProductionStandardTable />;
+  return (
+    <div className='w-full'>
+      <ProductionStandardTable />
+    </div>
+  );
 };
 
 export default ProductionStandardPage;

src/app/master-data/supplier/page.tsx

@@ -1,7 +1,11 @@
 import SuppliersTable from '@/components/pages/master-data/supplier/SupplierTable';
 
 const Supplier = () => {
-  return <SuppliersTable />;
+  return (
+    <section className='w-full p-4'>
+      <SuppliersTable />
+    </section>
+  );
 };
 
 export default Supplier;

src/app/master-data/uom/page.tsx

@@ -1,7 +1,11 @@
 import UomsTable from '@/components/pages/master-data/uom/UomsTable';
 
 const Nonstock = () => {
-  return <UomsTable />;
+  return (
+    <section className='w-full p-4'>
+      <UomsTable />
+    </section>
+  );
 };
 
 export default Nonstock;

src/app/master-data/warehouse/page.tsx

@@ -1,7 +1,11 @@
 import WarehousesTable from '@/components/pages/master-data/warehouse/WarehousesTable';
 
 const Warehouse = () => {
-  return <WarehousesTable />;
+  return (
+    <section className='w-full p-4'>
+      <WarehousesTable />
+    </section>
+  );
 };
 
 export default Warehouse;

src/app/production/recording/page.tsx

@@ -2,7 +2,7 @@ import RecordingTable from '@/components/pages/production/recording/RecordingTab
 
 const Recording = () => {
   return (
-    <section className='w-full'>
+    <section className='w-full p-4 sm:p-0'>
       <RecordingTable />
     </section>
   );

src/components/Drawer.tsx

@@ -108,9 +108,7 @@ const Drawer = ({
     if (closeOnBackdropClick) {
       setOpen(false);
     }
-    if (onBackdropClick) {
-      onBackdropClick();
-    }
+    onBackdropClick && onBackdropClick();
   };
 
   return (

src/components/Modal.tsx

@@ -31,11 +31,7 @@ export const useModal = (isNestingModal = false) => {
   }, []);
 
   const toggle = useCallback(() => {
-    if (open) {
-      closeModal();
-    } else {
-      openModal();
-    }
+    open ? closeModal() : openModal();
   }, [open, closeModal, openModal]);
 
   useEffect(() => {

src/components/Navbar.tsx

@@ -26,17 +26,13 @@ const Navbar = ({ toggleSidebar }: NavbarProps) => {
 
   const logoutClickHandler = async () => {
     const logoutRes = await AuthApi.logout();
+
     if (isResponseError(logoutRes)) {
       toast.error('Gagal logout! Coba lagi!');
       return;
     }
 
     setUser(undefined);
-    const redirect = (logoutRes as { redirect?: string })?.redirect;
-    if (redirect) {
-      window.location.href = redirect;
-      return;
-    }
     router.replace(process.env.NEXT_PUBLIC_SSO_LOGIN_URL as string);
   };
 

src/components/helper/ButtonFilter.tsx

@@ -3,51 +3,15 @@ import { getFilledFormikValuesCount } from '@/lib/formik-helper';
 import { cn } from '@/lib/helper';
 import { Icon } from '@iconify/react';
 import { FormikValues } from 'formik';
-import { useMemo } from 'react';
 
 export type ButtonFilterProps = ButtonProps & {
   values: FormikValues;
   onClick: () => void;
-  excludeFields?: string[];
-  fieldGroups?: string[][];
 };
 
 // 'bg-gradient-to-t from-blue-50 to-blue-100 border-blue-500 text-blue-600 hover:from-blue-100 hover:to-blue-200
 
-const ButtonFilter = ({
-  values,
-  onClick,
-  excludeFields = [],
-  fieldGroups = [],
-  ...props
-}: ButtonFilterProps) => {
-  const activeCount = useMemo(() => {
-    const filteredValues: FormikValues = {};
-    Object.keys(values).forEach((key) => {
-      if (!excludeFields.includes(key)) {
-        filteredValues[key] = values[key];
-      }
-    });
-
-    let count = getFilledFormikValuesCount(filteredValues);
-
-    fieldGroups.forEach((group) => {
-      const groupFields = group.filter(
-        (field) => !excludeFields.includes(field)
-      );
-      const filledGroupFields = groupFields.filter(
-        (field) => filteredValues[field]
-      );
-      if (
-        filledGroupFields.length === groupFields.length &&
-        groupFields.length > 1
-      ) {
-        count -= groupFields.length - 1;
-      }
-    });
-
-    return count;
-  }, [values, excludeFields, fieldGroups]);
+const ButtonFilter = ({ values, onClick, ...props }: ButtonFilterProps) => {
   return (
     <Button
       {...props}
@@ -57,7 +21,7 @@ const ButtonFilter = ({
       className={cn(
         'rounded-lg max-h-10 font-semibold text-sm gap-1.5',
         'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft',
-        activeCount > 0
+        getFilledFormikValuesCount(values) > 0
           ? 'border-primary-gradient text-primary rounded-lg!'
           : 'rounded-lg',
         props.className
@@ -67,12 +31,14 @@ const ButtonFilter = ({
         icon='heroicons:funnel'
         width={20}
         height={20}
-        className={activeCount > 0 ? 'text-blue-600' : ''}
+        className={
+          getFilledFormikValuesCount(values) > 0 ? 'text-blue-600' : ''
+        }
       />
       Filter
-      {activeCount > 0 && (
+      {getFilledFormikValuesCount(values) > 0 && (
         <span className='w-5 h-5 text-white bg-[#FF3535] rounded-lg border border-base-300 flex items-center justify-center text-xs'>
-          {activeCount}
+          {getFilledFormikValuesCount(values)}
         </span>
       )}
     </Button>

src/components/input/DropFileInput.tsx

@@ -134,20 +134,14 @@ const DropFileInput: React.FC<DropFileInputProps> = ({
 
         {!isError && bottomLabel && (
           <p
-            className={cn(
-              'w-full mt-1.5 text-xs opacity-60',
-              className?.bottomLabel
-            )}
+            className={cn('w-full text-sm opacity-60', className?.bottomLabel)}
           >
             {bottomLabel}
           </p>
         )}
         {isError && (
           <p
-            className={cn(
-              'w-full mt-1.5 text-xs text-error',
-              className?.errorMessage
-            )}
+            className={cn('w-full text-sm text-error', className?.errorMessage)}
           >
             {errorMessage}
           </p>

src/components/input/RadioInput.tsx

@@ -144,12 +144,12 @@ export const RadioGroup = ({
 
         {/* Label bawah */}
         {!isError && bottomLabel && (
-          <p className='mt-1.5 text-xs opacity-60'>{bottomLabel}</p>
+          <p className='text-sm opacity-60'>{bottomLabel}</p>
         )}
 
         {/* Pesan error */}
         {isError && errorMessage && (
-          <p className='mt-1.5 text-xs text-error'>{errorMessage}</p>
+          <p className='text-sm text-error'>{errorMessage}</p>
         )}
       </div>
     </RadioGroupContext.Provider>

src/components/input/SelectInput.tsx

@@ -488,11 +488,9 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         />
       )}
 
-      {isError && (
-        <p className='w-full mt-1.5 text-xs text-error'>{errorMessage}</p>
-      )}
+      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
       {!isError && bottomLabel && (
-        <p className='w-full mt-1.5 text-xs opacity-60'>{bottomLabel}</p>
+        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
       )}
     </div>
   );

src/components/input/TagInput.tsx

@@ -159,11 +159,9 @@ const TagInput: React.FC<TagInputProps> = ({
 
       {/* Bottom label or error message */}
       {!isError && bottomLabel && (
-        <p className='w-full mt-1.5 text-xs opacity-60'>{bottomLabel}</p>
-      )}
-      {isError && (
-        <p className='w-full mt-1.5 text-xs text-error'>{errorMessage}</p>
+        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
       )}
+      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
     </div>
   );
 };

src/components/pages/closing/ClosingDetailTabs.tsx

@@ -18,7 +18,7 @@ import HppExpeditionClosingTab from '@/components/pages/closing/tab/HppExpeditio
 import ClosingKandangList from '@/components/pages/closing/ClosingKandangList';
 import { ProjectFlock } from '@/types/api/production/project-flock';
 import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
-import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
+import { useClosingTabStore } from '@/stores/closing/closing-tab.store';
 interface ClosingDetailProps {
   id: number;
   initialValue?: ClosingGeneralInformation;
@@ -33,7 +33,7 @@ const ClosingDetail: React.FC<ClosingDetailProps> = ({
   kandangData,
 }) => {
   const [activeTabId, setActiveTabId] = useState<string>('sapronak');
-  const tabActions = useTabActionsStore((state) => state.tabActions);
+  const tabActions = useClosingTabStore((state) => state.tabActions);
 
   const closingDetailTabs = useMemo(() => {
     const validTabs = [

src/components/pages/closing/ClosingsTable.tsx

@@ -1,8 +1,6 @@
 'use client';
 
 import { ChangeEventHandler, useEffect, useState, useMemo } from 'react';
-import { usePathname } from 'next/navigation';
-import { useUiStore } from '@/stores/ui/ui.store';
 import useSWR from 'swr';
 import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
 import { useRouter } from 'next/navigation';
@@ -33,7 +31,6 @@ import {
   ClosingFilterType,
 } from '@/components/pages/closing/filter/ClosingFilter';
 import ClosingTableSkeleton from '@/components/pages/closing/skeleton/ClosingTableSkeleton';
-import ButtonFilter from '@/components/helper/ButtonFilter';
 
 const RowOptionsMenu = ({
   props,
@@ -93,9 +90,6 @@ const RowOptionsMenu = ({
 };
 
 const ClosingsTable = () => {
-  const { searchValue, setSearchValue, setTableState } = useUiStore();
-  const pathname = usePathname();
-
   // ===== ROUTER =====
   const router = useRouter();
 
@@ -164,7 +158,6 @@ const ClosingsTable = () => {
     onReset: () => {
       updateFilter('location_id', '');
       updateFilter('project_status', '');
-      filterModal.closeModal();
     },
   });
 
@@ -294,17 +287,25 @@ const ClosingsTable = () => {
     );
   }, [formik.values.project_status, projectStatusOptions]);
 
-  useEffect(() => {
-    updateFilter('search', searchValue);
-  }, [searchValue, updateFilter]);
+  // ===== ACTIVE FILTERS COUNT =====
+  const activeFiltersCount = useMemo(() => {
+    let count = 0;
 
-  useEffect(() => {
-    setTableState('closing-table', pathname);
-  }, [pathname, setTableState]);
+    if (tableFilterState.location_id) {
+      count += 1;
+    }
+
+    if (tableFilterState.project_status) {
+      count += 1;
+    }
+
+    return count;
+  }, [tableFilterState.location_id, tableFilterState.project_status]);
+
+  const hasFilters = activeFiltersCount > 0;
 
   // ===== SEARCH CHANGE HANDLER =====
   const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
-    setSearchValue(e.target.value);
     updateFilter('search', e.target.value);
   };
 
@@ -351,12 +352,25 @@ const ClosingsTable = () => {
                 }}
               />
 
-              <ButtonFilter
-                values={tableFilterState}
-                excludeFields={['page', 'pageSize', 'search']}
+              <Button
+                variant='outline'
+                color='none'
                 onClick={handleFilterModalOpen}
-                className='px-3 py-2.5'
-              />
+                className={cn(
+                  'px-3 py-2.5 gap-1.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft transition-all',
+                  {
+                    'border-primary-gradient text-primary': hasFilters,
+                  }
+                )}
+              >
+                <Icon icon='heroicons:funnel' width={20} height={20} />
+                Filter
+                {hasFilters && (
+                  <span className='w-5 h-5 text-white bg-[#FF3535] rounded-lg border border-base-300 flex items-center justify-center text-xs'>
+                    {activeFiltersCount}
+                  </span>
+                )}
+              </Button>
             </div>
           </div>
 
@@ -365,19 +379,19 @@ const ClosingsTable = () => {
               <span className='loading loading-spinner loading-xl' />
             </div>
           ) : data.length === 0 ? (
-            <div className='mt-3'>
-              <ClosingTableSkeleton
-                columns={closingsColumns}
-                icon={
-                  <Icon
-                    icon='heroicons:document-text'
-                    className='text-white'
-                    width={20}
-                    height={20}
-                  />
-                }
-              />
-            </div>
+            <ClosingTableSkeleton
+              columns={closingsColumns}
+              icon={
+                <Icon
+                  icon='heroicons:chart-bar'
+                  className='text-white'
+                  width={20}
+                  height={20}
+                />
+              }
+              title='Data Closing Belum Tersedia'
+              subtitle='Tidak ada data closing untuk saat ini.'
+            />
           ) : (
             <Table<Closing>
               data={isResponseSuccess(closings) ? closings?.data : []}
@@ -396,7 +410,10 @@ const ClosingsTable = () => {
               rowSelection={rowSelection}
               setRowSelection={setRowSelection}
               className={{
-                containerClassName: cn('mt-3 mb-0'),
+                containerClassName: cn('mt-3', {
+                  'w-full mb-0':
+                    isResponseSuccess(closings) && closings?.data?.length === 0,
+                }),
                 headerColumnClassName: 'text-nowrap',
               }}
             />

src/components/pages/closing/skeleton/ClosingTableSkeleton.tsx

@@ -6,13 +6,13 @@ import { ColumnDef } from '@tanstack/react-table';
 const ClosingTableSkeleton = ({
   columns,
   icon,
-  title = 'No Data Available',
-  subtitle = 'There is no closing data displayed. Enter closing data to get started.',
+  title,
+  subtitle,
 }: {
   columns: ColumnDef<Closing>[];
   icon: React.ReactNode;
-  title?: string;
-  subtitle?: string;
+  title: string;
+  subtitle: string;
 }) => {
   return (
     <div className='relative size-full'>

src/components/pages/closing/table/SalesClosingTable.tsx

@@ -308,16 +308,7 @@ const SalesClosingTable = ({ projectFlockId }: SalesClosingTableProps) => {
       //   },
       // },
     ],
-    [
-      summary,
-      totals.avgActualPrice,
-      totals.avgSalesPrice,
-      totals.avgWeight,
-      totals.totalActualPrice,
-      totals.totalQuantity,
-      totals.totalSalesPrice,
-      totals.totalWeight,
-    ]
+    []
   );
 
   return (

src/components/pages/dashboard/DashboardProduction.tsx

@@ -150,39 +150,33 @@ const DashboardProduction = () => {
     },
   });
 
-  const { resetForm } = formik;
-
   const handleResetFilter = useCallback(() => {
-    resetForm();
+    formik.resetForm();
     resetFilterValues(); // Clear stored filter values
     setAnalysisMode('OVERVIEW');
     setEndpointUrl('/dashboards');
     setSelectedLocationIds([]);
-  }, [resetForm, resetFilterValues]);
+  }, [resetFilterValues, filterValues, selectedLocationIds]);
 
-  const handleApplyFilter = useCallback(
-    (values: DashboardFilter) => {
-      // Build query params object, only include non-empty values
-      const params: Record<string, string> = {};
+  const handleApplyFilter = (values: DashboardFilter) => {
+    // Build query params object, only include non-empty values
+    const params: Record<string, string> = {};
 
-      if (values.start_date) params.start_date = values.start_date;
-      if (values.end_date) params.end_date = values.end_date;
-      if (values.analysis_mode) params.analysis_mode = values.analysis_mode;
-      if (values.location_ids.length > 0)
-        params.location_ids = values.location_ids.toString();
-      if (values.flock_ids.length > 0)
-        params.flock_ids = values.flock_ids.toString();
-      if (values.kandang_ids.length > 0)
-        params.kandang_ids = values.kandang_ids.toString();
-      if (values.comparison_type)
-        params.comparison_type = values.comparison_type;
+    if (values.start_date) params.start_date = values.start_date;
+    if (values.end_date) params.end_date = values.end_date;
+    if (values.analysis_mode) params.analysis_mode = values.analysis_mode;
+    if (values.location_ids.length > 0)
+      params.location_ids = values.location_ids.toString();
+    if (values.flock_ids.length > 0)
+      params.flock_ids = values.flock_ids.toString();
+    if (values.kandang_ids.length > 0)
+      params.kandang_ids = values.kandang_ids.toString();
+    if (values.comparison_type) params.comparison_type = values.comparison_type;
 
-      setEndpointUrl(`/dashboards?${new URLSearchParams(params).toString()}`);
-      filterModal.closeModal();
-      refreshDashboardProductionData();
-    },
-    [filterModal, refreshDashboardProductionData]
-  );
+    setEndpointUrl(`/dashboards?${new URLSearchParams(params).toString()}`);
+    filterModal.closeModal();
+    refreshDashboardProductionData();
+  };
 
   // ===== Load filter from store on mount =====
   useEffect(() => {
@@ -196,20 +190,20 @@ const DashboardProduction = () => {
       kandang_ids: normalizeToArray(filterValues.kandang),
       comparison_type: filterValues.comparisonType,
     });
-  }, [filterValues, handleApplyFilter]);
+  }, [filterValues]);
 
   // ===== Formik Error List =====
   const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
 
   // ===== Export PDF =====
-  const handleExportPDF = useCallback(async () => {
+  const handleExportPDF = async () => {
     await generateDashboardPDF({
       filterValues: formik.values,
       allStatsRef,
       allChartsRef,
       setExporting,
     });
-  }, [formik.values]);
+  };
 
   // ===== Register Navbar Actions =====
   const openFilterModalRef = useRef(filterModal.openModal);
@@ -259,7 +253,7 @@ const DashboardProduction = () => {
         </Dropdown>
       </div>
     );
-  }, [formik.values, exporting, setNavbarActions, handleExportPDF]);
+  }, [formik.values, exporting, setNavbarActions]);
 
   // Cleanup only on unmount
   useEffect(() => {

src/components/pages/dashboard/chart/DashboardLineChart.tsx

@@ -409,14 +409,14 @@ const DashboardLineChart = ({
               axisLine={{ stroke: '#C1C1C180', opacity: 0.5 }}
               domain={(() => {
                 // Calculate dynamic domain based on visible data
-                // let seriesData: DashboardChartsSeries[] = [];
+                let seriesData: DashboardChartsSeries[] = [];
                 let dataset: DashboardChartsDataset[] = [];
 
                 if (
                   analysisMode === 'OVERVIEW' &&
                   isOverviewCharts(data.charts)
                 ) {
-                  // seriesData = data.charts[chartData]?.series || [];
+                  seriesData = data.charts[chartData]?.series || [];
                   dataset = data.charts[chartData]?.dataset || [];
                 } else if (
                   analysisMode === 'COMPARISON' &&
@@ -426,7 +426,7 @@ const DashboardLineChart = ({
                     data.charts.farm ||
                     data.charts.flock ||
                     data.charts.kandang;
-                  // seriesData = comparisonChart?.series || [];
+                  seriesData = comparisonChart?.series || [];
                   dataset = comparisonChart?.dataset || [];
                 }
 

src/components/pages/expense/ExpensesTable.tsx

@@ -1,8 +1,6 @@
 'use client';
 
 import { ChangeEventHandler, useEffect, useMemo, useState } from 'react';
-import { usePathname } from 'next/navigation';
-import { useUiStore } from '@/stores/ui/ui.store';
 import useSWR from 'swr';
 import {
   CellContext,
@@ -18,40 +16,41 @@ import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import Button from '@/components/Button';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
-import PopoverButton from '@/components/popover/PopoverButton';
-import PopoverContent from '@/components/popover/PopoverContent';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import RealizationStatusBadge from '@/components/pages/expense/RealizationStatusBadge';
 import ExpenseStatusBadge from '@/components/pages/expense/ExpenseStatusBadge';
 import CheckboxInput from '@/components/input/CheckboxInput';
 import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
+import DateInput from '@/components/input/DateInput';
 import RequirePermission from '@/components/helper/RequirePermission';
-import ButtonFilter from '@/components/helper/ButtonFilter';
-import ExpensesFilterModal from '@/components/pages/expense/filter/ExpensesFilterModal';
-import ExpenseTableSkeleton from '@/components/pages/expense/skeleton/ExpenseTableSkeleton';
 
 import { Expense } from '@/types/api/expense';
 import { ExpenseApi } from '@/services/api/expense';
 import { cn, formatCurrency, formatDate } from '@/lib/helper';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { LocationApi, SupplierApi } from '@/services/api/master-data';
+import { Location } from '@/types/api/master-data/location';
+import { Supplier } from '@/types/api/master-data/supplier';
 import { BaseApiResponse } from '@/types/api/api-general';
 
 const RowOptionsMenu = ({
-  popoverPosition = 'bottom',
+  type = 'dropdown',
   props,
   deleteClickHandler,
 }: {
-  popoverPosition: 'bottom' | 'top';
+  type: 'dropdown' | 'collapse';
   props: CellContext<Expense, unknown>;
+  approveClickHandler: () => void;
+  rejectClickHandler: () => void;
   deleteClickHandler: () => void;
 }) => {
-  const popoverId = `expense#${props.row.original.id}`;
-  const popoverAnchorName = `--anchor-expense#${props.row.original.id}`;
-
-  const closePopover = () => {
-    document.getElementById(popoverId)?.hidePopover();
-  };
-
   const showEditButton = props.row.original.latest_approval
     ? props.row.original.latest_approval.step_number !== 6 &&
       (props.row.original.latest_approval.step_number === 1 ||
@@ -60,102 +59,85 @@ const RowOptionsMenu = ({
         props.row.original.latest_approval.step_number === 4)
     : false;
 
+  // TODO: apply RBAC
   const showRealizationButton = props.row.original.latest_approval
     ? props.row.original.latest_approval.action !== 'REJECTED' &&
       props.row.original.latest_approval.step_number === 4
     : false;
 
   return (
-    <div className='relative'>
-      <PopoverButton
-        tabIndex={0}
-        variant='ghost'
-        color='none'
-        popoverTarget={popoverId}
-        anchorName={popoverAnchorName}
-      >
-        <Icon icon='material-symbols:more-vert' width={16} height={16} />
-      </PopoverButton>
+    <RowOptionsMenuWrapper type={type}>
+      <div className='w-full max-h-40 overflow-auto flex flex-col gap-1'>
+        <RequirePermission permissions='lti.expense.detail'>
+          <Button
+            href={`/expense/detail/?expenseId=${props.row.original.id}`}
+            variant='ghost'
+            color='primary'
+            className='justify-start text-sm'
+          >
+            <Icon icon='mdi:eye-outline' width={16} height={16} />
+            Detail
+          </Button>
+        </RequirePermission>
 
-      <PopoverContent
-        id={popoverId}
-        anchorName={popoverAnchorName}
-        position={popoverPosition === 'bottom' ? 'bottom-start' : 'left'}
-        className='w-full max-w-40 rounded-xl border border-base-content/5 shadow-sm'
-      >
-        <div className='flex flex-col bg-base-100 rounded-xl'>
-          <RequirePermission permissions='lti.expense.detail'>
+        {showEditButton && (
+          <RequirePermission permissions='lti.expense.update'>
             <Button
-              href={`/expense/detail/?expenseId=${props.row.original.id}`}
+              href={`/expense/detail/edit/?expenseId=${props.row.original.id}`}
               variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full'
-              onClick={closePopover}
+              color='warning'
+              className='justify-start text-sm'
             >
-              <Icon icon='heroicons:eye' width={20} height={20} />
-              Detail
+              <Icon
+                icon='material-symbols:edit-outline'
+                width={16}
+                height={16}
+              />
+              Edit
             </Button>
           </RequirePermission>
+        )}
 
-          {showEditButton && (
-            <RequirePermission permissions='lti.expense.update'>
-              <Button
-                href={`/expense/detail/edit/?expenseId=${props.row.original.id}`}
-                variant='ghost'
-                color='none'
-                className='p-3 justify-start text-sm font-semibold w-full'
-                onClick={closePopover}
-              >
-                <Icon icon='mdi:pencil-outline' width={20} height={20} />
-                Edit
-              </Button>
-            </RequirePermission>
-          )}
-
-          {showRealizationButton && (
-            <RequirePermission permissions='lti.expense.create.realization'>
-              <Button
-                href={`/expense/realization/?expenseId=${props.row.original.id}`}
-                variant='ghost'
-                color='none'
-                className='p-3 justify-start text-sm font-semibold w-full'
-                onClick={closePopover}
-              >
-                <Icon
-                  icon='material-symbols:money-bag-rounded'
-                  width={20}
-                  height={20}
-                  className='text-info'
-                />
-                Realisasi
-              </Button>
-            </RequirePermission>
-          )}
-
-          <RequirePermission permissions='lti.expense.delete'>
+        {showRealizationButton && (
+          <RequirePermission permissions='lti.expense.create.realization'>
             <Button
-              onClick={() => {
-                deleteClickHandler();
-                closePopover();
-              }}
+              href={`/expense/realization/?expenseId=${props.row.original.id}`}
               variant='ghost'
-              color='error'
-              className='p-3 justify-start text-sm font-semibold w-full focus-visible:text-error-content hover:text-error-content'
+              color='info'
+              className='justify-start text-sm text-info focus-visible:text-info-content hover:text-info-content'
             >
-              <Icon icon='mdi:delete-outline' width={20} height={20} />
-              Delete
+              <Icon
+                icon='material-symbols:money-bag-rounded'
+                width={16}
+                height={16}
+              />
+              Realisasi
             </Button>
           </RequirePermission>
-        </div>
-      </PopoverContent>
-    </div>
+        )}
+
+        <RequirePermission permissions='lti.expense.delete'>
+          <Button
+            onClick={deleteClickHandler}
+            variant='ghost'
+            color='error'
+            className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+          >
+            <Icon
+              icon='material-symbols:delete-outline-rounded'
+              width={16}
+              height={16}
+              className='justify-start text-sm'
+            />
+            Delete
+          </Button>
+        </RequirePermission>
+      </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
 const ExpensesTable = () => {
-  const { searchValue, setSearchValue, setTableState } = useUiStore();
-  const pathname = usePathname();
-
   const {
     state: tableFilterState,
     updateFilter,
@@ -197,9 +179,6 @@ const ExpensesTable = () => {
   const approveModal = useModal();
   const rejectModal = useModal();
 
-  // ===== FILTER MODAL STATE =====
-  const filterModal = useModal();
-
   const [selectedExpense, setSelectedExpense] = useState<Expense | undefined>(
     undefined
   );
@@ -361,7 +340,31 @@ const ExpensesTable = () => {
         const currentRowRelativeIndex =
           currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
 
-        const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
+        const isLast2Rows = currentRowRelativeIndex > currentPageSize - 3;
+
+        const approveClickHandler = () => {
+          setSelectedExpense(props.row.original);
+
+          // Set row selection
+          setRowSelection({
+            [String(props.row.original.id)]: true,
+          });
+
+          setApprovalNotes('');
+          approveModal.openModal();
+        };
+
+        const rejectClickHandler = () => {
+          setSelectedExpense(props.row.original);
+
+          // Set row selection
+          setRowSelection({
+            [String(props.row.original.id)]: true,
+          });
+
+          setApprovalNotes('');
+          rejectModal.openModal();
+        };
 
         const deleteClickHandler = () => {
           setSelectedExpense(props.row.original);
@@ -369,11 +372,31 @@ const ExpensesTable = () => {
         };
 
         return (
-          <RowOptionsMenu
-            popoverPosition={isLast2Rows ? 'top' : 'bottom'}
-            props={props}
-            deleteClickHandler={deleteClickHandler}
-          />
+          <>
+            {currentPageSize > 3 && (
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  approveClickHandler={approveClickHandler}
+                  rejectClickHandler={rejectClickHandler}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowDropdownOptions>
+            )}
+
+            {currentPageSize <= 3 && (
+              <RowCollapseOptions>
+                <RowOptionsMenu
+                  type='collapse'
+                  props={props}
+                  approveClickHandler={approveClickHandler}
+                  rejectClickHandler={rejectClickHandler}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowCollapseOptions>
+            )}
+          </>
         );
       },
     },
@@ -512,41 +535,51 @@ const ExpensesTable = () => {
     setIsRejectLoading(false);
   };
 
-  useEffect(() => {
-    updateFilter('search', searchValue);
-  }, [searchValue, updateFilter]);
+  const {
+    setInputValue: setLocationInputValue,
+    options: locationOptions,
+    isLoadingOptions: isLoadingLocationOptions,
+  } = useSelect<Location>(LocationApi.basePath, 'id', 'name');
 
-  useEffect(() => {
-    setTableState('expense-table', pathname);
-  }, [pathname, setTableState]);
+  const [selectedLocation, setSelectedLocation] = useState<OptionType | null>(
+    null
+  );
+
+  const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedLocation(val as OptionType);
+    updateFilter(
+      'locationId',
+      val ? ((val as OptionType).value as string) : ''
+    );
+  };
+
+  const {
+    setInputValue: setVendorInputValue,
+    options: vendorOptions,
+    isLoadingOptions: isLoadingVendorOptions,
+  } = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name');
+
+  const [selectedVendor, setSelectedVendor] = useState<OptionType | null>(null);
+
+  const vendorChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedVendor(val as OptionType);
+    updateFilter('vendorId', val ? ((val as OptionType).value as string) : '');
+  };
 
   const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
-    setSearchValue(e.target.value);
     updateFilter('search', e.target.value);
   };
 
-  // ===== FILTER MODAL HANDLERS =====
-  const handleFilterModalOpen = () => {
-    filterModal.openModal();
+  const transactionDateChangeHandler: ChangeEventHandler<HTMLInputElement> = (
+    e
+  ) => {
+    updateFilter('transactionDate', e.target.value);
   };
 
-  const handleFilterSubmit = (values: {
-    transaction_date?: string | null;
-    realization_date?: string | null;
-    location_id?: string | null;
-    vendor_id?: string | null;
-  }) => {
-    updateFilter('transactionDate', values.transaction_date || '');
-    updateFilter('realizationDate', values.realization_date || '');
-    updateFilter('locationId', values.location_id || '');
-    updateFilter('vendorId', values.vendor_id || '');
-  };
-
-  const handleFilterReset = () => {
-    updateFilter('transactionDate', '');
-    updateFilter('realizationDate', '');
-    updateFilter('locationId', '');
-    updateFilter('vendorId', '');
+  const realizationDateChangeHandler: ChangeEventHandler<HTMLInputElement> = (
+    e
+  ) => {
+    updateFilter('realizationDate', e.target.value);
   };
 
   // track sorting
@@ -562,193 +595,188 @@ const ExpensesTable = () => {
 
   return (
     <>
-      <div className='w-full'>
-        <div className='w-full p-3 flex flex-row justify-between gap-3 flex-wrap border-b border-base-content/10'>
-          {/* Action Buttons */}
-          <div className='w-fit flex flex-row gap-3 flex-wrap'>
-            <RequirePermission permissions='lti.expense.create'>
-              <Button
-                href='/expense/add'
-                color='primary'
-                className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-xl shadow-button-soft'
-              >
-                <Icon icon='heroicons:plus' width={20} height={20} />
-                Add Expense
-              </Button>
-            </RequirePermission>
-
-            {selectedRowIds.length > 0 && (
-              <>
-                <hr className='w-px h-full border-none bg-base-content/10 sm:block hidden' />
-
-                <RequirePermission permissions='lti.expense.approve.head_area'>
+      <div className='w-full p-0 sm:p-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <div className='flex flex-col gap-2 mb-4'>
+            <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-4'>
+              <div className='w-full sm:w-fit flex flex-col sm:flex-row self-start gap-2'>
+                <RequirePermission permissions='lti.expense.create'>
                   <Button
-                    variant='outline'
-                    color='none'
-                    onClick={bulkApproveClickHandler}
-                    disabled={!isAllSelectedRowLatestApprovalOnHeadArea}
-                    className='px-3 py-2.5 gap-1.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
+                    href='/expense/add'
+                    color='primary'
+                    className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
                   >
-                    <Icon
-                      icon='lucide-lab:farm'
-                      width={20}
-                      height={20}
-                      className='text-success'
-                    />
-                    Approve Head Area
+                    <Icon icon='heroicons:plus' width={20} height={20} />
+                    Add Expense
                   </Button>
                 </RequirePermission>
 
-                <RequirePermission permissions='lti.expense.approve.unit_vice_president'>
-                  <Button
-                    variant='outline'
-                    color='none'
-                    onClick={bulkApproveClickHandler}
-                    disabled={
-                      !isAllSelectedRowLatestApprovalOnUnitVicePresident
-                    }
-                    className='px-3 py-2.5 gap-1.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
-                  >
-                    <Icon
-                      icon='tdesign:money'
-                      width={20}
-                      height={20}
-                      className='text-success'
-                    />
-                    Approve Unit Vice President
-                  </Button>
-                </RequirePermission>
+                {selectedRowIds.length > 0 && (
+                  <>
+                    <RequirePermission permissions='lti.expense.approve.head_area'>
+                      <Button
+                        variant='outline'
+                        color='info'
+                        onClick={bulkApproveClickHandler}
+                        disabled={!isAllSelectedRowLatestApprovalOnHeadArea}
+                        className='w-full sm:w-fit'
+                      >
+                        <Icon icon='lucide-lab:farm' width={24} height={24} />
+                        Approve Head Area
+                      </Button>
+                    </RequirePermission>
 
-                <RequirePermission permissions='lti.expense.approve.finance'>
-                  <Button
-                    variant='outline'
-                    color='none'
-                    onClick={bulkApproveClickHandler}
-                    disabled={!isAllSelectedRowLatestApprovalOnFinance}
-                    className='px-3 py-2.5 gap-1.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
-                  >
-                    <Icon
-                      icon='tdesign:money'
-                      width={20}
-                      height={20}
-                      className='text-success'
-                    />
-                    Approve Finance
-                  </Button>
-                </RequirePermission>
+                    <RequirePermission permissions='lti.expense.approve.unit_vice_president'>
+                      <Button
+                        variant='outline'
+                        color='success'
+                        onClick={bulkApproveClickHandler}
+                        disabled={
+                          !isAllSelectedRowLatestApprovalOnUnitVicePresident
+                        }
+                        className='w-full sm:w-fit'
+                      >
+                        <Icon icon='tdesign:money' width={24} height={24} />
+                        Approve Unit Vice President
+                      </Button>
+                    </RequirePermission>
 
-                <RequirePermission
-                  permissions={[
-                    'lti.expense.approve.head_area',
-                    'lti.expense.approve.unit_vice_president',
-                    'lti.expense.approve.finance',
-                  ]}
-                >
-                  <Button
-                    variant='outline'
-                    color='none'
-                    onClick={bulkRejectClickHandler}
-                    disabled={
-                      !isAllSelectedRowLatestApprovalOnHeadArea &&
-                      !isAllSelectedRowLatestApprovalOnUnitVicePresident &&
-                      !isAllSelectedRowLatestApprovalOnFinance
-                    }
-                    className='px-3 py-2.5 gap-1.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
-                  >
-                    <Icon
-                      icon='material-symbols:close'
-                      width={20}
-                      height={20}
-                      className='text-error'
-                    />
-                    Reject
-                  </Button>
-                </RequirePermission>
-              </>
-            )}
-          </div>
+                    <RequirePermission permissions='lti.expense.approve.finance'>
+                      <Button
+                        variant='outline'
+                        color='success'
+                        onClick={bulkApproveClickHandler}
+                        disabled={!isAllSelectedRowLatestApprovalOnFinance}
+                        className='w-full sm:w-fit'
+                      >
+                        <Icon icon='tdesign:money' width={24} height={24} />
+                        Approve Finance
+                      </Button>
+                    </RequirePermission>
 
-          {/* Search and Filter */}
-          <div className='flex flex-1 flex-row justify-start sm:justify-end items-center gap-3 flex-wrap'>
-            <DebouncedTextInput
-              name='search'
-              placeholder='Search'
-              value={tableFilterState.search ?? ''}
-              onChange={searchChangeHandler}
-              startAdornment={
-                <Icon
-                  icon='heroicons:magnifying-glass'
-                  width={20}
-                  height={20}
-                />
-              }
-              className={{
-                wrapper: 'w-full min-w-24 max-w-3xs',
-                inputWrapper: 'rounded-xl! shadow-button-soft',
-                input:
-                  'placeholder:font-semibold placeholder:text-base-content/50',
-              }}
-            />
-
-            <ButtonFilter
-              values={tableFilterState}
-              excludeFields={[
-                'page',
-                'pageSize',
-                'search',
-                'nameSort',
-                'userId',
-              ]}
-              onClick={handleFilterModalOpen}
-              className='px-3 py-2.5'
-            />
-          </div>
-        </div>
-
-        {/* Table Section */}
-        <div className='flex flex-col mb-4'>
-          {isLoading ? (
-            <div className='w-full flex flex-row justify-center items-center p-4'>
-              <span className='loading loading-spinner loading-xl' />
+                    <RequirePermission
+                      permissions={[
+                        'lti.expense.approve.head_area',
+                        'lti.expense.approve.unit_vice_president',
+                        'lti.expense.approve.finance',
+                      ]}
+                    >
+                      <Button
+                        variant='outline'
+                        color='error'
+                        onClick={bulkRejectClickHandler}
+                        disabled={
+                          !isAllSelectedRowLatestApprovalOnHeadArea &&
+                          !isAllSelectedRowLatestApprovalOnUnitVicePresident &&
+                          !isAllSelectedRowLatestApprovalOnFinance
+                        }
+                        className='w-full sm:w-fit'
+                      >
+                        <Icon
+                          icon='material-symbols:close'
+                          width={24}
+                          height={24}
+                        />
+                        Reject
+                      </Button>
+                    </RequirePermission>
+                  </>
+                )}
+              </div>
             </div>
-          ) : !isResponseSuccess(expenses) || expenses.data?.length === 0 ? (
-            <div className='p-3'>
-              <ExpenseTableSkeleton
-                columns={expensesColumns}
-                icon={
-                  <Icon
-                    icon='heroicons:document-text'
-                    className='text-white'
-                    width={20}
-                    height={20}
-                  />
-                }
+
+            <div className='grid grid-cols-12 justify-end gap-2'>
+              <DateInput
+                required
+                label='Tanggal Transaksi'
+                name='transaction_date'
+                placeholder='Masukkan tanggal transaksi'
+                value={tableFilterState.transactionDate}
+                onChange={transactionDateChangeHandler}
+                className={{
+                  wrapper: 'col-span-12 sm:col-span-3',
+                }}
+              />
+
+              <DateInput
+                required
+                label='Tanggal Realisasi'
+                name='realization_date'
+                placeholder='Masukkan tanggal realisasi'
+                value={tableFilterState.realizationDate}
+                onChange={realizationDateChangeHandler}
+                className={{
+                  wrapper: 'col-span-12 sm:col-span-3',
+                }}
+              />
+
+              <SelectInput
+                label='Lokasi'
+                options={locationOptions}
+                isLoading={isLoadingLocationOptions}
+                value={selectedLocation}
+                onChange={locationChangeHandler}
+                onInputChange={setLocationInputValue}
+                isClearable
+                className={{
+                  wrapper: 'col-span-12 sm:col-span-3',
+                }}
+              />
+
+              <SelectInput
+                label='Vendor'
+                options={vendorOptions}
+                isLoading={isLoadingVendorOptions}
+                value={selectedVendor}
+                onChange={vendorChangeHandler}
+                onInputChange={setVendorInputValue}
+                isClearable
+                className={{
+                  wrapper: 'col-span-12 sm:col-span-3',
+                }}
+              />
+
+              <DebouncedTextInput
+                name='search'
+                placeholder='Cari Biaya Operasional'
+                value={tableFilterState.search}
+                onChange={searchChangeHandler}
+                className={{ wrapper: 'col-span-12 max-w-52 justify-self-end' }}
               />
             </div>
-          ) : (
-            <Table<Expense>
-              data={isResponseSuccess(expenses) ? expenses?.data : []}
-              columns={expensesColumns}
-              pageSize={tableFilterState.pageSize}
-              page={isResponseSuccess(expenses) ? expenses?.meta?.page : 0}
-              totalItems={
-                isResponseSuccess(expenses) ? expenses?.meta?.total_results : 0
-              }
-              onPageChange={setPage}
-              onPageSizeChange={setPageSize}
-              isLoading={isLoading}
-              sorting={sorting}
-              setSorting={setSorting}
-              rowSelection={rowSelection}
-              setRowSelection={setRowSelection}
-              enableRowSelection={tableEnableRowSelectionHandler}
-              className={{
-                containerClassName: cn('p-3 mb-0'),
-                headerColumnClassName: 'text-nowrap',
-              }}
-            />
-          )}
+          </div>
         </div>
+
+        <Table<Expense>
+          data={isResponseSuccess(expenses) ? expenses?.data : []}
+          columns={expensesColumns}
+          pageSize={tableFilterState.pageSize}
+          page={isResponseSuccess(expenses) ? expenses?.meta?.page : 0}
+          totalItems={
+            isResponseSuccess(expenses) ? expenses?.meta?.total_results : 0
+          }
+          onPageChange={setPage}
+          isLoading={isLoading}
+          sorting={sorting}
+          setSorting={setSorting}
+          rowSelection={rowSelection}
+          setRowSelection={setRowSelection}
+          enableRowSelection={tableEnableRowSelectionHandler}
+          className={{
+            containerClassName: cn({
+              'mb-20':
+                isResponseSuccess(expenses) && expenses?.data?.length === 0,
+            }),
+            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+            tableClassName: 'font-inter w-full table-auto min-h-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+            bodyRowClassName: 'border-b border-b-gray-200',
+            bodyColumnClassName:
+              'px-6 py-3 last:flex last:flex-row last:justify-end',
+          }}
+        />
       </div>
 
       <ConfirmationModal
@@ -803,12 +831,6 @@ const ExpensesTable = () => {
           onClick: confirmationModalRejectClickHandler,
         }}
       />
-
-      <ExpensesFilterModal
-        ref={filterModal.ref}
-        onSubmit={handleFilterSubmit}
-        onReset={handleFilterReset}
-      />
     </>
   );
 };

src/components/pages/expense/filter/ExpensesFilter.ts

@@ -1,28 +0,0 @@
-import * as yup from 'yup';
-
-export type ExpensesFilterType = {
-  transaction_date: string | null;
-  realization_date: string | null;
-  location_id: string | null;
-  vendor_id: string | null;
-};
-
-export const ExpensesFilterSchema = yup.object({
-  transaction_date: yup.string().nullable(),
-  realization_date: yup
-    .string()
-    .nullable()
-    .test(
-      'is-greater-or-equal-transaction',
-      'Tanggal realisasi tidak boleh sebelum tanggal transaksi',
-      function (value) {
-        const { transaction_date } = this.parent;
-        if (!transaction_date || !value) return true;
-        return new Date(value) >= new Date(transaction_date);
-      }
-    ),
-  location_id: yup.string().nullable(),
-  vendor_id: yup.string().nullable(),
-});
-
-export type ExpensesFilterValues = yup.InferType<typeof ExpensesFilterSchema>;

src/components/pages/expense/filter/ExpensesFilterModal.tsx

@@ -1,209 +0,0 @@
-'use client';
-
-import { RefObject } from 'react';
-import { useFormik } from 'formik';
-
-import { Icon } from '@iconify/react';
-import Modal from '@/components/Modal';
-import Button from '@/components/Button';
-import DateInput from '@/components/input/DateInput';
-import SelectInput from '@/components/input/SelectInput';
-
-import { OptionType, useSelect } from '@/components/input/SelectInput';
-import { LocationApi, SupplierApi } from '@/services/api/master-data';
-import { Location } from '@/types/api/master-data/location';
-import { Supplier } from '@/types/api/master-data/supplier';
-import {
-  ExpensesFilterSchema,
-  ExpensesFilterValues,
-} from '@/components/pages/expense/filter/ExpensesFilter';
-
-interface ExpensesFilterModalProps {
-  ref: RefObject<HTMLDialogElement | null>;
-  initialValues?: ExpensesFilterValues;
-  onSubmit?: (values: Partial<ExpensesFilterValues>) => void;
-  onReset?: () => void;
-}
-
-const ExpensesFilterModal = ({
-  ref,
-  initialValues,
-  onSubmit,
-  onReset,
-}: ExpensesFilterModalProps) => {
-  const closeModalHandler = () => {
-    ref.current?.close();
-  };
-
-  const {
-    setInputValue: setLocationInputValue,
-    options: locationOptions,
-    isLoadingOptions: isLoadingLocationOptions,
-  } = useSelect<Location>(LocationApi.basePath, 'id', 'name');
-
-  const {
-    setInputValue: setVendorInputValue,
-    options: vendorOptions,
-    isLoadingOptions: isLoadingVendorOptions,
-  } = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name');
-
-  const formik = useFormik<ExpensesFilterValues>({
-    initialValues: initialValues || {
-      transaction_date: null,
-      realization_date: null,
-      location_id: null,
-      vendor_id: null,
-    },
-    validationSchema: ExpensesFilterSchema,
-    onSubmit: async (values) => {
-      onSubmit?.(values);
-      closeModalHandler();
-    },
-    onReset: () => {
-      onReset?.();
-      closeModalHandler();
-    },
-  });
-
-  const locationValue = formik.values.location_id
-    ? locationOptions.find(
-        (opt) => String(opt.value) === formik.values.location_id
-      ) || null
-    : null;
-
-  const vendorValue = formik.values.vendor_id
-    ? vendorOptions.find(
-        (opt) => String(opt.value) === formik.values.vendor_id
-      ) || null
-    : null;
-
-  const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
-    const locationId =
-      val && !Array.isArray(val) ? (String(val.value) as string) : null;
-    formik.setFieldValue('location_id', locationId);
-  };
-
-  const vendorChangeHandler = (val: OptionType | OptionType[] | null) => {
-    const vendorId =
-      val && !Array.isArray(val) ? (String(val.value) as string) : null;
-    formik.setFieldValue('vendor_id', vendorId);
-  };
-
-  return (
-    <Modal
-      ref={ref}
-      className={{
-        modalBox: 'p-0 rounded-xl xl:max-w-4/12 max-w-sm',
-      }}
-    >
-      <form
-        onSubmit={formik.handleSubmit}
-        onReset={formik.handleReset}
-        className='w-full flex flex-col'
-      >
-        {/* Modal Header */}
-        <div className='p-4 flex items-center justify-between gap-2 border-b border-base-content/10'>
-          <div className='flex items-center gap-2 text-primary'>
-            <Icon icon='heroicons:funnel' width={20} height={20} />
-            <h3 className='text-sm font-medium'>Filter Data</h3>
-          </div>
-
-          <Button
-            type='button'
-            variant='ghost'
-            color='none'
-            onClick={closeModalHandler}
-            className='p-0 text-base-content/50 hover:text-base-content'
-          >
-            <Icon icon='heroicons:x-mark' width={20} height={20} />
-          </Button>
-        </div>
-
-        {/* Modal Body */}
-        <div className='p-4 flex flex-col gap-1.5'>
-          <div className='flex flex-col'>
-            <span className='py-2 text-xs font-semibold'>Tanggal</span>
-            <div className='flex flex-row items-center gap-1.5'>
-              <DateInput
-                name='transaction_date'
-                placeholder='Tanggal Transaksi'
-                value={formik.values.transaction_date || ''}
-                onChange={formik.handleChange}
-                onBlur={formik.handleBlur}
-                isError={
-                  formik.touched.transaction_date &&
-                  !!formik.errors.transaction_date
-                }
-              />
-              <hr className='w-full max-w-3 h-px border-base-content/10' />
-              <DateInput
-                name='realization_date'
-                placeholder='Tanggal Realisasi'
-                value={formik.values.realization_date || ''}
-                onChange={formik.handleChange}
-                onBlur={formik.handleBlur}
-                isError={
-                  formik.touched.realization_date &&
-                  !!formik.errors.realization_date
-                }
-              />
-            </div>
-            {formik.touched.realization_date &&
-              formik.errors.realization_date && (
-                <span className='text-xs text-error'>
-                  {formik.errors.realization_date}
-                </span>
-              )}
-          </div>
-
-          <SelectInput
-            label='Lokasi'
-            placeholder='Pilih Lokasi'
-            options={locationOptions}
-            value={locationValue}
-            onChange={locationChangeHandler}
-            onInputChange={setLocationInputValue}
-            isLoading={isLoadingLocationOptions}
-            isClearable
-            isSearchable={true}
-            className={{ wrapper: 'w-full' }}
-          />
-
-          <SelectInput
-            label='Vendor'
-            placeholder='Pilih Vendor'
-            options={vendorOptions}
-            value={vendorValue}
-            onChange={vendorChangeHandler}
-            onInputChange={setVendorInputValue}
-            isLoading={isLoadingVendorOptions}
-            isClearable
-            isSearchable={true}
-            className={{ wrapper: 'w-full' }}
-          />
-        </div>
-
-        {/* Modal Footer */}
-        <div className='p-4 flex justify-between gap-4 border-t border-base-content/10 bg-gray-50'>
-          <Button
-            type='reset'
-            variant='soft'
-            className='rounded-lg text-base-content/65 bg-transparent border-none hover:bg-base-content/10 hover:text-base-content/65 transition-colors px-3 py-2'
-          >
-            Reset Filter
-          </Button>
-
-          <Button
-            type='submit'
-            className='min-w-40 text-sm rounded-lg py-3 text-white font-semibold'
-            disabled={!formik.isValid || formik.isSubmitting}
-          >
-            Apply Filter
-          </Button>
-        </div>
-      </form>
-    </Modal>
-  );
-};
-
-export default ExpensesFilterModal;

src/components/pages/expense/form/ExpenseKandangsTable.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import useSWR from 'swr';
 
 import { Icon } from '@iconify/react';
@@ -75,12 +75,6 @@ const ExpenseKandangsTable = ({
         .filter((id): id is number => id !== undefined)
     )
   );
-  const rowSelectionRef = useRef(rowSelection);
-  const prevRowSelectionRef = useRef<Record<string, boolean>>({});
-
-  useEffect(() => {
-    rowSelectionRef.current = rowSelection;
-  }, [rowSelection]);
 
   const kandangsColumns: ColumnDef<Kandang>[] = [
     {
@@ -139,43 +133,33 @@ const ExpenseKandangsTable = ({
 
   useEffect(() => {
     setOpen(isResponseSuccess(kandangs) ? kandangs.data.length > 0 : false);
-  }, [kandangs]);
+  }, [kandangs, isResponseSuccess]);
 
   useEffect(() => {
-    const currentKeys = Object.keys(rowSelection).sort().join(',');
-    const prevKeys = Object.keys(prevRowSelectionRef.current).sort().join(',');
+    if (Object.keys(rowSelection).length !== 0 && isResponseSuccess(kandangs)) {
+      const formattedSelectedKandangs = Object.keys(rowSelection).map(
+        (item) => {
+          const selectedKandang = kandangs.data.find(
+            (kandang) => kandang.id === parseInt(item)
+          );
 
-    if (currentKeys !== prevKeys) {
-      prevRowSelectionRef.current = { ...rowSelection };
+          return {
+            id: parseInt(item),
+            name: selectedKandang?.name ?? 'Kandang tidak ditemukan!',
+          };
+        }
+      );
 
-      if (
-        Object.keys(rowSelection).length !== 0 &&
-        isResponseSuccess(kandangs)
-      ) {
-        const formattedSelectedKandangs = Object.keys(rowSelection).map(
-          (item) => {
-            const selectedKandang = kandangs.data.find(
-              (kandang) => kandang.id === parseInt(item)
-            );
-
-            return {
-              id: parseInt(item),
-              name: selectedKandang?.name ?? 'Kandang tidak ditemukan!',
-            };
-          }
-        );
-
-        onChange(formattedSelectedKandangs);
-      } else if (Object.keys(rowSelection).length === 0) {
-        onChange([]);
-      }
+      onChange(formattedSelectedKandangs);
+    } else {
+      onChange([]);
     }
-  }, [rowSelection, kandangs, onChange]);
+  }, [rowSelection]);
 
   useEffect(() => {
     if (
       selectedKandangs.length === 0 &&
-      Object.keys(rowSelectionRef.current).length !== 0
+      Object.keys(rowSelection).length !== 0
     ) {
       setRowSelection({});
     }

src/components/pages/expense/form/ExpenseRealizationForm.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { useFormik } from 'formik';
 import toast from 'react-hot-toast';
@@ -66,7 +66,7 @@ const ExpenseRealizationForm = ({
       toast.success(createExpenseRes?.message as string);
       router.push('/expense');
     },
-    [router, initialValues?.id]
+    [router]
   );
 
   const updateExpenseHandler = useCallback(
@@ -90,7 +90,6 @@ const ExpenseRealizationForm = ({
 
   const formik = useFormik<ExpenseRealizationFormValues>({
     initialValues: getExpenseRealizationFormInitialValues(initialValues),
-    enableReinitialize: true,
     validationSchema:
       type === 'edit'
         ? UpdateExpenseRealizationFormSchema
@@ -144,6 +143,7 @@ const ExpenseRealizationForm = ({
     },
   });
 
+  const { setValues: formikSetValues } = formik;
   const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
 
   const {
@@ -254,6 +254,10 @@ const ExpenseRealizationForm = ({
     formik.setFieldValue('documents', newRequestDocuments);
   };
 
+  useEffect(() => {
+    formikSetValues(getExpenseRealizationFormInitialValues(initialValues));
+  }, [formikSetValues, getExpenseRealizationFormInitialValues, initialValues]);
+
   return (
     <section className='w-full'>
       <header className='flex flex-col gap-4'>

src/components/pages/expense/form/ExpenseRequestForm.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { useFormik } from 'formik';
 import { toast } from 'react-hot-toast';
@@ -102,7 +102,6 @@ const ExpenseRequestForm = ({
 
   const formik = useFormik<ExpenseRequestFormValues>({
     initialValues: getExpenseFormInitialValues(initialValues),
-    enableReinitialize: true,
     validationSchema:
       type === 'edit'
         ? UpdateExpenseRequestFormSchema
@@ -172,25 +171,23 @@ const ExpenseRequestForm = ({
     },
   });
 
-  const { setFieldValue, setFieldTouched } = formik;
+  const { setValues: formikSetValues } = formik;
 
   const {
     setInputValue: setLocationInputValue,
     options: locationOptions,
     isLoadingOptions: isLoadingLocationOptions,
-    loadMore: loadMoreLocationOptions,
   } = useSelect<Location>(LocationApi.basePath, 'id', 'name');
 
   const {
     setInputValue: setVendorInputValue,
     options: supplierOptions,
     isLoadingOptions: isLoadingVendorOptions,
-    loadMore: loadMoreVendorOptions,
   } = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name');
 
   const categoryChangeHandler = (val: OptionType | OptionType[] | null) => {
-    setFieldTouched('category', true);
-    setFieldValue('category', val);
+    formik.setFieldTouched('category', true);
+    formik.setFieldValue('category', val);
   };
 
   const locationChangeHandler = useCallback(
@@ -198,12 +195,12 @@ const ExpenseRequestForm = ({
       const location = val as OptionType | null;
       const locationId = location ? Number(location.value) : 0;
 
-      setFieldTouched('location', true);
-      setFieldValue('location', location);
-      setFieldTouched('location_id', true);
-      setFieldValue('location_id', locationId);
+      formik.setFieldTouched('location', true);
+      formik.setFieldValue('location', location);
+      formik.setFieldTouched('location_id', true);
+      formik.setFieldValue('location_id', locationId);
     },
-    [setFieldTouched, setFieldValue]
+    []
   );
 
   const kandangsChangeHandler = (
@@ -346,6 +343,10 @@ const ExpenseRequestForm = ({
     formik.handleSubmit(e);
   };
 
+  useEffect(() => {
+    formikSetValues(getExpenseFormInitialValues(initialValues));
+  }, [formikSetValues, getExpenseFormInitialValues, initialValues]);
+
   return (
     <>
       <section className='w-full'>
@@ -416,7 +417,6 @@ const ExpenseRequestForm = ({
               errorMessage={formik.errors.location_id as string}
               isClearable
               className={{ wrapper: 'col-span-12 sm:col-span-4' }}
-              onMenuScrollToBottom={loadMoreLocationOptions}
             />
 
             <DateInput
@@ -460,7 +460,6 @@ const ExpenseRequestForm = ({
               }
               errorMessage={formik.errors.supplier_id as string}
               className={{ wrapper: 'col-span-12' }}
-              onMenuScrollToBottom={loadMoreVendorOptions}
             />
 
             <RequirePermission permissions='lti.expense.document'>

src/components/pages/expense/pdf/ExpensePDF.tsx

@@ -1,154 +1,212 @@
 'use client';
 
-import React from 'react';
-import { Document, Page, StyleSheet, View, Text } from '@react-pdf/renderer';
+import {
+  Document,
+  Image,
+  Link,
+  Page,
+  StyleSheet,
+  Text,
+  View,
+} from '@react-pdf/renderer';
 
 import { Expense } from '@/types/api/expense';
 import { formatCurrency, formatDate, formatNumber } from '@/lib/helper';
-import { PdfTypography } from '@/components/helper/pdf/typography/PdfTypography';
-import { PdfParamBadge } from '@/components/helper/pdf/badge/PdfParamBadge';
-import { PdfPageNumber } from '@/components/helper/pdf/layout/PdfPageNumber';
-import { PdfTable, PdfColumn } from '@/components/helper/pdf/table';
 
 interface ExpensePDFProps {
   expense?: Expense;
 }
 
-const styles = StyleSheet.create({
+const ExpensePDFStyle = StyleSheet.create({
   page: {
-    fontSize: 10,
-    fontFamily: 'Helvetica',
-    padding: 20,
-    backgroundColor: '#FFFFFF',
+    paddingTop: 24,
+    paddingBottom: 64,
+    paddingHorizontal: 32,
   },
-  titleSection: {
-    marginBottom: 10,
-  },
-  parameterContainer: {
+
+  companyInfoHeader: {
+    width: '100%',
+    display: 'flex',
     flexDirection: 'row',
-    flexWrap: 'wrap',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
     marginBottom: 8,
   },
-  infoTableSection: {
-    marginBottom: 12,
+  companyLogo: {
+    width: 64,
+    height: 'auto',
   },
-  infoTableTitle: {
-    fontSize: 10,
+  companyInfoHeaderDate: {
+    paddingTop: 8,
+    fontSize: 12,
+  },
+  companyName: {
+    fontSize: 12,
     fontWeight: 'bold',
-    marginBottom: 6,
-    color: '#333',
+    marginBottom: 4,
   },
-  tableSection: {
-    marginBottom: 12,
-  },
-  tableTitle: {
-    fontSize: 10,
-    fontWeight: 'bold',
-    marginBottom: 6,
-    color: '#333',
-  },
-  emptyText: {
+  companyAddress: {
     fontSize: 8,
-    color: '#666',
-    fontStyle: 'italic',
+    maxWidth: 400,
+    marginBottom: 10,
+  },
+
+  title: {
+    marginTop: 16,
+    fontSize: 16,
+    lineHeight: '150%',
+    textAlign: 'center',
+    fontFamily: 'Times-Roman',
+    fontWeight: 'bold',
+  },
+
+  footer: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 32,
+
+    position: 'absolute',
+    fontSize: 10,
+    bottom: 30,
+    left: 0,
+    right: 0,
+    textAlign: 'center',
+    color: 'grey',
+  },
+
+  // wrapper
+  generalInfoTable: {
+    width: '100%',
+    marginTop: 8,
+    borderWidth: 1,
+    borderColor: '#000000',
+    borderBottomWidth: 0,
+    fontSize: 12,
+  },
+
+  generalInfoTableRow: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: '#000000',
+  },
+
+  // columns
+  generalInfoTableColLabel: {
+    width: '30%',
+    paddingVertical: 6,
+    paddingHorizontal: 8,
+  },
+  generalInfoTableColSeparator: {
+    width: '3%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 6,
+  },
+  generalInfoTableColValue: {
+    width: '67%',
+    paddingVertical: 6,
+    paddingHorizontal: 8,
+  },
+
+  generalInfoTableLabelText: {
+    fontWeight: 'bold',
+  },
+  generalInfoTableValueText: {},
+
+  // expense detail table
+  expenseDetailContainer: {
+    width: '100%',
+    marginTop: 12,
+  },
+  expenseDetailTitle: {
+    fontSize: 14,
+    lineHeight: '150%',
+    fontFamily: 'Times-Roman',
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  kandangExpenseContainer: {
+    width: '100%',
+    marginTop: 8,
+  },
+  kandangExpenseTitle: {
+    fontSize: 14,
+    lineHeight: '150%',
+    fontFamily: 'Times-Roman',
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  kandangExpenseTable: {
+    width: '100%',
+    marginTop: 8,
+    borderWidth: 1,
+    borderColor: '#000000',
+    borderBottomWidth: 0,
+    fontSize: 12,
+  },
+  kandangExpenseTableRow: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: '#000000',
+  },
+  kandangExpenseTableColLabel: {
+    width: '20%',
+    paddingVertical: 6,
+    paddingHorizontal: 8,
+  },
+  kandangExpenseTableColLabelBorderRight: {
+    borderRight: '1px solid #000000',
+  },
+  kandangExpenseTableColNonstock: {
+    width: '20%',
+  },
+  kandangExpenseTableColNote: {
+    width: '40%',
+  },
+  kandangExpenseHeaderLabelText: {
+    fontWeight: 'bold',
+  },
+  kandangExpenseLabelText: {
+    fontSize: 10,
+  },
+  kandangExpenseTableFooterColTotalExpenseCaption: {
+    width: '40%',
+    paddingVertical: 6,
+    paddingHorizontal: 8,
+    textAlign: 'right',
+  },
+  kandangExpenseTableFooterColTotalExpenseValue: {
+    width: '60%',
+    paddingVertical: 6,
+    paddingHorizontal: 8,
+  },
+
+  // utils
+  doubleDivider: {
+    width: '100%',
+    height: 6,
+    borderTop: '2px solid black',
+    borderBottom: '2px solid black',
   },
 });
 
-type ExpenseKandang = Expense['kandangs'][number];
-type PengajuanItem = NonNullable<ExpenseKandang['pengajuans']>[number];
-type RealisasiItem = NonNullable<ExpenseKandang['realisasi']>[number];
-
-const valueText = (v: unknown) => {
-  if (v === null || v === undefined) return '-';
-  if (typeof v === 'number') return formatNumber(v);
-  return String(v);
-};
-
-const getPengajuanColumns = (): PdfColumn<PengajuanItem>[] => [
-  {
-    key: 'no',
-    header: 'No',
-    flex: 0.5,
-    align: 'center',
-    cell: ({ index }) => index + 1,
-  },
-  {
-    key: 'nonstock',
-    header: 'Nonstock',
-    flex: 1.5,
-    cell: ({ row }) => row.nonstock.name,
-  },
-  {
-    key: 'qty',
-    header: 'Kuantitas',
-    flex: 1,
-    align: 'right',
-    cell: ({ row }) => valueText(row.qty),
-  },
-  {
-    key: 'price',
-    header: 'Harga Satuan',
-    flex: 1.2,
-    align: 'right',
-    cell: ({ row }) => formatCurrency(row.price),
-  },
-  {
-    key: 'notes',
-    header: 'Catatan',
-    flex: 1.5,
-    cell: ({ row }) => row.notes || '-',
-  },
-];
-
-const getRealisasiColumns = (): PdfColumn<RealisasiItem>[] => [
-  {
-    key: 'no',
-    header: 'No',
-    flex: 0.5,
-    align: 'center',
-    cell: ({ index }) => index + 1,
-  },
-  {
-    key: 'nonstock',
-    header: 'Nonstock',
-    flex: 1.5,
-    cell: ({ row }) => row.nonstock.name,
-  },
-  {
-    key: 'qty',
-    header: 'Kuantitas',
-    flex: 1,
-    align: 'right',
-    cell: ({ row }) => valueText(row.qty),
-  },
-  {
-    key: 'price',
-    header: 'Harga Satuan',
-    flex: 1.2,
-    align: 'right',
-    cell: ({ row }) => formatCurrency(row.price),
-  },
-  {
-    key: 'notes',
-    header: 'Catatan',
-    flex: 1.5,
-    cell: ({ row }) => row.notes || '-',
-  },
-];
-
-const getInfoTableRows = (expense?: Expense) => {
+const ExpensePDF = ({ expense }: ExpensePDFProps) => {
   const isLatestApprovalRejected =
     expense?.latest_approval?.action === 'REJECTED';
   const isExpenseRealized =
     expense?.latest_approval?.step_number &&
     expense?.latest_approval.step_number >= 5;
+
   const realizationStatus = isExpenseRealized
     ? 'Sudah Realisasi'
     : 'Belum Realisasi';
 
-  return [
-    { label: 'Nomor PO', value: expense?.po_number || '-' },
-    { label: 'Nomor Referensi', value: expense?.reference_number || '-' },
+  const rows = [
+    { label: 'Nomor PO', value: expense?.po_number },
+    { label: 'Nomor Referensi', value: expense?.reference_number },
     {
       label: 'Kategori',
       value:
@@ -156,9 +214,9 @@ const getInfoTableRows = (expense?: Expense) => {
           ? 'Biaya Operasional'
           : expense?.category === 'NON-BOP'
             ? 'Non Biaya Operasional'
-            : '-',
+            : '',
     },
-    { label: 'Lokasi', value: expense?.location?.name || '-' },
+    { label: 'Lokasi', value: expense?.location.name },
     {
       label: 'Kandang',
       value:
@@ -169,7 +227,7 @@ const getInfoTableRows = (expense?: Expense) => {
               .join(', ')
           : '-',
     },
-    { label: 'Vendor', value: expense?.supplier?.name || '-' },
+    { label: 'Vendor', value: expense?.supplier.name },
     {
       label: 'Tanggal Transaksi',
       value: formatDate(expense?.transaction_date, 'DD MMMM YYYY'),
@@ -180,12 +238,12 @@ const getInfoTableRows = (expense?: Expense) => {
         ? formatDate(expense?.realization_date, 'DD MMMM YYYY')
         : '-',
     },
-    { label: 'Nama Pengaju', value: expense?.created_user?.name || '-' },
+    { label: 'Nama Pengaju', value: expense?.created_user.name },
     {
       label: 'Nominal Biaya',
       value: formatCurrency(
-        expense?.latest_approval?.step_number === 5 ||
-          expense?.latest_approval?.step_number === 6
+        expense?.latest_approval.step_number === 5 ||
+          expense?.latest_approval.step_number === 6
           ? (expense?.total_realisasi ?? 0)
           : (expense?.total_pengajuan ?? 0)
       ),
@@ -205,136 +263,401 @@ const getInfoTableRows = (expense?: Expense) => {
       label: 'Status Biaya',
       value: isLatestApprovalRejected
         ? 'Ditolak'
-        : expense?.latest_approval?.step_name || '-',
+        : expense?.latest_approval?.step_name,
     },
   ];
-};
-
-interface InfoRow {
-  label: string;
-  value: string;
-}
-
-const getInfoTableColumns = (): PdfColumn<InfoRow>[] => [
-  {
-    key: 'label',
-    header: 'Field',
-    flex: 1,
-    cell: ({ row }) => row.label,
-  },
-  {
-    key: 'value',
-    header: 'Value',
-    flex: 2,
-    cell: ({ row }) => row.value,
-  },
-];
-
-const ExpensePDF = ({ expense }: ExpensePDFProps) => {
-  const kandangs = expense?.kandangs || [];
-  const infoRows = getInfoTableRows(expense);
 
   return (
     <Document>
-      <Page style={styles.page} size='A4'>
-        {/* Title Section */}
-        <View style={styles.titleSection}>
-          <PdfTypography size='h1' variant='primary'>
-            Laporan{' '}
-            {expense?.category === 'BOP'
-              ? 'Biaya Operasional'
-              : 'Non-Biaya Operasional'}
-          </PdfTypography>
-          <PdfTypography size='h2'>{expense?.po_number || '-'}</PdfTypography>
-          <View style={styles.parameterContainer}>
-            <PdfParamBadge>
-              Tanggal: {formatDate(Date.now(), 'DD MMMM YYYY')}
-            </PdfParamBadge>
-            <PdfParamBadge>
-              Dicetak: {formatDate(new Date(), 'DD MMM YYYY HH:mm')}
-            </PdfParamBadge>
+      <Page style={ExpensePDFStyle.page}>
+        <View>
+          <View style={ExpensePDFStyle.companyInfoHeader}>
+            <Image
+              style={ExpensePDFStyle.companyLogo}
+              src='/assets/img/lti-logo.png'
+            />
+
+            <Text style={ExpensePDFStyle.companyInfoHeaderDate}>
+              {formatDate(Date.now(), 'DD MMMM YYYY')}
+            </Text>
+          </View>
+
+          <View>
+            <Text style={ExpensePDFStyle.companyName}>
+              PT LUMBUNG TELUR INDONESIA
+            </Text>
+            <Text style={ExpensePDFStyle.companyAddress}>
+              SOHO Building Lt.3 (Paris Van Java), Jalan Karang Tinggal, Kel.
+              Cipedes, Kec. Sukajadi, Kota Bandung 40162
+            </Text>
+
+            <View style={ExpensePDFStyle.doubleDivider} />
           </View>
         </View>
 
-        {/* Info Table Section */}
-        <View style={styles.infoTableSection}>
-          <Text style={styles.infoTableTitle}>Informasi Biaya</Text>
-          <PdfTable columns={getInfoTableColumns()} data={infoRows} />
+        <Text style={ExpensePDFStyle.title}>
+          Laporan{' '}
+          {expense?.category === 'BOP'
+            ? 'Biaya Operasional'
+            : 'Non-Biaya Operasional'}{' '}
+          {expense?.po_number}
+        </Text>
+
+        {/* General info table */}
+        <View style={ExpensePDFStyle.generalInfoTable}>
+          {rows.map((row) => (
+            <View style={ExpensePDFStyle.generalInfoTableRow} key={row.label}>
+              <View style={ExpensePDFStyle.generalInfoTableColLabel}>
+                <Text style={ExpensePDFStyle.generalInfoTableLabelText}>
+                  {row.label}
+                </Text>
+              </View>
+              <View style={ExpensePDFStyle.generalInfoTableColSeparator}>
+                <Text>:</Text>
+              </View>
+              <View style={ExpensePDFStyle.generalInfoTableColValue}>
+                <Text style={ExpensePDFStyle.generalInfoTableValueText}>
+                  {row.value}
+                </Text>
+              </View>
+            </View>
+          ))}
         </View>
 
-        {/* Rincian Pengajuan Section */}
-        <View style={styles.tableSection}>
-          <Text style={styles.tableTitle}>1. Rincian Pengajuan Biaya</Text>
-          {kandangs.length === 0 ? (
-            <Text style={styles.emptyText}>Tidak ada data pengajuan.</Text>
-          ) : (
-            kandangs.map((kandang, idx) => {
-              const pengajuans = kandang.pengajuans || [];
-              const kandangName =
-                kandang.kandang_id && kandang.name
-                  ? kandang.name
-                  : expense?.location?.name || 'Umum';
+        {/* Detail expense request */}
+        <View
+          minPresenceAhead={80}
+          style={ExpensePDFStyle.expenseDetailContainer}
+        >
+          <Text style={ExpensePDFStyle.expenseDetailTitle}>
+            Rincian Pengajuan Biaya Operasional
+          </Text>
 
-              return (
-                <View key={idx} style={{ marginBottom: 12 }}>
-                  <PdfTypography size='h3' style={{ paddingLeft: 12 }}>
-                    {idx + 1}) {kandangName}
-                  </PdfTypography>
-                  {pengajuans.length > 0 ? (
-                    <PdfTable
-                      columns={getPengajuanColumns()}
-                      data={pengajuans}
-                      showFooter={true}
-                      footerLabel='Total'
-                    />
-                  ) : (
-                    <Text style={styles.emptyText}>
-                      Tidak ada item pengajuan untuk kandang ini.
-                    </Text>
-                  )}
+          {expense?.kandangs.map((kandangExpense, kandangExpenseIdx) => {
+            let expenseRequestTotal = 0;
+
+            kandangExpense.pengajuans?.forEach(
+              (item) => (expenseRequestTotal += item.qty * item.price)
+            );
+
+            return (
+              <View
+                key={kandangExpenseIdx}
+                style={ExpensePDFStyle.kandangExpenseContainer}
+              >
+                <Text style={ExpensePDFStyle.kandangExpenseTitle}>
+                  {kandangExpense.kandang_id && kandangExpense.name
+                    ? `Biaya ${kandangExpense.name}`
+                    : `Biaya ${expense?.location.name || 'Umum'}`}
+                </Text>
+
+                <View style={ExpensePDFStyle.kandangExpenseTable}>
+                  <View style={[ExpensePDFStyle.kandangExpenseTableRow]}>
+                    <View
+                      style={[
+                        ExpensePDFStyle.kandangExpenseTableColLabel,
+                        ExpensePDFStyle.kandangExpenseTableColLabelBorderRight,
+                        ExpensePDFStyle.kandangExpenseTableColNonstock,
+                      ]}
+                    >
+                      <Text
+                        style={ExpensePDFStyle.kandangExpenseHeaderLabelText}
+                      >
+                        Nonstock
+                      </Text>
+                    </View>
+                    <View
+                      style={[
+                        ExpensePDFStyle.kandangExpenseTableColLabel,
+                        ExpensePDFStyle.kandangExpenseTableColLabelBorderRight,
+                      ]}
+                    >
+                      <Text
+                        style={ExpensePDFStyle.kandangExpenseHeaderLabelText}
+                      >
+                        Kuantitas
+                      </Text>
+                    </View>
+                    <View
+                      style={[
+                        ExpensePDFStyle.kandangExpenseTableColLabel,
+                        ExpensePDFStyle.kandangExpenseTableColLabelBorderRight,
+                      ]}
+                    >
+                      <Text
+                        style={ExpensePDFStyle.kandangExpenseHeaderLabelText}
+                      >
+                        Harga Satuan
+                      </Text>
+                    </View>
+                    <View
+                      style={[
+                        ExpensePDFStyle.kandangExpenseTableColLabel,
+                        ExpensePDFStyle.kandangExpenseTableColNote,
+                      ]}
+                    >
+                      <Text
+                        style={ExpensePDFStyle.kandangExpenseHeaderLabelText}
+                      >
+                        Catatan
+                      </Text>
+                    </View>
+                  </View>
+
+                  {kandangExpense.pengajuans?.map((pengajuan, pengajuanIdx) => (
+                    <View
+                      key={pengajuanIdx}
+                      style={ExpensePDFStyle.kandangExpenseTableRow}
+                    >
+                      <View
+                        style={[
+                          ExpensePDFStyle.kandangExpenseTableColLabel,
+                          ExpensePDFStyle.kandangExpenseTableColLabelBorderRight,
+                          ExpensePDFStyle.kandangExpenseTableColNonstock,
+                        ]}
+                      >
+                        <Text style={ExpensePDFStyle.kandangExpenseLabelText}>
+                          {pengajuan.nonstock.name}
+                        </Text>
+                      </View>
+                      <View
+                        style={[
+                          ExpensePDFStyle.kandangExpenseTableColLabel,
+                          ExpensePDFStyle.kandangExpenseTableColLabelBorderRight,
+                        ]}
+                      >
+                        <Text style={ExpensePDFStyle.kandangExpenseLabelText}>
+                          {formatNumber(pengajuan.qty)}
+                        </Text>
+                      </View>
+                      <View
+                        style={[
+                          ExpensePDFStyle.kandangExpenseTableColLabel,
+                          ExpensePDFStyle.kandangExpenseTableColLabelBorderRight,
+                        ]}
+                      >
+                        <Text style={ExpensePDFStyle.kandangExpenseLabelText}>
+                          {formatCurrency(pengajuan.price)}
+                        </Text>
+                      </View>
+                      <View
+                        style={[
+                          ExpensePDFStyle.kandangExpenseTableColLabel,
+                          ExpensePDFStyle.kandangExpenseTableColNote,
+                        ]}
+                      >
+                        <Text style={ExpensePDFStyle.kandangExpenseLabelText}>
+                          {pengajuan.notes}
+                        </Text>
+                      </View>
+                    </View>
+                  ))}
+
+                  <View style={[ExpensePDFStyle.kandangExpenseTableRow]}>
+                    <View
+                      style={[
+                        ExpensePDFStyle.kandangExpenseTableFooterColTotalExpenseCaption,
+                        ExpensePDFStyle.kandangExpenseTableColLabelBorderRight,
+                      ]}
+                    >
+                      <Text
+                        style={ExpensePDFStyle.kandangExpenseHeaderLabelText}
+                      >
+                        Total Biaya Keseluruhan
+                      </Text>
+                    </View>
+                    <View
+                      style={[
+                        ExpensePDFStyle.kandangExpenseTableFooterColTotalExpenseValue,
+                      ]}
+                    >
+                      <Text
+                        style={ExpensePDFStyle.kandangExpenseHeaderLabelText}
+                      >
+                        {formatCurrency(expenseRequestTotal)}
+                      </Text>
+                    </View>
+                  </View>
                 </View>
-              );
-            })
-          )}
+              </View>
+            );
+          })}
         </View>
 
-        {/* Rincian Realisasi Section */}
-        <View style={styles.tableSection}>
-          <Text style={styles.tableTitle}>2. Rincian Realisasi Biaya</Text>
-          {kandangs.length === 0 ? (
-            <Text style={styles.emptyText}>Tidak ada data realisasi.</Text>
-          ) : (
-            kandangs.map((kandang, idx) => {
-              const realisasi = kandang.realisasi || [];
-              const kandangName =
-                kandang.kandang_id && kandang.name
-                  ? kandang.name
-                  : expense?.location?.name || 'Umum';
+        {/* Detail expense realization */}
+        <View
+          minPresenceAhead={80}
+          style={ExpensePDFStyle.expenseDetailContainer}
+        >
+          <Text style={ExpensePDFStyle.expenseDetailTitle}>
+            Rincian Realisasi Biaya Operasional
+          </Text>
 
-              return (
-                <View key={idx} style={{ marginBottom: 12 }}>
-                  <PdfTypography size='h3' style={{ paddingLeft: 12 }}>
-                    {idx + 1}) {kandangName}
-                  </PdfTypography>
-                  {realisasi.length > 0 ? (
-                    <PdfTable
-                      columns={getRealisasiColumns()}
-                      data={realisasi}
-                      showFooter={true}
-                      footerLabel='Total'
-                    />
-                  ) : (
-                    <Text style={styles.emptyText}>
-                      Tidak ada item realisasi untuk kandang ini.
-                    </Text>
-                  )}
+          {expense?.kandangs.map((kandangExpense, kandangExpenseIdx) => {
+            let expenseRealizationTotal = 0;
+
+            kandangExpense.realisasi?.forEach(
+              (item) => (expenseRealizationTotal += item.qty * item.price)
+            );
+
+            return (
+              <View
+                key={kandangExpenseIdx}
+                style={ExpensePDFStyle.kandangExpenseContainer}
+              >
+                <Text style={ExpensePDFStyle.kandangExpenseTitle}>
+                  {kandangExpense.kandang_id && kandangExpense.name
+                    ? `Biaya ${kandangExpense.name}`
+                    : `Biaya ${expense?.location.name || 'Umum'}`}
+                </Text>
+
+                <View style={ExpensePDFStyle.kandangExpenseTable}>
+                  <View style={[ExpensePDFStyle.kandangExpenseTableRow]}>
+                    <View
+                      style={[
+                        ExpensePDFStyle.kandangExpenseTableColLabel,
+                        ExpensePDFStyle.kandangExpenseTableColLabelBorderRight,
+                        ExpensePDFStyle.kandangExpenseTableColNonstock,
+                      ]}
+                    >
+                      <Text
+                        style={ExpensePDFStyle.kandangExpenseHeaderLabelText}
+                      >
+                        Nonstock
+                      </Text>
+                    </View>
+                    <View
+                      style={[
+                        ExpensePDFStyle.kandangExpenseTableColLabel,
+                        ExpensePDFStyle.kandangExpenseTableColLabelBorderRight,
+                      ]}
+                    >
+                      <Text
+                        style={ExpensePDFStyle.kandangExpenseHeaderLabelText}
+                      >
+                        Kuantitas
+                      </Text>
+                    </View>
+                    <View
+                      style={[
+                        ExpensePDFStyle.kandangExpenseTableColLabel,
+                        ExpensePDFStyle.kandangExpenseTableColLabelBorderRight,
+                      ]}
+                    >
+                      <Text
+                        style={ExpensePDFStyle.kandangExpenseHeaderLabelText}
+                      >
+                        Harga Satuan
+                      </Text>
+                    </View>
+                    <View
+                      style={[
+                        ExpensePDFStyle.kandangExpenseTableColLabel,
+                        ExpensePDFStyle.kandangExpenseTableColNote,
+                      ]}
+                    >
+                      <Text
+                        style={ExpensePDFStyle.kandangExpenseHeaderLabelText}
+                      >
+                        Catatan
+                      </Text>
+                    </View>
+                  </View>
+
+                  {kandangExpense.realisasi?.map((realisasi, realisasiIdx) => (
+                    <View
+                      key={realisasiIdx}
+                      style={ExpensePDFStyle.kandangExpenseTableRow}
+                    >
+                      <View
+                        style={[
+                          ExpensePDFStyle.kandangExpenseTableColLabel,
+                          ExpensePDFStyle.kandangExpenseTableColLabelBorderRight,
+                          ExpensePDFStyle.kandangExpenseTableColNonstock,
+                        ]}
+                      >
+                        <Text style={ExpensePDFStyle.kandangExpenseLabelText}>
+                          {realisasi.nonstock.name}
+                        </Text>
+                      </View>
+                      <View
+                        style={[
+                          ExpensePDFStyle.kandangExpenseTableColLabel,
+                          ExpensePDFStyle.kandangExpenseTableColLabelBorderRight,
+                        ]}
+                      >
+                        <Text style={ExpensePDFStyle.kandangExpenseLabelText}>
+                          {formatNumber(realisasi.qty)}
+                        </Text>
+                      </View>
+                      <View
+                        style={[
+                          ExpensePDFStyle.kandangExpenseTableColLabel,
+                          ExpensePDFStyle.kandangExpenseTableColLabelBorderRight,
+                        ]}
+                      >
+                        <Text style={ExpensePDFStyle.kandangExpenseLabelText}>
+                          {formatCurrency(realisasi.price)}
+                        </Text>
+                      </View>
+                      <View
+                        style={[
+                          ExpensePDFStyle.kandangExpenseTableColLabel,
+                          ExpensePDFStyle.kandangExpenseTableColNote,
+                        ]}
+                      >
+                        <Text style={ExpensePDFStyle.kandangExpenseLabelText}>
+                          {realisasi.notes}
+                        </Text>
+                      </View>
+                    </View>
+                  ))}
+
+                  <View style={[ExpensePDFStyle.kandangExpenseTableRow]}>
+                    <View
+                      style={[
+                        ExpensePDFStyle.kandangExpenseTableFooterColTotalExpenseCaption,
+                        ExpensePDFStyle.kandangExpenseTableColLabelBorderRight,
+                      ]}
+                    >
+                      <Text
+                        style={ExpensePDFStyle.kandangExpenseHeaderLabelText}
+                      >
+                        Total Biaya Keseluruhan
+                      </Text>
+                    </View>
+                    <View
+                      style={[
+                        ExpensePDFStyle.kandangExpenseTableFooterColTotalExpenseValue,
+                      ]}
+                    >
+                      <Text
+                        style={ExpensePDFStyle.kandangExpenseHeaderLabelText}
+                      >
+                        {formatCurrency(expenseRealizationTotal)}
+                      </Text>
+                    </View>
+                  </View>
                 </View>
-              );
-            })
-          )}
+              </View>
+            );
+          })}
         </View>
 
-        <PdfPageNumber />
+        <View style={ExpensePDFStyle.footer} fixed>
+          <Link
+            src={`${process.env.NEXT_PUBLIC_LTI_URL}expense/detail?expenseId=${expense?.id}`}
+          >
+            {expense?.po_number}
+          </Link>
+
+          <Text
+            render={({ pageNumber, totalPages }) =>
+              `${pageNumber} / ${totalPages}`
+            }
+            fixed
+          />
+        </View>
       </Page>
     </Document>
   );

src/components/pages/expense/skeleton/ExpenseTableSkeleton.tsx

@@ -1,37 +0,0 @@
-import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
-import Table from '@/components/Table';
-import { Expense } from '@/types/api/expense';
-import { ColumnDef } from '@tanstack/react-table';
-
-const ExpenseTableSkeleton = ({
-  columns,
-  icon,
-  title = 'No Data Available',
-  subtitle = 'There is no expense data displayed. Enter expense data to get started.',
-}: {
-  columns: ColumnDef<Expense>[];
-  icon: React.ReactNode;
-  title?: string;
-  subtitle?: string;
-}) => {
-  return (
-    <div className='relative size-full'>
-      <Table
-        data={[]}
-        columns={columns}
-        isLoading={true}
-        className={{
-          skeletonCellClassName: 'animate-none w-full h-5 bg-base-content/4',
-          headerColumnClassName: 'whitespace-nowrap',
-          containerClassName: 'mb-0 overflow-hidden',
-          tableWrapperClassName: 'overflow-hidden',
-        }}
-      />
-      <div className='absolute inset-0 flex items-center justify-center'>
-        <DataStateSkeleton icon={icon} title={title} description={subtitle} />
-      </div>
-    </div>
-  );
-};
-
-export default ExpenseTableSkeleton;

src/components/pages/finance/FinanceDetail.tsx

@@ -2,6 +2,7 @@ import Button from '@/components/Button';
 import Card from '@/components/Card';
 import { FormHeader } from '@/components/helper/form/FormHeader';
 import RequirePermission from '@/components/helper/RequirePermission';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import Table from '@/components/Table';
@@ -25,13 +26,11 @@ const FinanceDetail = ({ finance }: { finance: Finance }) => {
   const informasiUmum = [
     {
       label: 'ID',
-      value: finance.payment_code || '-',
+      value: finance.payment_code,
     },
     {
       label: 'Jenis Transaksi',
-      value: formatTitleCase(
-        (finance.transaction_type || '').split('_').join(' ')
-      ),
+      value: formatTitleCase(finance.transaction_type.split('_').join(' ')),
     },
     {
       label: 'Pihak',
@@ -39,13 +38,11 @@ const FinanceDetail = ({ finance }: { finance: Finance }) => {
     },
     {
       label: 'Tanggal',
-      value: finance.payment_date
-        ? formatDate(finance.payment_date, 'DD MMM yyyy')
-        : '-',
+      value: formatDate(finance.payment_date, 'DD MMM yyyy'),
     },
     {
       label: 'Metode Pembayaran',
-      value: finance.payment_method || '-',
+      value: finance.payment_method,
     },
     {
       label: 'Catatan',
@@ -64,22 +61,22 @@ const FinanceDetail = ({ finance }: { finance: Finance }) => {
         : '-',
     },
     {
-      label: `Rekening ${formatTitleCase(finance.party?.type || '')}`,
-      value: finance.party?.account_number || '-',
+      label: `Rekening ${formatTitleCase(finance.party?.type)}`,
+      value: finance.party?.account_number,
     },
     {
       label: 'Nominal',
       value: formatCurrency(
         finance.transaction_type === 'INJECTION'
-          ? finance.nominal || 0
-          : Math.abs(finance.nominal || 0)
+          ? finance.nominal
+          : Math.abs(finance.nominal)
       ),
     },
   ].filter((item) => {
     // Hide party account number row if transaction type is INJECTION
     if (
-      FINANCE_INJECTION_STATUS.includes(finance.transaction_type || '') &&
-      item.label === `Rekening ${formatTitleCase(finance.party?.type || '')}`
+      FINANCE_INJECTION_STATUS.includes(finance.transaction_type) &&
+      item.label === `Rekening ${formatTitleCase(finance.party?.type)}`
     ) {
       return false;
     }
@@ -153,7 +150,7 @@ const FinanceDetail = ({ finance }: { finance: Finance }) => {
       </Card>
 
       <div className='flex flex-row gap-2 justify-end'>
-        {FINANCE_TRANSACTION_STATUS.includes(finance.transaction_type || '') &&
+        {FINANCE_TRANSACTION_STATUS.includes(finance.transaction_type) &&
           finance.party?.type !== 'SUPPLIER' && (
             <RequirePermission permissions='lti.finance.payments.update'>
               <Button
@@ -166,9 +163,7 @@ const FinanceDetail = ({ finance }: { finance: Finance }) => {
               </Button>
             </RequirePermission>
           )}
-        {FINANCE_INITIAL_BALANCE_STATUS.includes(
-          finance.transaction_type || ''
-        ) && (
+        {FINANCE_INITIAL_BALANCE_STATUS.includes(finance.transaction_type) && (
           <RequirePermission permissions='lti.finance.initial_balances.update'>
             <Button
               color='warning'
@@ -180,7 +175,7 @@ const FinanceDetail = ({ finance }: { finance: Finance }) => {
             </Button>
           </RequirePermission>
         )}
-        {FINANCE_INJECTION_STATUS.includes(finance.transaction_type || '') && (
+        {FINANCE_INJECTION_STATUS.includes(finance.transaction_type) && (
           <RequirePermission permissions='lti.finance.injections.update'>
             <Button
               color='warning'
@@ -206,7 +201,7 @@ const FinanceDetail = ({ finance }: { finance: Finance }) => {
       <ConfirmationModal
         ref={deleteModal.ref}
         type='error'
-        text={`Apakah anda yakin ingin menghapus data Finance ini (${finance?.payment_code || ''})?`}
+        text={`Apakah anda yakin ingin menghapus data Finance ini (${finance?.payment_code})?`}
         secondaryButton={{
           text: 'Tidak',
         }}

src/components/pages/finance/FinanceTable.tsx

@@ -1,19 +1,10 @@
-'use client';
-
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { CellContext, ColumnDef } from '@tanstack/react-table';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { CellContext } from '@tanstack/react-table';
 import useSWR from 'swr';
-import { Icon } from '@iconify/react';
 import { useFormik } from 'formik';
-import { cn, formatCurrency, formatDate, formatTitleCase } from '@/lib/helper';
 
 import Button from '@/components/Button';
+import Card from '@/components/Card';
 import DateInput from '@/components/input/DateInput';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import SelectInput, {
@@ -21,6 +12,7 @@ import SelectInput, {
   useSelect,
 } from '@/components/input/SelectInput';
 import Table from '@/components/Table';
+import { formatCurrency, formatDate, formatTitleCase } from '@/lib/helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { Finance } from '@/types/api/finance/finance';
 import {
@@ -33,145 +25,115 @@ import { FinanceApi } from '@/services/api/finance';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { BankApi, CustomerApi, SupplierApi } from '@/services/api/master-data';
 import { Bank } from '@/types/api/master-data/bank';
-import Modal, { useModal } from '@/components/Modal';
-import PopoverButton from '@/components/popover/PopoverButton';
-import PopoverContent from '@/components/popover/PopoverContent';
+import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import toast from 'react-hot-toast';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import RequirePermission from '@/components/helper/RequirePermission';
+import { Icon } from '@iconify/react';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import { useUiStore } from '@/stores/ui/ui.store';
 import {
   FinanceTableFilterSchema,
   FinanceTableFilterValues,
-} from '@/components/pages/finance/filter/FinanceFilter';
-import FinanceTableSkeleton from '@/components/pages/finance/skeleton/FinanceTableSkeleton';
+} from './FinanceTableFilter.schema';
 
 const RowOptionsMenu = ({
-  popoverPosition = 'bottom',
+  type = 'dropdown',
   props,
   deleteClickHandler,
 }: {
-  popoverPosition: 'bottom' | 'top';
+  type: 'dropdown' | 'collapse';
   props: CellContext<Finance, unknown>;
   deleteClickHandler: () => void;
 }) => {
-  const popoverId = `finance#${props.row.original.id}`;
-  const popoverAnchorName = `--anchor-finance#${props.row.original.id}`;
-
-  const closePopover = () => {
-    const popover = document.getElementById(popoverId) as
-      | HTMLDivElement
-      | undefined;
-    popover?.hidePopover?.();
-  };
-
   return (
-    <div className='relative'>
-      <PopoverButton
-        tabIndex={0}
-        variant='ghost'
-        color='none'
-        popoverTarget={popoverId}
-        anchorName={popoverAnchorName}
+    <RowOptionsMenuWrapper type={type}>
+      <RequirePermission
+        permissions={[
+          'lti.finance.transactions.detail',
+          'lti.finance.initial_balances.detail',
+          'lti.finance.injections.detail',
+          'lti.finance.payments.detail',
+        ]}
       >
-        <Icon icon='material-symbols:more-vert' width={16} height={16} />
-      </PopoverButton>
+        <Button
+          href={`/finance/detail?financeId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
+          className='justify-start text-sm'
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+      </RequirePermission>
 
-      <PopoverContent
-        id={popoverId}
-        anchorName={popoverAnchorName}
-        position={popoverPosition === 'bottom' ? 'bottom-start' : 'left'}
-        className='w-full max-w-40 rounded-xl border border-base-content/5 shadow-sm'
-      >
-        <div className='flex flex-col bg-base-100 rounded-xl'>
-          <RequirePermission
-            permissions={[
-              'lti.finance.transactions.detail',
-              'lti.finance.initial_balances.detail',
-              'lti.finance.injections.detail',
-              'lti.finance.payments.detail',
-            ]}
+      {FINANCE_TRANSACTION_STATUS.includes(
+        props.row.original.transaction_type
+      ) && (
+        <RequirePermission permissions='lti.finance.payments.update'>
+          <Button
+            href={`/finance/detail/edit?financeId=${props.row.original.id}`}
+            variant='ghost'
+            color='warning'
+            className='justify-start text-sm'
           >
-            <Button
-              href={`/finance/detail?financeId=${props.row.original.id}`}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full'
-              onClick={closePopover}
-            >
-              <Icon icon='heroicons:eye' width={20} height={20} />
-              Detail
-            </Button>
-          </RequirePermission>
+            <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+            Edit
+          </Button>
+        </RequirePermission>
+      )}
 
-          {FINANCE_TRANSACTION_STATUS.includes(
-            props.row.original.transaction_type
-          ) && (
-            <RequirePermission permissions='lti.finance.payments.update'>
-              <Button
-                href={`/finance/detail/edit?financeId=${props.row.original.id}`}
-                variant='ghost'
-                color='none'
-                className='p-3 justify-start text-sm font-semibold w-full'
-                onClick={closePopover}
-              >
-                <Icon icon='mdi:pencil-outline' width={20} height={20} />
-                Edit
-              </Button>
-            </RequirePermission>
-          )}
+      {FINANCE_INITIAL_BALANCE_STATUS.includes(
+        props.row.original.transaction_type
+      ) && (
+        <RequirePermission permissions='lti.finance.initial_balances.update'>
+          <Button
+            href={`/finance/detail/edit/initial-balance?financeId=${props.row.original.id}`}
+            variant='ghost'
+            color='warning'
+            className='justify-start text-sm'
+          >
+            <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+            Edit
+          </Button>
+        </RequirePermission>
+      )}
 
-          {FINANCE_INITIAL_BALANCE_STATUS.includes(
-            props.row.original.transaction_type
-          ) && (
-            <RequirePermission permissions='lti.finance.initial_balances.update'>
-              <Button
-                href={`/finance/detail/edit/initial-balance?financeId=${props.row.original.id}`}
-                variant='ghost'
-                color='none'
-                className='p-3 justify-start text-sm font-semibold w-full'
-                onClick={closePopover}
-              >
-                <Icon icon='mdi:pencil-outline' width={20} height={20} />
-                Edit
-              </Button>
-            </RequirePermission>
-          )}
+      {FINANCE_INJECTION_STATUS.includes(
+        props.row.original.transaction_type
+      ) && (
+        <RequirePermission permissions='lti.finance.injections.update'>
+          <Button
+            href={`/finance/detail/edit/injection?financeId=${props.row.original.id}`}
+            variant='ghost'
+            color='warning'
+            className='justify-start text-sm'
+          >
+            <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+            Edit
+          </Button>
+        </RequirePermission>
+      )}
 
-          {FINANCE_INJECTION_STATUS.includes(
-            props.row.original.transaction_type
-          ) && (
-            <RequirePermission permissions='lti.finance.injections.update'>
-              <Button
-                href={`/finance/detail/edit/injection?financeId=${props.row.original.id}`}
-                variant='ghost'
-                color='none'
-                className='p-3 justify-start text-sm font-semibold w-full'
-                onClick={closePopover}
-              >
-                <Icon icon='mdi:pencil-outline' width={20} height={20} />
-                Edit
-              </Button>
-            </RequirePermission>
-          )}
-
-          <RequirePermission permissions='lti.finance.transactions.delete'>
-            <Button
-              onClick={() => {
-                deleteClickHandler();
-                closePopover();
-              }}
-              variant='ghost'
-              color='error'
-              className='p-3 justify-start text-sm font-semibold w-full focus-visible:text-error-content hover:text-error-content'
-            >
-              <Icon icon='mdi:delete-outline' width={20} height={20} />
-              Delete
-            </Button>
-          </RequirePermission>
-        </div>
-      </PopoverContent>
-    </div>
+      <RequirePermission permissions='lti.finance.transactions.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='text-error hover:text-inherit'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -209,9 +171,6 @@ const FinanceTable = () => {
     },
   });
 
-  // ===== FILTER MODAL STATE =====
-  const filterModal = useModal();
-
   // ===== State =====
   const deleteModal = useModal();
   const [selectedTransactionType, setSelectedTransactionType] = useState<
@@ -230,7 +189,6 @@ const FinanceTable = () => {
   const [selectedFinance, setSelectedFinance] = useState<Finance | null>(null);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [dateErrorShown, setDateErrorShown] = useState(false);
-  const [hasDateError, setHasDateError] = useState(false);
 
   // ===== Formik for Filter =====
   const filterFormik = useFormik<FinanceTableFilterValues>({
@@ -256,18 +214,6 @@ const FinanceTable = () => {
       updateFilter('sortBy', values.sort_by);
       updateFilter('startDate', values.start_date);
       updateFilter('endDate', values.end_date);
-      filterModal.closeModal();
-    },
-    onReset: () => {
-      updateFilter('search', '');
-      resetSearchValue();
-      updateFilter('transactionTypes', '');
-      updateFilter('bankIds', '');
-      updateFilter('customerIds', '');
-      updateFilter('supplierIds', '');
-      updateFilter('sortBy', '');
-      updateFilter('startDate', '');
-      updateFilter('endDate', '');
     },
   });
 
@@ -320,41 +266,10 @@ const FinanceTable = () => {
     });
   }, [bankOptions, bankRawData]);
 
-  // ===== ACTIVE FILTERS COUNT =====
-  const activeFiltersCount = useMemo(() => {
-    let count = 0;
-
-    if (tableFilterState.transactionTypes) count += 1;
-    if (tableFilterState.bankIds) count += 1;
-    if (tableFilterState.customerIds) count += 1;
-    if (tableFilterState.supplierIds) count += 1;
-    if (tableFilterState.sortBy) count += 1;
-    if (tableFilterState.startDate) count += 1;
-    if (tableFilterState.endDate) count += 1;
-
-    return count;
-  }, [
-    tableFilterState.transactionTypes,
-    tableFilterState.bankIds,
-    tableFilterState.customerIds,
-    tableFilterState.supplierIds,
-    tableFilterState.sortBy,
-    tableFilterState.startDate,
-    tableFilterState.endDate,
-  ]);
-
-  const hasFilters = activeFiltersCount > 0;
-
   // ===== Handler =====
-  const searchChangeHandler = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      updateFilter('search', e.target.value);
-      setSearchValue(e.target.value);
-      setPage(1);
-    },
-    [updateFilter, setSearchValue, setPage]
-  );
-
+  const searchChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    filterFormik.setFieldValue('search', e.target.value);
+  };
   const transactionTypeChangeHandler = (
     val: OptionType | OptionType[] | null
   ) => {
@@ -420,7 +335,10 @@ const FinanceTable = () => {
       const endDateObj = new Date(endDate);
 
       if (endDateObj < startDate) {
-        setHasDateError(true);
+        filterFormik.setFieldError(
+          'end_date',
+          'Tanggal akhir tidak boleh masa lampau'
+        );
         if (!dateErrorShown) {
           toast.error('Tanggal akhir tidak boleh masa lampau', {
             duration: Infinity,
@@ -428,14 +346,12 @@ const FinanceTable = () => {
           setDateErrorShown(true);
         }
       } else {
-        setHasDateError(false);
+        filterFormik.setFieldError('end_date', undefined);
         if (dateErrorShown) {
           toast.dismiss();
           setDateErrorShown(false);
         }
       }
-    } else {
-      setHasDateError(false);
     }
   };
 
@@ -450,7 +366,10 @@ const FinanceTable = () => {
       const endDate = new Date(value);
 
       if (endDate < startDateObj) {
-        setHasDateError(true);
+        filterFormik.setFieldError(
+          'end_date',
+          'Tanggal akhir tidak boleh masa lampau'
+        );
         if (!dateErrorShown) {
           toast.error('Tanggal akhir tidak boleh masa lampau', {
             duration: Infinity,
@@ -461,18 +380,13 @@ const FinanceTable = () => {
       }
     }
 
-    setHasDateError(false);
+    filterFormik.setFieldError('end_date', undefined);
     if (dateErrorShown) {
       toast.dismiss();
       setDateErrorShown(false);
     }
   };
 
-  const handleFilterModalOpen = () => {
-    filterModal.openModal();
-    filterFormik.validateForm();
-  };
-
   const resetFilterHandler = () => {
     setSelectedTransactionType(null);
     setSelectedBank(null);
@@ -492,7 +406,6 @@ const FinanceTable = () => {
     updateFilter('startDate', '');
     updateFilter('endDate', '');
   };
-
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
 
@@ -504,8 +417,8 @@ const FinanceTable = () => {
     setIsDeleteLoading(false);
   };
 
-  const columns: ColumnDef<Finance>[] = useMemo(
-    () => [
+  const columns = useMemo(() => {
+    return [
       {
         header: 'ID',
         accessorKey: 'payment_code',
@@ -585,17 +498,32 @@ const FinanceTable = () => {
           };
 
           return (
-            <RowOptionsMenu
-              props={props}
-              deleteClickHandler={deleteClickHandler}
-              popoverPosition={isLast2Rows ? 'top' : 'bottom'}
-            />
+            <>
+              {currentPageSize > 2 && (
+                <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                  <RowOptionsMenu
+                    type='dropdown'
+                    props={props}
+                    deleteClickHandler={deleteClickHandler}
+                  />
+                </RowDropdownOptions>
+              )}
+
+              {currentPageSize <= 2 && (
+                <RowCollapseOptions>
+                  <RowOptionsMenu
+                    type='collapse'
+                    props={props}
+                    deleteClickHandler={deleteClickHandler}
+                  />
+                </RowCollapseOptions>
+              )}
+            </>
           );
         },
       },
-    ],
-    [deleteModal]
-  );
+    ];
+  }, []);
 
   useEffect(() => {
     return () => {
@@ -627,280 +555,151 @@ const FinanceTable = () => {
   }, [resetSearchValue, dateErrorShown]);
 
   return (
-    <>
-      <div className='w-full'>
-        {/* Header Section */}
-        <div className='w-full p-3 flex flex-row justify-between gap-3 flex-wrap border-b border-base-content/10'>
-          {/* Action Buttons */}
-          <div className='w-fit flex flex-row gap-3 flex-wrap'>
-            <RequirePermission permissions='lti.finance.injections.create'>
-              <Button
-                href='/finance/add/injection'
-                color='warning'
-                className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
-              >
-                <Icon icon='mdi:bank-transfer-in' width={20} height={20} />
-                Add Injection (Saldo Bank)
-              </Button>
-            </RequirePermission>
-            <RequirePermission permissions='lti.finance.initial_balances.create'>
-              <Button
-                href='/finance/add/initial-balance'
-                color='info'
-                className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
-              >
-                <Icon icon='mdi:cash-register' width={20} height={20} />
-                Add Initial Balance
-              </Button>
-            </RequirePermission>
-            <RequirePermission permissions='lti.finance.payments.create'>
-              <Button
-                href='/finance/add'
-                color='primary'
-                className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
-              >
-                <Icon icon='heroicons:plus' width={20} height={20} />
-                Add Finance
-              </Button>
-            </RequirePermission>
-          </div>
-
-          {/* Search and Filter */}
-          <div className='flex flex-1 flex-row justify-start sm:justify-end items-center gap-3 flex-wrap'>
-            <DebouncedTextInput
-              name='search'
-              placeholder='Search'
-              value={tableFilterState.search ?? ''}
-              onChange={searchChangeHandler}
-              startAdornment={
-                <Icon
-                  icon='heroicons:magnifying-glass'
-                  width={20}
-                  height={20}
-                />
-              }
-              className={{
-                wrapper: 'w-full min-w-24 max-w-3xs',
-                inputWrapper: 'rounded-xl! shadow-button-soft',
-                input:
-                  'placeholder:font-semibold placeholder:text-base-content/50',
-              }}
-            />
-
-            <Button
-              variant='outline'
-              color='none'
-              onClick={handleFilterModalOpen}
-              className={cn(
-                'px-3 py-2.5 gap-1.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft transition-all',
-                {
-                  'border-primary-gradient text-primary': hasFilters,
-                }
-              )}
-            >
-              <Icon icon='heroicons:funnel' width={20} height={20} />
-              Filter
-              {hasFilters && (
-                <span className='w-5 h-5 text-white bg-[#FF3535] rounded-lg border border-base-300 flex items-center justify-center text-xs'>
-                  {activeFiltersCount}
-                </span>
-              )}
-            </Button>
-          </div>
-        </div>
-
-        {/* Table Section */}
-        <div className='flex flex-col mb-4'>
-          {isLoading ? (
-            <div className='w-full flex flex-row justify-center items-center p-4'>
-              <span className='loading loading-spinner loading-xl' />
-            </div>
-          ) : !isResponseSuccess(finances) || finances.data?.length === 0 ? (
-            <div className='p-3'>
-              <FinanceTableSkeleton
-                columns={columns}
-                icon={
-                  <Icon
-                    icon='heroicons:document-text'
-                    className='text-white'
-                    width={20}
-                    height={20}
-                  />
-                }
-              />
-            </div>
-          ) : (
-            <Table<Finance>
-              data={isResponseSuccess(finances) ? finances.data : []}
-              columns={columns}
-              pageSize={tableFilterState.pageSize}
-              page={tableFilterState.page}
-              totalItems={
-                isResponseSuccess(finances) ? finances.meta?.total_results : 0
-              }
-              onPageChange={setPage}
-              onPageSizeChange={setPageSize}
-              isLoading={isLoading}
-              className={{
-                containerClassName: cn('p-3 mb-0'),
-                headerColumnClassName: 'text-nowrap',
-              }}
-            />
-          )}
-        </div>
-      </div>
-
-      {/* Filter Modal */}
-      <Modal
-        ref={filterModal.ref}
-        className={{
-          modal: 'p-0',
-          modalBox: 'p-0 rounded-[0.875rem] xl:max-w-4/12 max-w-sm',
-        }}
-      >
-        {/* Modal Header */}
-        <div className='flex items-center justify-between gap-2 border-b border-base-content/10 p-4'>
-          <div className='flex items-center gap-2 text-primary'>
-            <Icon icon='heroicons:funnel' width={20} height={20} />
-            <h3 className='font-medium text-sm'>Filter Data</h3>
-          </div>
+    <section className='size-full flex flex-col gap-6'>
+      <div className='flex justify-end gap-2'>
+        <RequirePermission permissions='lti.finance.injections.create'>
           <Button
-            variant='link'
-            onClick={filterModal.closeModal}
-            className='text-base-content/50 hover:text-base-content transition-colors cursor-pointer'
+            color='warning'
+            className='min-w-24'
+            href='/finance/add/injection'
           >
-            <Icon icon='heroicons:x-mark' width={20} height={20} />
+            Injection Saldo Bank
           </Button>
+        </RequirePermission>
+        <RequirePermission permissions='lti.finance.initial_balances.create'>
+          <Button
+            color='info'
+            className='text-white min-w-24'
+            href='/finance/add/initial-balance'
+          >
+            Saldo Awal
+          </Button>
+        </RequirePermission>
+        <RequirePermission permissions='lti.finance.payments.create'>
+          <Button color='primary' className='min-w-24' href='/finance/add'>
+            Tambah
+          </Button>
+        </RequirePermission>
+      </div>
+      <Card
+        variant='bordered'
+        className={{
+          wrapper: 'w-full',
+        }}
+        footer={
+          <div className='flex justify-end gap-2'>
+            <Button
+              color='warning'
+              className='min-w-24'
+              onClick={resetFilterHandler}
+            >
+              Reset
+            </Button>
+            <Button
+              color='primary'
+              className='min-w-24'
+              onClick={() => filterFormik.handleSubmit()}
+            >
+              Cari
+            </Button>
+          </div>
+        }
+      >
+        <div className='grid grid-cols-4 gap-6'>
+          <SelectInput
+            options={FINANCE_TRANSACTION_TYPE_OPTIONS}
+            label='Jenis Transaksi'
+            value={selectedTransactionType}
+            onChange={transactionTypeChangeHandler}
+            closeMenuOnSelect={false}
+            isClearable
+            isMulti
+          />
+          <SelectInput
+            options={customerOptions}
+            label={'Customer'}
+            value={selectedCustomerId}
+            onChange={customerIdChangeHandler}
+            onInputChange={customerInputValue}
+            onMenuScrollToBottom={customerLoadMore}
+            isLoading={customerIsLoadingOptions}
+            closeMenuOnSelect={false}
+            isClearable
+            isMulti
+          />
+          <SelectInput
+            options={supplierOptions}
+            label={'Supplier'}
+            value={selectedSupplierId}
+            onChange={supplierIdChangeHandler}
+            onInputChange={supplierInputValue}
+            onMenuScrollToBottom={supplierLoadMore}
+            isLoading={supplierIsLoadingOptions}
+            closeMenuOnSelect={false}
+            isClearable
+            isMulti
+          />
+          <SelectInput
+            options={bankSelectOptions}
+            label='Bank'
+            value={selectedBank}
+            onChange={bankChangeHandler}
+            onInputChange={bankInputValue}
+            onMenuScrollToBottom={bankLoadMore}
+            closeMenuOnSelect={false}
+            isClearable
+            isMulti
+          />
+          <SelectInput
+            options={sortByOptions}
+            label='Urutkan Berdasarkan'
+            value={selectedSortBy}
+            onChange={sortByChangeHandler}
+            isClearable
+          />
+          <DateInput
+            name='start_date'
+            label='Periode Tanggal (Mulai)'
+            value={filterFormik.values.start_date}
+            onChange={startDateChangeHandler}
+            errorMessage={
+              filterFormik.errors.end_date
+                ? filterFormik.errors.end_date
+                : undefined
+            }
+          />
+          <DateInput
+            name='end_date'
+            label='Periode Tanggal (Akhir)'
+            value={filterFormik.values.end_date}
+            onChange={endDateChangeHandler}
+            errorMessage={
+              filterFormik.errors.end_date
+                ? filterFormik.errors.end_date
+                : undefined
+            }
+          />
+          <DebouncedTextInput
+            name='search'
+            label='Cari'
+            placeholder='Cari'
+            value={filterFormik.values.search}
+            onChange={searchChangeHandler}
+          />
         </div>
-        <form
-          onSubmit={filterFormik.handleSubmit}
-          onReset={filterFormik.handleReset}
-        >
-          <div className='p-4 flex flex-col gap-1.5'>
-            <div className='flex flex-col'>
-              <span className='py-2 text-xs font-semibold'>Tanggal</span>
-              <div className='flex flex-row items-center gap-1.5'>
-                <DateInput
-                  name='start_date'
-                  placeholder='Periode Tanggal Awal'
-                  value={filterFormik.values.start_date}
-                  errorMessage={filterFormik.errors.start_date}
-                  onChange={startDateChangeHandler}
-                  isError={
-                    filterFormik.touched.start_date &&
-                    Boolean(filterFormik.errors.start_date)
-                  }
-                />
-                <hr className='w-full max-w-3 h-px border-base-content/10' />
-                <DateInput
-                  name='end_date'
-                  placeholder='Periode Tanggal Akhir'
-                  value={filterFormik.values.end_date}
-                  errorMessage={filterFormik.errors.end_date}
-                  onChange={endDateChangeHandler}
-                  isError={
-                    (filterFormik.touched.end_date &&
-                      Boolean(filterFormik.errors.end_date)) ||
-                    hasDateError
-                  }
-                />
-              </div>
-            </div>
-
-            <SelectInput
-              options={FINANCE_TRANSACTION_TYPE_OPTIONS}
-              label='Jenis Transaksi'
-              placeholder='Pilih Jenis Transaksi'
-              value={selectedTransactionType}
-              onChange={transactionTypeChangeHandler}
-              onInputChange={() => {}}
-              closeMenuOnSelect={false}
-              isClearable
-              isMulti
-              className={{ wrapper: 'w-full' }}
-            />
-            <SelectInput
-              options={customerOptions}
-              label='Customer'
-              placeholder='Pilih Customer'
-              value={selectedCustomerId}
-              onChange={customerIdChangeHandler}
-              onInputChange={customerInputValue}
-              onMenuScrollToBottom={customerLoadMore}
-              isLoading={customerIsLoadingOptions}
-              closeMenuOnSelect={false}
-              isClearable
-              isMulti
-              className={{ wrapper: 'w-full' }}
-            />
-            <SelectInput
-              options={supplierOptions}
-              label='Supplier'
-              placeholder='Pilih Supplier'
-              value={selectedSupplierId}
-              onChange={supplierIdChangeHandler}
-              onInputChange={supplierInputValue}
-              onMenuScrollToBottom={supplierLoadMore}
-              isLoading={supplierIsLoadingOptions}
-              closeMenuOnSelect={false}
-              isClearable
-              isMulti
-              className={{ wrapper: 'w-full' }}
-            />
-            <SelectInput
-              options={bankSelectOptions}
-              label='Bank'
-              placeholder='Pilih Bank'
-              value={selectedBank}
-              onChange={bankChangeHandler}
-              onInputChange={bankInputValue}
-              onMenuScrollToBottom={bankLoadMore}
-              closeMenuOnSelect={false}
-              isClearable
-              isMulti
-              className={{ wrapper: 'w-full' }}
-            />
-            <SelectInput
-              options={sortByOptions}
-              label='Urutkan Berdasarkan'
-              placeholder='Pilih Urutan'
-              value={selectedSortBy}
-              onChange={sortByChangeHandler}
-              isClearable
-              className={{ wrapper: 'w-full' }}
-            />
-          </div>
-
-          {/* Modal Footer */}
-          <div className='flex justify-between items-center gap-4 p-4 border-t border-base-content/10 bg-gray-50'>
-            <Button
-              type='button'
-              variant='soft'
-              className='rounded-lg text-base-content/65 bg-transparent border-none hover:bg-base-content/10 hover:text-base-content/65 transition-colors px-3 py-2'
-              onClick={() => {
-                filterFormik.resetForm();
-                setSelectedTransactionType(null);
-                setSelectedBank(null);
-                setSelectedCustomerId(null);
-                setSelectedSupplierId(null);
-                setSelectedSortBy(null);
-                resetFilterHandler();
-                filterModal.closeModal();
-              }}
-            >
-              Reset Filter
-            </Button>
-            <Button
-              type='submit'
-              className='min-w-40 text-sm rounded-lg py-3 text-white font-semibold'
-              disabled={!filterFormik.isValid || filterFormik.isSubmitting}
-            >
-              Apply Filter
-            </Button>
-          </div>
-        </form>
-      </Modal>
-
+      </Card>
+      <Table<Finance>
+        data={isResponseSuccess(finances) ? finances.data : []}
+        columns={columns}
+        pageSize={tableFilterState.pageSize}
+        page={tableFilterState.page}
+        onPageChange={setPage}
+        onPageSizeChange={setPageSize}
+        totalItems={
+          isResponseSuccess(finances) ? finances.meta?.total_results : 0
+        }
+        isLoading={isLoading}
+      />
       <ConfirmationModal
         ref={deleteModal.ref}
         type='error'
@@ -915,7 +714,7 @@ const FinanceTable = () => {
           onClick: confirmationModalDeleteClickHandler,
         }}
       />
-    </>
+    </section>
   );
 };
 

src/components/pages/finance/skeleton/FinanceTableSkeleton.tsx

@@ -1,37 +0,0 @@
-import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
-import Table from '@/components/Table';
-import { Finance } from '@/types/api/finance/finance';
-import { ColumnDef } from '@tanstack/react-table';
-
-const FinanceTableSkeleton = ({
-  columns,
-  icon,
-  title = 'No Data Available',
-  subtitle = 'There is no finance data displayed. Enter finance data to get started.',
-}: {
-  columns: ColumnDef<Finance>[];
-  icon: React.ReactNode;
-  title?: string;
-  subtitle?: string;
-}) => {
-  return (
-    <div className='relative size-full'>
-      <Table
-        data={[]}
-        columns={columns}
-        isLoading={true}
-        className={{
-          skeletonCellClassName: 'animate-none w-full h-5 bg-base-content/4',
-          headerColumnClassName: 'whitespace-nowrap',
-          containerClassName: 'mb-0 overflow-hidden',
-          tableWrapperClassName: 'overflow-hidden',
-        }}
-      />
-      <div className='absolute inset-0 flex items-center justify-center'>
-        <DataStateSkeleton icon={icon} title={title} description={subtitle} />
-      </div>
-    </div>
-  );
-};
-
-export default FinanceTableSkeleton;

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

@@ -1,48 +1,22 @@
 'use client';
 
-import {
-  ChangeEventHandler,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
-import { usePathname } from 'next/navigation';
-import useSWR from 'swr';
-import { Icon } from '@iconify/react';
-import { ColumnDef, ColumnSort, SortingState } from '@tanstack/react-table';
-import { useFormik } from 'formik';
+import Badge from '@/components/Badge';
 import Button from '@/components/Button';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import Table from '@/components/Table';
 import RequirePermission from '@/components/helper/RequirePermission';
-import DebouncedTextInput from '@/components/input/DebouncedTextInput';
-import SelectInput, { useSelect } from '@/components/input/SelectInput';
-import { OptionType } from '@/components/input/SelectInput';
-import ButtonFilter from '@/components/helper/ButtonFilter';
-import Modal, { useModal } from '@/components/Modal';
+import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
-import { cn, formatNumber, formatDate, formatCurrency } from '@/lib/helper';
+import { cn } from '@/lib/helper';
 import { InventoryAdjustmentApi } from '@/services/api/inventory';
-import { WarehouseApi, ProductApi } from '@/services/api/master-data';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
-import { useUiStore } from '@/stores/ui/ui.store';
 import { InventoryAdjustment } from '@/types/api/inventory/adjustment';
-import { Warehouse } from '@/types/api/master-data/warehouse';
-import { TRANSACTION_SUBTYPE_OPTIONS } from '@/config/constant';
-import { Product } from '@/types/api/master-data/product';
-import StatusBadge from '@/components/helper/StatusBadge';
-import InventoryAdjustmentTableSkeleton from '@/components/pages/inventory/adjustment/skeleton/InventoryAdjustmentTableSkeleton';
-
-import {
-  AdjustmentFilterSchema,
-  AdjustmentFilterType,
-} from '@/components/pages/inventory/adjustment/filter/AdjustmentFilter';
-import SelectInputRadio from '@/components/input/SelectInputRadio';
+import { Icon } from '@iconify/react';
+import { ColumnDef, ColumnSort, SortingState } from '@tanstack/react-table';
+import { useCallback, useEffect, useState } from 'react';
+import useSWR from 'swr';
 
 const InventoryAdjustmentTable = () => {
-  const { searchValue, setSearchValue, setTableState } = useUiStore();
-  const pathname = usePathname();
-
   const {
     state: tableFilterState,
     updateFilter,
@@ -56,9 +30,6 @@ const InventoryAdjustmentTable = () => {
       productSort: '',
       warehouseSort: '',
       stockSort: '',
-      productFilter: '',
-      warehouseFilter: '',
-      transactionTypeFilter: '',
     },
     paramMap: {
       page: 'page',
@@ -67,257 +38,84 @@ const InventoryAdjustmentTable = () => {
       productSort: 'sort_product',
       warehouseSort: 'sort_warehouse',
       stockSort: 'sort_stock',
-      productFilter: 'product_id',
-      warehouseFilter: 'warehouse_id',
-      transactionTypeFilter: 'transaction_type',
     },
   });
 
-  // ===== FILTER MODAL STATE =====
-  const filterModal = useModal();
-
-  // ===== FORMIK SETUP =====
-  const formik = useFormik<AdjustmentFilterType>({
-    initialValues: {
-      product_id: null,
-      warehouse_id: null,
-      transaction_type: null,
-    },
-    validationSchema: AdjustmentFilterSchema,
-    onSubmit: (values, { setSubmitting }) => {
-      updateFilter('productFilter', values.product_id || '');
-      updateFilter('warehouseFilter', values.warehouse_id || '');
-      updateFilter('transactionTypeFilter', values.transaction_type || '');
-      filterModal.closeModal();
-      setSubmitting(false);
-    },
-    onReset: () => {
-      updateFilter('productFilter', '');
-      updateFilter('warehouseFilter', '');
-      updateFilter('transactionTypeFilter', '');
-    },
-  });
-
-  // ===== PRODUCT OPTIONS =====
-  const {
-    setInputValue: setProductInputValue,
-    options: productOptions,
-    isLoadingOptions: isLoadingProductOptions,
-    loadMore: loadMoreProducts,
-  } = useSelect<Product>(
-    filterModal.open ? ProductApi.basePath : null,
-    'id',
-    'name',
-    'search'
-  );
-
-  // ===== WAREHOUSE OPTIONS =====
-  const {
-    setInputValue: setWarehouseInputValue,
-    options: warehouseOptions,
-    isLoadingOptions: isLoadingWarehouseOptions,
-    loadMore: loadMoreWarehouses,
-  } = useSelect<Warehouse>(
-    filterModal.open ? WarehouseApi.basePath : null,
-    'id',
-    'name',
-    'search'
-  );
-
-  // ===== TRANSACTION TYPE OPTIONS =====
-  const transactionTypeOptions = useMemo(() => {
-    return [
-      { value: 'increase', label: 'Increase' },
-      { value: 'decrease', label: 'Decrease' },
-    ];
-  }, []);
-
-  // ===== FILTER HANDLERS =====
-  const handleFilterProductChange = useCallback(
-    (val: OptionType | OptionType[] | null) => {
-      const product = val as OptionType | null;
-      const productId = product?.value ? String(product.value) : null;
-      formik.setFieldValue('product_id', productId);
-    },
-    [formik]
-  );
-
-  const handleFilterWarehouseChange = useCallback(
-    (val: OptionType | OptionType[] | null) => {
-      const warehouse = val as OptionType | null;
-      const warehouseId = warehouse?.value ? String(warehouse.value) : null;
-      formik.setFieldValue('warehouse_id', warehouseId);
-    },
-    [formik]
-  );
-
-  const handleFilterTransactionTypeChange = useCallback(
-    (val: OptionType | OptionType[] | null) => {
-      const type = val as OptionType | null;
-      const typeValue = type?.value ? String(type.value) : null;
-      formik.setFieldValue('transaction_type', typeValue);
-    },
-    [formik]
-  );
-
-  // ===== FILTER HELPERS =====
-  const productIdValue = useMemo(() => {
-    if (!formik.values.product_id) return null;
-    return (
-      productOptions.find(
-        (opt) => String(opt.value) === formik.values.product_id
-      ) || null
-    );
-  }, [formik.values.product_id, productOptions]);
-
-  const warehouseIdValue = useMemo(() => {
-    if (!formik.values.warehouse_id) return null;
-    return (
-      warehouseOptions.find(
-        (opt) => String(opt.value) === formik.values.warehouse_id
-      ) || null
-    );
-  }, [formik.values.warehouse_id, warehouseOptions]);
-
-  const transactionTypeValue = useMemo(() => {
-    if (!formik.values.transaction_type) return null;
-    return (
-      transactionTypeOptions.find(
-        (opt) => String(opt.value) === formik.values.transaction_type
-      ) || null
-    );
-  }, [formik.values.transaction_type, transactionTypeOptions]);
-
-  // ===== HANDLE FILTER MODAL OPEN =====
-  const handleFilterModalOpen = () => {
-    filterModal.openModal();
-    formik.validateForm();
-  };
-
+  // Fetch Data
   const { data: inventoryAdjustments, isLoading } = useSWR(
     `${InventoryAdjustmentApi.basePath}${getTableFilterQueryString()}`,
     InventoryAdjustmentApi.getAllFetcher
   );
 
+  // State
   const [sorting, setSorting] = useState<SortingState>([]);
 
-  useEffect(() => {
-    updateFilter('search', searchValue);
-  }, [searchValue, updateFilter]);
+  // Columns
+  const inventoryAdjustmentsColumns: ColumnDef<InventoryAdjustment>[] = [
+    {
+      header: '#',
+      cell: (props) =>
+        tableFilterState.pageSize * (tableFilterState.page - 1) +
+        props.row.index +
+        1,
+    },
+    {
+      id: 'product_name',
+      header: 'Nama Produk',
+      accessorFn: (row) => row.product_warehouse?.product?.name ?? '-',
+    },
+    {
+      id: 'warehouse_name',
+      header: 'Gudang',
+      accessorFn: (row) => row.product_warehouse?.warehouse?.name ?? '-',
+    },
+    {
+      id: 'created_at',
+      header: 'Tanggal',
+      accessorFn: (row) =>
+        new Date(row.created_at).toLocaleDateString('id-ID', {
+          day: '2-digit',
+          month: 'short',
+          year: 'numeric',
+        }),
+    },
+    {
+      id: 'quantity',
+      header: 'Kuantitas',
+      accessorFn: (row) => formatNumber(String(row.increase + row.decrease)),
+    },
+    {
+      id: 'transaction_type',
+      header: 'Tipe Transaksi',
+      accessorFn: (row) => {
+        if (row.increase > 0) return 'Peningkatan';
+        if (row.decrease > 0) return 'Penurunan';
+        return '-';
+      },
+      cell: (props) => {
+        const type = props.row.original.increase;
+        const label = type > 0 ? 'Peningkatan' : type <= 0 ? 'Penurunan' : '-';
 
-  useEffect(() => {
-    setTableState('inventory-adjustment-table', pathname);
-  }, [pathname, setTableState]);
+        return (
+          <Badge variant='soft' color={type > 0 ? 'success' : 'error'}>
+            {label}
+          </Badge>
+        );
+      },
+    },
+    {
+      id: 'created_by',
+      header: 'Oleh',
+      accessorFn: (row) => row.created_user?.name ?? '-',
+    },
+  ];
 
-  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
-    setSearchValue(e.target.value);
-    updateFilter('search', e.target.value);
+  // Handler
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
+    setPageSize(newVal.value as number);
   };
 
-  const inventoryAdjustmentsColumns: ColumnDef<InventoryAdjustment>[] = useMemo(
-    () => [
-      {
-        id: 'adj_number',
-        header: 'No. Referensi',
-        accessorFn: (row) => row.adj_number ?? '-',
-      },
-      {
-        id: 'location',
-        header: 'Lokasi',
-        accessorFn: (row) => row.location?.name ?? '-',
-      },
-      {
-        id: 'project_flock',
-        header: 'Flock',
-        accessorFn: (row) => row.project_flock?.flock_name ?? '-',
-      },
-      {
-        id: 'warehouse_name',
-        header: 'Gudang',
-        accessorFn: (row) => row.product_warehouse?.warehouse?.name ?? '-',
-      },
-      {
-        id: 'product_name',
-        header: 'Nama Produk',
-        accessorFn: (row) => row.product_warehouse?.product?.name ?? '-',
-      },
-      {
-        id: 'quantity',
-        header: 'Kuantitas',
-        accessorFn: (row) => row.qty ?? '-',
-        cell: (row) => {
-          const value = row.row.original.increase + row.row.original.decrease;
-          return <div className='text-center'>{formatNumber(value)}</div>;
-        },
-      },
-      {
-        id: 'price',
-        header: 'Harga',
-        accessorFn: (row) => (row.price ? formatCurrency(row.price) : '-'),
-      },
-      {
-        id: 'grand_total',
-        header: 'Grand Total',
-        accessorFn: (row) =>
-          row.grand_total ? formatCurrency(row.grand_total) : '-',
-      },
-      {
-        id: 'transaction_type',
-        header: 'Tipe Transaksi',
-        accessorFn: (row) => row.transaction_subtype ?? '-',
-        cell: (row) => {
-          const subtype = row.row.original.transaction_subtype;
-          const increase = row.row.original.increase;
-
-          const getSubtypeLabel = (subtypeValue: string): string => {
-            if (subtypeValue === TRANSACTION_SUBTYPE_OPTIONS.PEMBELIAN.value) {
-              return TRANSACTION_SUBTYPE_OPTIONS.PEMBELIAN.label;
-            }
-            if (subtypeValue === TRANSACTION_SUBTYPE_OPTIONS.PENJUALAN.value) {
-              return TRANSACTION_SUBTYPE_OPTIONS.PENJUALAN.label;
-            }
-            const recordingOption = TRANSACTION_SUBTYPE_OPTIONS.RECORDING.find(
-              (opt) => opt.value === subtypeValue
-            );
-            if (recordingOption) {
-              return recordingOption.label;
-            }
-            if (subtypeValue === 'RECORDING_DEPLETION_OUT') {
-              return 'Recording Depletion';
-            }
-            return subtypeValue || '-';
-          };
-
-          const label = getSubtypeLabel(subtype);
-
-          return (
-            <StatusBadge
-              color={
-                increase > 0 ? 'success' : increase <= 0 ? 'error' : 'neutral'
-              }
-              text={label}
-              className={{
-                badge: 'whitespace-nowrap',
-              }}
-            />
-          );
-        },
-      },
-      {
-        id: 'created_at',
-        header: 'Tanggal',
-        accessorFn: (row) =>
-          row.created_at ? formatDate(row.created_at, 'DD MMM YYYY') : '-',
-      },
-      {
-        id: 'created_by',
-        header: 'Oleh',
-        accessorFn: (row) => row.created_user?.name ?? '-',
-      },
-    ],
-    []
-  );
-
   const updateSortingFilter = useCallback(
     (
       sortName: Exclude<keyof typeof tableFilterState, 'page' | 'pageSize'>,
@@ -332,6 +130,7 @@ const InventoryAdjustmentTable = () => {
     [updateFilter]
   );
 
+  // Effect
   useEffect(() => {
     const productCategorySortFilter = sorting.find(
       (sortItem) => sortItem.id === 'productCategory'
@@ -350,200 +149,88 @@ const InventoryAdjustmentTable = () => {
     updateSortingFilter('stockSort', stockSortFilter);
   }, [sorting, updateSortingFilter]);
 
+  // Utils Function
+  const formatNumber = (value: string) => {
+    const numericValue = value.replace(/[^0-9.]/g, '');
+    const [integer, decimal] = numericValue.split('.');
+    const formattedInteger = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    return decimal ? `${formattedInteger}.${decimal}` : formattedInteger;
+  };
+
+  // Render
   return (
     <>
-      <div className='w-full'>
-        {/* Header Section */}
-        <div className='w-full p-3 flex flex-row justify-between gap-3 flex-wrap border-b border-base-content/10'>
-          {/* Action Buttons */}
-          <div className='w-fit flex flex-row gap-3 flex-wrap'>
-            <RequirePermission permissions='lti.inventory.create'>
-              <Button
-                href='/inventory/adjustment/add'
-                color='primary'
-                className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
-              >
-                <Icon icon='heroicons:plus' width={20} height={20} />
-                Add Adjustment
-              </Button>
-            </RequirePermission>
-          </div>
-
-          {/* Search and Filter */}
-          <div className='flex flex-1 flex-row justify-start sm:justify-end items-center gap-3 flex-wrap'>
-            <DebouncedTextInput
-              name='search'
-              placeholder='Search'
-              value={tableFilterState.search ?? ''}
-              onChange={searchChangeHandler}
-              startAdornment={
-                <Icon
-                  icon='heroicons:magnifying-glass'
-                  width={20}
-                  height={20}
-                />
-              }
-              className={{
-                wrapper: 'w-full min-w-24 max-w-3xs',
-                inputWrapper: 'rounded-xl! shadow-button-soft',
-                input:
-                  'placeholder:font-semibold placeholder:text-base-content/50',
-              }}
-            />
-
-            <ButtonFilter
-              values={tableFilterState}
-              excludeFields={[
-                'page',
-                'pageSize',
-                'search',
-                'productCategorySort',
-                'productSort',
-                'warehouseSort',
-                'stockSort',
-              ]}
-              onClick={handleFilterModalOpen}
-              className='px-3 py-2.5'
-            />
-          </div>
-        </div>
-
-        {/* Table Section */}
-        <div className='flex flex-col mb-4'>
-          {isLoading ? (
-            <div className='w-full flex flex-row justify-center items-center p-4'>
-              <span className='loading loading-spinner loading-xl' />
+      <div className='w-full p-0 sm:p-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
+            <div className='w-full flex flex-row'>
+              <RequirePermission permissions='lti.inventory.create'>
+                <Button
+                  href='/inventory/adjustment/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
             </div>
-          ) : !isResponseSuccess(inventoryAdjustments) ||
-            inventoryAdjustments.data?.length === 0 ? (
-            <div className='p-3'>
-              <InventoryAdjustmentTableSkeleton
-                columns={inventoryAdjustmentsColumns}
-                icon={
-                  <Icon
-                    icon='heroicons:document-text'
-                    className='text-white'
-                    width={20}
-                    height={20}
-                  />
-                }
+
+            <div className='flex flex-row justify-end'>
+              <SelectInput
+                label='Baris'
+                options={ROWS_OPTIONS}
+                value={{
+                  label: String(tableFilterState.pageSize),
+                  value: tableFilterState.pageSize,
+                }}
+                onChange={pageSizeChangeHandler}
+                className={{ wrapper: 'min-w-28' }}
               />
             </div>
-          ) : (
-            <Table<InventoryAdjustment>
-              data={
-                isResponseSuccess(inventoryAdjustments)
-                  ? inventoryAdjustments?.data
-                  : []
-              }
-              columns={inventoryAdjustmentsColumns}
-              pageSize={tableFilterState.pageSize}
-              page={
-                isResponseSuccess(inventoryAdjustments)
-                  ? inventoryAdjustments?.meta?.page
-                  : 0
-              }
-              totalItems={
-                isResponseSuccess(inventoryAdjustments)
-                  ? inventoryAdjustments?.meta?.total_results
-                  : 0
-              }
-              onPageChange={setPage}
-              onPageSizeChange={setPageSize}
-              isLoading={isLoading}
-              sorting={sorting}
-              setSorting={setSorting}
-              className={{
-                containerClassName: cn('p-3 mb-0'),
-                headerColumnClassName: 'text-nowrap',
-              }}
-            />
-          )}
+          </div>
+
+          <Table<InventoryAdjustment>
+            data={
+              isResponseSuccess(inventoryAdjustments)
+                ? inventoryAdjustments?.data
+                : []
+            }
+            columns={inventoryAdjustmentsColumns}
+            pageSize={tableFilterState.pageSize}
+            page={
+              isResponseSuccess(inventoryAdjustments)
+                ? inventoryAdjustments?.meta?.page
+                : 0
+            }
+            totalItems={
+              isResponseSuccess(inventoryAdjustments)
+                ? inventoryAdjustments?.meta?.total_results
+                : 0
+            }
+            onPageChange={setPage}
+            isLoading={isLoading}
+            sorting={sorting}
+            setSorting={setSorting}
+            className={{
+              containerClassName: cn({
+                'mb-20':
+                  isResponseSuccess(inventoryAdjustments) &&
+                  inventoryAdjustments?.data?.length === 0,
+              }),
+              tableWrapperClassName: 'overflow-x-auto min-h-full!',
+              tableClassName: 'font-inter w-full table-auto min-h-full!',
+              headerRowClassName: 'border-b border-b-gray-200',
+              headerColumnClassName:
+                'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+              bodyRowClassName: 'border-b border-b-gray-200',
+              bodyColumnClassName:
+                'px-6 py-3 last:flex last:flex-row last:justify-end',
+            }}
+          />
         </div>
       </div>
-
-      {/* Filter Modal */}
-      <Modal
-        ref={filterModal.ref}
-        className={{
-          modal: 'p-0',
-          modalBox: 'p-0 rounded-[0.875rem] xl:max-w-4/12 max-w-sm',
-        }}
-      >
-        {/* Modal Header */}
-        <div className='flex items-center justify-between gap-2 border-b border-base-content/10 p-4'>
-          <div className='flex items-center gap-2 text-primary'>
-            <Icon icon='heroicons:funnel' width={20} height={20} />
-            <h3 className='font-medium text-sm'>Filter Data</h3>
-          </div>
-          <Button
-            variant='link'
-            onClick={filterModal.closeModal}
-            className='text-base-content/50 hover:text-base-content transition-colors cursor-pointer'
-          >
-            <Icon icon='heroicons:x-mark' width={20} height={20} />
-          </Button>
-        </div>
-        <form onSubmit={formik.handleSubmit} onReset={formik.handleReset}>
-          <div className='p-4 flex flex-col gap-1.5'>
-            <SelectInput
-              label='Produk'
-              placeholder='Pilih Produk'
-              options={productOptions}
-              value={productIdValue}
-              onChange={handleFilterProductChange}
-              onInputChange={setProductInputValue}
-              isLoading={isLoadingProductOptions}
-              isClearable
-              onMenuScrollToBottom={loadMoreProducts}
-              className={{ wrapper: 'w-full' }}
-            />
-            <SelectInput
-              label='Gudang'
-              placeholder='Pilih Gudang'
-              options={warehouseOptions}
-              value={warehouseIdValue}
-              onChange={handleFilterWarehouseChange}
-              onInputChange={setWarehouseInputValue}
-              isLoading={isLoadingWarehouseOptions}
-              isClearable
-              onMenuScrollToBottom={loadMoreWarehouses}
-              className={{ wrapper: 'w-full' }}
-            />
-            <SelectInputRadio
-              label='Tipe Transaksi'
-              placeholder='Pilih Tipe Transaksi'
-              options={transactionTypeOptions}
-              value={transactionTypeValue}
-              onChange={handleFilterTransactionTypeChange}
-              isClearable
-              className={{ wrapper: 'w-full' }}
-            />
-          </div>
-
-          {/* Modal Footer */}
-          <div className='flex justify-between items-center gap-4 p-4 border-t border-base-content/10 bg-gray-50'>
-            <Button
-              type='button'
-              variant='soft'
-              className='rounded-lg text-base-content/65 bg-transparent border-none hover:bg-base-content/10 hover:text-base-content/65 transition-colors px-3 py-2'
-              onClick={() => {
-                formik.resetForm();
-                filterModal.closeModal();
-              }}
-            >
-              Reset Filter
-            </Button>
-            <Button
-              type='submit'
-              className='min-w-40 text-sm rounded-lg py-3 text-white font-semibold'
-              disabled={!formik.isValid || formik.isSubmitting}
-            >
-              Apply Filter
-            </Button>
-          </div>
-        </form>
-      </Modal>
     </>
   );
 };

src/components/pages/inventory/adjustment/filter/AdjustmentFilter.ts

@@ -1,13 +0,0 @@
-import { string, object } from 'yup';
-
-export const AdjustmentFilterSchema = object().shape({
-  product_id: string().nullable(),
-  warehouse_id: string().nullable(),
-  transaction_type: string().nullable(),
-});
-
-export type AdjustmentFilterType = {
-  product_id: string | null;
-  warehouse_id: string | null;
-  transaction_type: string | null;
-};

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

@@ -1,118 +1,55 @@
 import * as Yup from 'yup';
+import { OptionType } from '@/components/input/SelectInput';
 
-export type InventoryAdjustmentFormSchemaType = {
-  location: {
-    value: number;
-    label: string;
-  } | null;
-  location_id: number;
-  project_flock: {
-    value: number;
-    label: string;
-  } | null;
-  project_flock_id: number;
-  kandang: {
-    value: number;
-    label: string;
-  } | null;
-  kandang_id: number;
-  project_flock_kandang: {
-    value: number;
-    label: string;
-  } | null;
-  project_flock_kandang_id: number;
-  product: {
-    value: number;
-    label: string;
-  } | null;
-  product_id: number;
-  depletion_product: {
-    value: number;
-    label: string;
-  } | null;
-  depletion_product_id: number;
-  transaction_type: string;
-  transaction_subtype: string;
-  qty: number | string;
-  price: number | string;
-  notes: string;
-};
-
-export const InventoryAdjustmentFormSchema: Yup.ObjectSchema<InventoryAdjustmentFormSchemaType> =
-  Yup.object({
-    location: Yup.object({
-      value: Yup.number().min(1).required(),
-      label: Yup.string().required(),
-    }).nullable(),
-    location_id: Yup.number()
-      .min(1, 'Lokasi wajib diisi!')
-      .required('Lokasi wajib diisi!')
-      .typeError('Lokasi wajib diisi!'),
-    project_flock: Yup.object({
-      value: Yup.number().min(1).required(),
-      label: Yup.string().required(),
-    }).nullable(),
-    project_flock_id: Yup.number()
-      .min(1, 'Project flock wajib diisi!')
-      .required('Project flock wajib diisi!')
-      .typeError('Project flock wajib diisi!'),
-    kandang: Yup.object({
-      value: Yup.number().min(1).required(),
-      label: Yup.string().required(),
-    }).nullable(),
-    kandang_id: Yup.number()
-      .min(1, 'Kandang wajib diisi!')
-      .required('Kandang wajib diisi!')
-      .typeError('Kandang wajib diisi!'),
-    project_flock_kandang: Yup.object({
-      value: Yup.number().min(1).required(),
-      label: Yup.string().required(),
-    }).nullable(),
-    project_flock_kandang_id: Yup.number()
-      .default(0)
-      .typeError('Project Flock Kandang wajib diisi!')
-      .test(
-        'is-valid-project-flock-kandang',
-        'Project Flock Kandang wajib diisi!',
-        (value) => value !== undefined && value !== null && value > 0
-      )
-      .required('Project Flock Kandang wajib diisi!'),
-    product: Yup.object({
-      value: Yup.number().min(1).required(),
-      label: Yup.string().required(),
-    }).nullable(),
-    product_id: Yup.number()
-      .min(1, 'Produk wajib diisi!')
-      .required('Produk wajib diisi!')
-      .typeError('Produk wajib diisi!'),
-    depletion_product: Yup.object({
-      value: Yup.number().min(1).required(),
-      label: Yup.string().required(),
-    }).nullable(),
-    depletion_product_id: Yup.number()
-      .default(0)
-      .typeError('Jenis deplesi harus berupa angka'),
-    transaction_type: Yup.string()
-      .min(1, 'Tipe transaksi wajib diisi!')
-      .oneOf(
-        ['PEMBELIAN', 'PENJUALAN', 'RECORDING'],
-        'Tipe transaksi tidak valid'
-      )
-      .required('Tipe transaksi wajib diisi')
-      .typeError('Tipe transaksi wajib diisi!'),
-    transaction_subtype: Yup.string().required(
-      'Sub tipe transaksi wajib diisi'
+export const InventoryAdjustmentFormSchema = Yup.object({
+  product_category: Yup.mixed<OptionType>()
+    .nullable()
+    .test(
+      'is-valid-option',
+      'Kategori Produk wajib diisi!',
+      (value) => value !== null && value !== undefined
     ),
-    qty: Yup.number()
-      .typeError('Kuantitas harus berupa angka')
-      .min(1, 'Minimal kuantitas adalah 1')
-      .required('Kuantitas wajib diisi'),
-    price: Yup.number()
-      .typeError('Harga harus berupa angka')
-      .min(0, 'Minimal harga adalah 0')
-      .required('Harga wajib diisi'),
-    notes: Yup.string().required('Catatan wajib diisi!'),
-  });
+
+  product_category_id: Yup.number().nullable(),
+
+  product: Yup.mixed<OptionType>()
+    .nullable()
+    .test(
+      'is-valid-option',
+      'Produk wajib diisi!',
+      (value) => value !== null && value !== undefined
+    ),
+
+  product_id: Yup.number()
+    .nullable()
+    .required('Produk wajib diisi!')
+    .min(1, 'Produk wajib diisi!'),
+
+  warehouse: Yup.mixed<OptionType>()
+    .nullable()
+    .test(
+      'is-valid-option',
+      'Warehouse wajib diisi!',
+      (value) => value !== null && value !== undefined
+    ),
+
+  warehouse_id: Yup.number()
+    .nullable()
+    .required('Warehouse wajib diisi!')
+    .min(1, 'Warehouse wajib diisi!'),
+
+  transaction_type: Yup.string()
+    .oneOf(['increase', 'decrease'], 'Tipe transaksi tidak valid')
+    .nullable()
+    .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!'),
+});
 
 export type InventoryAdjustmentFormValues = Yup.InferType<
   typeof InventoryAdjustmentFormSchema

src/components/pages/inventory/adjustment/skeleton/InventoryAdjustmentTableSkeleton.tsx

@@ -1,37 +0,0 @@
-import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
-import Table from '@/components/Table';
-import { InventoryAdjustment } from '@/types/api/inventory/adjustment';
-import { ColumnDef } from '@tanstack/react-table';
-
-const InventoryAdjustmentTableSkeleton = ({
-  columns,
-  icon,
-  title = 'No Data Available',
-  subtitle = 'There is no inventory adjustment data displayed. Enter inventory adjustment data to get started.',
-}: {
-  columns: ColumnDef<InventoryAdjustment>[];
-  icon: React.ReactNode;
-  title?: string;
-  subtitle?: string;
-}) => {
-  return (
-    <div className='relative size-full'>
-      <Table
-        data={[]}
-        columns={columns}
-        isLoading={true}
-        className={{
-          skeletonCellClassName: 'animate-none w-full h-5 bg-base-content/4',
-          headerColumnClassName: 'whitespace-nowrap',
-          containerClassName: 'mb-0 overflow-hidden',
-          tableWrapperClassName: 'overflow-hidden',
-        }}
-      />
-      <div className='absolute inset-0 flex items-center justify-center'>
-        <DataStateSkeleton icon={icon} title={title} description={subtitle} />
-      </div>
-    </div>
-  );
-};
-
-export default InventoryAdjustmentTableSkeleton;

src/components/pages/inventory/movement/MovementTable.tsx

@@ -1,98 +1,49 @@
 'use client';
 
-import {
-  ChangeEventHandler,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
-import { usePathname } from 'next/navigation';
+import { ChangeEventHandler, useState } from 'react';
 import useSWR from 'swr';
 import { SortingState, CellContext, ColumnDef } from '@tanstack/react-table';
-import { useFormik } from 'formik';
 
 import Table from '@/components/Table';
 import { Icon } from '@iconify/react';
 import { Movement } from '@/types/api/inventory/movement';
 import { MovementApi } from '@/services/api/inventory';
-import { WarehouseApi, ProductApi } from '@/services/api/master-data';
 import { cn } from '@/lib/helper';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
-import { useUiStore } from '@/stores/ui/ui.store';
+import { ROWS_OPTIONS } from '@/config/constant';
+import { OptionType } from '@/components/input/SelectInput';
 import Button from '@/components/Button';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
-import SelectInput, { useSelect } from '@/components/input/SelectInput';
-import { OptionType } from '@/components/input/SelectInput';
-import ButtonFilter from '@/components/helper/ButtonFilter';
-import Modal, { useModal } from '@/components/Modal';
+import SelectInput from '@/components/input/SelectInput';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import RequirePermission from '@/components/helper/RequirePermission';
-import PopoverButton from '@/components/popover/PopoverButton';
-import PopoverContent from '@/components/popover/PopoverContent';
-import MovementTableSkeleton from '@/components/pages/inventory/movement/skeleton/MovementTableSkeleton';
-import { Warehouse } from '@/types/api/master-data/warehouse';
-import { Product } from '@/types/api/master-data/product';
-import {
-  MovementFilterSchema,
-  MovementFilterType,
-} from '@/components/pages/inventory/movement/filter/MovementFilter';
 
 const RowOptionsMenu = ({
-  popoverPosition = 'bottom',
+  type = 'dropdown',
   props,
 }: {
-  popoverPosition: 'bottom' | 'top';
+  type: 'dropdown' | 'collapse';
   props: CellContext<Movement, unknown>;
-}) => {
-  const popoverId = `movement#${props.row.original.id}`;
-  const popoverAnchorName = `--anchor-movement#${props.row.original.id}`;
-
-  const closePopover = () => {
-    document.getElementById(popoverId)?.hidePopover();
-  };
-
-  return (
-    <div className='relative'>
-      <PopoverButton
-        tabIndex={0}
+}) => (
+  <RowOptionsMenuWrapper type={type}>
+    <RequirePermission permissions='lti.inventory.transfer.detail'>
+      <Button
+        href={`/inventory/movement/detail/?movementId=${props.row.original.id}`}
         variant='ghost'
-        color='none'
-        popoverTarget={popoverId}
-        anchorName={popoverAnchorName}
+        color='primary'
+        className='justify-start text-sm'
       >
-        <Icon icon='material-symbols:more-vert' width={16} height={16} />
-      </PopoverButton>
-
-      <PopoverContent
-        id={popoverId}
-        anchorName={popoverAnchorName}
-        position={popoverPosition === 'bottom' ? 'bottom-start' : 'left'}
-        className='w-full max-w-40 rounded-xl border border-base-content/5 shadow-sm'
-      >
-        <div className='flex flex-col bg-base-100 rounded-xl'>
-          <RequirePermission permissions='lti.inventory.transfer.detail'>
-            <Button
-              href={`/inventory/movement/detail/?movementId=${props.row.original.id}`}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full'
-              onClick={closePopover}
-            >
-              <Icon icon='heroicons:eye' width={20} height={20} />
-              Detail
-            </Button>
-          </RequirePermission>
-        </div>
-      </PopoverContent>
-    </div>
-  );
-};
+        <Icon icon='mdi:eye-outline' width={16} height={16} />
+        Detail
+      </Button>
+    </RequirePermission>
+  </RowOptionsMenuWrapper>
+);
 
 const MovementTable = () => {
-  const { searchValue, setSearchValue, setTableState } = useUiStore();
-  const pathname = usePathname();
-
   const {
     state: tableFilterState,
     updateFilter,
@@ -102,109 +53,13 @@ const MovementTable = () => {
   } = useTableFilter({
     initial: {
       search: '',
-      productFilter: '',
-      warehouseFilter: '',
     },
     paramMap: {
       page: 'page',
       pageSize: 'limit',
-      productFilter: 'product_id',
-      warehouseFilter: 'warehouse_id',
     },
   });
 
-  // ===== FILTER MODAL STATE =====
-  const filterModal = useModal();
-
-  // ===== FORMIK SETUP =====
-  const formik = useFormik<MovementFilterType>({
-    initialValues: {
-      product_id: null,
-      warehouse_id: null,
-    },
-    validationSchema: MovementFilterSchema,
-    onSubmit: (values, { setSubmitting }) => {
-      updateFilter('productFilter', values.product_id || '');
-      updateFilter('warehouseFilter', values.warehouse_id || '');
-      filterModal.closeModal();
-      setSubmitting(false);
-    },
-    onReset: () => {
-      updateFilter('productFilter', '');
-      updateFilter('warehouseFilter', '');
-    },
-  });
-
-  // ===== PRODUCT OPTIONS =====
-  const {
-    setInputValue: setProductInputValue,
-    options: productOptions,
-    isLoadingOptions: isLoadingProductOptions,
-    loadMore: loadMoreProducts,
-  } = useSelect<Product>(
-    filterModal.open ? ProductApi.basePath : null,
-    'id',
-    'name',
-    'search'
-  );
-
-  // ===== WAREHOUSE OPTIONS =====
-  const {
-    setInputValue: setWarehouseInputValue,
-    options: warehouseOptions,
-    isLoadingOptions: isLoadingWarehouseOptions,
-    loadMore: loadMoreWarehouses,
-  } = useSelect<Warehouse>(
-    filterModal.open ? WarehouseApi.basePath : null,
-    'id',
-    'name',
-    'search'
-  );
-
-  // ===== FILTER HANDLERS =====
-  const handleFilterProductChange = useCallback(
-    (val: OptionType | OptionType[] | null) => {
-      const product = val as OptionType | null;
-      const productId = product?.value ? String(product.value) : null;
-      formik.setFieldValue('product_id', productId);
-    },
-    [formik]
-  );
-
-  const handleFilterWarehouseChange = useCallback(
-    (val: OptionType | OptionType[] | null) => {
-      const warehouse = val as OptionType | null;
-      const warehouseId = warehouse?.value ? String(warehouse.value) : null;
-      formik.setFieldValue('warehouse_id', warehouseId);
-    },
-    [formik]
-  );
-
-  // ===== FILTER HELPERS =====
-  const productIdValue = useMemo(() => {
-    if (!formik.values.product_id) return null;
-    return (
-      productOptions.find(
-        (opt) => String(opt.value) === formik.values.product_id
-      ) || null
-    );
-  }, [formik.values.product_id, productOptions]);
-
-  const warehouseIdValue = useMemo(() => {
-    if (!formik.values.warehouse_id) return null;
-    return (
-      warehouseOptions.find(
-        (opt) => String(opt.value) === formik.values.warehouse_id
-      ) || null
-    );
-  }, [formik.values.warehouse_id, warehouseOptions]);
-
-  // ===== HANDLE FILTER MODAL OPEN =====
-  const handleFilterModalOpen = () => {
-    filterModal.openModal();
-    formik.validateForm();
-  };
-
   const [sorting, setSorting] = useState<SortingState>([]);
 
   const { data: movements, isLoading } = useSWR(
@@ -212,249 +67,153 @@ const MovementTable = () => {
     MovementApi.getAllFetcher
   );
 
-  useEffect(() => {
-    updateFilter('search', searchValue);
-  }, [searchValue, updateFilter]);
-
-  useEffect(() => {
-    setTableState('movement-table', pathname);
-  }, [pathname, setTableState]);
-
   const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
-    setSearchValue(e.target.value);
     updateFilter('search', e.target.value);
   };
 
-  const movementColumns: ColumnDef<Movement>[] = useMemo(
-    () => [
-      {
-        header: 'No',
-        cell: (props) =>
-          tableFilterState.pageSize * (tableFilterState.page - 1) +
-          props.row.index +
-          1,
-      },
-      {
-        accessorFn: (row) => row.source_warehouse?.name,
-        header: 'Gudang Asal',
-      },
-      {
-        accessorFn: (row) => row.destination_warehouse?.name,
-        header: 'Gudang Tujuan',
-      },
-      {
-        accessorKey: 'transfer_reason',
-        header: 'Catatan',
-      },
-      {
-        accessorKey: 'transfer_date',
-        header: 'Tanggal',
-        cell: (props) =>
-          new Date(props.row.original.transfer_date).toLocaleDateString(
-            'id-ID'
-          ),
-      },
-      {
-        accessorFn: (row) => {
-          const totalCost = row.deliveries?.reduce(
-            (sum, d) => sum + (d.shipping_cost_total || 0),
-            0
-          );
-          return totalCost?.toLocaleString('id-ID');
-        },
-        header: 'Biaya Pengiriman',
-      },
-      {
-        header: 'Aksi',
-        cell: (props: CellContext<Movement, unknown>) => {
-          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 pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
+    setPageSize(newVal.value as number);
+    setPage(1);
+  };
 
-          const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
-
-          return (
-            <RowOptionsMenu
-              props={props}
-              popoverPosition={isLast2Rows ? 'top' : 'bottom'}
-            />
-          );
-        },
+  const movementColumns: ColumnDef<Movement>[] = [
+    {
+      header: '#',
+      cell: (props) =>
+        tableFilterState.pageSize * (tableFilterState.page - 1) +
+        props.row.index +
+        1,
+    },
+    {
+      accessorFn: (row) => row.source_warehouse?.name,
+      header: 'Gudang Asal',
+    },
+    {
+      accessorFn: (row) => row.destination_warehouse?.name,
+      header: 'Gudang Tujuan',
+    },
+    {
+      accessorKey: 'transfer_reason',
+      header: 'Catatan',
+    },
+    {
+      accessorKey: 'transfer_date',
+      header: 'Tanggal',
+      cell: (props) =>
+        new Date(props.row.original.transfer_date).toLocaleDateString('id-ID'),
+    },
+    {
+      accessorFn: (row) => {
+        const totalCost = row.deliveries?.reduce(
+          (sum, d) => sum + (d.shipping_cost_total || 0),
+          0
+        );
+        return totalCost?.toLocaleString('id-ID');
       },
-    ],
-    [tableFilterState.pageSize, tableFilterState.page]
-  );
+      header: 'Biaya Pengiriman',
+    },
+    {
+      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='collapse' props={props} />
+              </RowCollapseOptions>
+            )}
+          </>
+        );
+      },
+    },
+  ];
 
   return (
     <>
-      <div className='w-full'>
-        {/* Header Section */}
-        <div className='w-full p-3 flex flex-row justify-between gap-3 flex-wrap border-b border-base-content/10'>
-          {/* Action Buttons */}
-          <div className='w-fit flex flex-row gap-3 flex-wrap'>
-            <RequirePermission permissions='lti.inventory.transfer.create'>
-              <Button
-                href='/inventory/movement/add'
-                color='primary'
-                className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
-              >
-                <Icon icon='heroicons:plus' width={20} height={20} />
-                Add Movement
-              </Button>
-            </RequirePermission>
-          </div>
+      <div className='w-full p-0 sm:p-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
+            <div className='w-full flex flex-row gap-2'>
+              <RequirePermission permissions='lti.inventory.transfer.create'>
+                <Button
+                  href='/inventory/movement/add'
+                  color='primary'
+                  className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
+                >
+                  <Icon icon='heroicons:plus' width={20} height={20} />
+                  Add Movement
+                </Button>
+              </RequirePermission>
+            </div>
 
-          {/* Search and Filter */}
-          <div className='flex flex-1 flex-row justify-start sm:justify-end items-center gap-3 flex-wrap'>
             <DebouncedTextInput
               name='search'
-              placeholder='Search'
-              value={tableFilterState.search ?? ''}
+              placeholder='Cari Movement'
+              value={tableFilterState.search}
               onChange={searchChangeHandler}
-              startAdornment={
-                <Icon
-                  icon='heroicons:magnifying-glass'
-                  width={20}
-                  height={20}
-                />
-              }
-              className={{
-                wrapper: 'w-full min-w-24 max-w-3xs',
-                inputWrapper: 'rounded-xl! shadow-button-soft',
-                input:
-                  'placeholder:font-semibold placeholder:text-base-content/50',
-              }}
+              className={{ wrapper: 'sm:max-w-3xs' }}
             />
+          </div>
 
-            <ButtonFilter
-              values={tableFilterState}
-              excludeFields={['page', 'pageSize', 'search']}
-              onClick={handleFilterModalOpen}
-              className='px-3 py-2.5'
+          <div className='flex justify-end gap-4'>
+            <SelectInput
+              label='Baris'
+              options={ROWS_OPTIONS}
+              value={{
+                label: String(tableFilterState.pageSize),
+                value: tableFilterState.pageSize,
+              }}
+              onChange={pageSizeChangeHandler}
+              className={{
+                wrapper:
+                  'col-span-6 sm:col-span-4 max-w-28 sm:justify-self-end',
+              }}
             />
           </div>
         </div>
 
-        {/* Table Section */}
-        <div className='flex flex-col mb-4'>
-          {isLoading ? (
-            <div className='w-full flex flex-row justify-center items-center p-4'>
-              <span className='loading loading-spinner loading-xl' />
-            </div>
-          ) : !isResponseSuccess(movements) || movements.data?.length === 0 ? (
-            <div className='p-3'>
-              <MovementTableSkeleton
-                columns={movementColumns}
-                icon={
-                  <Icon
-                    icon='heroicons:document-text'
-                    className='text-white'
-                    width={20}
-                    height={20}
-                  />
-                }
-              />
-            </div>
-          ) : (
-            <Table<Movement>
-              data={isResponseSuccess(movements) ? movements?.data : []}
-              columns={movementColumns}
-              pageSize={tableFilterState.pageSize}
-              page={isResponseSuccess(movements) ? movements?.meta?.page : 0}
-              totalItems={
-                isResponseSuccess(movements)
-                  ? movements?.meta?.total_results
-                  : 0
-              }
-              onPageChange={setPage}
-              onPageSizeChange={setPageSize}
-              isLoading={isLoading}
-              sorting={sorting}
-              setSorting={setSorting}
-              className={{
-                containerClassName: cn('p-3 mb-0'),
-                headerColumnClassName: 'text-nowrap',
-              }}
-            />
-          )}
-        </div>
+        <Table<Movement>
+          data={isResponseSuccess(movements) ? movements?.data : []}
+          columns={movementColumns}
+          pageSize={tableFilterState.pageSize}
+          page={isResponseSuccess(movements) ? movements?.meta?.page : 0}
+          totalItems={
+            isResponseSuccess(movements) ? movements?.meta?.total_results : 0
+          }
+          onPageChange={setPage}
+          isLoading={isLoading}
+          sorting={sorting}
+          setSorting={setSorting}
+          className={{
+            containerClassName: cn({
+              'mb-20':
+                isResponseSuccess(movements) && movements?.data?.length === 0,
+            }),
+            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+            tableClassName: 'font-inter w-full table-auto min-h-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+            bodyRowClassName: 'border-b border-b-gray-200',
+            bodyColumnClassName:
+              'px-6 py-3 last:flex last:flex-row last:justify-end',
+          }}
+        />
       </div>
-
-      {/* Filter Modal */}
-      <Modal
-        ref={filterModal.ref}
-        className={{
-          modal: 'p-0',
-          modalBox: 'p-0 rounded-[0.875rem] xl:max-w-4/12 max-w-sm',
-        }}
-      >
-        {/* Modal Header */}
-        <div className='flex items-center justify-between gap-2 border-b border-base-content/10 p-4'>
-          <div className='flex items-center gap-2 text-primary'>
-            <Icon icon='heroicons:funnel' width={20} height={20} />
-            <h3 className='font-medium text-sm'>Filter Data</h3>
-          </div>
-          <Button
-            variant='link'
-            onClick={filterModal.closeModal}
-            className='text-base-content/50 hover:text-base-content transition-colors cursor-pointer'
-          >
-            <Icon icon='heroicons:x-mark' width={20} height={20} />
-          </Button>
-        </div>
-        <form onSubmit={formik.handleSubmit} onReset={formik.handleReset}>
-          <div className='p-4 flex flex-col gap-1.5'>
-            <SelectInput
-              label='Produk'
-              placeholder='Pilih Produk'
-              options={productOptions}
-              value={productIdValue}
-              onChange={handleFilterProductChange}
-              onInputChange={setProductInputValue}
-              isLoading={isLoadingProductOptions}
-              isClearable
-              onMenuScrollToBottom={loadMoreProducts}
-              className={{ wrapper: 'w-full' }}
-            />
-            <SelectInput
-              label='Gudang'
-              placeholder='Pilih Gudang'
-              options={warehouseOptions}
-              value={warehouseIdValue}
-              onChange={handleFilterWarehouseChange}
-              onInputChange={setWarehouseInputValue}
-              isLoading={isLoadingWarehouseOptions}
-              isClearable
-              onMenuScrollToBottom={loadMoreWarehouses}
-              className={{ wrapper: 'w-full' }}
-            />
-          </div>
-
-          {/* Modal Footer */}
-          <div className='flex justify-between items-center gap-4 p-4 border-t border-base-content/10 bg-gray-50'>
-            <Button
-              type='button'
-              variant='soft'
-              className='rounded-lg text-base-content/65 bg-transparent border-none hover:bg-base-content/10 hover:text-base-content/65 transition-colors px-3 py-2'
-              onClick={() => {
-                formik.resetForm();
-                filterModal.closeModal();
-              }}
-            >
-              Reset Filter
-            </Button>
-            <Button
-              type='submit'
-              className='min-w-40 text-sm rounded-lg py-3 text-white font-semibold'
-              disabled={!formik.isValid || formik.isSubmitting}
-            >
-              Apply Filter
-            </Button>
-          </div>
-        </form>
-      </Modal>
     </>
   );
 };

src/components/pages/inventory/movement/filter/MovementFilter.ts

@@ -1,11 +0,0 @@
-import { string, object } from 'yup';
-
-export const MovementFilterSchema = object().shape({
-  product_id: string().nullable(),
-  warehouse_id: string().nullable(),
-});
-
-export type MovementFilterType = {
-  product_id: string | null;
-  warehouse_id: string | null;
-};

src/components/pages/inventory/movement/form/MovementForm.tsx

@@ -323,8 +323,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     },
   });
 
-  const { setFieldValue, setFieldTouched, setFieldError } = formik;
-
   const prevSourceWarehouseIdRef = useRef<number | null>(
     formik.values.source_warehouse_id
   );
@@ -338,14 +336,14 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
       prevSourceWarehouseId !== currentSourceWarehouseId &&
       prevSourceWarehouseId !== null
     ) {
-      setFieldValue('products', [
+      formik.setFieldValue('products', [
         {
           product: null,
           product_id: 0,
           product_qty: '',
         },
       ]);
-      setFieldTouched('products', false);
+      formik.setFieldTouched('products', false);
 
       const updatedDeliveries = formik.values.deliveries.map(
         (delivery: DeliverySchema) => ({
@@ -359,17 +357,12 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
           ],
         })
       );
-      setFieldValue('deliveries', updatedDeliveries);
-      setFieldTouched('deliveries', false);
+      formik.setFieldValue('deliveries', updatedDeliveries);
+      formik.setFieldTouched('deliveries', false);
     }
 
     prevSourceWarehouseIdRef.current = currentSourceWarehouseId;
-  }, [
-    formik.values.source_warehouse_id,
-    formik.values.deliveries,
-    setFieldValue,
-    setFieldTouched,
-  ]);
+  }, [formik.values.source_warehouse_id, formik.values.deliveries]);
 
   // ===== PRODUCT WAREHOUSE FETCHING (after form initialization) =====
   const {
@@ -462,9 +455,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
   // ===== EVENT HANDLERS =====
   const handleTransferDateChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
-      setFieldValue('transfer_date', e.target.value);
+      formik.setFieldValue('transfer_date', e.target.value);
     },
-    [setFieldValue]
+    []
   );
 
   const handleSourceWarehouseChange = useCallback(
@@ -484,16 +477,14 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
         return;
       }
 
-      setFieldTouched('source_warehouse', true);
-      setFieldValue('source_warehouse', val);
-      setFieldTouched('source_warehouse_id', true);
-      setFieldValue('source_warehouse_id', newSourceWarehouseId);
+      formik.setFieldTouched('source_warehouse', true);
+      formik.setFieldValue('source_warehouse', val);
+      formik.setFieldTouched('source_warehouse_id', true);
+      formik.setFieldValue('source_warehouse_id', newSourceWarehouseId);
     },
     [
       formik.values.destination_warehouse_id,
       formik.values.destination_warehouse,
-      setFieldTouched,
-      setFieldValue,
     ]
   );
 
@@ -514,17 +505,15 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
         return;
       }
 
-      setFieldTouched('destination_warehouse', true);
-      setFieldValue('destination_warehouse', val);
-      setFieldTouched('destination_warehouse_id', true);
-      setFieldValue('destination_warehouse_id', newDestinationWarehouseId);
+      formik.setFieldTouched('destination_warehouse', true);
+      formik.setFieldValue('destination_warehouse', val);
+      formik.setFieldTouched('destination_warehouse_id', true);
+      formik.setFieldValue(
+        'destination_warehouse_id',
+        newDestinationWarehouseId
+      );
     },
-    [
-      formik.values.source_warehouse_id,
-      formik.values.source_warehouse,
-      setFieldTouched,
-      setFieldValue,
-    ]
+    [formik.values.source_warehouse_id, formik.values.source_warehouse]
   );
 
   const addProduct = useCallback(() => {
@@ -536,15 +525,15 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
         product_qty: '',
       },
     ];
-    setFieldValue('products', newProducts);
-  }, [formik.values.products, setFieldValue]);
+    formik.setFieldValue('products', newProducts);
+  }, [formik.values.products]);
 
   const removeProduct = useCallback(
     (i: number) => {
       const updatedProducts = formik.values.products?.filter(
         (_, idx) => idx !== i
       );
-      setFieldValue('products', updatedProducts);
+      formik.setFieldValue('products', updatedProducts);
 
       setSelectedProducts([]);
 
@@ -553,12 +542,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
         setProductQtyErrorShown(false);
       }
     },
-    [
-      formik.values.products,
-      productQtyErrorShown,
-      setSelectedProducts,
-      setFieldValue,
-    ]
+    [formik.values.products, productQtyErrorShown, setSelectedProducts]
   );
 
   const bulkRemoveProduct = useCallback(() => {
@@ -566,32 +550,26 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
       formik.values.products?.filter(
         (_, idx) => !selectedProducts.includes(idx)
       ) ?? [];
-    setFieldValue('products', updatedProducts);
+    formik.setFieldValue('products', updatedProducts);
     setSelectedProducts([]);
 
     if (productQtyErrorShown) {
       toast.dismiss();
       setProductQtyErrorShown(false);
     }
-  }, [
-    selectedProducts,
-    setSelectedProducts,
-    productQtyErrorShown,
-    setFieldValue,
-    formik.values.products,
-  ]);
+  }, [formik, selectedProducts, setSelectedProducts, productQtyErrorShown]);
 
   const handleProductChange = useCallback(
     (idx: number, val: OptionType | OptionType[] | null) => {
-      setFieldTouched(`products.${idx}.product`, true);
-      setFieldValue(`products.${idx}.product`, val);
-      setFieldTouched(`products.${idx}.product_id`, true);
-      setFieldValue(
+      formik.setFieldTouched(`products.${idx}.product`, true);
+      formik.setFieldValue(`products.${idx}.product`, val);
+      formik.setFieldTouched(`products.${idx}.product_id`, true);
+      formik.setFieldValue(
         `products.${idx}.product_id`,
         (val as ProductWarehouseOptionType)?.value
       );
     },
-    [setFieldTouched, setFieldValue]
+    []
   );
 
   const handleProductSelectAllChange = useCallback(
@@ -618,7 +596,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
   );
 
   const addDelivery = useCallback(() => {
-    setFieldValue('deliveries', [
+    formik.setFieldValue('deliveries', [
       ...(formik.values.deliveries || []),
       {
         delivery_cost: '',
@@ -637,14 +615,14 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
         ],
       },
     ]);
-  }, [formik.values.deliveries, setFieldValue]);
+  }, [formik.values.deliveries]);
 
   const removeDelivery = useCallback(
     (i: number) => {
       const updatedDeliveries = formik.values.deliveries?.filter(
         (_, idx) => idx !== i
       );
-      setFieldValue('deliveries', updatedDeliveries);
+      formik.setFieldValue('deliveries', updatedDeliveries);
 
       setSelectedDeliveries([]);
 
@@ -653,12 +631,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
         setDeliveryQtyErrorShown(false);
       }
     },
-    [
-      formik.values.deliveries,
-      deliveryQtyErrorShown,
-      setSelectedDeliveries,
-      setFieldValue,
-    ]
+    [formik.values.deliveries, deliveryQtyErrorShown, setSelectedDeliveries]
   );
 
   const bulkRemoveDelivery = useCallback(() => {
@@ -666,7 +639,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
       formik.values.deliveries?.filter(
         (_, idx) => !selectedDeliveries.includes(idx)
       ) ?? [];
-    setFieldValue('deliveries', updatedDeliveries);
+    formik.setFieldValue('deliveries', updatedDeliveries);
     setSelectedDeliveries([]);
 
     if (deliveryQtyErrorShown) {
@@ -674,11 +647,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
       setDeliveryQtyErrorShown(false);
     }
   }, [
+    formik,
     selectedDeliveries,
     setSelectedDeliveries,
     deliveryQtyErrorShown,
-    setFieldValue,
-    formik.values.deliveries,
   ]);
 
   const handleDeliverySelectAllChange = useCallback(
@@ -708,28 +680,34 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
 
   const handleDeliveryProductChange = useCallback(
     (deliveryIdx: number, val: OptionType | OptionType[] | null) => {
-      setFieldTouched(`deliveries.${deliveryIdx}.products.0.product`, true);
-      setFieldValue(`deliveries.${deliveryIdx}.products.0.product`, val);
-      setFieldTouched(`deliveries.${deliveryIdx}.products.0.product_id`, true);
-      setFieldValue(
+      formik.setFieldTouched(
+        `deliveries.${deliveryIdx}.products.0.product`,
+        true
+      );
+      formik.setFieldValue(`deliveries.${deliveryIdx}.products.0.product`, val);
+      formik.setFieldTouched(
+        `deliveries.${deliveryIdx}.products.0.product_id`,
+        true
+      );
+      formik.setFieldValue(
         `deliveries.${deliveryIdx}.products.0.product_id`,
         (val as OptionType)?.value
       );
     },
-    [setFieldTouched, setFieldValue]
+    []
   );
 
   const handleDeliverySupplierChange = useCallback(
     (deliveryIdx: number, val: OptionType | OptionType[] | null) => {
-      setFieldTouched(`deliveries.${deliveryIdx}.supplier`, true);
-      setFieldValue(`deliveries.${deliveryIdx}.supplier`, val);
-      setFieldTouched(`deliveries.${deliveryIdx}.supplier_id`, true);
-      setFieldValue(
+      formik.setFieldTouched(`deliveries.${deliveryIdx}.supplier`, true);
+      formik.setFieldValue(`deliveries.${deliveryIdx}.supplier`, val);
+      formik.setFieldTouched(`deliveries.${deliveryIdx}.supplier_id`, true);
+      formik.setFieldValue(
         `deliveries.${deliveryIdx}.supplier_id`,
         (val as OptionType)?.value
       );
     },
-    [setFieldTouched, setFieldValue]
+    []
   );
 
   const handleDeliveryDocumentChange = useCallback(
@@ -741,15 +719,15 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
           e.target.value = '';
           return;
         }
-        setFieldValue(`deliveries.${deliveryIdx}.document`, file);
+        formik.setFieldValue(`deliveries.${deliveryIdx}.document`, file);
       }
     },
-    [setFieldValue]
+    []
   );
 
   const handleDeliveryCostChange = useCallback(
     (idx: number, value: number) => {
-      setFieldValue(`deliveries.${idx}.delivery_cost`, value);
+      formik.setFieldValue(`deliveries.${idx}.delivery_cost`, value);
 
       const delivery = formik.values.deliveries?.[idx];
       if (delivery) {
@@ -759,18 +737,21 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
         );
         if (productQty > 0 && value > 0) {
           const perItem = value / productQty;
-          setFieldValue(`deliveries.${idx}.delivery_cost_per_item`, perItem);
+          formik.setFieldValue(
+            `deliveries.${idx}.delivery_cost_per_item`,
+            perItem
+          );
         } else if (value === 0) {
-          setFieldValue(`deliveries.${idx}.delivery_cost_per_item`, 0);
+          formik.setFieldValue(`deliveries.${idx}.delivery_cost_per_item`, 0);
         }
       }
     },
-    [formik.values.deliveries, setFieldValue]
+    [formik.values.deliveries]
   );
 
   const handleDeliveryCostPerItemChange = useCallback(
     (idx: number, value: number) => {
-      setFieldValue(`deliveries.${idx}.delivery_cost_per_item`, value);
+      formik.setFieldValue(`deliveries.${idx}.delivery_cost_per_item`, value);
 
       const delivery = formik.values.deliveries?.[idx];
       if (delivery) {
@@ -780,13 +761,13 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
         );
         if (productQty > 0 && value > 0) {
           const totalCost = value * productQty;
-          setFieldValue(`deliveries.${idx}.delivery_cost`, totalCost);
+          formik.setFieldValue(`deliveries.${idx}.delivery_cost`, totalCost);
         } else if (value === 0) {
-          setFieldValue(`deliveries.${idx}.delivery_cost`, 0);
+          formik.setFieldValue(`deliveries.${idx}.delivery_cost`, 0);
         }
       }
     },
-    [formik.values.deliveries, setFieldValue]
+    [formik.values.deliveries]
   );
 
   const handleDeliveryCostChangeWrapper = useCallback(
@@ -1063,7 +1044,12 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
               return !validateDeliveryQty(deliveryIdx, productIdx, qty);
             })
           ) ?? []),
-    [formik.values.deliveries, validateDeliveryQty, type]
+    [
+      formik.values.deliveries,
+      formik.values.products,
+      validateDeliveryQty,
+      type,
+    ]
   );
 
   const hasInvalidQty = useMemo(
@@ -1080,27 +1066,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     );
   }, [formik.values.products, getProductQtyError, type]);
 
-  const deliveryCostDepString = useMemo(
-    () =>
-      formik.values.deliveries
-        ?.map((d, idx) => ({
-          idx,
-          productQty: d.products.reduce(
-            (sum, p) => sum + (parseInt(p.product_qty.toString()) || 0),
-            0
-          ),
-          deliveryCost: parseInt((d.delivery_cost || '').toString()) || 0,
-          deliveryCostPerItem:
-            parseInt((d.delivery_cost_per_item || '').toString()) || 0,
-        }))
-        .map(
-          (item) =>
-            `${item.idx}:${item.productQty}:${item.deliveryCost}:${item.deliveryCostPerItem}`
-        )
-        .join('|'),
-    [formik.values.deliveries]
-  );
-
   // ===== EFFECTS =====
   useEffect(() => {
     formik.values.deliveries?.forEach((delivery, idx) => {
@@ -1117,16 +1082,36 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
       if (deliveryCost > 0 && productQty > 0) {
         const perItem = deliveryCost / productQty;
         if (Math.abs(deliveryCostPerItem - perItem) > 0.01) {
-          setFieldValue(`deliveries.${idx}.delivery_cost_per_item`, perItem);
+          formik.setFieldValue(
+            `deliveries.${idx}.delivery_cost_per_item`,
+            perItem
+          );
         }
       } else if (deliveryCostPerItem > 0 && productQty > 0) {
         const totalCost = deliveryCostPerItem * productQty;
         if (Math.abs(deliveryCost - totalCost) > 0.01) {
-          setFieldValue(`deliveries.${idx}.delivery_cost`, totalCost);
+          formik.setFieldValue(`deliveries.${idx}.delivery_cost`, totalCost);
         }
       }
     });
-  }, [deliveryCostDepString, setFieldValue, formik.values.deliveries]);
+  }, [
+    formik.values.deliveries
+      ?.map((d, idx) => ({
+        idx,
+        productQty: d.products.reduce(
+          (sum, p) => sum + (parseInt(p.product_qty.toString()) || 0),
+          0
+        ),
+        deliveryCost: parseInt((d.delivery_cost || '').toString()) || 0,
+        deliveryCostPerItem:
+          parseInt((d.delivery_cost_per_item || '').toString()) || 0,
+      }))
+      .map(
+        (item) =>
+          `${item.idx}:${item.productQty}:${item.deliveryCost}:${item.deliveryCostPerItem}`
+      )
+      .join('|'),
+  ]);
 
   useEffect(() => {
     if (
@@ -1136,7 +1121,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
       !isInitialized
     ) {
       if (formik.values.products.length === 0) {
-        setFieldValue('products', [
+        formik.setFieldValue('products', [
           {
             product: null,
             product_id: 0,
@@ -1145,7 +1130,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
         ]);
       }
       if (formik.values.deliveries.length === 0) {
-        setFieldValue('deliveries', [
+        formik.setFieldValue('deliveries', [
           {
             delivery_cost: undefined,
             delivery_cost_per_item: undefined,
@@ -1167,14 +1152,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
       }
       setIsInitialized(true);
     }
-  }, [
-    formik.values.source_warehouse_id,
-    isInitialized,
-    type,
-    setFieldValue,
-    formik.values.products.length,
-    formik.values.deliveries.length,
-  ]);
+  }, [formik.values.source_warehouse_id, isInitialized, type]);
 
   useEffect(() => {
     if (
@@ -1183,7 +1161,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
       formik.values.source_warehouse_id ===
         formik.values.destination_warehouse_id
     ) {
-      setFieldError(
+      formik.setFieldError(
         'destination_warehouse_id',
         'Gudang tujuan tidak boleh sama dengan gudang asal!'
       );
@@ -1192,14 +1170,13 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
         formik.errors.destination_warehouse_id ===
         'Gudang tujuan tidak boleh sama dengan gudang asal!'
       ) {
-        setFieldError('destination_warehouse_id', undefined);
+        formik.setFieldError('destination_warehouse_id', undefined);
       }
     }
   }, [
     formik.values.source_warehouse_id,
     formik.values.destination_warehouse_id,
     formik.errors.destination_warehouse_id,
-    setFieldError,
   ]);
 
   useEffect(() => {
@@ -1235,37 +1212,29 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
       );
 
       if (hasChanges) {
-        setFieldValue('deliveries', updatedDeliveries);
+        formik.setFieldValue('deliveries', updatedDeliveries);
       }
     }
-  }, [formik.values.products, formik.values.deliveries, setFieldValue]);
-
-  const productQtyDepString = useMemo(
-    () => formik.values.products?.map((p) => p.product_qty).join(','),
-    [formik.values.products]
-  );
+  }, [formik.values.products]);
 
   useEffect(() => {
     if (productQtyErrorShown) {
       toast.dismiss();
       setProductQtyErrorShown(false);
     }
-  }, [productQtyErrorShown]);
-
-  const deliveryProductQtyDepString = useMemo(
-    () =>
-      formik.values.deliveries
-        ?.map((d) => d.products.map((p) => p.product_qty).join(','))
-        .join('|'),
-    [formik.values.deliveries]
-  );
+  }, [formik.values.products?.map((p) => p.product_qty).join(',')]);
 
   useEffect(() => {
     if (deliveryQtyErrorShown) {
       toast.dismiss();
       setDeliveryQtyErrorShown(false);
     }
-  }, [deliveryProductQtyDepString, productQtyDepString, deliveryQtyErrorShown]);
+  }, [
+    formik.values.deliveries
+      ?.map((d) => d.products.map((p) => p.product_qty).join(','))
+      .join('|'),
+    formik.values.products?.map((p) => p.product_qty).join(','),
+  ]);
 
   useEffect(() => {
     if (hasExceededStock && !productQtyErrorShown && type !== 'detail') {

src/components/pages/inventory/movement/skeleton/MovementTableSkeleton.tsx

@@ -1,37 +0,0 @@
-import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
-import Table from '@/components/Table';
-import { Movement } from '@/types/api/inventory/movement';
-import { ColumnDef } from '@tanstack/react-table';
-
-const MovementTableSkeleton = ({
-  columns,
-  icon,
-  title = 'No Data Available',
-  subtitle = 'There is no movement data displayed. Enter movement data to get started.',
-}: {
-  columns: ColumnDef<Movement>[];
-  icon: React.ReactNode;
-  title?: string;
-  subtitle?: string;
-}) => {
-  return (
-    <div className='relative size-full'>
-      <Table
-        data={[]}
-        columns={columns}
-        isLoading={true}
-        className={{
-          skeletonCellClassName: 'animate-none w-full h-5 bg-base-content/4',
-          headerColumnClassName: 'whitespace-nowrap',
-          containerClassName: 'mb-0 overflow-hidden',
-          tableWrapperClassName: 'overflow-hidden',
-        }}
-      />
-      <div className='absolute inset-0 flex items-center justify-center'>
-        <DataStateSkeleton icon={icon} title={title} description={subtitle} />
-      </div>
-    </div>
-  );
-};
-
-export default MovementTableSkeleton;

src/components/pages/inventory/product/InventoryProductTable.tsx

@@ -2,78 +2,46 @@
 
 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 RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import RequirePermission from '@/components/helper/RequirePermission';
+import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { cn, formatCurrency, formatNumber } from '@/lib/helper';
 import { InventoryProductApi } from '@/services/api/inventory';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
-import { useUiStore } from '@/stores/ui/ui.store';
 import { InventoryProduct } from '@/types/api/inventory/product';
 import { Icon } from '@iconify/react';
 import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
-import { ChangeEventHandler, useEffect, useMemo, useState } from 'react';
-import { usePathname } from 'next/navigation';
+import { ChangeEventHandler, useMemo, useState } from 'react';
 import useSWR from 'swr';
-import PopoverButton from '@/components/popover/PopoverButton';
-import PopoverContent from '@/components/popover/PopoverContent';
-import InventoryProductTableSkeleton from '@/components/pages/inventory/product/skeleton/InventoryProductTableSkeleton';
 
 const RowOptionsMenu = ({
-  popoverPosition = 'bottom',
+  type = 'dropdown',
   props,
 }: {
-  popoverPosition: 'bottom' | 'top';
+  type: 'dropdown' | 'collapse';
   props: CellContext<InventoryProduct, unknown>;
-}) => {
-  const popoverId = `product#${props.row.original.id}`;
-  const popoverAnchorName = `--anchor-product#${props.row.original.id}`;
-
-  const closePopover = () => {
-    document.getElementById(popoverId)?.hidePopover();
-  };
-
-  return (
-    <div className='relative'>
-      <PopoverButton
-        tabIndex={0}
+}) => (
+  <RowOptionsMenuWrapper type={type}>
+    <RequirePermission permissions='lti.inventory.product_stock.detail'>
+      <Button
+        href={`/inventory/product/detail?inventoryProductId=${props.row.original.id}`}
         variant='ghost'
-        color='none'
-        popoverTarget={popoverId}
-        anchorName={popoverAnchorName}
+        color='primary'
+        className='justify-start text-sm'
       >
-        <Icon icon='material-symbols:more-vert' width={16} height={16} />
-      </PopoverButton>
-
-      <PopoverContent
-        id={popoverId}
-        anchorName={popoverAnchorName}
-        position={popoverPosition === 'bottom' ? 'bottom-start' : 'left'}
-        className='w-full max-w-40 rounded-xl border border-base-content/5 shadow-sm'
-      >
-        <div className='flex flex-col bg-base-100 rounded-xl'>
-          <RequirePermission permissions='lti.inventory.product_stock.detail'>
-            <Button
-              href={`/inventory/product/detail?inventoryProductId=${props.row.original.id}`}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full'
-              onClick={closePopover}
-            >
-              <Icon icon='heroicons:eye' width={20} height={20} />
-              Detail
-            </Button>
-          </RequirePermission>
-        </div>
-      </PopoverContent>
-    </div>
-  );
-};
+        <Icon icon='mdi:eye-outline' width={16} height={16} />
+        Detail
+      </Button>
+    </RequirePermission>
+  </RowOptionsMenuWrapper>
+);
 
 const InventoryProductTable = () => {
-  const { searchValue, setSearchValue, setTableState } = useUiStore();
-  const pathname = usePathname();
-
   const {
     state: tableFilterState,
     updateFilter,
@@ -97,23 +65,20 @@ const InventoryProductTable = () => {
     InventoryProductApi.getAllFetcher
   );
 
-  useEffect(() => {
-    updateFilter('search', searchValue);
-  }, [searchValue, updateFilter]);
-
-  useEffect(() => {
-    setTableState('inventory-product-table', pathname);
-  }, [pathname, setTableState]);
-
   const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
-    setSearchValue(e.target.value);
     updateFilter('search', e.target.value);
   };
 
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
+    setPageSize(newVal.value as number);
+    setPage(1);
+  };
+
   const columns: ColumnDef<InventoryProduct>[] = useMemo(
     () => [
       {
-        header: 'No',
+        header: '#',
         cell: (props) =>
           tableFilterState.pageSize * (tableFilterState.page - 1) +
           props.row.index +
@@ -160,7 +125,7 @@ const InventoryProductTable = () => {
       },
       {
         header: 'Aksi',
-        cell: (props: CellContext<InventoryProduct, unknown>) => {
+        cell: (props) => {
           const currentPageSize =
             props.table.getPaginationRowModel().rows.length;
           const currentPageRows = props.table.getPaginationRowModel().flatRows;
@@ -170,108 +135,96 @@ const InventoryProductTable = () => {
           const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
 
           return (
-            <RowOptionsMenu
-              props={props}
-              popoverPosition={isLast2Rows ? 'top' : 'bottom'}
-            />
+            <>
+              {currentPageSize > 2 && (
+                <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                  <RowOptionsMenu type='dropdown' props={props} />
+                </RowDropdownOptions>
+              )}
+
+              {currentPageSize <= 2 && (
+                <RowCollapseOptions>
+                  <RowOptionsMenu type='collapse' props={props} />
+                </RowCollapseOptions>
+              )}
+            </>
           );
         },
       },
     ],
-    [tableFilterState.pageSize, tableFilterState.page]
+    []
   );
 
   return (
-    <div className='w-full'>
-      {/* Header Section */}
-      <div className='w-full p-3 flex flex-row justify-between gap-3 flex-wrap border-b border-base-content/10'>
-        {/* Action Buttons */}
-        <div className='w-fit flex flex-row gap-3 flex-wrap'>
-          <RequirePermission permissions='lti.inventory.product_stock.create'>
-            <Button
-              href='/inventory/product/add'
-              color='primary'
-              className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
-            >
-              <Icon icon='heroicons:plus' width={20} height={20} />
-              Add Product
-            </Button>
-          </RequirePermission>
-        </div>
-
-        {/* Search */}
-        <div className='flex flex-1 flex-row justify-start sm:justify-end items-center gap-3 flex-wrap'>
-          <DebouncedTextInput
-            name='search'
-            placeholder='Search'
-            value={tableFilterState.search ?? ''}
-            onChange={searchChangeHandler}
-            startAdornment={
-              <Icon icon='heroicons:magnifying-glass' width={20} height={20} />
-            }
-            className={{
-              wrapper: 'w-full min-w-24 max-w-3xs',
-              inputWrapper: 'rounded-xl! shadow-button-soft',
-              input:
-                'placeholder:font-semibold placeholder:text-base-content/50',
-            }}
-          />
-        </div>
-      </div>
-
-      {/* Table Section */}
-      <div className='flex flex-col mb-4'>
-        {isLoading ? (
-          <div className='w-full flex flex-row justify-center items-center p-4'>
-            <span className='loading loading-spinner loading-xl' />
+    <>
+      <div className='w-full p-0 sm:p-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
+            <div className='w-full flex flex-row gap-2'></div>
           </div>
-        ) : !isResponseSuccess(inventoryProducts) ||
-          inventoryProducts.data?.length === 0 ? (
-          <div className='p-3'>
-            <InventoryProductTableSkeleton
-              columns={columns}
-              icon={
-                <Icon
-                  icon='heroicons:document-text'
-                  className='text-white'
-                  width={20}
-                  height={20}
-                />
-              }
+
+          <div className='flex justify-between items-end gap-4'>
+            <DebouncedTextInput
+              name='search'
+              placeholder='Cari Produk'
+              value={tableFilterState.search}
+              onChange={searchChangeHandler}
+              className={{ wrapper: 'sm:max-w-3xs' }}
+            />
+            <SelectInput
+              label='Baris'
+              options={ROWS_OPTIONS}
+              value={{
+                label: String(tableFilterState.pageSize),
+                value: tableFilterState.pageSize,
+              }}
+              onChange={pageSizeChangeHandler}
+              className={{
+                wrapper:
+                  'col-span-6 sm:col-span-4 max-w-28 sm:justify-self-end',
+              }}
             />
           </div>
-        ) : (
-          <Table<InventoryProduct>
-            data={
-              isResponseSuccess(inventoryProducts)
-                ? inventoryProducts?.data
-                : []
-            }
-            columns={columns}
-            pageSize={tableFilterState.pageSize}
-            page={
-              isResponseSuccess(inventoryProducts)
-                ? inventoryProducts?.meta?.page
-                : 0
-            }
-            totalItems={
-              isResponseSuccess(inventoryProducts)
-                ? inventoryProducts?.meta?.total_results
-                : 0
-            }
-            onPageChange={setPage}
-            onPageSizeChange={setPageSize}
-            isLoading={isLoading}
-            sorting={sorting}
-            setSorting={setSorting}
-            className={{
-              containerClassName: cn('p-3 mb-0'),
-              headerColumnClassName: 'text-nowrap',
-            }}
-          />
-        )}
+        </div>
+
+        <Table<InventoryProduct>
+          data={
+            isResponseSuccess(inventoryProducts) ? inventoryProducts?.data : []
+          }
+          columns={columns}
+          pageSize={tableFilterState.pageSize}
+          page={
+            isResponseSuccess(inventoryProducts)
+              ? inventoryProducts?.meta?.page
+              : 0
+          }
+          totalItems={
+            isResponseSuccess(inventoryProducts)
+              ? inventoryProducts?.meta?.total_results
+              : 0
+          }
+          onPageChange={setPage}
+          isLoading={isLoading}
+          sorting={sorting}
+          setSorting={setSorting}
+          className={{
+            containerClassName: cn({
+              'mb-20':
+                isResponseSuccess(inventoryProducts) &&
+                inventoryProducts?.data?.length === 0,
+            }),
+            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+            tableClassName: 'font-inter w-full table-auto min-h-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+            bodyRowClassName: 'border-b border-b-gray-200',
+            bodyColumnClassName:
+              'px-6 py-3 last:flex last:flex-row last:justify-end',
+          }}
+        />
       </div>
-    </div>
+    </>
   );
 };
 

src/components/pages/inventory/product/skeleton/InventoryProductTableSkeleton.tsx

@@ -1,37 +0,0 @@
-import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
-import Table from '@/components/Table';
-import { InventoryProduct } from '@/types/api/inventory/product';
-import { ColumnDef } from '@tanstack/react-table';
-
-const InventoryProductTableSkeleton = ({
-  columns,
-  icon,
-  title = 'No Data Available',
-  subtitle = 'There is no inventory product data displayed. Enter inventory product data to get started.',
-}: {
-  columns: ColumnDef<InventoryProduct>[];
-  icon: React.ReactNode;
-  title?: string;
-  subtitle?: string;
-}) => {
-  return (
-    <div className='relative size-full'>
-      <Table
-        data={[]}
-        columns={columns}
-        isLoading={true}
-        className={{
-          skeletonCellClassName: 'animate-none w-full h-5 bg-base-content/4',
-          headerColumnClassName: 'whitespace-nowrap',
-          containerClassName: 'mb-0 overflow-hidden',
-          tableWrapperClassName: 'overflow-hidden',
-        }}
-      />
-      <div className='absolute inset-0 flex items-center justify-center'>
-        <DataStateSkeleton icon={icon} title={title} description={subtitle} />
-      </div>
-    </div>
-  );
-};
-
-export default InventoryProductTableSkeleton;

src/components/pages/marketing/DeliveryOrderFormModal.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import AlertErrorList from '@/components/helper/form/FormErrors';
+import { OptionType } from '@/components/input/SelectInput';
 import Modal, { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import { DeliveryOrderProductFormValues } from '@/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.schema';
@@ -111,34 +112,16 @@ const DeliveryOrderFormModal = ({}: { initialValues?: Marketing }) => {
     useState<DeliveryOrderProductFormValues | null>(null);
   const [deliveryOrderValues, setDeliveryOrderValues] = useState<
     DeliveryOrderProductFormValues[]
-  >([]);
-
-  const getDeliveryOrderValues = useCallback(
-    (marketingData: Marketing): DeliveryOrderProductFormValues[] => {
-      const hasDeliveryOrder =
-        marketingData.delivery_order &&
-        marketingData.delivery_order.length > 0 &&
-        marketingData.delivery_order.some(
-          (doItem) => doItem.deliveries && doItem.deliveries.length > 0
-        );
-
-      if (hasDeliveryOrder) {
-        return (
-          marketingData.delivery_order?.flatMap((delivery) =>
-            DeliveryProductToFieldValues(marketingData.sales_order, delivery)
-          ) ?? []
-        );
-      }
-
-      return mergeSOwithDO(
-        marketingData.sales_order?.map(SalesProductToFieldValues) ?? [],
-        marketingData.delivery_order?.flatMap((delivery) =>
-          DeliveryProductToFieldValues(marketingData.sales_order, delivery)
-        ) ?? [],
-        true
-      );
-    },
-    []
+  >(
+    isResponseSuccess(marketing)
+      ? mergeSOwithDO(
+          marketing?.data.sales_order?.map(SalesProductToFieldValues) ?? [],
+          marketing?.data.delivery_order?.flatMap((delivery) =>
+            DeliveryProductToFieldValues(marketing.data.sales_order, delivery)
+          ) ?? [],
+          true
+        )
+      : []
   );
 
   // ================== SETUP FORMIK ==================
@@ -147,8 +130,14 @@ const DeliveryOrderFormModal = ({}: { initialValues?: Marketing }) => {
   >(() => {
     if (!isResponseSuccess(marketing))
       return {} as SalesOrderFormValues & DeliveryOrderFormValues;
+    const deliveryValues = mergeSOwithDO(
+      marketing?.data.sales_order?.map(SalesProductToFieldValues) ?? [],
+      marketing?.data.delivery_order?.flatMap((delivery) =>
+        DeliveryProductToFieldValues(marketing.data.sales_order, delivery)
+      ) ?? [],
+      true
+    );
 
-    const deliveryValues = getDeliveryOrderValues(marketing.data);
     setDeliveryOrderValues(deliveryValues);
 
     return {
@@ -174,7 +163,7 @@ const DeliveryOrderFormModal = ({}: { initialValues?: Marketing }) => {
         ) ?? [],
       delivery_order: deliveryValues,
     };
-  }, [marketing, getDeliveryOrderValues]);
+  }, [marketing]);
 
   const formik = useFormik<SalesOrderFormValues & DeliveryOrderFormValues>({
     enableReinitialize: true,
@@ -536,13 +525,9 @@ const DeliveryOrderFormModal = ({}: { initialValues?: Marketing }) => {
     formModal.closeModal();
   };
 
-  const hasLoadedInitialValues = useRef(false);
   useEffect(() => {
     const getFilledInitialValues = async () => {
       if (marketingId && isResponseSuccess(marketing)) {
-        if (hasLoadedInitialValues.current) return;
-        hasLoadedInitialValues.current = true;
-
         const filledInitialValues = await getFilledMarketingFormInitialValues(
           marketing.data
         );
@@ -586,15 +571,9 @@ const DeliveryOrderFormModal = ({}: { initialValues?: Marketing }) => {
     setFormErrorMessage('');
   }, [step]);
 
-  const prevDeliveryOrderValuesRef = useRef(deliveryOrderValues);
+  // sync delivery order values to formik
   useEffect(() => {
-    if (
-      JSON.stringify(prevDeliveryOrderValuesRef.current) !==
-      JSON.stringify(deliveryOrderValues)
-    ) {
-      prevDeliveryOrderValuesRef.current = deliveryOrderValues;
-      formik.setFieldValue('delivery_order', deliveryOrderValues);
-    }
+    formik.setFieldValue('delivery_order', deliveryOrderValues);
   }, [deliveryOrderValues]);
 
   const grandTotal = useMemo(() => {
@@ -669,8 +648,9 @@ const DeliveryOrderFormModal = ({}: { initialValues?: Marketing }) => {
                         <tr>
                           <td className='text-sm px-4 py-3'>No. Order</td>
                           <td className='text-sm px-4 py-3'>
-                            {marketing.data.do_number ||
-                              marketing.data.so_number}
+                            {marketing.data.do_number
+                              ? marketing.data.do_number
+                              : marketing.data.so_number}
                           </td>
                         </tr>
                         <tr>
@@ -785,7 +765,6 @@ const DeliveryOrderFormModal = ({}: { initialValues?: Marketing }) => {
                     <MemoizedDeliveryOrderProductForm
                       formState={'edit'}
                       salesOrders={marketing?.data?.sales_order ?? []}
-                      deliveryOrders={marketing?.data?.delivery_order ?? []}
                       exisitingValues={deliveryOrderValues}
                       onSubmitForm={handleAddSubmitDO}
                       initialValues={selectedDeliveryProduct ?? undefined}

src/components/pages/marketing/MarketingTable.tsx

@@ -30,8 +30,6 @@ import PopoverButton from '@/components/popover/PopoverButton';
 import PopoverContent from '@/components/popover/PopoverContent';
 import StatusBadge from '@/components/helper/StatusBadge';
 import MarketingFilterModal from '@/components/pages/marketing/MarketingFilter';
-import ButtonFilter from '@/components/helper/ButtonFilter';
-import MarketingTableSkeleton from '@/components/pages/marketing/skeleton/MarketingTableSkeleton';
 
 const RowsOptionsMenu = ({
   props,
@@ -216,6 +214,32 @@ const MarketingTable = () => {
     updateFilter('customer_id', '');
   };
 
+  // ===== ACTIVE FILTERS COUNT =====
+  const activeFiltersCount = useMemo(() => {
+    let count = 0;
+
+    // Product filter
+    if (tableFilterState.product_ids) {
+      count += 1;
+    }
+
+    // Status filter
+    if (tableFilterState.status) {
+      count += 1;
+    }
+
+    // Customer filter
+    if (tableFilterState.customer_id) {
+      count += 1;
+    }
+
+    return count;
+  }, [
+    tableFilterState.product_ids,
+    tableFilterState.status,
+    tableFilterState.customer_id,
+  ]);
+
   const approveClickHandler = () => {
     setApproveAction('APPROVED');
     confirmationModal.openModal();
@@ -226,6 +250,11 @@ const MarketingTable = () => {
     confirmationModal.openModal();
   };
 
+  const productsClickHandler = (item: Marketing) => {
+    setSelectedItem(item);
+    productsModal.openModal();
+  };
+
   const deleteMarketingHandler = async () => {
     const deleteMarketingRes = await MarketingApi.delete(
       selectedItem?.id as number
@@ -445,11 +474,6 @@ const MarketingTable = () => {
         accessorKey: 'marketing_products.length',
         header: 'Product Details',
         cell: (props) => {
-          const productsClickHandler = (item: Marketing) => {
-            setSelectedItem(item);
-            productsModal.openModal();
-          };
-
           if (props?.row?.original?.sales_order?.length) {
             if (props?.row?.original?.sales_order?.length > 1) {
               return (
@@ -504,7 +528,7 @@ const MarketingTable = () => {
         },
       },
     ];
-  }, [deleteModal, deliveryModal, setSelectedItem, productsModal]);
+  }, []);
 
   return (
     <>
@@ -564,14 +588,28 @@ const MarketingTable = () => {
             )}
           </div>
           <div className='flex flex-row gap-3'>
-            <ButtonFilter
-              values={tableFilterState}
-              excludeFields={['page', 'pageSize', 'search']}
+            <Button
+              variant='outline'
+              color='none'
               onClick={() => {
                 filterModal.openModal();
               }}
-              className='px-3 py-2.5'
-            />
+              className={cn(
+                'px-3 py-2.5 gap-1.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft transition-all',
+                {
+                  'border-primary-gradient text-primary':
+                    activeFiltersCount > 0,
+                }
+              )}
+            >
+              <Icon icon='heroicons:funnel' width={20} height={20} />
+              Filter
+              {activeFiltersCount > 0 && (
+                <span className='w-5 h-5 text-white bg-[#FF3535] rounded-lg border border-base-300 flex items-center justify-center text-xs'>
+                  {activeFiltersCount}
+                </span>
+              )}
+            </Button>
             <Dropdown
               align='end'
               direction='bottom'
@@ -617,49 +655,28 @@ const MarketingTable = () => {
             </Dropdown>
           </div>
         </div>
-        <div className='flex flex-col mb-4'>
-          {isLoadingMarketing ? (
-            <div className='w-full flex flex-row justify-center items-center p-4'>
-              <span className='loading loading-spinner loading-xl' />
-            </div>
-          ) : !isResponseSuccess(marketing) || marketing.data?.length === 0 ? (
-            <div className='p-3'>
-              <MarketingTableSkeleton
-                columns={columns}
-                icon={
-                  <Icon
-                    icon='heroicons:document-text'
-                    className='text-white'
-                    width={20}
-                    height={20}
-                  />
-                }
-              />
-            </div>
-          ) : (
-            <Table
-              rowSelection={rowSelection}
-              setRowSelection={setRowSelection}
-              onPageChange={setPage}
-              onPageSizeChange={setPageSize}
-              data={allData}
-              columns={columns}
-              pageSize={tableFilterState.pageSize}
-              page={isResponseSuccess(marketing) ? marketing?.meta?.page : 1}
-              totalItems={
-                isResponseSuccess(marketing)
-                  ? marketing?.meta?.total_results
-                  : 0
-              }
-              isLoading={isLoadingMarketing}
-              className={{
-                containerClassName: cn('p-3 mb-0'),
-                bodyColumnClassName:
-                  'last:text-end last:w-17 first:text-start first:w-5',
-              }}
-            />
-          )}
-        </div>
+        <Table
+          rowSelection={rowSelection}
+          setRowSelection={setRowSelection}
+          onPageChange={setPage}
+          onPageSizeChange={setPageSize}
+          data={allData}
+          columns={columns}
+          pageSize={tableFilterState.pageSize}
+          page={isResponseSuccess(marketing) ? marketing?.meta?.page : 1}
+          totalItems={
+            isResponseSuccess(marketing) ? marketing?.meta?.total_results : 0
+          }
+          isLoading={isLoadingMarketing}
+          className={{
+            containerClassName: cn('p-3', {
+              'w-full mb-20':
+                isResponseSuccess(marketing) && marketing?.data?.length === 0,
+            }),
+            bodyColumnClassName:
+              'last:text-end last:w-17 first:text-start first:w-5',
+          }}
+        />
       </div>
       <ConfirmationModal
         ref={deleteModal.ref}

src/components/pages/marketing/SalesOrderFormModal.tsx

@@ -458,13 +458,9 @@ const SalesOrderFormModal = ({
     );
   }, [memoSalesOrder]);
 
-  const hasLoadedInitialValues = useRef(false);
   useEffect(() => {
     const getFilledInitialValues = async () => {
       if (marketingId && isResponseSuccess(marketing)) {
-        if (hasLoadedInitialValues.current) return;
-        hasLoadedInitialValues.current = true;
-
         const filledInitialValues = await getFilledMarketingFormInitialValues(
           marketing.data
         );

src/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import {
   DeliveryOrderProductFormValues,
   DeliveryOrderProductSchema,
@@ -10,10 +10,7 @@ import NumberInput from '@/components/input/NumberInput';
 import PatternInput from '@/components/input/PatternInput';
 import { formatTitleCase, formatVechicleNumber } from '@/lib/helper';
 import DateInput from '@/components/input/DateInput';
-import {
-  BaseSalesOrder,
-  BaseDeliveryOrder,
-} from '@/types/api/marketing/marketing';
+import { BaseSalesOrder } from '@/types/api/marketing/marketing';
 import { SalesProductToFieldValues } from '@/components/pages/marketing/form/MarketingForm.schema';
 import * as Yup from 'yup';
 import { isResponseSuccess } from '@/lib/api-helper';
@@ -35,7 +32,6 @@ import { handleMarketingCalculation } from '@/lib/marketing-calculation';
 const DeliveryOrderProductForm = ({
   formState,
   salesOrders,
-  deliveryOrders,
   initialValues,
   exisitingValues,
   onUpdateForm,
@@ -43,7 +39,6 @@ const DeliveryOrderProductForm = ({
 }: {
   formState: 'add' | 'edit';
   salesOrders: BaseSalesOrder[];
-  deliveryOrders?: BaseDeliveryOrder[];
   initialValues?: DeliveryOrderProductFormValues;
   exisitingValues?: DeliveryOrderProductFormValues[];
   onSubmitForm?: (value: DeliveryOrderProductFormValues) => Promise<void>;
@@ -120,36 +115,6 @@ const DeliveryOrderProductForm = ({
     })
     ?.filter((item) => item != null) as OptionType[];
 
-  const hasDeliveryOrder = useMemo(() => {
-    return (
-      deliveryOrders &&
-      deliveryOrders.length > 0 &&
-      deliveryOrders.some(
-        (doItem) => doItem.deliveries && doItem.deliveries.length > 0
-      )
-    );
-  }, [deliveryOrders]);
-
-  const deliveryOrder = useMemo(() => {
-    if (!hasDeliveryOrder || !deliveryOrders) return null;
-
-    for (const doItem of deliveryOrders) {
-      const found = doItem.deliveries.find(
-        (d) =>
-          d.product_warehouse.id ===
-          initialValues?.marketing_product?.product_warehouse_id
-      );
-      if (found) {
-        return {
-          ...found,
-          delivery_date: doItem.delivery_date,
-          do_number: doItem.do_number,
-        };
-      }
-    }
-    return null;
-  }, [deliveryOrders, hasDeliveryOrder, initialValues]);
-
   const salesOrder = salesOrders.find(
     (item) => item.id === initialValues?.marketing_product_id
   );
@@ -157,25 +122,15 @@ const DeliveryOrderProductForm = ({
   const formik = useFormik<DeliveryOrderProductFormValues>({
     enableReinitialize: true,
     initialValues: {
-      delivery_date:
-        deliveryOrder?.delivery_date ||
-        initialValues?.delivery_date ||
-        undefined,
-      vehicle_number:
-        deliveryOrder?.vehicle_number ||
-        initialValues?.vehicle_number ||
-        undefined,
+      delivery_date: initialValues?.delivery_date || undefined,
+      vehicle_number: initialValues?.vehicle_number || undefined,
       marketing_product_id:
         salesOrder?.id || initialValues?.marketing_product_id || undefined,
-      unit_price:
-        deliveryOrder?.unit_price ?? initialValues?.unit_price ?? undefined,
-      total_weight:
-        deliveryOrder?.total_weight ?? initialValues?.total_weight ?? undefined,
-      qty: deliveryOrder?.qty ?? initialValues?.qty ?? undefined,
-      avg_weight:
-        deliveryOrder?.avg_weight ?? initialValues?.avg_weight ?? undefined,
-      total_price:
-        deliveryOrder?.total_price ?? initialValues?.total_price ?? undefined,
+      unit_price: initialValues?.unit_price || undefined,
+      total_weight: initialValues?.total_weight || undefined,
+      qty: initialValues?.qty || undefined,
+      avg_weight: initialValues?.avg_weight || undefined,
+      total_price: initialValues?.total_price || undefined,
       marketing_product: initialValues?.marketing_product || undefined,
       uom: initialValues?.uom || '',
       weight_per_convertion:
@@ -224,8 +179,6 @@ const DeliveryOrderProductForm = ({
     },
   });
 
-  const { resetForm } = formik;
-
   const hasWeekField = useMemo(() => {
     const marketingType = formik.values.marketing_type?.value?.toLowerCase();
     if (marketingType === 'ayam_pullet') {
@@ -245,9 +198,9 @@ const DeliveryOrderProductForm = ({
     return false;
   }, [formik.values.marketing_product, formik.values.marketing_type]);
 
-  const handleResetForm = useCallback(() => {
+  const handleResetForm = () => {
     setFormErrorMessage('');
-    resetForm({
+    formik.resetForm({
       values: {
         delivery_date: '',
         vehicle_number: '',
@@ -271,38 +224,16 @@ const DeliveryOrderProductForm = ({
       },
     });
     // setSelectedProduct(null);
-  }, [resetForm]);
+  };
 
-  const handleBlurField = useCallback(
-    (field: string) => {
-      setCurrentInput(field);
+  const handleBlurField = (field: string) => {
+    setCurrentInput(field);
 
-      handleMarketingCalculation(field, {
-        values: formik.values,
-        setFieldValue: formik.setFieldValue,
-        hasSisaBerat,
-      });
-    },
-    [formik.values, formik.setFieldValue, hasSisaBerat]
-  );
-
-  // Handler untuk onChange - auto calculation real-time untuk field yang mempengaruhi total_price (total_peti, weight_per_convertion, price_per_convertion, sisa_berat, price_sisa_berat, price_per_qty, qty)
-  const handleFieldChange = (
-    field: string,
-    value: number | string,
-    callback?: () => void
-  ) => {
-    formik.setFieldValue(field, value);
-
-    setTimeout(() => {
-      handleMarketingCalculation(field, {
-        values: { ...formik.values, [field]: value },
-        setFieldValue: formik.setFieldValue,
-        hasSisaBerat,
-      });
-    }, 0);
-
-    if (callback) callback();
+    handleMarketingCalculation(field, {
+      values: formik.values,
+      setFieldValue: formik.setFieldValue,
+      hasSisaBerat,
+    });
   };
 
   // Handler khusus untuk toggle sisa berat - langsung pakai nilai baru
@@ -329,12 +260,8 @@ const DeliveryOrderProductForm = ({
 
   const { setValues: setFormikValues } = formik;
 
-  const processedInitialValuesRef = useRef<number | null>(null);
   useEffect(() => {
     if (initialValues) {
-      if (processedInitialValuesRef.current === initialValues.id) return;
-      processedInitialValuesRef.current = initialValues.id as number;
-
       if (!Boolean(initialValues.qty)) {
         handleResetForm();
       } else {
@@ -347,7 +274,7 @@ const DeliveryOrderProductForm = ({
         }
       }
     }
-  }, [handleResetForm, initialValues, setFormikValues]);
+  }, [initialValues]);
 
   // ===== Formik Error List =====
   const { formErrorList, close, handleFormSubmit } = useFormikErrorList(
@@ -365,10 +292,8 @@ const DeliveryOrderProductForm = ({
   );
 
   useEffect(() => {
-    if (formik.values.week) {
-      handleBlurField('week');
-    }
-  }, [formik.values.week, handleBlurField]);
+    handleBlurField('week');
+  }, [formik.values.week]);
 
   return (
     <>
@@ -595,11 +520,13 @@ const DeliveryOrderProductForm = ({
                     } per ${formik.values.convertion_unit?.value}`}
                     value={formik.values.weight_per_convertion ?? ''}
                     onChange={(e) => {
-                      const value = Number(e.target.value);
-                      handleFieldChange('weight_per_convertion', value, () =>
-                        setCurrentInput(e.target.name)
+                      formik.setFieldValue(
+                        'weight_per_convertion',
+                        Number(e.target.value)
                       );
+                      setCurrentInput(e.target.name);
                     }}
+                    onBlur={() => handleBlurField('weight_per_convertion')}
                   />
                 </div>
               </div>
@@ -637,11 +564,10 @@ const DeliveryOrderProductForm = ({
               name='total_peti'
               value={formik.values.total_peti ?? undefined}
               onChange={(e) => {
-                const value = Number(e.target.value);
-                handleFieldChange('total_peti', value, () =>
-                  setCurrentInput(e.target.name)
-                );
+                formik.handleChange(e);
+                setCurrentInput(e.target.name);
               }}
+              onBlur={() => handleBlurField('total_peti')}
               isError={
                 formik.touched.total_peti && Boolean(formik.errors.total_peti)
               }
@@ -666,11 +592,10 @@ const DeliveryOrderProductForm = ({
                   name='avg_weight'
                   value={formik.values.avg_weight}
                   onChange={(e) => {
-                    const value = Number(e.target.value);
-                    handleFieldChange('avg_weight', value, () =>
-                      setCurrentInput('avg_weight')
-                    );
+                    formik.handleChange(e);
+                    setCurrentInput(e.target.name);
                   }}
+                  onBlur={() => handleBlurField('avg_weight')}
                   isError={
                     formik.touched.avg_weight &&
                     Boolean(formik.errors.avg_weight)
@@ -688,11 +613,10 @@ const DeliveryOrderProductForm = ({
               name='total_weight'
               value={formik.values.total_weight}
               onChange={(e) => {
-                const value = Number(e.target.value);
-                handleFieldChange('total_weight', value, () =>
-                  setCurrentInput('total_weight')
-                );
+                formik.handleChange(e);
+                setCurrentInput(e.target.name);
               }}
+              onBlur={() => handleBlurField('total_weight')}
               isError={
                 formik.touched.total_weight &&
                 Boolean(formik.errors.total_weight)
@@ -714,11 +638,10 @@ const DeliveryOrderProductForm = ({
             name='qty'
             value={formik.values.qty}
             onChange={(e) => {
-              const value = Number(e.target.value);
-              handleFieldChange('qty', value, () =>
-                setCurrentInput(e.target.name)
-              );
+              formik.handleChange(e);
+              setCurrentInput(e.target.name);
             }}
+            onBlur={() => handleBlurField('qty')}
             isError={Boolean(formik.errors.qty)}
             errorMessage={formik.errors.qty}
             placeholder='Masukan Kuantitas'
@@ -754,11 +677,10 @@ const DeliveryOrderProductForm = ({
               name='price_per_convertion'
               value={formik.values.price_per_convertion ?? undefined}
               onChange={(e) => {
-                const value = Number(e.target.value);
-                handleFieldChange('price_per_convertion', value, () =>
-                  setCurrentInput(e.target.name)
-                );
+                formik.handleChange(e);
+                setCurrentInput(e.target.name);
               }}
+              onBlur={() => handleBlurField('price_per_convertion')}
               isError={
                 formik.touched.price_per_convertion &&
                 Boolean(formik.errors.price_per_convertion)
@@ -777,11 +699,10 @@ const DeliveryOrderProductForm = ({
                 name='price_per_qty'
                 value={formik.values.price_per_qty ?? undefined}
                 onChange={(e) => {
-                  const value = Number(e.target.value);
-                  handleFieldChange('price_per_qty', value, () =>
-                    setCurrentInput('price_per_qty')
-                  );
+                  formik.setFieldValue('price_per_qty', Number(e.target.value));
+                  setCurrentInput('price_per_qty');
                 }}
+                onBlur={() => handleBlurField('price_per_qty')}
                 isError={
                   formik.touched.price_per_qty &&
                   Boolean(formik.errors.price_per_qty)
@@ -800,11 +721,10 @@ const DeliveryOrderProductForm = ({
                 name='unit_price'
                 value={formik.values.unit_price}
                 onChange={(e) => {
-                  const value = Number(e.target.value);
-                  handleFieldChange('unit_price', value, () =>
-                    setCurrentInput(e.target.name)
-                  );
+                  formik.handleChange(e);
+                  setCurrentInput(e.target.name);
                 }}
+                onBlur={() => handleBlurField('unit_price')}
                 isError={Boolean(formik.errors.unit_price)}
                 errorMessage={formik.errors.unit_price}
                 placeholder='Masukan Harga Satuan'
@@ -840,11 +760,10 @@ const DeliveryOrderProductForm = ({
                 name='sisa_berat'
                 value={formik.values.sisa_berat ?? undefined}
                 onChange={(e) => {
-                  const value = Number(e.target.value);
-                  handleFieldChange('sisa_berat', value, () =>
-                    setCurrentInput(e.target.name)
-                  );
+                  formik.handleChange(e);
+                  setCurrentInput(e.target.name);
                 }}
+                onBlur={() => handleBlurField('sisa_berat')}
                 isError={
                   formik.touched.sisa_berat && Boolean(formik.errors.sisa_berat)
                 }
@@ -857,11 +776,10 @@ const DeliveryOrderProductForm = ({
                 name='price_sisa_berat'
                 value={formik.values.price_sisa_berat ?? undefined}
                 onChange={(e) => {
-                  const value = Number(e.target.value);
-                  handleFieldChange('price_sisa_berat', value, () =>
-                    setCurrentInput(e.target.name)
-                  );
+                  formik.handleChange(e);
+                  setCurrentInput(e.target.name);
                 }}
+                onBlur={() => handleBlurField('price_sisa_berat')}
                 isError={
                   formik.touched.price_sisa_berat &&
                   Boolean(formik.errors.price_sisa_berat)
@@ -879,11 +797,10 @@ const DeliveryOrderProductForm = ({
             name='total_price'
             value={formik.values.total_price}
             onChange={(e) => {
-              const value = Number(e.target.value);
-              handleFieldChange('total_price', value, () =>
-                setCurrentInput('total_price')
-              );
+              formik.handleChange(e);
+              setCurrentInput(e.target.name);
             }}
+            onBlur={() => handleBlurField('total_price')}
             isError={
               formik.touched.total_price && Boolean(formik.errors.total_price)
             }

src/components/pages/marketing/form/repeater/sales-order/SalesOrderProductForm.tsx

@@ -5,7 +5,7 @@ import {
   SalesOrderProductFormValues,
   SalesOrderProductSchema,
 } from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema';
-import { RefObject, useCallback, useEffect, useMemo, useState } from 'react';
+import { RefObject, useEffect, useMemo, useState } from 'react';
 import { OptionType, useSelect } from '@/components/input/SelectInput';
 import { Kandang } from '@/types/api/master-data/kandang';
 import { WarehouseApi } from '@/services/api/master-data';
@@ -240,36 +240,14 @@ const SalesOrderProductForm = ({
     });
   };
 
-  const handleBlurField = useCallback(
-    (field: string) => {
-      setCurrentInput(field);
+  const handleBlurField = (field: string) => {
+    setCurrentInput(field);
 
-      handleMarketingCalculation(field, {
-        values: formik.values,
-        setFieldValue: formik.setFieldValue,
-        hasSisaBerat,
-      });
-    },
-    [formik.values, formik.setFieldValue, hasSisaBerat]
-  );
-
-  // Handler untuk onChange - auto calculation real-time untuk field yang mempengaruhi total_price (total_peti, weight_per_convertion, price_per_convertion, sisa_berat, price_sisa_berat, price_per_qty, qty)
-  const handleFieldChange = (
-    field: string,
-    value: number | string,
-    callback?: () => void
-  ) => {
-    formik.setFieldValue(field, value);
-
-    setTimeout(() => {
-      handleMarketingCalculation(field, {
-        values: { ...formik.values, [field]: value },
-        setFieldValue: formik.setFieldValue,
-        hasSisaBerat,
-      });
-    }, 0);
-
-    if (callback) callback();
+    handleMarketingCalculation(field, {
+      values: formik.values,
+      setFieldValue: formik.setFieldValue,
+      hasSisaBerat,
+    });
   };
 
   // Handler khusus untuk toggle sisa berat - langsung pakai nilai baru
@@ -310,10 +288,8 @@ const SalesOrderProductForm = ({
   );
 
   useEffect(() => {
-    if (formik.values.week) {
-      handleBlurField('week');
-    }
-  }, [formik.values.week, handleBlurField]);
+    handleBlurField('week');
+  }, [formik.values.week]);
 
   return (
     <>
@@ -499,11 +475,13 @@ const SalesOrderProductForm = ({
                     } per ${formik.values.convertion_unit?.value}`}
                     value={formik.values.weight_per_convertion ?? ''}
                     onChange={(e) => {
-                      const value = Number(e.target.value);
-                      handleFieldChange('weight_per_convertion', value, () =>
-                        setCurrentInput(e.target.name)
+                      formik.setFieldValue(
+                        'weight_per_convertion',
+                        Number(e.target.value)
                       );
+                      setCurrentInput(e.target.name);
                     }}
+                    onBlur={() => handleBlurField('weight_per_convertion')}
                   />
                 </div>
               </div>
@@ -541,11 +519,10 @@ const SalesOrderProductForm = ({
               name='total_peti'
               value={formik.values.total_peti ?? undefined}
               onChange={(e) => {
-                const value = Number(e.target.value);
-                handleFieldChange('total_peti', value, () =>
-                  setCurrentInput(e.target.name)
-                );
+                formik.handleChange(e);
+                setCurrentInput(e.target.name);
               }}
+              onBlur={() => handleBlurField('total_peti')}
               isError={
                 formik.touched.total_peti && Boolean(formik.errors.total_peti)
               }
@@ -570,11 +547,10 @@ const SalesOrderProductForm = ({
                   name='avg_weight'
                   value={formik.values.avg_weight}
                   onChange={(e) => {
-                    const value = Number(e.target.value);
-                    handleFieldChange('avg_weight', value, () =>
-                      setCurrentInput('avg_weight')
-                    );
+                    formik.handleChange(e);
+                    setCurrentInput(e.target.name);
                   }}
+                  onBlur={() => handleBlurField('avg_weight')}
                   isError={
                     formik.touched.avg_weight &&
                     Boolean(formik.errors.avg_weight)
@@ -592,11 +568,10 @@ const SalesOrderProductForm = ({
               name='total_weight'
               value={formik.values.total_weight}
               onChange={(e) => {
-                const value = Number(e.target.value);
-                handleFieldChange('total_weight', value, () =>
-                  setCurrentInput('total_weight')
-                );
+                formik.handleChange(e);
+                setCurrentInput(e.target.name);
               }}
+              onBlur={() => handleBlurField('total_weight')}
               isError={
                 formik.touched.total_weight &&
                 Boolean(formik.errors.total_weight)
@@ -618,11 +593,10 @@ const SalesOrderProductForm = ({
             name='qty'
             value={formik.values.qty}
             onChange={(e) => {
-              const value = Number(e.target.value);
-              handleFieldChange('qty', value, () =>
-                setCurrentInput(e.target.name)
-              );
+              formik.handleChange(e);
+              setCurrentInput(e.target.name);
             }}
+            onBlur={() => handleBlurField('qty')}
             isError={formik.touched.qty && Boolean(formik.errors.qty)}
             errorMessage={formik.errors.qty}
             placeholder='Masukan Kuantitas'
@@ -656,11 +630,10 @@ const SalesOrderProductForm = ({
               name='price_per_convertion'
               value={formik.values.price_per_convertion ?? undefined}
               onChange={(e) => {
-                const value = Number(e.target.value);
-                handleFieldChange('price_per_convertion', value, () =>
-                  setCurrentInput(e.target.name)
-                );
+                formik.handleChange(e);
+                setCurrentInput(e.target.name);
               }}
+              onBlur={() => handleBlurField('price_per_convertion')}
               isError={
                 formik.touched.price_per_convertion &&
                 Boolean(formik.errors.price_per_convertion)
@@ -679,11 +652,10 @@ const SalesOrderProductForm = ({
                 name='price_per_qty'
                 value={formik.values.price_per_qty ?? undefined}
                 onChange={(e) => {
-                  const value = Number(e.target.value);
-                  handleFieldChange('price_per_qty', value, () =>
-                    setCurrentInput('price_per_qty')
-                  );
+                  formik.setFieldValue('price_per_qty', Number(e.target.value));
+                  setCurrentInput('price_per_qty');
                 }}
+                onBlur={() => handleBlurField('price_per_qty')}
                 isError={
                   formik.touched.price_per_qty &&
                   Boolean(formik.errors.price_per_qty)
@@ -702,11 +674,10 @@ const SalesOrderProductForm = ({
                 name='unit_price'
                 value={formik.values.unit_price}
                 onChange={(e) => {
-                  const value = Number(e.target.value);
-                  handleFieldChange('unit_price', value, () =>
-                    setCurrentInput(e.target.name)
-                  );
+                  formik.handleChange(e);
+                  setCurrentInput(e.target.name);
                 }}
+                onBlur={() => handleBlurField('unit_price')}
                 isError={
                   formik.touched.unit_price && Boolean(formik.errors.unit_price)
                 }
@@ -744,11 +715,10 @@ const SalesOrderProductForm = ({
                 name='sisa_berat'
                 value={formik.values.sisa_berat ?? undefined}
                 onChange={(e) => {
-                  const value = Number(e.target.value);
-                  handleFieldChange('sisa_berat', value, () =>
-                    setCurrentInput(e.target.name)
-                  );
+                  formik.handleChange(e);
+                  setCurrentInput(e.target.name);
                 }}
+                onBlur={() => handleBlurField('sisa_berat')}
                 isError={
                   formik.touched.sisa_berat && Boolean(formik.errors.sisa_berat)
                 }
@@ -761,11 +731,10 @@ const SalesOrderProductForm = ({
                 name='price_sisa_berat'
                 value={formik.values.price_sisa_berat ?? undefined}
                 onChange={(e) => {
-                  const value = Number(e.target.value);
-                  handleFieldChange('price_sisa_berat', value, () =>
-                    setCurrentInput(e.target.name)
-                  );
+                  formik.handleChange(e);
+                  setCurrentInput(e.target.name);
                 }}
+                onBlur={() => handleBlurField('price_sisa_berat')}
                 isError={
                   formik.touched.price_sisa_berat &&
                   Boolean(formik.errors.price_sisa_berat)
@@ -783,11 +752,10 @@ const SalesOrderProductForm = ({
             name='total_price'
             value={formik.values.total_price}
             onChange={(e) => {
-              const value = Number(e.target.value);
-              handleFieldChange('total_price', value, () =>
-                setCurrentInput('total_price')
-              );
+              formik.handleChange(e);
+              setCurrentInput(e.target.name);
             }}
+            onBlur={() => handleBlurField('total_price')}
             isError={
               formik.touched.total_price && Boolean(formik.errors.total_price)
             }

src/components/pages/marketing/form/table-view/DeliveryOrderProductTable.tsx

@@ -2,11 +2,10 @@ import { DeliveryOrderProductFormValues } from '@/components/pages/marketing/for
 import Button from '@/components/Button';
 import Card from '@/components/Card';
 import { Icon } from '@iconify/react';
-import { useRef, useMemo } from 'react';
+import { useRef } from 'react';
 import { formatCurrency, formatDate, formatNumber } from '@/lib/helper';
 import DeliveryOrderExport from '@/components/pages/marketing/pdf/DeliveryOrderExport';
-import { Marketing, BaseDelivery } from '@/types/api/marketing/marketing';
-import { Warehouse } from '@/types/api/master-data/warehouse';
+import { Marketing } from '@/types/api/marketing/marketing';
 
 type DeliveryOrderProductTableProps = {
   data: DeliveryOrderProductFormValues[];
@@ -43,31 +42,7 @@ const DeliveryOrderProductTable = ({
 
   const approvalStepNumber = marketing?.latest_approval?.step_number;
 
-  const hasDeliveryOrder = useMemo(() => {
-    return (
-      marketing?.delivery_order &&
-      marketing.delivery_order.length > 0 &&
-      marketing.delivery_order.some(
-        (doItem) => doItem.deliveries && doItem.deliveries.length > 0
-      )
-    );
-  }, [marketing?.delivery_order]);
-
-  const deliveryItems = useMemo(() => {
-    if (!hasDeliveryOrder) return [];
-    return (
-      marketing?.delivery_order?.flatMap((doItem) =>
-        doItem.deliveries.map((delivery) => ({
-          ...delivery,
-          do_number: doItem.do_number,
-          delivery_date: doItem.delivery_date,
-          warehouse: doItem.warehouse,
-        }))
-      ) ?? []
-    );
-  }, [marketing?.delivery_order, hasDeliveryOrder]);
-
-  const renderSalesOrderContent = (item: DeliveryOrderProductFormValues) => {
+  const renderTableContent = (item: DeliveryOrderProductFormValues) => {
     const doItem = marketing?.delivery_order?.find(
       (doItem) => doItem.do_number === item.do_number
     );
@@ -210,217 +185,50 @@ const DeliveryOrderProductTable = ({
     );
   };
 
-  const renderDeliveryOrderContent = (
-    item: BaseDelivery & {
-      do_number: string;
-      delivery_date: string;
-      warehouse: Warehouse;
-    }
-  ) => {
-    const parentDoItem = marketing?.delivery_order?.find(
-      (doItem) => doItem.do_number === item.do_number
-    );
-
-    return (
-      <>
-        <tr className='border-b border-tools-table-outline border-base-content/5'>
-          <th className='w-1/3 text-start not-first:font-medium text-base-content/50 text-sm px-4 py-3'>
-            Label
-          </th>
-          <th className='text-start font-medium text-base-content/50 text-sm px-4 py-3'>
-            <div className='flex w-full flex-row gap-1 items-center justify-between h-full'>
-              <div>Value</div>
-            </div>
-          </th>
-        </tr>
-        <>
-          <tr>
-            <td className='text-sm px-4 py-3'>Gudang</td>
-            <td className='text-sm px-4 py-3'>{item.warehouse?.name}</td>
-          </tr>
-          <tr>
-            <td className='text-sm px-4 py-3'>Produk</td>
-            <td className='text-sm px-4 py-3'>
-              {item.product_warehouse?.product?.name}
-            </td>
-          </tr>
-          <tr>
-            <td className='text-sm px-4 py-3'>Qty</td>
-            <td className='text-sm px-4 py-3'>
-              {item.qty
-                ? `${formatNumber(item.qty)} ${item.product_warehouse?.product?.uom?.name ?? ''}`
-                : '-'}
-            </td>
-          </tr>
-          {Number(item.avg_weight ?? 0) > 0 && (
-            <tr>
-              <td className='text-sm px-4 py-3'>Avg Bobot</td>
-              <td className='text-sm px-4 py-3'>
-                {formatNumber(Number(item.avg_weight))} Kg
-              </td>
-            </tr>
-          )}
-          {Number(item.total_weight ?? 0) > 0 && (
-            <tr>
-              <td className='text-sm px-4 py-3'>Total Bobot</td>
-              <td className='text-sm px-4 py-3'>
-                {formatNumber(Number(item.total_weight))}
-              </td>
-            </tr>
-          )}
-          <tr>
-            <td className='text-sm px-4 py-3'>Total Harga Satuan</td>
-            <td className='text-sm px-4 py-3'>
-              {formatCurrency(item.unit_price)}
-            </td>
-          </tr>
-          <tr>
-            <td className='text-sm px-4 py-3'>Total Penjualan</td>
-            <td className='text-sm px-4 py-3'>
-              {formatCurrency(item.total_price)}
-            </td>
-          </tr>
-        </>
-        <tr className='border-b border-t border-tools-table-outline border-base-content/5'>
-          <th className='w-1/3 text-start not-first:font-medium text-base-content/50 text-sm px-4 py-3'>
-            Label
-          </th>
-          <th className='text-start font-medium text-base-content/50 text-sm px-4 py-3'>
-            <div className='flex w-full flex-row gap-1 items-center justify-between h-full'>
-              <div>Value</div>
-            </div>
-          </th>
-        </tr>
-        <>
-          {approvalStepNumber !== 1 && (
-            <tr>
-              <td className='text-sm px-4 py-3'>Tanggal Pengiriman</td>
-              <td className='text-sm px-4 py-3'>
-                {item.delivery_date
-                  ? formatDate(item.delivery_date, 'DD MMM YYYY')
-                  : '-'}
-              </td>
-            </tr>
-          )}
-          {item.do_number && (
-            <tr>
-              <td className='text-sm px-4 py-3'>No. Pengiriman</td>
-              <td className='text-sm px-4 py-3'>{item.do_number}</td>
-            </tr>
-          )}
-          <tr>
-            <td className='text-sm px-4 py-3'>No. Polisi</td>
-            <td className='text-sm px-4 py-3'>{item.vehicle_number}</td>
-          </tr>
-          {parentDoItem && (
-            <tr>
-              <td className='text-sm px-4 py-3'>Dokumen Pengiriman</td>
-              <td className='text-sm px-4 py-3'>
-                <DeliveryOrderExport
-                  data={marketing}
-                  deliveryOrder={parentDoItem}
-                />
-              </td>
-            </tr>
-          )}
-        </>
-      </>
-    );
-  };
-
   return (
     <>
       <div className='size-full flex flex-col relative overflow-x-hidden gap-3'>
-        {hasDeliveryOrder
-          ? deliveryItems.map((item, index) => (
-              <div key={`do-table-${item.product_warehouse?.id}-${index}`}>
-                {formType === 'success' ? (
-                  <div className='rounded-lg border border-tools-table-outline border-base-content/5'>
-                    <table
-                      style={{
-                        borderRadius: '0.5rem',
-                      }}
-                      className='border-none w-full'
-                    >
-                      <tbody className='w-full'>
-                        {renderDeliveryOrderContent(item)}
-                      </tbody>
-                    </table>
-                  </div>
-                ) : (
-                  <Card
-                    key={`do-table-${item.product_warehouse?.id}-${index}`}
-                    title={item.product_warehouse?.product?.name || 'Produk'}
-                    collapsible={true}
-                    defaultCollapsed={false}
-                    variant='bordered'
-                    className={{
-                      wrapper: 'w-full rounded-lg',
-                      body: 'p-0',
-                      title: 'px-2 py-1.5 font-normal text-sm',
-                      collapsible: 'rounded-lg',
-                    }}
-                  >
-                    <table
-                      style={{
-                        borderRadius: '0.5rem',
-                      }}
-                      className='border-none w-full'
-                    >
-                      <tbody className='w-full'>
-                        {renderDeliveryOrderContent(item)}
-                      </tbody>
-                    </table>
-                  </Card>
-                )}
+        {data.map((item) => (
+          <div key={`table-${item.id}`}>
+            {formType === 'success' ? (
+              <div className='rounded-lg border border-tools-table-outline border-base-content/5'>
+                <table
+                  style={{
+                    borderRadius: '0.5rem',
+                  }}
+                  className='border-none w-full'
+                >
+                  <tbody className='w-full'>{renderTableContent(item)}</tbody>
+                </table>
               </div>
-            ))
-          : data.map((item) => (
-              <div key={`table-${item.id}`}>
-                {formType === 'success' ? (
-                  <div className='rounded-lg border border-tools-table-outline border-base-content/5'>
-                    <table
-                      style={{
-                        borderRadius: '0.5rem',
-                      }}
-                      className='border-none w-full'
-                    >
-                      <tbody className='w-full'>
-                        {renderSalesOrderContent(item)}
-                      </tbody>
-                    </table>
-                  </div>
-                ) : (
-                  <Card
-                    key={`table-${item.id}`}
-                    title={
-                      item.marketing_product?.product_warehouse?.label ||
-                      'Produk'
-                    }
-                    collapsible={true}
-                    defaultCollapsed={false}
-                    variant='bordered'
-                    className={{
-                      wrapper: 'w-full rounded-lg',
-                      body: 'p-0',
-                      title: 'px-2 py-1.5 font-normal text-sm',
-                      collapsible: 'rounded-lg',
-                    }}
-                  >
-                    <table
-                      style={{
-                        borderRadius: '0.5rem',
-                      }}
-                      className='border-none w-full'
-                    >
-                      <tbody className='w-full'>
-                        {renderSalesOrderContent(item)}
-                      </tbody>
-                    </table>
-                  </Card>
-                )}
-              </div>
-            ))}
+            ) : (
+              <Card
+                key={`table-${item.id}`}
+                title={
+                  item.marketing_product?.product_warehouse?.label || 'Produk'
+                }
+                collapsible={true}
+                defaultCollapsed={false}
+                variant='bordered'
+                className={{
+                  wrapper: 'w-full rounded-lg',
+                  body: 'p-0',
+                  title: 'px-2 py-1.5 font-normal text-sm',
+                  collapsible: 'rounded-lg',
+                }}
+              >
+                <table
+                  style={{
+                    borderRadius: '0.5rem',
+                  }}
+                  className='border-none w-full'
+                >
+                  <tbody className='w-full'>{renderTableContent(item)}</tbody>
+                </table>
+              </Card>
+            )}
+          </div>
+        ))}
       </div>
     </>
   );

src/components/pages/marketing/pdf/DeliveryOrderExport.tsx

@@ -1,11 +1,12 @@
 import Button from '@/components/Button';
 import { BaseDeliveryOrder, Marketing } from '@/types/api/marketing/marketing';
 import { Icon } from '@iconify/react';
-import { Document, Page, pdf, Text, View } from '@react-pdf/renderer';
+import { Document, Image, Page, pdf, Text, View } from '@react-pdf/renderer';
 import { useMemo, useState } from 'react';
 import { formatDate, formatNumber, formatVechicleNumber } from '@/lib/helper';
 import pdfStyles from '@/components/pages/marketing/pdf/styles/MarketingPDFStyles';
 import toast from 'react-hot-toast';
+import { useSearchParams } from 'next/navigation';
 
 interface DeliveryOrderExportProps {
   data?: Marketing;
@@ -19,6 +20,9 @@ const DeliveryOrderExport = ({
 }: DeliveryOrderExportProps) => {
   const [isGeneratingPDF, setIsGeneratingPDF] = useState(false);
   const salesData = data;
+  const searchParams = useSearchParams();
+  const action = searchParams.get('action');
+  const id = searchParams.get('id');
 
   const handleDownloadPDF = async () => {
     if (!salesData) {
@@ -49,6 +53,7 @@ const DeliveryOrderExport = ({
       toast.error('Failed to generate PDF. Please try again.');
     } finally {
       setIsGeneratingPDF(false);
+      window.location.href = `/marketing?action=${action}&id=${id}`;
     }
   };
 
@@ -87,7 +92,7 @@ const PDFDocument = ({
     return (
       deliveryOrder.deliveries?.reduce((a, b) => a + b.total_price, 0) ?? 0
     );
-  }, [deliveryOrder.deliveries]);
+  }, []);
 
   return (
     <Document>

src/components/pages/marketing/pdf/SalesOrderExport.tsx

@@ -6,6 +6,7 @@ import { useMemo, useState } from 'react';
 import { formatDate, formatNumber } from '@/lib/helper';
 import pdfStyles from '@/components/pages/marketing/pdf/styles/MarketingPDFStyles';
 import toast from 'react-hot-toast';
+import { useSearchParams } from 'next/navigation';
 
 interface SalesOrderExportProps {
   data?: Marketing;
@@ -15,6 +16,9 @@ interface SalesOrderExportProps {
 const SalesOrderExport = ({ data }: SalesOrderExportProps) => {
   const [isGeneratingPDF, setIsGeneratingPDF] = useState(false);
   const salesData = data;
+  const searchParams = useSearchParams();
+  const action = searchParams.get('action');
+  const id = searchParams.get('id');
 
   const handleDownloadPDF = async () => {
     if (!salesData) {
@@ -43,6 +47,7 @@ const SalesOrderExport = ({ data }: SalesOrderExportProps) => {
       toast.error('Failed to generate PDF. Please try again.');
     } finally {
       setIsGeneratingPDF(false);
+      window.location.href = `/marketing?action=${action}&id=${id}`;
     }
   };
 

src/components/pages/marketing/skeleton/MarketingTableSkeleton.tsx

@@ -1,37 +0,0 @@
-import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
-import Table from '@/components/Table';
-import { Marketing } from '@/types/api/marketing/marketing';
-import { ColumnDef } from '@tanstack/react-table';
-
-const MarketingTableSkeleton = ({
-  columns,
-  icon,
-  title = 'No Data Available',
-  subtitle = 'There is no marketing data displayed. Enter marketing data to get started.',
-}: {
-  columns: ColumnDef<Marketing>[];
-  icon: React.ReactNode;
-  title?: string;
-  subtitle?: string;
-}) => {
-  return (
-    <div className='relative size-full'>
-      <Table
-        data={[]}
-        columns={columns}
-        isLoading={true}
-        className={{
-          skeletonCellClassName: 'animate-none w-full h-5 bg-base-content/4',
-          headerColumnClassName: 'whitespace-nowrap',
-          containerClassName: 'mb-0 overflow-hidden',
-          tableWrapperClassName: 'overflow-hidden',
-        }}
-      />
-      <div className='absolute inset-0 flex items-center justify-center'>
-        <DataStateSkeleton icon={icon} title={title} description={subtitle} />
-      </div>
-    </div>
-  );
-};
-
-export default MarketingTableSkeleton;

src/components/pages/master-data/area/AreasTable.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ChangeEventHandler, useEffect, useMemo, useState } from 'react';
+import { ChangeEventHandler, useEffect, useState } from 'react';
 import useSWR from 'swr';
 import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
 import toast from 'react-hot-toast';
@@ -11,101 +11,75 @@ import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import Button from '@/components/Button';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
-import PopoverButton from '@/components/popover/PopoverButton';
-import PopoverContent from '@/components/popover/PopoverContent';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import RequirePermission from '@/components/helper/RequirePermission';
-import AreaTableSkeleton from '@/components/pages/master-data/area/skeleton/AreaTableSkeleton';
 
 import { Area } from '@/types/api/master-data/area';
 import { AreaApi } from '@/services/api/master-data';
+import { cn } from '@/lib/helper';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
-import { usePathname } from 'next/navigation';
-import { useUiStore } from '@/stores/ui/ui.store';
+import { ROWS_OPTIONS } from '@/config/constant';
 
 const RowOptionsMenu = ({
-  popoverPosition = 'bottom',
+  type = 'dropdown',
   props,
   deleteClickHandler,
 }: {
-  popoverPosition: 'bottom' | 'top';
+  type: 'dropdown' | 'collapse';
   props: CellContext<Area, unknown>;
   deleteClickHandler: () => void;
 }) => {
-  const popoverId = `area#${props.row.original.id}`;
-  const popoverAnchorName = `--anchor-area#${props.row.original.id}`;
-
-  const closePopover = () => {
-    document.getElementById(popoverId)?.hidePopover();
-  };
-
   return (
-    <div className='relative'>
-      <PopoverButton
-        tabIndex={0}
-        variant='ghost'
-        color='none'
-        popoverTarget={popoverId}
-        anchorName={popoverAnchorName}
-      >
-        <Icon icon='material-symbols:more-vert' width={16} height={16} />
-      </PopoverButton>
+    <RowOptionsMenuWrapper type={type}>
+      <RequirePermission permissions='lti.master.area.detail'>
+        <Button
+          href={`/master-data/area/detail/?areaId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
+          className='justify-start text-sm'
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+      </RequirePermission>
 
-      <PopoverContent
-        id={popoverId}
-        anchorName={popoverAnchorName}
-        position={popoverPosition === 'bottom' ? 'bottom-start' : 'left'}
-        className='w-full max-w-40 rounded-xl border border-base-content/5 shadow-sm'
-      >
-        <div className='flex flex-col bg-base-100 rounded-xl'>
-          <RequirePermission permissions='lti.master.area.detail'>
-            <Button
-              href={`/master-data/area/detail/?areaId=${props.row.original.id}`}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full'
-              onClick={closePopover}
-            >
-              <Icon icon='heroicons:eye' width={20} height={20} />
-              Detail
-            </Button>
-          </RequirePermission>
-          <RequirePermission permissions='lti.master.area.update'>
-            <Button
-              href={`/master-data/area/detail/edit/?areaId=${props.row.original.id}`}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full'
-              onClick={closePopover}
-            >
-              <Icon icon='heroicons:pencil-square' width={20} height={20} />
-              Edit
-            </Button>
-          </RequirePermission>
-          <RequirePermission permissions='lti.master.area.delete'>
-            <Button
-              onClick={() => {
-                deleteClickHandler();
-                closePopover();
-              }}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full text-error hover:text-error'
-            >
-              <Icon icon='heroicons:trash' width={20} height={20} />
-              Delete
-            </Button>
-          </RequirePermission>
-        </div>
-      </PopoverContent>
-    </div>
+      <RequirePermission permissions='lti.master.area.update'>
+        <Button
+          href={`/master-data/area/detail/edit/?areaId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.area.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='text-error hover:text-inherit'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
+    </RowOptionsMenuWrapper>
   );
 };
 
 const AreasTable = () => {
-  const { searchValue, setSearchValue, setTableState } = useUiStore();
-  const pathname = usePathname();
-
   const {
     state: tableFilterState,
     updateFilter,
@@ -113,17 +87,10 @@ const AreasTable = () => {
     setPageSize,
     toQueryString: getTableFilterQueryString,
   } = useTableFilter({
-    initial: {
-      search: searchValue,
-    },
-    paramMap: {
-      page: 'page',
-      pageSize: 'limit',
-    },
+    initial: { search: '', nameSort: '' },
+    paramMap: { page: 'page', pageSize: 'limit', nameSort: 'sort_name' },
   });
 
-  const [sorting, setSorting] = useState<SortingState>([]);
-
   const {
     data: areas,
     isLoading,
@@ -134,21 +101,65 @@ const AreasTable = () => {
   );
 
   const deleteModal = useModal();
+
   const [selectedArea, setSelectedArea] = useState<Area | undefined>(undefined);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
-  useEffect(() => {
-    updateFilter('search', searchValue);
-  }, [searchValue, updateFilter]);
+  const [sorting, setSorting] = useState<SortingState>([]);
 
-  useEffect(() => {
-    setTableState('areas-table', pathname);
-  }, [pathname, setTableState]);
+  const areasColumns: ColumnDef<Area>[] = [
+    {
+      header: '#',
+      cell: (props) =>
+        tableFilterState.pageSize * (tableFilterState.page - 1) +
+        props.row.index +
+        1,
+    },
+    {
+      accessorKey: 'name',
+      header: 'Nama',
+    },
+    {
+      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 searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
-    setSearchValue(e.target.value);
-    updateFilter('search', e.target.value);
-  };
+        const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
+
+        const deleteClickHandler = () => {
+          setSelectedArea(props.row.original);
+          deleteModal.openModal();
+        };
+
+        return (
+          <>
+            {currentPageSize > 2 && (
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowDropdownOptions>
+            )}
+
+            {currentPageSize <= 2 && (
+              <RowCollapseOptions>
+                <RowOptionsMenu
+                  type='collapse'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowCollapseOptions>
+            )}
+          </>
+        );
+      },
+    },
+  ];
 
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
@@ -168,132 +179,95 @@ const AreasTable = () => {
     setIsDeleteLoading(false);
   };
 
-  const areasColumns: ColumnDef<Area>[] = useMemo(
-    () => [
-      {
-        header: 'No',
-        cell: (props) =>
-          tableFilterState.pageSize * (tableFilterState.page - 1) +
-          props.row.index +
-          1,
-      },
-      {
-        accessorKey: 'name',
-        header: 'Nama',
-      },
-      {
-        header: 'Aksi',
-        cell: (props: CellContext<Area, unknown>) => {
-          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 searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
 
-          const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
 
-          const deleteClickHandler = () => {
-            setSelectedArea(props.row.original);
-            deleteModal.openModal();
-          };
+    setPageSize(newVal.value as number);
+  };
 
-          return (
-            <RowOptionsMenu
-              props={props}
-              popoverPosition={isLast2Rows ? 'top' : 'bottom'}
-              deleteClickHandler={deleteClickHandler}
-            />
-          );
-        },
-      },
-    ],
-    [tableFilterState.pageSize, tableFilterState.page, deleteModal]
-  );
+  // track sorting
+  useEffect(() => {
+    const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
+
+    if (!isNameSorted) {
+      updateFilter('nameSort', '');
+    } else {
+      updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
+    }
+  }, [sorting, updateFilter]);
 
   return (
     <>
-      <div className='w-full'>
-        {/* Header Section */}
-        <div className='w-full p-3 flex flex-row justify-between gap-3 flex-wrap border-b border-base-content/10'>
-          {/* Action Buttons */}
-          <div className='w-fit flex flex-row gap-3 flex-wrap'>
-            <RequirePermission permissions='lti.master.area.create'>
-              <Button
-                href='/master-data/area/add'
-                color='primary'
-                className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
-              >
-                <Icon icon='heroicons:plus' width={20} height={20} />
-                Add Area
-              </Button>
-            </RequirePermission>
-          </div>
+      <div className='w-full p-0 sm:p-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
+            <div className='w-full flex flex-row'>
+              <div className='w-full flex flex-row'>
+                <RequirePermission permissions='lti.master.area.create'>
+                  <Button
+                    href='/master-data/area/add'
+                    variant='outline'
+                    color='primary'
+                    className='w-full sm:w-fit'
+                  >
+                    <Icon icon='ic:round-plus' width={24} height={24} />
+                    Tambah
+                  </Button>
+                </RequirePermission>
+              </div>
+            </div>
 
-          {/* Search */}
-          <div className='flex flex-1 flex-row justify-start sm:justify-end items-center gap-3 flex-wrap'>
             <DebouncedTextInput
               name='search'
-              placeholder='Search'
-              value={tableFilterState.search ?? ''}
+              placeholder='Cari Area'
+              value={tableFilterState.search}
               onChange={searchChangeHandler}
-              startAdornment={
-                <Icon
-                  icon='heroicons:magnifying-glass'
-                  width={20}
-                  height={20}
-                />
-              }
-              className={{
-                wrapper: 'w-full min-w-24 max-w-3xs',
-                inputWrapper: 'rounded-xl! shadow-button-soft',
-                input:
-                  'placeholder:font-semibold placeholder:text-base-content/50',
+              className={{ wrapper: 'sm:max-w-3xs' }}
+            />
+          </div>
+
+          <div className='flex flex-row justify-end'>
+            <SelectInput
+              label='Baris'
+              options={ROWS_OPTIONS}
+              value={{
+                label: String(tableFilterState.pageSize),
+                value: tableFilterState.pageSize,
               }}
+              onChange={pageSizeChangeHandler}
+              className={{ wrapper: 'max-w-28' }}
             />
           </div>
         </div>
 
-        {/* Table Section */}
-        <div className='flex flex-col mb-4'>
-          {isLoading ? (
-            <div className='w-full flex flex-row justify-center items-center p-4'>
-              <span className='loading loading-spinner loading-xl' />
-            </div>
-          ) : !isResponseSuccess(areas) || areas.data?.length === 0 ? (
-            <div className='p-3'>
-              <AreaTableSkeleton
-                columns={areasColumns}
-                icon={
-                  <Icon
-                    icon='heroicons:document-text'
-                    className='text-white'
-                    width={20}
-                    height={20}
-                  />
-                }
-              />
-            </div>
-          ) : (
-            <Table<Area>
-              data={isResponseSuccess(areas) ? areas?.data : []}
-              columns={areasColumns}
-              pageSize={tableFilterState.pageSize}
-              page={isResponseSuccess(areas) ? areas?.meta?.page : 0}
-              totalItems={
-                isResponseSuccess(areas) ? areas?.meta?.total_results : 0
-              }
-              onPageChange={setPage}
-              onPageSizeChange={setPageSize}
-              isLoading={isLoading}
-              sorting={sorting}
-              setSorting={setSorting}
-              className={{
-                containerClassName: 'p-3 mb-0',
-                headerColumnClassName: 'text-nowrap',
-              }}
-            />
-          )}
-        </div>
+        <Table<Area>
+          data={isResponseSuccess(areas) ? areas?.data : []}
+          columns={areasColumns}
+          pageSize={tableFilterState.pageSize}
+          page={isResponseSuccess(areas) ? areas?.meta?.page : 0}
+          totalItems={isResponseSuccess(areas) ? areas?.meta?.total_results : 0}
+          onPageChange={setPage}
+          isLoading={isLoading}
+          sorting={sorting}
+          setSorting={setSorting}
+          className={{
+            containerClassName: cn({
+              'mb-20': isResponseSuccess(areas) && areas?.data?.length === 0,
+            }),
+            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+            tableClassName: 'font-inter w-full table-auto min-h-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+            bodyRowClassName: 'border-b border-b-gray-200',
+            bodyColumnClassName:
+              'px-6 py-3 last:flex last:flex-row last:justify-end',
+          }}
+        />
       </div>
 
       <ConfirmationModal

src/components/pages/master-data/area/skeleton/AreaTableSkeleton.tsx

@@ -1,37 +0,0 @@
-import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
-import Table from '@/components/Table';
-import { Area } from '@/types/api/master-data/area';
-import { ColumnDef } from '@tanstack/react-table';
-
-const AreaTableSkeleton = ({
-  columns,
-  icon,
-  title = 'No Data Available',
-  subtitle = 'There is no area data displayed. Enter area data to get started.',
-}: {
-  columns: ColumnDef<Area>[];
-  icon: React.ReactNode;
-  title?: string;
-  subtitle?: string;
-}) => {
-  return (
-    <div className='relative size-full'>
-      <Table
-        data={[]}
-        columns={columns}
-        isLoading={true}
-        className={{
-          skeletonCellClassName: 'animate-none w-full h-5 bg-base-content/4',
-          headerColumnClassName: 'whitespace-nowrap',
-          containerClassName: 'mb-0 overflow-hidden',
-          tableWrapperClassName: 'overflow-hidden',
-        }}
-      />
-      <div className='absolute inset-0 flex items-center justify-center'>
-        <DataStateSkeleton icon={icon} title={title} description={subtitle} />
-      </div>
-    </div>
-  );
-};
-
-export default AreaTableSkeleton;

src/components/pages/master-data/bank/BanksTable.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ChangeEventHandler, useEffect, useMemo, useState } from 'react';
+import { ChangeEventHandler, useEffect, useState } from 'react';
 import useSWR from 'swr';
 import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
 import toast from 'react-hot-toast';
@@ -11,101 +11,75 @@ import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import Button from '@/components/Button';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import RequirePermission from '@/components/helper/RequirePermission';
-import PopoverButton from '@/components/popover/PopoverButton';
-import PopoverContent from '@/components/popover/PopoverContent';
-import BankTableSkeleton from '@/components/pages/master-data/bank/skeleton/BankTableSkeleton';
 
 import { Bank } from '@/types/api/master-data/bank';
 import { BankApi } from '@/services/api/master-data';
+import { cn } from '@/lib/helper';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
-import { usePathname } from 'next/navigation';
-import { useUiStore } from '@/stores/ui/ui.store';
+import { ROWS_OPTIONS } from '@/config/constant';
 
 const RowOptionsMenu = ({
-  popoverPosition = 'bottom',
+  type = 'dropdown',
   props,
   deleteClickHandler,
 }: {
-  popoverPosition: 'bottom' | 'top';
+  type: 'dropdown' | 'collapse';
   props: CellContext<Bank, unknown>;
   deleteClickHandler: () => void;
 }) => {
-  const popoverId = `bank#${props.row.original.id}`;
-  const popoverAnchorName = `--anchor-bank#${props.row.original.id}`;
-
-  const closePopover = () => {
-    document.getElementById(popoverId)?.hidePopover();
-  };
-
   return (
-    <div className='relative'>
-      <PopoverButton
-        tabIndex={0}
-        variant='ghost'
-        color='none'
-        popoverTarget={popoverId}
-        anchorName={popoverAnchorName}
-      >
-        <Icon icon='material-symbols:more-vert' width={16} height={16} />
-      </PopoverButton>
+    <RowOptionsMenuWrapper type={type}>
+      <RequirePermission permissions='lti.master.banks.detail'>
+        <Button
+          href={`/master-data/bank/detail/?bankId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
+          className='justify-start text-sm'
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+      </RequirePermission>
 
-      <PopoverContent
-        id={popoverId}
-        anchorName={popoverAnchorName}
-        position={popoverPosition === 'bottom' ? 'bottom-start' : 'left'}
-        className='w-full max-w-40 rounded-xl border border-base-content/5 shadow-sm'
-      >
-        <div className='flex flex-col bg-base-100 rounded-xl'>
-          <RequirePermission permissions='lti.master.banks.detail'>
-            <Button
-              href={`/master-data/bank/detail/?bankId=${props.row.original.id}`}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full'
-              onClick={closePopover}
-            >
-              <Icon icon='heroicons:eye' width={20} height={20} />
-              Detail
-            </Button>
-          </RequirePermission>
-          <RequirePermission permissions='lti.master.banks.update'>
-            <Button
-              href={`/master-data/bank/detail/edit/?bankId=${props.row.original.id}`}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full'
-              onClick={closePopover}
-            >
-              <Icon icon='heroicons:pencil-square' width={20} height={20} />
-              Edit
-            </Button>
-          </RequirePermission>
-          <RequirePermission permissions='lti.master.banks.delete'>
-            <Button
-              onClick={() => {
-                deleteClickHandler();
-                closePopover();
-              }}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full text-error hover:text-error'
-            >
-              <Icon icon='heroicons:trash' width={20} height={20} />
-              Delete
-            </Button>
-          </RequirePermission>
-        </div>
-      </PopoverContent>
-    </div>
+      <RequirePermission permissions='lti.master.banks.update'>
+        <Button
+          href={`/master-data/bank/detail/edit/?bankId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.banks.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
+    </RowOptionsMenuWrapper>
   );
 };
 
 const BanksTable = () => {
-  const { searchValue, setSearchValue, setTableState } = useUiStore();
-  const pathname = usePathname();
-
   const {
     state: tableFilterState,
     updateFilter,
@@ -113,17 +87,10 @@ const BanksTable = () => {
     setPageSize,
     toQueryString: getTableFilterQueryString,
   } = useTableFilter({
-    initial: {
-      search: searchValue,
-    },
-    paramMap: {
-      page: 'page',
-      pageSize: 'limit',
-    },
+    initial: { search: '', nameSort: '' },
+    paramMap: { page: 'page', pageSize: 'limit', nameSort: 'sort_name' },
   });
 
-  const [sorting, setSorting] = useState<SortingState>([]);
-
   const {
     data: banks,
     isLoading,
@@ -134,21 +101,78 @@ const BanksTable = () => {
   );
 
   const deleteModal = useModal();
+
   const [selectedBank, setSelectedBank] = useState<Bank | undefined>(undefined);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
-  useEffect(() => {
-    updateFilter('search', searchValue);
-  }, [searchValue, updateFilter]);
+  const [sorting, setSorting] = useState<SortingState>([]);
 
-  useEffect(() => {
-    setTableState('banks-table', pathname);
-  }, [pathname, setTableState]);
+  const banksColumns: ColumnDef<Bank>[] = [
+    {
+      header: '#',
+      cell: (props) =>
+        tableFilterState.pageSize * (tableFilterState.page - 1) +
+        props.row.index +
+        1,
+    },
+    {
+      accessorKey: 'name',
+      header: 'Nama',
+    },
+    {
+      accessorKey: 'alias',
+      header: 'Alias',
+    },
+    {
+      accessorKey: 'account_number',
+      header: 'No. Rekening',
+    },
+    {
+      accessorKey: 'owner',
+      header: 'Pemilik',
+      cell: (props) => (props.getValue() ? props.getValue() : '-'),
+    },
+    {
+      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 searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
-    setSearchValue(e.target.value);
-    updateFilter('search', e.target.value);
-  };
+        const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
+
+        const deleteClickHandler = () => {
+          setSelectedBank(props.row.original);
+          deleteModal.openModal();
+        };
+
+        return (
+          <>
+            {currentPageSize > 2 && (
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowDropdownOptions>
+            )}
+
+            {currentPageSize <= 2 && (
+              <RowCollapseOptions>
+                <RowOptionsMenu
+                  type='collapse'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowCollapseOptions>
+            )}
+          </>
+        );
+      },
+    },
+  ];
 
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
@@ -168,145 +192,93 @@ const BanksTable = () => {
     setIsDeleteLoading(false);
   };
 
-  const banksColumns: ColumnDef<Bank>[] = useMemo(
-    () => [
-      {
-        header: 'No',
-        cell: (props) =>
-          tableFilterState.pageSize * (tableFilterState.page - 1) +
-          props.row.index +
-          1,
-      },
-      {
-        accessorKey: 'name',
-        header: 'Nama',
-      },
-      {
-        accessorKey: 'alias',
-        header: 'Alias',
-      },
-      {
-        accessorKey: 'account_number',
-        header: 'No. Rekening',
-      },
-      {
-        accessorKey: 'owner',
-        header: 'Pemilik',
-        cell: (props) => props.getValue() || '-',
-      },
-      {
-        header: 'Aksi',
-        cell: (props: CellContext<Bank, unknown>) => {
-          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 searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
 
-          const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
 
-          const deleteClickHandler = () => {
-            setSelectedBank(props.row.original);
-            deleteModal.openModal();
-          };
+    setPageSize(newVal.value as number);
+  };
 
-          return (
-            <RowOptionsMenu
-              props={props}
-              popoverPosition={isLast2Rows ? 'top' : 'bottom'}
-              deleteClickHandler={deleteClickHandler}
-            />
-          );
-        },
-      },
-    ],
-    [tableFilterState.pageSize, tableFilterState.page, deleteModal]
-  );
+  // track sorting
+  useEffect(() => {
+    const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
+
+    if (!isNameSorted) {
+      updateFilter('nameSort', '');
+    } else {
+      updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
+    }
+  }, [sorting]);
 
   return (
     <>
-      <div className='w-full'>
-        {/* Header Section */}
-        <div className='w-full p-3 flex flex-row justify-between gap-3 flex-wrap border-b border-base-content/10'>
-          {/* Action Buttons */}
-          <div className='w-fit flex flex-row gap-3 flex-wrap'>
-            <RequirePermission permissions='lti.master.banks.create'>
-              <Button
-                href='/master-data/bank/add'
-                color='primary'
-                className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
-              >
-                <Icon icon='heroicons:plus' width={20} height={20} />
-                Add Bank
-              </Button>
-            </RequirePermission>
-          </div>
+      <div className='w-full p-0 sm:p-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
+            <div className='w-full flex flex-row'>
+              <RequirePermission permissions='lti.master.banks.create'>
+                <Button
+                  href='/master-data/bank/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
+            </div>
 
-          {/* Search */}
-          <div className='flex flex-1 flex-row justify-start sm:justify-end items-center gap-3 flex-wrap'>
             <DebouncedTextInput
               name='search'
-              placeholder='Search'
-              value={tableFilterState.search ?? ''}
+              placeholder='Cari Bank'
+              value={tableFilterState.search}
               onChange={searchChangeHandler}
-              startAdornment={
-                <Icon
-                  icon='heroicons:magnifying-glass'
-                  width={20}
-                  height={20}
-                />
-              }
-              className={{
-                wrapper: 'w-full min-w-24 max-w-3xs',
-                inputWrapper: 'rounded-xl! shadow-button-soft',
-                input:
-                  'placeholder:font-semibold placeholder:text-base-content/50',
+              className={{ wrapper: 'sm:max-w-3xs' }}
+            />
+          </div>
+
+          <div className='flex flex-row justify-end'>
+            <SelectInput
+              label='Baris'
+              options={ROWS_OPTIONS}
+              value={{
+                label: String(tableFilterState.pageSize),
+                value: tableFilterState.pageSize,
               }}
+              onChange={pageSizeChangeHandler}
+              className={{ wrapper: 'max-w-28' }}
             />
           </div>
         </div>
 
-        {/* Table Section */}
-        <div className='flex flex-col mb-4'>
-          {isLoading ? (
-            <div className='w-full flex flex-row justify-center items-center p-4'>
-              <span className='loading loading-spinner loading-xl' />
-            </div>
-          ) : !isResponseSuccess(banks) || banks.data?.length === 0 ? (
-            <div className='p-3'>
-              <BankTableSkeleton
-                columns={banksColumns}
-                icon={
-                  <Icon
-                    icon='heroicons:document-text'
-                    className='text-white'
-                    width={20}
-                    height={20}
-                  />
-                }
-              />
-            </div>
-          ) : (
-            <Table<Bank>
-              data={isResponseSuccess(banks) ? banks?.data : []}
-              columns={banksColumns}
-              pageSize={tableFilterState.pageSize}
-              page={isResponseSuccess(banks) ? banks?.meta?.page : 0}
-              totalItems={
-                isResponseSuccess(banks) ? banks?.meta?.total_results : 0
-              }
-              onPageChange={setPage}
-              onPageSizeChange={setPageSize}
-              isLoading={isLoading}
-              sorting={sorting}
-              setSorting={setSorting}
-              className={{
-                containerClassName: 'p-3 mb-0',
-                headerColumnClassName: 'text-nowrap',
-              }}
-            />
-          )}
-        </div>
+        <Table<Bank>
+          data={isResponseSuccess(banks) ? banks?.data : []}
+          columns={banksColumns}
+          pageSize={tableFilterState.pageSize}
+          page={isResponseSuccess(banks) ? banks?.meta?.page : 0}
+          totalItems={isResponseSuccess(banks) ? banks?.meta?.total_results : 0}
+          onPageChange={setPage}
+          isLoading={isLoading}
+          sorting={sorting}
+          setSorting={setSorting}
+          className={{
+            containerClassName: cn({
+              'mb-20': isResponseSuccess(banks) && banks?.data?.length === 0,
+            }),
+            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+            tableClassName: 'font-inter w-full table-auto min-h-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+            bodyRowClassName: 'border-b border-b-gray-200',
+            bodyColumnClassName:
+              'px-6 py-3 last:flex last:flex-row last:justify-end',
+          }}
+        />
       </div>
 
       <ConfirmationModal

src/components/pages/master-data/bank/skeleton/BankTableSkeleton.tsx

@@ -1,37 +0,0 @@
-import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
-import Table from '@/components/Table';
-import { Bank } from '@/types/api/master-data/bank';
-import { ColumnDef } from '@tanstack/react-table';
-
-const BankTableSkeleton = ({
-  columns,
-  icon,
-  title = 'No Data Available',
-  subtitle = 'There is no bank data displayed. Enter bank data to get started.',
-}: {
-  columns: ColumnDef<Bank>[];
-  icon: React.ReactNode;
-  title?: string;
-  subtitle?: string;
-}) => {
-  return (
-    <div className='relative size-full'>
-      <Table
-        data={[]}
-        columns={columns}
-        isLoading={true}
-        className={{
-          skeletonCellClassName: 'animate-none w-full h-5 bg-base-content/4',
-          headerColumnClassName: 'whitespace-nowrap',
-          containerClassName: 'mb-0 overflow-hidden',
-          tableWrapperClassName: 'overflow-hidden',
-        }}
-      />
-      <div className='absolute inset-0 flex items-center justify-center'>
-        <DataStateSkeleton icon={icon} title={title} description={subtitle} />
-      </div>
-    </div>
-  );
-};
-
-export default BankTableSkeleton;

src/components/pages/master-data/customer/CustomersTable.tsx

@@ -1,111 +1,81 @@
 'use client';
 
-import { ChangeEventHandler, useEffect, useMemo, useState } from 'react';
-import useSWR from 'swr';
-import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
-import toast from 'react-hot-toast';
-
-import { Icon } from '@iconify/react';
-import Table from '@/components/Table';
-import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import Button from '@/components/Button';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import Table from '@/components/Table';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import RequirePermission from '@/components/helper/RequirePermission';
-import PopoverButton from '@/components/popover/PopoverButton';
-import PopoverContent from '@/components/popover/PopoverContent';
-import CustomerTableSkeleton from '@/components/pages/master-data/customer/skeleton/CustomerTableSkeleton';
-
-import { Customer } from '@/types/api/master-data/customer';
-import { CustomerApi } from '@/services/api/master-data';
+import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { cn } from '@/lib/helper';
+import { CustomerApi } from '@/services/api/master-data';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
-import { usePathname } from 'next/navigation';
-import { useUiStore } from '@/stores/ui/ui.store';
+import { Customer } from '@/types/api/master-data/customer';
+import { Icon } from '@iconify/react';
+import { CellContext, ColumnDef } from '@tanstack/react-table';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import useSWR from 'swr';
 
 const RowOptionsMenu = ({
-  popoverPosition = 'bottom',
+  type = 'dropdown',
   props,
   deleteClickHandler,
 }: {
-  popoverPosition: 'bottom' | 'top';
+  type: 'dropdown' | 'collapse';
   props: CellContext<Customer, unknown>;
   deleteClickHandler: () => void;
 }) => {
-  const popoverId = `customer#${props.row.original.id}`;
-  const popoverAnchorName = `--anchor-customer#${props.row.original.id}`;
-
-  const closePopover = () => {
-    document.getElementById(popoverId)?.hidePopover();
-  };
-
   return (
-    <div className='relative'>
-      <PopoverButton
-        tabIndex={0}
-        variant='ghost'
-        color='none'
-        popoverTarget={popoverId}
-        anchorName={popoverAnchorName}
-      >
-        <Icon icon='material-symbols:more-vert' width={16} height={16} />
-      </PopoverButton>
-
-      <PopoverContent
-        id={popoverId}
-        anchorName={popoverAnchorName}
-        position={popoverPosition === 'bottom' ? 'bottom-start' : 'left'}
-        className='w-full max-w-40 rounded-xl border border-base-content/5 shadow-sm'
-      >
-        <div className='flex flex-col bg-base-100 rounded-xl'>
-          <RequirePermission permissions='lti.master.customer.detail'>
-            <Button
-              href={`/master-data/customer/detail/?customerId=${props.row.original.id}`}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full'
-              onClick={closePopover}
-            >
-              <Icon icon='heroicons:eye' width={20} height={20} />
-              Detail
-            </Button>
-          </RequirePermission>
-          <RequirePermission permissions='lti.master.customer.update'>
-            <Button
-              href={`/master-data/customer/detail/edit/?customerId=${props.row.original.id}`}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full'
-              onClick={closePopover}
-            >
-              <Icon icon='heroicons:pencil-square' width={20} height={20} />
-              Edit
-            </Button>
-          </RequirePermission>
-          <RequirePermission permissions='lti.master.customer.delete'>
-            <Button
-              onClick={() => {
-                deleteClickHandler();
-                closePopover();
-              }}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full text-error hover:text-error'
-            >
-              <Icon icon='heroicons:trash' width={20} height={20} />
-              Delete
-            </Button>
-          </RequirePermission>
-        </div>
-      </PopoverContent>
-    </div>
+    <RowOptionsMenuWrapper type={type}>
+      <RequirePermission permissions='lti.master.customer.detail'>
+        <Button
+          href={`/master-data/customer/detail/?customerId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
+          className='justify-start text-sm'
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+      </RequirePermission>
+      <RequirePermission permissions='lti.master.customer.update'>
+        <Button
+          href={`/master-data/customer/detail/edit/?customerId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+      <RequirePermission permissions='lti.master.customer.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
+    </RowOptionsMenuWrapper>
   );
 };
 
 const CustomersTable = () => {
-  const { searchValue, setSearchValue, setTableState } = useUiStore();
-  const pathname = usePathname();
-
   const {
     state: tableFilterState,
     updateFilter,
@@ -113,17 +83,16 @@ const CustomersTable = () => {
     setPageSize,
     toQueryString: getTableFilterQueryString,
   } = useTableFilter({
-    initial: {
-      search: searchValue,
-    },
+    initial: { search: '', nameSort: '', picSort: '' },
     paramMap: {
       page: 'page',
       pageSize: 'limit',
+      nameSort: 'sort_name',
+      picSort: 'sort_pic',
     },
   });
 
-  const [sorting, setSorting] = useState<SortingState>([]);
-
+  // Fetch Data
   const {
     data: customers,
     isLoading,
@@ -133,25 +102,87 @@ const CustomersTable = () => {
     CustomerApi.getAllFetcher
   );
 
+  // State
   const deleteModal = useModal();
   const [selectedCustomer, setSelectedCustomer] = useState<
     Customer | undefined
   >(undefined);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
-  useEffect(() => {
-    updateFilter('search', searchValue);
-  }, [searchValue, updateFilter]);
+  // Columns Definition
+  const customersColumns: ColumnDef<Customer>[] = [
+    {
+      header: '#',
+      cell: (props) =>
+        tableFilterState.pageSize * (tableFilterState.page - 1) +
+        props.row.index +
+        1,
+    },
+    {
+      accessorKey: 'name',
+      header: 'Nama',
+    },
+    {
+      accessorKey: 'pic',
+      header: 'PIC',
+      cell: (props) => props.row.original.pic.name,
+    },
+    {
+      accessorKey: 'type',
+      header: 'Type',
+      cell: (props) => props.row.original.type,
+    },
+    {
+      accessorKey: 'phone',
+      header: 'Phone',
+    },
+    {
+      accessorKey: 'email',
+      header: 'Email',
+    },
+    {
+      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;
 
-  useEffect(() => {
-    setTableState('customers-table', pathname);
-  }, [pathname, setTableState]);
+        const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
 
-  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
-    setSearchValue(e.target.value);
-    updateFilter('search', e.target.value);
-  };
+        const deleteClickHandler = () => {
+          setSelectedCustomer(props.row.original);
+          deleteModal.openModal();
+        };
 
+        return (
+          <>
+            {currentPageSize > 2 && (
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowDropdownOptions>
+            )}
+
+            {currentPageSize <= 2 && (
+              <RowCollapseOptions>
+                <RowOptionsMenu
+                  type='collapse'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowCollapseOptions>
+            )}
+          </>
+        );
+      },
+    },
+  ];
+
+  // Handler
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
 
@@ -171,147 +202,81 @@ const CustomersTable = () => {
     toast.success('Successfully delete Customer!');
     setIsDeleteLoading(false);
   };
-
-  const customersColumns: ColumnDef<Customer>[] = useMemo(
-    () => [
-      {
-        header: 'No',
-        cell: (props) =>
-          tableFilterState.pageSize * (tableFilterState.page - 1) +
-          props.row.index +
-          1,
-      },
-      {
-        accessorKey: 'name',
-        header: 'Nama',
-      },
-      {
-        accessorFn: (row) => row.pic?.name ?? '-',
-        header: 'PIC',
-      },
-      {
-        accessorKey: 'type',
-        header: 'Type',
-      },
-      {
-        accessorKey: 'phone',
-        header: 'Phone',
-      },
-      {
-        accessorKey: 'email',
-        header: 'Email',
-      },
-      {
-        header: 'Aksi',
-        cell: (props: CellContext<Customer, unknown>) => {
-          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 deleteClickHandler = () => {
-            setSelectedCustomer(props.row.original);
-            deleteModal.openModal();
-          };
-
-          return (
-            <RowOptionsMenu
-              props={props}
-              popoverPosition={isLast2Rows ? 'top' : 'bottom'}
-              deleteClickHandler={deleteClickHandler}
-            />
-          );
-        },
-      },
-    ],
-    [tableFilterState.pageSize, tableFilterState.page, deleteModal]
-  );
+  const searchChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    updateFilter('search', e.target.value);
+  };
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
+    setPageSize(newVal.value as number);
+  };
 
   return (
     <>
-      <div className='w-full'>
-        {/* Header Section */}
-        <div className='w-full p-3 flex flex-row justify-between gap-3 flex-wrap border-b border-base-content/10'>
-          {/* Action Buttons */}
-          <div className='w-fit flex flex-row gap-3 flex-wrap'>
-            <RequirePermission permissions='lti.master.customer.create'>
-              <Button
-                href='/master-data/customer/add'
-                color='primary'
-                className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
-              >
-                <Icon icon='heroicons:plus' width={20} height={20} />
-                Add Customer
-              </Button>
-            </RequirePermission>
-          </div>
+      <div className='w-full p-0 sm:p-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
+            <div className='w-full flex flex-row'>
+              <RequirePermission permissions='lti.master.customer.create'>
+                <Button
+                  href='/master-data/customer/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
+            </div>
 
-          {/* Search */}
-          <div className='flex flex-1 flex-row justify-start sm:justify-end items-center gap-3 flex-wrap'>
             <DebouncedTextInput
               name='search'
-              placeholder='Search'
-              value={tableFilterState.search ?? ''}
+              placeholder='Cari Kandang'
+              value={tableFilterState.search}
               onChange={searchChangeHandler}
-              startAdornment={
-                <Icon
-                  icon='heroicons:magnifying-glass'
-                  width={20}
-                  height={20}
-                />
-              }
-              className={{
-                wrapper: 'w-full min-w-24 max-w-3xs',
-                inputWrapper: 'rounded-xl! shadow-button-soft',
-                input:
-                  'placeholder:font-semibold placeholder:text-base-content/50',
+              className={{ wrapper: 'sm:max-w-3xs' }}
+            />
+          </div>
+
+          <div className='flex flex-row justify-end'>
+            <SelectInput
+              label='Baris'
+              options={ROWS_OPTIONS}
+              value={{
+                label: String(tableFilterState.pageSize),
+                value: tableFilterState.pageSize,
               }}
+              onChange={pageSizeChangeHandler}
+              className={{ wrapper: 'max-w-28' }}
             />
           </div>
         </div>
 
-        {/* Table Section */}
-        <div className='flex flex-col mb-4'>
-          {isLoading ? (
-            <div className='w-full flex flex-row justify-center items-center p-4'>
-              <span className='loading loading-spinner loading-xl' />
-            </div>
-          ) : !isResponseSuccess(customers) || customers.data?.length === 0 ? (
-            <div className='p-3'>
-              <CustomerTableSkeleton
-                columns={customersColumns}
-                icon={
-                  <Icon
-                    icon='heroicons:document-text'
-                    className='text-white'
-                    width={20}
-                    height={20}
-                  />
-                }
-              />
-            </div>
-          ) : (
-            <Table<Customer>
-              data={customers?.data}
-              columns={customersColumns}
-              pageSize={tableFilterState.pageSize}
-              page={customers?.meta?.page ?? 0}
-              totalItems={customers?.meta?.total_results ?? 0}
-              onPageChange={setPage}
-              onPageSizeChange={setPageSize}
-              isLoading={false}
-              sorting={sorting}
-              setSorting={setSorting}
-              className={{
-                containerClassName: 'p-3 mb-0',
-                headerColumnClassName: 'text-nowrap',
-              }}
-            />
-          )}
-        </div>
+        <Table<Customer>
+          data={isResponseSuccess(customers) ? customers?.data : []}
+          columns={customersColumns}
+          pageSize={tableFilterState.pageSize}
+          page={isResponseSuccess(customers) ? customers?.meta?.page : 0}
+          totalItems={
+            isResponseSuccess(customers) ? customers?.meta?.total_results : 0
+          }
+          onPageChange={setPage}
+          isLoading={isLoading}
+          className={{
+            containerClassName: cn({
+              'mb-20':
+                isResponseSuccess(customers) && customers?.data?.length === 0,
+            }),
+            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+            tableClassName: 'font-inter w-full table-auto min-h-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+            bodyRowClassName: 'border-b border-b-gray-200',
+            bodyColumnClassName:
+              'px-6 py-3 last:flex last:flex-row last:justify-end',
+          }}
+        />
       </div>
 
       <ConfirmationModal

src/components/pages/master-data/customer/skeleton/CustomerTableSkeleton.tsx

@@ -1,37 +0,0 @@
-import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
-import Table from '@/components/Table';
-import { Customer } from '@/types/api/master-data/customer';
-import { ColumnDef } from '@tanstack/react-table';
-
-const CustomerTableSkeleton = ({
-  columns,
-  icon,
-  title = 'No Data Available',
-  subtitle = 'There is no customer data displayed. Enter customer data to get started.',
-}: {
-  columns: ColumnDef<Customer>[];
-  icon: React.ReactNode;
-  title?: string;
-  subtitle?: string;
-}) => {
-  return (
-    <div className='relative size-full'>
-      <Table
-        data={[]}
-        columns={columns}
-        isLoading={true}
-        className={{
-          skeletonCellClassName: 'animate-none w-full h-5 bg-base-content/4',
-          headerColumnClassName: 'whitespace-nowrap',
-          containerClassName: 'mb-0 overflow-hidden',
-          tableWrapperClassName: 'overflow-hidden',
-        }}
-      />
-      <div className='absolute inset-0 flex items-center justify-center'>
-        <DataStateSkeleton icon={icon} title={title} description={subtitle} />
-      </div>
-    </div>
-  );
-};
-
-export default CustomerTableSkeleton;

src/components/pages/master-data/flock/FlocksTable.tsx

@@ -1,111 +1,91 @@
 'use client';
 
-import { ChangeEventHandler, useEffect, useMemo, useState } from 'react';
-import useSWR from 'swr';
-import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
-import toast from 'react-hot-toast';
-
-import { Icon } from '@iconify/react';
-import Table from '@/components/Table';
-import DebouncedTextInput from '@/components/input/DebouncedTextInput';
-import Button from '@/components/Button';
-import { useModal } from '@/components/Modal';
-import ConfirmationModal from '@/components/modal/ConfirmationModal';
-import RequirePermission from '@/components/helper/RequirePermission';
-import PopoverButton from '@/components/popover/PopoverButton';
-import PopoverContent from '@/components/popover/PopoverContent';
-import FlockTableSkeleton from '@/components/pages/master-data/flock/skeleton/FlockTableSkeleton';
-
+import { CellContext, ColumnDef } from '@tanstack/react-table';
 import { Flock } from '@/types/api/master-data/flock';
-import { FlockApi } from '@/services/api/master-data';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { cn } from '@/lib/helper';
+import Button from '@/components/Button';
+import { Icon } from '@iconify/react';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
-import { usePathname } from 'next/navigation';
-import { useUiStore } from '@/stores/ui/ui.store';
+import { useState } from 'react';
+import useSWR from 'swr';
+import { FlockApi } from '@/services/api/master-data';
+import { useModal } from '@/components/Modal';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import RequirePermission from '@/components/helper/RequirePermission';
+import toast from 'react-hot-toast';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import { ROWS_OPTIONS } from '@/config/constant';
+import Table from '@/components/Table';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
 
-const RowOptionsMenu = ({
-  popoverPosition = 'bottom',
+const RowsOptions = ({
+  type = 'dropdown',
   props,
   deleteClickHandler,
 }: {
-  popoverPosition: 'bottom' | 'top';
+  type: 'dropdown' | 'collapse';
   props: CellContext<Flock, unknown>;
   deleteClickHandler: () => void;
 }) => {
-  const popoverId = `flock#${props.row.original.id}`;
-  const popoverAnchorName = `--anchor-flock#${props.row.original.id}`;
-
-  const closePopover = () => {
-    document.getElementById(popoverId)?.hidePopover();
-  };
-
   return (
-    <div className='relative'>
-      <PopoverButton
-        tabIndex={0}
-        variant='ghost'
-        color='none'
-        popoverTarget={popoverId}
-        anchorName={popoverAnchorName}
-      >
-        <Icon icon='material-symbols:more-vert' width={16} height={16} />
-      </PopoverButton>
-
-      <PopoverContent
-        id={popoverId}
-        anchorName={popoverAnchorName}
-        position={popoverPosition === 'bottom' ? 'bottom-start' : 'left'}
-        className='w-full max-w-40 rounded-xl border border-base-content/5 shadow-sm'
-      >
-        <div className='flex flex-col bg-base-100 rounded-xl'>
-          <RequirePermission permissions='lti.master.flocks.detail'>
-            <Button
-              href={`/master-data/flock/detail/?flockId=${props.row.original.id}`}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full'
-              onClick={closePopover}
-            >
-              <Icon icon='heroicons:eye' width={20} height={20} />
-              Detail
-            </Button>
-          </RequirePermission>
-          <RequirePermission permissions='lti.master.flocks.update'>
-            <Button
-              href={`/master-data/flock/detail/edit/?flockId=${props.row.original.id}`}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full'
-              onClick={closePopover}
-            >
-              <Icon icon='heroicons:pencil-square' width={20} height={20} />
-              Edit
-            </Button>
-          </RequirePermission>
-          <RequirePermission permissions='lti.master.flocks.delete'>
-            <Button
-              onClick={() => {
-                deleteClickHandler();
-                closePopover();
-              }}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full text-error hover:text-error'
-            >
-              <Icon icon='heroicons:trash' width={20} height={20} />
-              Delete
-            </Button>
-          </RequirePermission>
-        </div>
-      </PopoverContent>
-    </div>
+    <RowOptionsMenuWrapper type={type}>
+      <RequirePermission permissions='lti.master.flocks.detail'>
+        <Button
+          href={`/master-data/flock/detail/?flockId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
+          className='justify-start text-sm'
+        >
+          <Icon
+            icon='mdi:eye-outline'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Detail
+        </Button>
+      </RequirePermission>
+      <RequirePermission permissions='lti.master.flocks.update'>
+        <Button
+          href={`/master-data/flock/detail/edit/?flockId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon
+            icon='material-symbols:edit-outline'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Edit
+        </Button>
+      </RequirePermission>
+      <RequirePermission permissions='lti.master.flocks.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
+    </RowOptionsMenuWrapper>
   );
 };
 
 const FlockTable = () => {
-  const { searchValue, setSearchValue, setTableState } = useUiStore();
-  const pathname = usePathname();
-
   const {
     state: tableFilterState,
     updateFilter,
@@ -113,17 +93,15 @@ const FlockTable = () => {
     setPageSize,
     toQueryString: getTableFilterQueryString,
   } = useTableFilter({
-    initial: {
-      search: searchValue,
-    },
+    initial: { search: '', nameSort: '' },
     paramMap: {
       page: 'page',
       pageSize: 'limit',
+      nameSort: 'sort_name',
     },
   });
 
-  const [sorting, setSorting] = useState<SortingState>([]);
-
+  // Fetch Data
   const {
     data: flocks,
     isLoading,
@@ -133,25 +111,74 @@ const FlockTable = () => {
     FlockApi.getAllFetcher
   );
 
+  // State
   const deleteModal = useModal();
   const [selectedFlock, setSelectedFlock] = useState<Flock | undefined>(
     undefined
   );
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
-  useEffect(() => {
-    updateFilter('search', searchValue);
-  }, [searchValue, updateFilter]);
+  // Columns Definition
+  const flocksColumns: ColumnDef<Flock>[] = [
+    {
+      header: '#',
+      cell: (props) =>
+        tableFilterState.pageSize * (tableFilterState.page - 1) +
+        props.row.index +
+        1,
+    },
+    {
+      accessorKey: 'name',
+      header: 'Nama',
+    },
+    {
+      accessorKey: 'created_at',
+      header: 'Dibuat pada',
+      cell: (props) =>
+        new Date(props.row.original.created_at).toLocaleDateString(),
+    },
+    {
+      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;
 
-  useEffect(() => {
-    setTableState('flocks-table', pathname);
-  }, [pathname, setTableState]);
+        const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
 
-  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
-    setSearchValue(e.target.value);
-    updateFilter('search', e.target.value);
-  };
+        const deleteClickHandler = () => {
+          setSelectedFlock(props.row.original);
+          deleteModal.openModal();
+        };
 
+        return (
+          <>
+            {currentPageSize > 2 && (
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowsOptions
+                  type='dropdown'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowDropdownOptions>
+            )}
+            {currentPageSize <= 2 && (
+              <RowCollapseOptions>
+                <RowsOptions
+                  type='collapse'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowCollapseOptions>
+            )}
+          </>
+        );
+      },
+    },
+  ];
+
+  // Handler
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
 
@@ -169,143 +196,85 @@ const FlockTable = () => {
     toast.success('Successfully delete Flock!');
     setIsDeleteLoading(false);
   };
-
-  const flocksColumns: ColumnDef<Flock>[] = useMemo(
-    () => [
-      {
-        header: 'No',
-        cell: (props) =>
-          tableFilterState.pageSize * (tableFilterState.page - 1) +
-          props.row.index +
-          1,
-      },
-      {
-        accessorKey: 'name',
-        header: 'Nama',
-      },
-      {
-        accessorKey: 'created_at',
-        header: 'Dibuat pada',
-        cell: (props) =>
-          new Date(props.row.original.created_at).toLocaleDateString('id-ID'),
-      },
-      {
-        header: 'Aksi',
-        cell: (props: CellContext<Flock, unknown>) => {
-          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 deleteClickHandler = () => {
-            setSelectedFlock(props.row.original);
-            deleteModal.openModal();
-          };
-
-          return (
-            <RowOptionsMenu
-              props={props}
-              popoverPosition={isLast2Rows ? 'top' : 'bottom'}
-              deleteClickHandler={deleteClickHandler}
-            />
-          );
-        },
-      },
-    ],
-    [tableFilterState.pageSize, tableFilterState.page, deleteModal]
-  );
+  const searchChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    updateFilter('search', e.target.value);
+  };
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
+    setPageSize(newVal.value as number);
+  };
 
   return (
     <>
-      <div className='w-full'>
-        {/* Header Section */}
-        <div className='w-full p-3 flex flex-row justify-between gap-3 flex-wrap border-b border-base-content/10'>
-          {/* Action Buttons */}
-          <div className='w-fit flex flex-row gap-3 flex-wrap'>
-            <RequirePermission permissions='lti.master.flocks.create'>
-              <Button
-                href='/master-data/flock/add'
-                color='primary'
-                className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
-              >
-                <Icon icon='heroicons:plus' width={20} height={20} />
-                Add Flock
-              </Button>
-            </RequirePermission>
-          </div>
+      <div className='w-full p-0 sm:p-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
+            <div className='w-full flex flex-row'>
+              <RequirePermission permissions='lti.master.flocks.create'>
+                <Button
+                  href='/master-data/flock/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
+            </div>
 
-          {/* Search */}
-          <div className='flex flex-1 flex-row justify-start sm:justify-end items-center gap-3 flex-wrap'>
             <DebouncedTextInput
               name='search'
-              placeholder='Search'
-              value={tableFilterState.search ?? ''}
+              placeholder='Cari Flock'
+              value={tableFilterState.search}
               onChange={searchChangeHandler}
-              startAdornment={
-                <Icon
-                  icon='heroicons:magnifying-glass'
-                  width={20}
-                  height={20}
-                />
-              }
-              className={{
-                wrapper: 'w-full min-w-24 max-w-3xs',
-                inputWrapper: 'rounded-xl! shadow-button-soft',
-                input:
-                  'placeholder:font-semibold placeholder:text-base-content/50',
+              className={{ wrapper: 'sm:max-w-3xs' }}
+            />
+          </div>
+
+          <div className='flex flex-row justify-end'>
+            <SelectInput
+              label='Baris'
+              options={ROWS_OPTIONS}
+              value={{
+                label: String(tableFilterState.pageSize),
+                value: tableFilterState.pageSize,
               }}
+              onChange={pageSizeChangeHandler}
+              className={{ wrapper: 'max-w-28' }}
             />
           </div>
         </div>
 
-        {/* Table Section */}
-        <div className='flex flex-col mb-4'>
-          {isLoading ? (
-            <div className='w-full flex flex-row justify-center items-center p-4'>
-              <span className='loading loading-spinner loading-xl' />
-            </div>
-          ) : !isResponseSuccess(flocks) || flocks.data?.length === 0 ? (
-            <div className='p-3'>
-              <FlockTableSkeleton
-                columns={flocksColumns}
-                icon={
-                  <Icon
-                    icon='heroicons:document-text'
-                    className='text-white'
-                    width={20}
-                    height={20}
-                  />
-                }
-              />
-            </div>
-          ) : (
-            <Table<Flock>
-              data={flocks?.data}
-              columns={flocksColumns}
-              pageSize={tableFilterState.pageSize}
-              page={flocks?.meta?.page ?? 0}
-              totalItems={flocks?.meta?.total_results ?? 0}
-              onPageChange={setPage}
-              onPageSizeChange={setPageSize}
-              isLoading={false}
-              sorting={sorting}
-              setSorting={setSorting}
-              className={{
-                containerClassName: 'p-3 mb-0',
-                headerColumnClassName: 'text-nowrap',
-              }}
-            />
-          )}
-        </div>
+        <Table<Flock>
+          data={isResponseSuccess(flocks) ? flocks?.data : []}
+          columns={flocksColumns}
+          pageSize={tableFilterState.pageSize}
+          page={isResponseSuccess(flocks) ? flocks?.meta?.page : 0}
+          totalItems={
+            isResponseSuccess(flocks) ? flocks?.meta?.total_results : 0
+          }
+          onPageChange={setPage}
+          isLoading={isLoading}
+          className={{
+            containerClassName: cn({
+              'mb-20': isResponseSuccess(flocks) && flocks?.data?.length === 0,
+            }),
+            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+            tableClassName: 'font-inter w-full table-auto min-h-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+            bodyRowClassName: 'border-b border-b-gray-200',
+            bodyColumnClassName:
+              'px-6 py-3 last:flex last:flex-row last:justify-end',
+          }}
+        />
       </div>
-
       <ConfirmationModal
         ref={deleteModal.ref}
         type='error'
-        text={`Apakah anda yakin ingin menghapus data Flock ini (${selectedFlock?.name})?`}
+        text={`Apakah anda yakin ingin menghapus data Supplier ini (${selectedFlock?.name})?`}
         secondaryButton={{
           text: 'Tidak',
         }}

src/components/pages/master-data/flock/skeleton/FlockTableSkeleton.tsx

@@ -1,37 +0,0 @@
-import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
-import Table from '@/components/Table';
-import { Flock } from '@/types/api/master-data/flock';
-import { ColumnDef } from '@tanstack/react-table';
-
-const FlockTableSkeleton = ({
-  columns,
-  icon,
-  title = 'No Data Available',
-  subtitle = 'There is no flock data displayed. Enter flock data to get started.',
-}: {
-  columns: ColumnDef<Flock>[];
-  icon: React.ReactNode;
-  title?: string;
-  subtitle?: string;
-}) => {
-  return (
-    <div className='relative size-full'>
-      <Table
-        data={[]}
-        columns={columns}
-        isLoading={true}
-        className={{
-          skeletonCellClassName: 'animate-none w-full h-5 bg-base-content/4',
-          headerColumnClassName: 'whitespace-nowrap',
-          containerClassName: 'mb-0 overflow-hidden',
-          tableWrapperClassName: 'overflow-hidden',
-        }}
-      />
-      <div className='absolute inset-0 flex items-center justify-center'>
-        <DataStateSkeleton icon={icon} title={title} description={subtitle} />
-      </div>
-    </div>
-  );
-};
-
-export default FlockTableSkeleton;

src/components/pages/master-data/kandang/KandangsTable.tsx

@@ -1,130 +1,90 @@
 'use client';
 
-import {
-  ChangeEventHandler,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
-import { usePathname } from 'next/navigation';
+import { ChangeEventHandler, useCallback, useEffect, useState } from 'react';
 import useSWR from 'swr';
-import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
+import {
+  CellContext,
+  ColumnDef,
+  ColumnSort,
+  SortingState,
+} from '@tanstack/react-table';
 import toast from 'react-hot-toast';
-import { useFormik } from 'formik';
 
 import { Icon } from '@iconify/react';
 import Table from '@/components/Table';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import Button from '@/components/Button';
-import Modal, { useModal } from '@/components/Modal';
+import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import RequirePermission from '@/components/helper/RequirePermission';
-import PopoverButton from '@/components/popover/PopoverButton';
-import PopoverContent from '@/components/popover/PopoverContent';
-import KandangTableSkeleton from '@/components/pages/master-data/kandang/skeleton/KandangTableSkeleton';
-import SelectInput, { useSelect } from '@/components/input/SelectInput';
-import { OptionType } from '@/components/input/SelectInput';
-import ButtonFilter from '@/components/helper/ButtonFilter';
 
 import { Kandang } from '@/types/api/master-data/kandang';
-import { Location } from '@/types/api/master-data/location';
-import { KandangApi, LocationApi } from '@/services/api/master-data';
-import { UserApi } from '@/services/api/user';
-import { User } from '@/types/api/api-general';
-import { formatNumber } from '@/lib/helper';
+import { KandangApi } from '@/services/api/master-data';
+import { cn, formatNumber } from '@/lib/helper';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
-import { useUiStore } from '@/stores/ui/ui.store';
-import {
-  KandangFilterSchema,
-  KandangFilterType,
-} from '@/components/pages/master-data/kandang/filter/KandangFilter';
-import SelectInputRadio from '@/components/input/SelectInputRadio';
+import { ROWS_OPTIONS } from '@/config/constant';
 
 const RowOptionsMenu = ({
-  popoverPosition = 'bottom',
+  type = 'dropdown',
   props,
   deleteClickHandler,
 }: {
-  popoverPosition: 'bottom' | 'top';
+  type: 'dropdown' | 'collapse';
   props: CellContext<Kandang, unknown>;
   deleteClickHandler: () => void;
 }) => {
-  const popoverId = `kandang#${props.row.original.id}`;
-  const popoverAnchorName = `--anchor-kandang#${props.row.original.id}`;
-
-  const closePopover = () => {
-    document.getElementById(popoverId)?.hidePopover();
-  };
-
   return (
-    <div className='relative'>
-      <PopoverButton
-        tabIndex={0}
-        variant='ghost'
-        color='none'
-        popoverTarget={popoverId}
-        anchorName={popoverAnchorName}
-      >
-        <Icon icon='material-symbols:more-vert' width={16} height={16} />
-      </PopoverButton>
+    <RowOptionsMenuWrapper type={type}>
+      <RequirePermission permissions='lti.master.kandangs.detail'>
+        <Button
+          href={`/master-data/kandang/detail/?kandangId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
+          className='justify-start text-sm'
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+      </RequirePermission>
 
-      <PopoverContent
-        id={popoverId}
-        anchorName={popoverAnchorName}
-        position={popoverPosition === 'bottom' ? 'bottom-start' : 'left'}
-        className='w-full max-w-40 rounded-xl border border-base-content/5 shadow-sm'
-      >
-        <div className='flex flex-col bg-base-100 rounded-xl'>
-          <RequirePermission permissions='lti.master.kandangs.detail'>
-            <Button
-              href={`/master-data/kandang/detail/?kandangId=${props.row.original.id}`}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full'
-              onClick={closePopover}
-            >
-              <Icon icon='heroicons:eye' width={20} height={20} />
-              Detail
-            </Button>
-          </RequirePermission>
-          <RequirePermission permissions='lti.master.kandangs.update'>
-            <Button
-              href={`/master-data/kandang/detail/edit/?kandangId=${props.row.original.id}`}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full'
-              onClick={closePopover}
-            >
-              <Icon icon='heroicons:pencil-square' width={20} height={20} />
-              Edit
-            </Button>
-          </RequirePermission>
-          <RequirePermission permissions='lti.master.kandangs.delete'>
-            <Button
-              onClick={() => {
-                deleteClickHandler();
-                closePopover();
-              }}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full text-error hover:text-error'
-            >
-              <Icon icon='heroicons:trash' width={20} height={20} />
-              Delete
-            </Button>
-          </RequirePermission>
-        </div>
-      </PopoverContent>
-    </div>
+      <RequirePermission permissions='lti.master.kandangs.update'>
+        <Button
+          href={`/master-data/kandang/detail/edit/?kandangId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.kandangs.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
+    </RowOptionsMenuWrapper>
   );
 };
 
 const KandangsTable = () => {
-  const { searchValue, setSearchValue, setTableState } = useUiStore();
-  const pathname = usePathname();
-
   const {
     state: tableFilterState,
     updateFilter,
@@ -134,112 +94,21 @@ const KandangsTable = () => {
   } = useTableFilter({
     initial: {
       search: '',
-      locationFilter: '',
-      picFilter: '',
+      nameSort: '',
+      locationSort: '',
+      capacitySort: '',
+      picSort: '',
     },
     paramMap: {
       page: 'page',
       pageSize: 'limit',
-      locationFilter: 'location_id',
-      picFilter: 'pic_id',
+      nameSort: 'sort_name',
+      locationSort: 'sort_location',
+      capacitySort: 'sort_capacity',
+      picSort: ' sort_pic',
     },
   });
 
-  // ===== FILTER MODAL STATE =====
-  const filterModal = useModal();
-
-  // ===== FORMIK SETUP =====
-  const formik = useFormik<KandangFilterType>({
-    initialValues: {
-      location_id: null,
-      pic_id: null,
-    },
-    validationSchema: KandangFilterSchema,
-    onSubmit: (values, { setSubmitting }) => {
-      updateFilter('locationFilter', values.location_id || '');
-      updateFilter('picFilter', values.pic_id || '');
-      filterModal.closeModal();
-      setSubmitting(false);
-    },
-    onReset: () => {
-      updateFilter('locationFilter', '');
-      updateFilter('picFilter', '');
-    },
-  });
-
-  // ===== LOCATION OPTIONS =====
-  const {
-    setInputValue: setLocationInputValue,
-    options: locationOptions,
-    isLoadingOptions: isLoadingLocationOptions,
-    loadMore: loadMoreLocations,
-  } = useSelect<Location>(
-    filterModal.open ? LocationApi.basePath : null,
-    'id',
-    'name',
-    'search'
-  );
-
-  // ===== PIC OPTIONS =====
-  const {
-    setInputValue: setPicInputValue,
-    options: picOptions,
-    isLoadingOptions: isLoadingPicOptions,
-    loadMore: loadMorePics,
-  } = useSelect<User>(
-    filterModal.open ? UserApi.basePath : null,
-    'id',
-    'name',
-    'search'
-  );
-
-  // ===== FILTER HANDLERS =====
-  const handleFilterLocationChange = useCallback(
-    (val: OptionType | OptionType[] | null) => {
-      const location = val as OptionType | null;
-      const locationId = location?.value ? String(location.value) : null;
-
-      formik.setFieldValue('location_id', locationId);
-    },
-    [formik]
-  );
-
-  const handleFilterPicChange = useCallback(
-    (val: OptionType | OptionType[] | null) => {
-      const pic = val as OptionType | null;
-      const picId = pic?.value ? String(pic.value) : null;
-
-      formik.setFieldValue('pic_id', picId);
-    },
-    [formik]
-  );
-
-  // ===== FILTER HELPERS =====
-  const locationIdValue = useMemo(() => {
-    if (!formik.values.location_id) return null;
-    return (
-      locationOptions.find(
-        (opt) => String(opt.value) === formik.values.location_id
-      ) || null
-    );
-  }, [formik.values.location_id, locationOptions]);
-
-  const picIdValue = useMemo(() => {
-    if (!formik.values.pic_id) return null;
-    return (
-      picOptions.find((opt) => String(opt.value) === formik.values.pic_id) ||
-      null
-    );
-  }, [formik.values.pic_id, picOptions]);
-
-  // ===== HANDLE FILTER MODAL OPEN =====
-  const handleFilterModalOpen = () => {
-    filterModal.openModal();
-    formik.validateForm();
-  };
-
-  const [sorting, setSorting] = useState<SortingState>([]);
-
   const {
     data: kandangs,
     isLoading,
@@ -250,23 +119,82 @@ const KandangsTable = () => {
   );
 
   const deleteModal = useModal();
+
   const [selectedKandang, setSelectedKandang] = useState<Kandang | undefined>(
     undefined
   );
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
-  useEffect(() => {
-    updateFilter('search', searchValue);
-  }, [searchValue, updateFilter]);
+  const [sorting, setSorting] = useState<SortingState>([]);
 
-  useEffect(() => {
-    setTableState('kandangs-table', pathname);
-  }, [pathname, setTableState]);
+  const kandangsColumns: ColumnDef<Kandang>[] = [
+    {
+      header: '#',
+      cell: (props) =>
+        tableFilterState.pageSize * (tableFilterState.page - 1) +
+        props.row.index +
+        1,
+    },
+    {
+      accessorKey: 'name',
+      header: 'Nama',
+    },
+    {
+      accessorKey: 'location',
+      header: 'Lokasi',
+      cell: (props) => props.row.original.location.name,
+    },
+    {
+      accessorKey: 'capacity',
+      header: 'Kapasitas',
+      cell: (props) => formatNumber(props.row.original.capacity ?? 0),
+    },
+    {
+      accessorKey: 'pic',
+      header: 'PIC',
+      cell: (props) => props.row.original.pic.name,
+    },
+    {
+      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 searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
-    setSearchValue(e.target.value);
-    updateFilter('search', e.target.value);
-  };
+        const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
+
+        const deleteClickHandler = () => {
+          setSelectedKandang(props.row.original);
+          deleteModal.openModal();
+        };
+
+        return (
+          <>
+            {currentPageSize > 2 && (
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowDropdownOptions>
+            )}
+
+            {currentPageSize <= 2 && (
+              <RowCollapseOptions>
+                <RowOptionsMenu
+                  type='collapse'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowCollapseOptions>
+            )}
+          </>
+        );
+      },
+    },
+  ];
 
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
@@ -288,150 +216,114 @@ const KandangsTable = () => {
     setIsDeleteLoading(false);
   };
 
-  const kandangsColumns: ColumnDef<Kandang>[] = useMemo(
-    () => [
-      {
-        header: 'No',
-        cell: (props) =>
-          tableFilterState.pageSize * (tableFilterState.page - 1) +
-          props.row.index +
-          1,
-      },
-      {
-        accessorKey: 'name',
-        header: 'Nama',
-      },
-      {
-        accessorFn: (row) => row.location?.name ?? '-',
-        header: 'Lokasi',
-      },
-      {
-        accessorKey: 'capacity',
-        header: 'Kapasitas',
-        cell: (props) => formatNumber(props.row.original.capacity ?? 0),
-      },
-      {
-        accessorFn: (row) => row.pic?.name ?? '-',
-        header: 'PIC',
-      },
-      {
-        header: 'Aksi',
-        cell: (props: CellContext<Kandang, unknown>) => {
-          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 searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
 
-          const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
 
-          const deleteClickHandler = () => {
-            setSelectedKandang(props.row.original);
-            deleteModal.openModal();
-          };
+    setPageSize(newVal.value as number);
+  };
 
-          return (
-            <RowOptionsMenu
-              props={props}
-              popoverPosition={isLast2Rows ? 'top' : 'bottom'}
-              deleteClickHandler={deleteClickHandler}
-            />
-          );
-        },
-      },
-    ],
-    [tableFilterState.pageSize, tableFilterState.page, deleteModal]
+  const updateSortingFilter = useCallback(
+    (
+      sortName: Exclude<keyof typeof tableFilterState, 'page' | 'pageSize'>,
+      sortFilter: ColumnSort | undefined
+    ) => {
+      if (!sortFilter) {
+        updateFilter(sortName, '');
+      } else {
+        updateFilter(sortName, sortFilter.desc ? 'desc' : 'asc');
+      }
+    },
+    [updateFilter]
   );
 
+  // track sorting
+  useEffect(() => {
+    const nameSortFilter = sorting.find((sortItem) => sortItem.id === 'name');
+    const locationSortFilter = sorting.find(
+      (sortItem) => sortItem.id === 'location'
+    );
+    const picSortFilter = sorting.find((sortItem) => sortItem.id === 'pic');
+
+    updateSortingFilter('nameSort', nameSortFilter);
+    updateSortingFilter('locationSort', locationSortFilter);
+    updateSortingFilter('picSort', picSortFilter);
+  }, [sorting, updateSortingFilter]);
+
   return (
     <>
-      <div className='w-full'>
-        {/* Header Section */}
-        <div className='w-full p-3 flex flex-row justify-between gap-3 flex-wrap border-b border-base-content/10'>
-          {/* Action Buttons */}
-          <div className='w-fit flex flex-row gap-3 flex-wrap'>
-            <RequirePermission permissions='lti.master.kandangs.create'>
-              <Button
-                href='/master-data/kandang/add'
-                color='primary'
-                className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
-              >
-                <Icon icon='heroicons:plus' width={20} height={20} />
-                Add Kandang
-              </Button>
-            </RequirePermission>
-          </div>
+      <div className='w-full p-0 sm:p-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
+            <div className='w-full flex flex-row'>
+              <div className='w-full flex flex-row'>
+                <RequirePermission permissions='lti.master.kandangs.create'>
+                  <Button
+                    href='/master-data/kandang/add'
+                    variant='outline'
+                    color='primary'
+                    className='w-full sm:w-fit'
+                  >
+                    <Icon icon='ic:round-plus' width={24} height={24} />
+                    Tambah
+                  </Button>
+                </RequirePermission>
+              </div>
+            </div>
 
-          {/* Search and Filter */}
-          <div className='flex flex-1 flex-row justify-start sm:justify-end items-center gap-3 flex-wrap'>
             <DebouncedTextInput
               name='search'
-              placeholder='Search'
-              value={tableFilterState.search ?? ''}
+              placeholder='Cari Kandang'
+              value={tableFilterState.search}
               onChange={searchChangeHandler}
-              startAdornment={
-                <Icon
-                  icon='heroicons:magnifying-glass'
-                  width={20}
-                  height={20}
-                />
-              }
-              className={{
-                wrapper: 'w-full min-w-24 max-w-3xs',
-                inputWrapper: 'rounded-xl! shadow-button-soft',
-                input:
-                  'placeholder:font-semibold placeholder:text-base-content/50',
-              }}
+              className={{ wrapper: 'sm:max-w-3xs' }}
             />
+          </div>
 
-            <ButtonFilter
-              values={tableFilterState}
-              excludeFields={['page', 'pageSize', 'search']}
-              onClick={handleFilterModalOpen}
-              className='px-3 py-2.5'
+          <div className='flex flex-row justify-end'>
+            <SelectInput
+              label='Baris'
+              options={ROWS_OPTIONS}
+              value={{
+                label: String(tableFilterState.pageSize),
+                value: tableFilterState.pageSize,
+              }}
+              onChange={pageSizeChangeHandler}
+              className={{ wrapper: 'max-w-28' }}
             />
           </div>
         </div>
 
-        {/* Table Section */}
-        <div className='flex flex-col mb-4'>
-          {isLoading ? (
-            <div className='w-full flex flex-row justify-center items-center p-4'>
-              <span className='loading loading-spinner loading-xl' />
-            </div>
-          ) : !isResponseSuccess(kandangs) || kandangs.data?.length === 0 ? (
-            <div className='p-3'>
-              <KandangTableSkeleton
-                columns={kandangsColumns}
-                icon={
-                  <Icon
-                    icon='heroicons:document-text'
-                    className='text-white'
-                    width={20}
-                    height={20}
-                  />
-                }
-              />
-            </div>
-          ) : (
-            <Table<Kandang>
-              data={kandangs?.data}
-              columns={kandangsColumns}
-              pageSize={tableFilterState.pageSize}
-              page={kandangs?.meta?.page ?? 0}
-              totalItems={kandangs?.meta?.total_results ?? 0}
-              onPageChange={setPage}
-              onPageSizeChange={setPageSize}
-              isLoading={false}
-              sorting={sorting}
-              setSorting={setSorting}
-              className={{
-                containerClassName: 'p-3 mb-0',
-                headerColumnClassName: 'text-nowrap',
-              }}
-            />
-          )}
-        </div>
+        <Table<Kandang>
+          data={isResponseSuccess(kandangs) ? kandangs?.data : []}
+          columns={kandangsColumns}
+          pageSize={tableFilterState.pageSize}
+          page={isResponseSuccess(kandangs) ? kandangs?.meta?.page : 0}
+          totalItems={
+            isResponseSuccess(kandangs) ? kandangs?.meta?.total_results : 0
+          }
+          onPageChange={setPage}
+          isLoading={isLoading}
+          sorting={sorting}
+          setSorting={setSorting}
+          className={{
+            containerClassName: cn({
+              'mb-20':
+                isResponseSuccess(kandangs) && kandangs?.data?.length === 0,
+            }),
+            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+            tableClassName: 'font-inter w-full table-auto min-h-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+            bodyRowClassName: 'border-b border-b-gray-200',
+            bodyColumnClassName:
+              'px-6 py-3 last:flex last:flex-row last:justify-end',
+          }}
+        />
       </div>
 
       <ConfirmationModal
@@ -448,81 +340,6 @@ const KandangsTable = () => {
           onClick: confirmationModalDeleteClickHandler,
         }}
       />
-
-      {/* Filter Modal */}
-      <Modal
-        ref={filterModal.ref}
-        className={{
-          modal: 'p-0',
-          modalBox: 'p-0 rounded-[0.875rem] xl:max-w-4/12 max-w-sm',
-        }}
-      >
-        {/* Modal Header */}
-        <div className='flex items-center justify-between gap-2 border-b border-base-content/10 p-4'>
-          <div className='flex items-center gap-2 text-primary'>
-            <Icon icon='heroicons:funnel' width={20} height={20} />
-            <h3 className='font-medium text-sm'>Filter Data</h3>
-          </div>
-          <Button
-            variant='link'
-            onClick={filterModal.closeModal}
-            className='text-base-content/50 hover:text-base-content transition-colors cursor-pointer'
-          >
-            <Icon icon='heroicons:x-mark' width={20} height={20} />
-          </Button>
-        </div>
-        <form onSubmit={formik.handleSubmit} onReset={formik.handleReset}>
-          <div className='p-4 flex flex-col gap-1.5'>
-            <SelectInput
-              label='Lokasi'
-              placeholder='Pilih Lokasi'
-              options={locationOptions}
-              value={locationIdValue}
-              onChange={handleFilterLocationChange}
-              onInputChange={setLocationInputValue}
-              isLoading={isLoadingLocationOptions}
-              isClearable
-              onMenuScrollToBottom={loadMoreLocations}
-              className={{ wrapper: 'w-full' }}
-            />
-
-            <SelectInputRadio
-              label='PIC'
-              placeholder='Pilih PIC'
-              options={picOptions}
-              value={picIdValue}
-              onChange={handleFilterPicChange}
-              onInputChange={setPicInputValue}
-              isLoading={isLoadingPicOptions}
-              isClearable
-              onMenuScrollToBottom={loadMorePics}
-              className={{ wrapper: 'w-full' }}
-            />
-          </div>
-
-          {/* Modal Footer */}
-          <div className='flex justify-between items-center gap-4 p-4 border-t border-base-content/10 bg-gray-50'>
-            <Button
-              type='button'
-              variant='soft'
-              className='rounded-lg text-base-content/65 bg-transparent border-none hover:bg-base-content/10 hover:text-base-content/65 transition-colors px-3 py-2'
-              onClick={() => {
-                formik.resetForm();
-                filterModal.closeModal();
-              }}
-            >
-              Reset Filter
-            </Button>
-            <Button
-              type='submit'
-              className='min-w-40 text-sm rounded-lg py-3 text-white font-semibold'
-              disabled={!formik.isValid || formik.isSubmitting}
-            >
-              Apply Filter
-            </Button>
-          </div>
-        </form>
-      </Modal>
     </>
   );
 };

src/components/pages/master-data/kandang/filter/KandangFilter.ts

@@ -1,11 +0,0 @@
-import { string, object } from 'yup';
-
-export const KandangFilterSchema = object().shape({
-  location_id: string().nullable(),
-  pic_id: string().nullable(),
-});
-
-export type KandangFilterType = {
-  location_id: string | null;
-  pic_id: string | null;
-};

src/components/pages/master-data/kandang/skeleton/KandangTableSkeleton.tsx

@@ -1,37 +0,0 @@
-import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
-import Table from '@/components/Table';
-import { Kandang } from '@/types/api/master-data/kandang';
-import { ColumnDef } from '@tanstack/react-table';
-
-const KandangTableSkeleton = ({
-  columns,
-  icon,
-  title = 'No Data Available',
-  subtitle = 'There is no kandang data displayed. Enter kandang data to get started.',
-}: {
-  columns: ColumnDef<Kandang>[];
-  icon: React.ReactNode;
-  title?: string;
-  subtitle?: string;
-}) => {
-  return (
-    <div className='relative size-full'>
-      <Table
-        data={[]}
-        columns={columns}
-        isLoading={true}
-        className={{
-          skeletonCellClassName: 'animate-none w-full h-5 bg-base-content/4',
-          headerColumnClassName: 'whitespace-nowrap',
-          containerClassName: 'mb-0 overflow-hidden',
-          tableWrapperClassName: 'overflow-hidden',
-        }}
-      />
-      <div className='absolute inset-0 flex items-center justify-center'>
-        <DataStateSkeleton icon={icon} title={title} description={subtitle} />
-      </div>
-    </div>
-  );
-};
-
-export default KandangTableSkeleton;

src/components/pages/master-data/location/LocationsTable.tsx

@@ -1,126 +1,90 @@
 'use client';
 
-import {
-  ChangeEventHandler,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
-import { usePathname } from 'next/navigation';
+import { ChangeEventHandler, useCallback, useEffect, useState } from 'react';
 import useSWR from 'swr';
-import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
+import {
+  CellContext,
+  ColumnDef,
+  ColumnSort,
+  SortingState,
+} from '@tanstack/react-table';
 import toast from 'react-hot-toast';
-import { useFormik } from 'formik';
 
 import { Icon } from '@iconify/react';
 import Table from '@/components/Table';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import Button from '@/components/Button';
-import Modal, { useModal } from '@/components/Modal';
+import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import RequirePermission from '@/components/helper/RequirePermission';
-import PopoverButton from '@/components/popover/PopoverButton';
-import PopoverContent from '@/components/popover/PopoverContent';
-import LocationTableSkeleton from '@/components/pages/master-data/location/skeleton/LocationTableSkeleton';
-import SelectInput, { useSelect } from '@/components/input/SelectInput';
-import { OptionType } from '@/components/input/SelectInput';
-import ButtonFilter from '@/components/helper/ButtonFilter';
 
 import { Location } from '@/types/api/master-data/location';
-import { Area } from '@/types/api/master-data/area';
-import { LocationApi, AreaApi } from '@/services/api/master-data';
+import { LocationApi } from '@/services/api/master-data';
+import { cn } from '@/lib/helper';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
-import { useUiStore } from '@/stores/ui/ui.store';
-import {
-  LocationFilterSchema,
-  LocationFilterType,
-} from '@/components/pages/master-data/location/filter/LocationFilter';
+import { ROWS_OPTIONS } from '@/config/constant';
 
 const RowOptionsMenu = ({
-  popoverPosition = 'bottom',
+  type = 'dropdown',
   props,
   deleteClickHandler,
 }: {
-  popoverPosition: 'bottom' | 'top';
+  type: 'dropdown' | 'collapse';
   props: CellContext<Location, unknown>;
   deleteClickHandler: () => void;
 }) => {
-  const popoverId = `location#${props.row.original.id}`;
-  const popoverAnchorName = `--anchor-location#${props.row.original.id}`;
-
-  const closePopover = () => {
-    document.getElementById(popoverId)?.hidePopover();
-  };
-
   return (
-    <div className='relative'>
-      <PopoverButton
-        tabIndex={0}
-        variant='ghost'
-        color='none'
-        popoverTarget={popoverId}
-        anchorName={popoverAnchorName}
-      >
-        <Icon icon='material-symbols:more-vert' width={16} height={16} />
-      </PopoverButton>
+    <RowOptionsMenuWrapper type={type}>
+      <RequirePermission permissions='lti.master.locations.detail'>
+        <Button
+          href={`/master-data/location/detail/?locationId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
+          className='justify-start text-sm'
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+      </RequirePermission>
 
-      <PopoverContent
-        id={popoverId}
-        anchorName={popoverAnchorName}
-        position={popoverPosition === 'bottom' ? 'bottom-start' : 'left'}
-        className='w-full max-w-40 rounded-xl border border-base-content/5 shadow-sm'
-      >
-        <div className='flex flex-col bg-base-100 rounded-xl'>
-          <RequirePermission permissions='lti.master.locations.detail'>
-            <Button
-              href={`/master-data/location/detail/?locationId=${props.row.original.id}`}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full'
-              onClick={closePopover}
-            >
-              <Icon icon='heroicons:eye' width={20} height={20} />
-              Detail
-            </Button>
-          </RequirePermission>
-          <RequirePermission permissions='lti.master.locations.update'>
-            <Button
-              href={`/master-data/location/detail/edit/?locationId=${props.row.original.id}`}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full'
-              onClick={closePopover}
-            >
-              <Icon icon='heroicons:pencil-square' width={20} height={20} />
-              Edit
-            </Button>
-          </RequirePermission>
-          <RequirePermission permissions='lti.master.locations.delete'>
-            <Button
-              onClick={() => {
-                deleteClickHandler();
-                closePopover();
-              }}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full text-error hover:text-error'
-            >
-              <Icon icon='heroicons:trash' width={20} height={20} />
-              Delete
-            </Button>
-          </RequirePermission>
-        </div>
-      </PopoverContent>
-    </div>
+      <RequirePermission permissions='lti.master.locations.update'>
+        <Button
+          href={`/master-data/location/detail/edit/?locationId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.locations.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
+    </RowOptionsMenuWrapper>
   );
 };
 
 const LocationsTable = () => {
-  const { searchValue, setSearchValue, setTableState } = useUiStore();
-  const pathname = usePathname();
-
   const {
     state: tableFilterState,
     updateFilter,
@@ -128,75 +92,16 @@ const LocationsTable = () => {
     setPageSize,
     toQueryString: getTableFilterQueryString,
   } = useTableFilter({
-    initial: {
-      search: '',
-      areaFilter: '',
-    },
+    initial: { search: '', nameSort: '', addressSort: '', areaSort: '' },
     paramMap: {
       page: 'page',
       pageSize: 'limit',
-      areaFilter: 'area_id',
+      nameSort: 'sort_name',
+      addressSort: 'sort_address',
+      areaSort: ' sort_area',
     },
   });
 
-  // ===== FILTER MODAL STATE =====
-  const filterModal = useModal();
-
-  // ===== FORMIK SETUP =====
-  const formik = useFormik<LocationFilterType>({
-    initialValues: {
-      area_id: null,
-    },
-    validationSchema: LocationFilterSchema,
-    onSubmit: (values, { setSubmitting }) => {
-      updateFilter('areaFilter', values.area_id || '');
-      filterModal.closeModal();
-      setSubmitting(false);
-    },
-    onReset: () => {
-      updateFilter('areaFilter', '');
-    },
-  });
-
-  // ===== AREA OPTIONS =====
-  const {
-    setInputValue: setAreaInputValue,
-    options: areaOptions,
-    isLoadingOptions: isLoadingAreaOptions,
-    loadMore: loadMoreAreas,
-  } = useSelect<Area>(
-    filterModal.open ? AreaApi.basePath : null,
-    'id',
-    'name',
-    'search'
-  );
-
-  // ===== FILTER HANDLERS =====
-  const handleFilterAreaChange = useCallback(
-    (val: OptionType | OptionType[] | null) => {
-      const area = val as OptionType | null;
-      const areaId = area?.value ? String(area.value) : null;
-
-      formik.setFieldValue('area_id', areaId);
-    },
-    [formik]
-  );
-
-  // ===== FILTER HELPERS =====
-  const areaIdValue = useMemo(() => {
-    if (!formik.values.area_id) return null;
-    return (
-      areaOptions.find((opt) => String(opt.value) === formik.values.area_id) ||
-      null
-    );
-  }, [formik.values.area_id, areaOptions]);
-
-  // ===== HANDLE FILTER MODAL OPEN =====
-  const handleFilterModalOpen = () => {
-    filterModal.openModal();
-    formik.validateForm();
-  };
-
   const {
     data: locations,
     isLoading,
@@ -207,25 +112,76 @@ const LocationsTable = () => {
   );
 
   const deleteModal = useModal();
+
   const [selectedLocation, setSelectedLocation] = useState<
     Location | undefined
   >(undefined);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
-  useEffect(() => {
-    updateFilter('search', searchValue);
-  }, [searchValue, updateFilter]);
-
-  useEffect(() => {
-    setTableState('locations-table', pathname);
-  }, [pathname, setTableState]);
-
   const [sorting, setSorting] = useState<SortingState>([]);
 
-  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
-    setSearchValue(e.target.value);
-    updateFilter('search', e.target.value);
-  };
+  const locationsColumns: ColumnDef<Location>[] = [
+    {
+      header: '#',
+      cell: (props) =>
+        tableFilterState.pageSize * (tableFilterState.page - 1) +
+        props.row.index +
+        1,
+    },
+    {
+      accessorKey: 'name',
+      header: 'Nama',
+    },
+    {
+      accessorKey: 'address',
+      header: 'Alamat',
+    },
+    {
+      accessorKey: 'area',
+      header: 'Area',
+      cell: (props) => props.row.original.area.name,
+    },
+    {
+      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 deleteClickHandler = () => {
+          setSelectedLocation(props.row.original);
+          deleteModal.openModal();
+        };
+
+        return (
+          <>
+            {currentPageSize > 2 && (
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowDropdownOptions>
+            )}
+
+            {currentPageSize <= 2 && (
+              <RowCollapseOptions>
+                <RowOptionsMenu
+                  type='collapse'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowCollapseOptions>
+            )}
+          </>
+        );
+      },
+    },
+  ];
 
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
@@ -247,145 +203,114 @@ const LocationsTable = () => {
     setIsDeleteLoading(false);
   };
 
-  const locationsColumns: ColumnDef<Location>[] = useMemo(
-    () => [
-      {
-        header: 'No',
-        cell: (props) =>
-          tableFilterState.pageSize * (tableFilterState.page - 1) +
-          props.row.index +
-          1,
-      },
-      {
-        accessorKey: 'name',
-        header: 'Nama',
-      },
-      {
-        accessorKey: 'address',
-        header: 'Alamat',
-      },
-      {
-        accessorFn: (row) => row.area?.name ?? '-',
-        header: 'Area',
-      },
-      {
-        header: 'Aksi',
-        cell: (props: CellContext<Location, unknown>) => {
-          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 searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
 
-          const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
 
-          const deleteClickHandler = () => {
-            setSelectedLocation(props.row.original);
-            deleteModal.openModal();
-          };
+    setPageSize(newVal.value as number);
+  };
 
-          return (
-            <RowOptionsMenu
-              props={props}
-              popoverPosition={isLast2Rows ? 'top' : 'bottom'}
-              deleteClickHandler={deleteClickHandler}
-            />
-          );
-        },
-      },
-    ],
-    [tableFilterState.pageSize, tableFilterState.page, deleteModal]
+  const updateSortingFilter = useCallback(
+    (
+      sortName: Exclude<keyof typeof tableFilterState, 'page' | 'pageSize'>,
+      sortFilter: ColumnSort | undefined
+    ) => {
+      if (!sortFilter) {
+        updateFilter(sortName, '');
+      } else {
+        updateFilter(sortName, sortFilter.desc ? 'desc' : 'asc');
+      }
+    },
+    [updateFilter]
   );
 
+  // track sorting
+  useEffect(() => {
+    const nameSortFilter = sorting.find((sortItem) => sortItem.id === 'name');
+    const addressSortFilter = sorting.find(
+      (sortItem) => sortItem.id === 'address'
+    );
+    const areaSortFilter = sorting.find((sortItem) => sortItem.id === 'area');
+
+    updateSortingFilter('nameSort', nameSortFilter);
+    updateSortingFilter('addressSort', addressSortFilter);
+    updateSortingFilter('areaSort', areaSortFilter);
+  }, [sorting, updateSortingFilter]);
+
   return (
     <>
-      <div className='w-full'>
-        {/* Header Section */}
-        <div className='w-full p-3 flex flex-row justify-between gap-3 flex-wrap border-b border-base-content/10'>
-          {/* Action Buttons */}
-          <div className='w-fit flex flex-row gap-3 flex-wrap'>
-            <RequirePermission permissions='lti.master.locations.create'>
-              <Button
-                href='/master-data/location/add'
-                color='primary'
-                className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
-              >
-                <Icon icon='heroicons:plus' width={20} height={20} />
-                Add Location
-              </Button>
-            </RequirePermission>
-          </div>
+      <div className='w-full p-0 sm:p-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
+            <div className='w-full flex flex-row'>
+              <div className='w-full flex flex-row'>
+                <RequirePermission permissions='lti.master.locations.create'>
+                  <Button
+                    href='/master-data/location/add'
+                    variant='outline'
+                    color='primary'
+                    className='w-full sm:w-fit'
+                  >
+                    <Icon icon='ic:round-plus' width={24} height={24} />
+                    Tambah
+                  </Button>
+                </RequirePermission>
+              </div>
+            </div>
 
-          {/* Search and Filter */}
-          <div className='flex flex-1 flex-row justify-start sm:justify-end items-center gap-3 flex-wrap'>
             <DebouncedTextInput
               name='search'
-              placeholder='Search'
-              value={tableFilterState.search ?? ''}
+              placeholder='Cari Location'
+              value={tableFilterState.search}
               onChange={searchChangeHandler}
-              startAdornment={
-                <Icon
-                  icon='heroicons:magnifying-glass'
-                  width={20}
-                  height={20}
-                />
-              }
-              className={{
-                wrapper: 'w-full min-w-24 max-w-3xs',
-                inputWrapper: 'rounded-xl! shadow-button-soft',
-                input:
-                  'placeholder:font-semibold placeholder:text-base-content/50',
-              }}
+              className={{ wrapper: 'sm:max-w-3xs' }}
             />
+          </div>
 
-            <ButtonFilter
-              values={tableFilterState}
-              excludeFields={['page', 'pageSize', 'search']}
-              onClick={handleFilterModalOpen}
-              className='px-3 py-2.5'
+          <div className='flex flex-row justify-end'>
+            <SelectInput
+              label='Baris'
+              options={ROWS_OPTIONS}
+              value={{
+                label: String(tableFilterState.pageSize),
+                value: tableFilterState.pageSize,
+              }}
+              onChange={pageSizeChangeHandler}
+              className={{ wrapper: 'max-w-28' }}
             />
           </div>
         </div>
 
-        {/* Table Section */}
-        <div className='flex flex-col mb-4'>
-          {isLoading ? (
-            <div className='w-full flex flex-row justify-center items-center p-4'>
-              <span className='loading loading-spinner loading-xl' />
-            </div>
-          ) : !isResponseSuccess(locations) || locations.data?.length === 0 ? (
-            <div className='p-3'>
-              <LocationTableSkeleton
-                columns={locationsColumns}
-                icon={
-                  <Icon
-                    icon='heroicons:document-text'
-                    className='text-white'
-                    width={20}
-                    height={20}
-                  />
-                }
-              />
-            </div>
-          ) : (
-            <Table<Location>
-              data={locations?.data}
-              columns={locationsColumns}
-              pageSize={tableFilterState.pageSize}
-              page={locations?.meta?.page ?? 0}
-              totalItems={locations?.meta?.total_results ?? 0}
-              onPageChange={setPage}
-              onPageSizeChange={setPageSize}
-              isLoading={false}
-              sorting={sorting}
-              setSorting={setSorting}
-              className={{
-                containerClassName: 'p-3 mb-0',
-                headerColumnClassName: 'text-nowrap',
-              }}
-            />
-          )}
-        </div>
+        <Table<Location>
+          data={isResponseSuccess(locations) ? locations?.data : []}
+          columns={locationsColumns}
+          pageSize={tableFilterState.pageSize}
+          page={isResponseSuccess(locations) ? locations?.meta?.page : 0}
+          totalItems={
+            isResponseSuccess(locations) ? locations?.meta?.total_results : 0
+          }
+          onPageChange={setPage}
+          isLoading={isLoading}
+          sorting={sorting}
+          setSorting={setSorting}
+          className={{
+            containerClassName: cn({
+              'mb-20':
+                isResponseSuccess(locations) && locations?.data?.length === 0,
+            }),
+            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+            tableClassName: 'font-inter w-full table-auto min-h-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+            bodyRowClassName: 'border-b border-b-gray-200',
+            bodyColumnClassName:
+              'px-6 py-3 last:flex last:flex-row last:justify-end',
+          }}
+        />
       </div>
 
       <ConfirmationModal
@@ -402,68 +327,6 @@ const LocationsTable = () => {
           onClick: confirmationModalDeleteClickHandler,
         }}
       />
-
-      {/* Filter Modal */}
-      <Modal
-        ref={filterModal.ref}
-        className={{
-          modal: 'p-0',
-          modalBox: 'p-0 rounded-[0.875rem] xl:max-w-4/12 max-w-sm',
-        }}
-      >
-        {/* Modal Header */}
-        <div className='flex items-center justify-between gap-2 border-b border-base-content/10 p-4'>
-          <div className='flex items-center gap-2 text-primary'>
-            <Icon icon='heroicons:funnel' width={20} height={20} />
-            <h3 className='font-medium text-sm'>Filter Data</h3>
-          </div>
-          <Button
-            variant='link'
-            onClick={filterModal.closeModal}
-            className='text-base-content/50 hover:text-base-content transition-colors cursor-pointer'
-          >
-            <Icon icon='heroicons:x-mark' width={20} height={20} />
-          </Button>
-        </div>
-        <form onSubmit={formik.handleSubmit} onReset={formik.handleReset}>
-          <div className='p-4 flex flex-col gap-1.5'>
-            <SelectInput
-              label='Area'
-              placeholder='Pilih Area'
-              options={areaOptions}
-              value={areaIdValue}
-              onChange={handleFilterAreaChange}
-              onInputChange={setAreaInputValue}
-              isLoading={isLoadingAreaOptions}
-              isClearable
-              onMenuScrollToBottom={loadMoreAreas}
-              className={{ wrapper: 'w-full' }}
-            />
-          </div>
-
-          {/* Modal Footer */}
-          <div className='flex justify-between items-center gap-4 p-4 border-t border-base-content/10 bg-gray-50'>
-            <Button
-              type='button'
-              variant='soft'
-              className='rounded-lg text-base-content/65 bg-transparent border-none hover:bg-base-content/10 hover:text-base-content/65 transition-colors px-3 py-2'
-              onClick={() => {
-                formik.resetForm();
-                filterModal.closeModal();
-              }}
-            >
-              Reset Filter
-            </Button>
-            <Button
-              type='submit'
-              className='min-w-40 text-sm rounded-lg py-3 text-white font-semibold'
-              disabled={!formik.isValid || formik.isSubmitting}
-            >
-              Apply Filter
-            </Button>
-          </div>
-        </form>
-      </Modal>
     </>
   );
 };

src/components/pages/master-data/location/filter/LocationFilter.ts

@@ -1,9 +0,0 @@
-import { string, object } from 'yup';
-
-export const LocationFilterSchema = object().shape({
-  area_id: string().nullable(),
-});
-
-export type LocationFilterType = {
-  area_id: string | null;
-};

src/components/pages/master-data/location/skeleton/LocationTableSkeleton.tsx

@@ -1,37 +0,0 @@
-import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
-import Table from '@/components/Table';
-import { Location } from '@/types/api/master-data/location';
-import { ColumnDef } from '@tanstack/react-table';
-
-const LocationTableSkeleton = ({
-  columns,
-  icon,
-  title = 'No Data Available',
-  subtitle = 'There is no location data displayed. Enter location data to get started.',
-}: {
-  columns: ColumnDef<Location>[];
-  icon: React.ReactNode;
-  title?: string;
-  subtitle?: string;
-}) => {
-  return (
-    <div className='relative size-full'>
-      <Table
-        data={[]}
-        columns={columns}
-        isLoading={true}
-        className={{
-          skeletonCellClassName: 'animate-none w-full h-5 bg-base-content/4',
-          headerColumnClassName: 'whitespace-nowrap',
-          containerClassName: 'mb-0 overflow-hidden',
-          tableWrapperClassName: 'overflow-hidden',
-        }}
-      />
-      <div className='absolute inset-0 flex items-center justify-center'>
-        <DataStateSkeleton icon={icon} title={title} description={subtitle} />
-      </div>
-    </div>
-  );
-};
-
-export default LocationTableSkeleton;

src/components/pages/master-data/nonstock/NonstocksTable.tsx

@@ -1,8 +1,13 @@
 'use client';
 
-import { ChangeEventHandler, useEffect, useMemo, useState } from 'react';
+import { ChangeEventHandler, useCallback, useEffect, useState } from 'react';
 import useSWR from 'swr';
-import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
+import {
+  CellContext,
+  ColumnDef,
+  ColumnSort,
+  SortingState,
+} from '@tanstack/react-table';
 import toast from 'react-hot-toast';
 
 import { Icon } from '@iconify/react';
@@ -11,101 +16,75 @@ import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import Button from '@/components/Button';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import RequirePermission from '@/components/helper/RequirePermission';
-import PopoverButton from '@/components/popover/PopoverButton';
-import PopoverContent from '@/components/popover/PopoverContent';
-import NonstockTableSkeleton from '@/components/pages/master-data/nonstock/skeleton/NonstockTableSkeleton';
 
 import { Nonstock } from '@/types/api/master-data/nonstock';
 import { NonstockApi } from '@/services/api/master-data';
+import { cn } from '@/lib/helper';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
-import { usePathname } from 'next/navigation';
-import { useUiStore } from '@/stores/ui/ui.store';
+import { ROWS_OPTIONS } from '@/config/constant';
 
 const RowOptionsMenu = ({
-  popoverPosition = 'bottom',
+  type = 'dropdown',
   props,
   deleteClickHandler,
 }: {
-  popoverPosition: 'bottom' | 'top';
+  type: 'dropdown' | 'collapse';
   props: CellContext<Nonstock, unknown>;
   deleteClickHandler: () => void;
 }) => {
-  const popoverId = `nonstock#${props.row.original.id}`;
-  const popoverAnchorName = `--anchor-nonstock#${props.row.original.id}`;
-
-  const closePopover = () => {
-    document.getElementById(popoverId)?.hidePopover();
-  };
-
   return (
-    <div className='relative'>
-      <PopoverButton
-        tabIndex={0}
-        variant='ghost'
-        color='none'
-        popoverTarget={popoverId}
-        anchorName={popoverAnchorName}
-      >
-        <Icon icon='material-symbols:more-vert' width={16} height={16} />
-      </PopoverButton>
+    <RowOptionsMenuWrapper type={type}>
+      <RequirePermission permissions='lti.master.nonstocks.detail'>
+        <Button
+          href={`/master-data/nonstock/detail/?nonstockId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
+          className='justify-start text-sm'
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+      </RequirePermission>
 
-      <PopoverContent
-        id={popoverId}
-        anchorName={popoverAnchorName}
-        position={popoverPosition === 'bottom' ? 'bottom-start' : 'left'}
-        className='w-full max-w-40 rounded-xl border border-base-content/5 shadow-sm'
-      >
-        <div className='flex flex-col bg-base-100 rounded-xl'>
-          <RequirePermission permissions='lti.master.nonstocks.detail'>
-            <Button
-              href={`/master-data/nonstock/detail/?nonstockId=${props.row.original.id}`}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full'
-              onClick={closePopover}
-            >
-              <Icon icon='heroicons:eye' width={20} height={20} />
-              Detail
-            </Button>
-          </RequirePermission>
-          <RequirePermission permissions='lti.master.nonstocks.update'>
-            <Button
-              href={`/master-data/nonstock/detail/edit/?nonstockId=${props.row.original.id}`}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full'
-              onClick={closePopover}
-            >
-              <Icon icon='heroicons:pencil-square' width={20} height={20} />
-              Edit
-            </Button>
-          </RequirePermission>
-          <RequirePermission permissions='lti.master.nonstocks.delete'>
-            <Button
-              onClick={() => {
-                deleteClickHandler();
-                closePopover();
-              }}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full text-error hover:text-error'
-            >
-              <Icon icon='heroicons:trash' width={20} height={20} />
-              Delete
-            </Button>
-          </RequirePermission>
-        </div>
-      </PopoverContent>
-    </div>
+      <RequirePermission permissions='lti.master.nonstocks.update'>
+        <Button
+          href={`/master-data/nonstock/detail/edit/?nonstockId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.nonstocks.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
+    </RowOptionsMenuWrapper>
   );
 };
 
 const NonstocksTable = () => {
-  const { searchValue, setSearchValue, setTableState } = useUiStore();
-  const pathname = usePathname();
-
   const {
     state: tableFilterState,
     updateFilter,
@@ -113,25 +92,16 @@ const NonstocksTable = () => {
     setPageSize,
     toQueryString: getTableFilterQueryString,
   } = useTableFilter({
-    initial: {
-      search: searchValue,
-    },
+    initial: { search: '', nameSort: '', locationSort: '', picSort: '' },
     paramMap: {
       page: 'page',
       pageSize: 'limit',
+      nameSort: 'sort_name',
+      locationSort: 'sort_location',
+      picSort: ' sort_pic',
     },
   });
 
-  useEffect(() => {
-    updateFilter('search', searchValue);
-  }, [searchValue, updateFilter]);
-
-  useEffect(() => {
-    setTableState('nonstocks-table', pathname);
-  }, [pathname, setTableState]);
-
-  const [sorting, setSorting] = useState<SortingState>([]);
-
   const {
     data: nonstocks,
     isLoading,
@@ -142,15 +112,88 @@ const NonstocksTable = () => {
   );
 
   const deleteModal = useModal();
+
   const [selectedNonstock, setSelectedNonstock] = useState<
     Nonstock | undefined
   >(undefined);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
-  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
-    setSearchValue(e.target.value);
-    updateFilter('search', e.target.value);
-  };
+  const [sorting, setSorting] = useState<SortingState>([]);
+
+  const nonstocksColumns: ColumnDef<Nonstock>[] = [
+    {
+      header: '#',
+      cell: (props) =>
+        tableFilterState.pageSize * (tableFilterState.page - 1) +
+        props.row.index +
+        1,
+    },
+    {
+      accessorKey: 'name',
+      header: 'Nama',
+    },
+    {
+      accessorKey: 'uom',
+      header: 'UOM',
+      cell: (props) => props.row.original.uom.name,
+    },
+    {
+      accessorKey: 'suppliers',
+      header: 'Supplier',
+      cell: (props) => {
+        const supplierNames = props.row.original.suppliers.map(
+          (supplier) => supplier.name
+        );
+
+        return supplierNames.join(', ') || '-';
+      },
+    },
+    {
+      accessorKey: 'flags',
+      header: 'Flag',
+      cell: (props) => props.row.original.flags?.join(', ') || '-',
+    },
+    {
+      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 deleteClickHandler = () => {
+          setSelectedNonstock(props.row.original);
+          deleteModal.openModal();
+        };
+
+        return (
+          <>
+            {currentPageSize > 2 && (
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowDropdownOptions>
+            )}
+
+            {currentPageSize <= 2 && (
+              <RowCollapseOptions>
+                <RowOptionsMenu
+                  type='collapse'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowCollapseOptions>
+            )}
+          </>
+        );
+      },
+    },
+  ];
 
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
@@ -172,143 +215,112 @@ const NonstocksTable = () => {
     setIsDeleteLoading(false);
   };
 
-  const nonstocksColumns: ColumnDef<Nonstock>[] = useMemo(
-    () => [
-      {
-        header: 'No',
-        cell: (props) =>
-          tableFilterState.pageSize * (tableFilterState.page - 1) +
-          props.row.index +
-          1,
-      },
-      {
-        accessorKey: 'name',
-        header: 'Nama',
-      },
-      {
-        accessorFn: (row) => row.uom?.name ?? '-',
-        header: 'UOM',
-      },
-      {
-        accessorFn: (row) =>
-          row.suppliers?.map((supplier) => supplier.name).join(', ') || '-',
-        header: 'Supplier',
-      },
-      {
-        accessorFn: (row) => row.flags?.join(', ') || '-',
-        header: 'Flag',
-      },
-      {
-        header: 'Aksi',
-        cell: (props: CellContext<Nonstock, unknown>) => {
-          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 searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
 
-          const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
 
-          const deleteClickHandler = () => {
-            setSelectedNonstock(props.row.original);
-            deleteModal.openModal();
-          };
+    setPageSize(newVal.value as number);
+  };
 
-          return (
-            <RowOptionsMenu
-              props={props}
-              popoverPosition={isLast2Rows ? 'top' : 'bottom'}
-              deleteClickHandler={deleteClickHandler}
-            />
-          );
-        },
-      },
-    ],
-    [tableFilterState.pageSize, tableFilterState.page, deleteModal]
+  const updateSortingFilter = useCallback(
+    (
+      sortName: Exclude<keyof typeof tableFilterState, 'page' | 'pageSize'>,
+      sortFilter: ColumnSort | undefined
+    ) => {
+      if (!sortFilter) {
+        updateFilter(sortName, '');
+      } else {
+        updateFilter(sortName, sortFilter.desc ? 'desc' : 'asc');
+      }
+    },
+    [updateFilter]
   );
 
+  // track sorting
+  useEffect(() => {
+    const nameSortFilter = sorting.find((sortItem) => sortItem.id === 'name');
+    const locationSortFilter = sorting.find(
+      (sortItem) => sortItem.id === 'location'
+    );
+    const picSortFilter = sorting.find((sortItem) => sortItem.id === 'pic');
+
+    updateSortingFilter('nameSort', nameSortFilter);
+    updateSortingFilter('locationSort', locationSortFilter);
+    updateSortingFilter('picSort', picSortFilter);
+  }, [sorting]);
+
   return (
     <>
-      <div className='w-full'>
-        {/* Header Section */}
-        <div className='w-full p-3 flex flex-row justify-between gap-3 flex-wrap border-b border-base-content/10'>
-          {/* Action Buttons */}
-          <div className='w-fit flex flex-row gap-3 flex-wrap'>
-            <RequirePermission permissions='lti.master.nonstocks.create'>
-              <Button
-                href='/master-data/nonstock/add'
-                color='primary'
-                className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
-              >
-                <Icon icon='heroicons:plus' width={20} height={20} />
-                Add Nonstock
-              </Button>
-            </RequirePermission>
-          </div>
+      <div className='w-full p-0 sm:p-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
+            <div className='w-full flex flex-row'>
+              <RequirePermission permissions='lti.master.nonstocks.create'>
+                <Button
+                  href='/master-data/nonstock/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
+            </div>
 
-          {/* Search */}
-          <div className='flex flex-1 flex-row justify-start sm:justify-end items-center gap-3 flex-wrap'>
             <DebouncedTextInput
               name='search'
-              placeholder='Search'
-              value={tableFilterState.search ?? ''}
+              placeholder='Cari Nonstock'
+              value={tableFilterState.search}
               onChange={searchChangeHandler}
-              startAdornment={
-                <Icon
-                  icon='heroicons:magnifying-glass'
-                  width={20}
-                  height={20}
-                />
-              }
-              className={{
-                wrapper: 'w-full min-w-24 max-w-3xs',
-                inputWrapper: 'rounded-xl! shadow-button-soft',
-                input:
-                  'placeholder:font-semibold placeholder:text-base-content/50',
+              className={{ wrapper: 'sm:max-w-3xs' }}
+            />
+          </div>
+
+          <div className='flex flex-row justify-end'>
+            <SelectInput
+              label='Baris'
+              options={ROWS_OPTIONS}
+              value={{
+                label: String(tableFilterState.pageSize),
+                value: tableFilterState.pageSize,
               }}
+              onChange={pageSizeChangeHandler}
+              className={{ wrapper: 'max-w-28' }}
             />
           </div>
         </div>
 
-        {/* Table Section */}
-        <div className='flex flex-col mb-4'>
-          {isLoading ? (
-            <div className='w-full flex flex-row justify-center items-center p-4'>
-              <span className='loading loading-spinner loading-xl' />
-            </div>
-          ) : !isResponseSuccess(nonstocks) || nonstocks.data?.length === 0 ? (
-            <div className='p-3'>
-              <NonstockTableSkeleton
-                columns={nonstocksColumns}
-                icon={
-                  <Icon
-                    icon='heroicons:document-text'
-                    className='text-white'
-                    width={20}
-                    height={20}
-                  />
-                }
-              />
-            </div>
-          ) : (
-            <Table<Nonstock>
-              data={nonstocks?.data}
-              columns={nonstocksColumns}
-              pageSize={tableFilterState.pageSize}
-              page={nonstocks?.meta?.page ?? 0}
-              totalItems={nonstocks?.meta?.total_results ?? 0}
-              onPageChange={setPage}
-              onPageSizeChange={setPageSize}
-              isLoading={false}
-              sorting={sorting}
-              setSorting={setSorting}
-              className={{
-                containerClassName: 'p-3 mb-0',
-                headerColumnClassName: 'text-nowrap',
-              }}
-            />
-          )}
-        </div>
+        <Table<Nonstock>
+          data={isResponseSuccess(nonstocks) ? nonstocks?.data : []}
+          columns={nonstocksColumns}
+          pageSize={tableFilterState.pageSize}
+          page={isResponseSuccess(nonstocks) ? nonstocks?.meta?.page : 0}
+          totalItems={
+            isResponseSuccess(nonstocks) ? nonstocks?.meta?.total_results : 0
+          }
+          onPageChange={setPage}
+          isLoading={isLoading}
+          sorting={sorting}
+          setSorting={setSorting}
+          className={{
+            containerClassName: cn({
+              'mb-20':
+                isResponseSuccess(nonstocks) && nonstocks?.data?.length === 0,
+            }),
+            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+            tableClassName: 'font-inter w-full table-auto min-h-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+            bodyRowClassName: 'border-b border-b-gray-200',
+            bodyColumnClassName:
+              'px-6 py-3 last:flex last:flex-row last:justify-end',
+          }}
+        />
       </div>
 
       <ConfirmationModal

src/components/pages/master-data/nonstock/form/NonstockForm.schema.ts

@@ -17,7 +17,7 @@ export const NonstockFormSchema = Yup.object({
     })
   ),
 
-  flags: Yup.boolean().default(false),
+  flags: Yup.array().of(Yup.string()).notRequired(),
 });
 
 export const UpdateNonstockFormSchema = NonstockFormSchema;

src/components/pages/master-data/nonstock/form/NonstockForm.tsx

@@ -12,7 +12,6 @@ import SelectInput, {
   OptionType,
   useSelect,
 } from '@/components/input/SelectInput';
-import { RadioGroup } from '@/components/input/RadioInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import RequirePermission from '@/components/helper/RequirePermission';
@@ -30,7 +29,8 @@ import {
 } from '@/types/api/master-data/nonstock';
 import { NonstockApi, SupplierApi, UomApi } from '@/services/api/master-data';
 import { cn } from '@/lib/helper';
-
+import { flags } from '@/types/api/api-general';
+import { SUPPLIER_FLAG_OPTIONS } from '@/config/constant';
 import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 import AlertErrorList from '@/components/helper/form/FormErrors';
 import { Supplier } from '@/types/api/master-data/supplier';
@@ -97,7 +97,7 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
           label: supplier.name,
         })) ?? [],
 
-      flags: initialValues?.flags?.includes('EKSPEDISI') ?? false,
+      flags: initialValues?.flags ?? [],
     };
   }, [initialValues]);
 
@@ -112,7 +112,7 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
         name: values.name,
         uom_id: values.uomId,
         supplier_ids: values.supplierIds as number[],
-        flags: values.flags ? ['EKSPEDISI'] : [],
+        flags: values.flags as flags[],
       };
 
       switch (type) {
@@ -183,8 +183,12 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
     router.push('/master-data/nonstock');
   };
 
-  const expeditionChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
-    formik.setFieldValue('flags', e.target.value === 'true');
+  const flagsChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const formattedFlags = (val as OptionType[]).map(
+      (flag) => flag.value as string
+    );
+
+    formik.setFieldValue('flags', formattedFlags);
   };
 
   useEffect(() => {
@@ -264,19 +268,18 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
               isDisabled={type === 'detail'}
             />
 
-            <RadioGroup
-              label='Flags Ekspedisi'
-              name='flags'
-              value={String(formik.values.flags)}
-              onChange={expeditionChangeHandler}
-              onBlur={formik.handleBlur}
-              options={[
-                { label: 'Ya', value: 'true' },
-                { label: 'Tidak', value: 'false' },
-              ]}
+            <SelectInput
+              label='Flags'
+              isMulti
+              value={SUPPLIER_FLAG_OPTIONS.filter((opt) =>
+                formik.values.flags?.includes(opt.value)
+              )}
+              onChange={flagsChangeHandler}
+              options={SUPPLIER_FLAG_OPTIONS}
               isError={formik.touched.flags && Boolean(formik.errors.flags)}
               errorMessage={formik.errors.flags as string}
-              disabled={type === 'detail'}
+              isDisabled={type === 'detail'}
+              isClearable
             />
           </div>
 

src/components/pages/master-data/nonstock/skeleton/NonstockTableSkeleton.tsx

@@ -1,37 +0,0 @@
-import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
-import Table from '@/components/Table';
-import { Nonstock } from '@/types/api/master-data/nonstock';
-import { ColumnDef } from '@tanstack/react-table';
-
-const NonstockTableSkeleton = ({
-  columns,
-  icon,
-  title = 'No Data Available',
-  subtitle = 'There is no nonstock data displayed. Enter nonstock data to get started.',
-}: {
-  columns: ColumnDef<Nonstock>[];
-  icon: React.ReactNode;
-  title?: string;
-  subtitle?: string;
-}) => {
-  return (
-    <div className='relative size-full'>
-      <Table
-        data={[]}
-        columns={columns}
-        isLoading={true}
-        className={{
-          skeletonCellClassName: 'animate-none w-full h-5 bg-base-content/4',
-          headerColumnClassName: 'whitespace-nowrap',
-          containerClassName: 'mb-0 overflow-hidden',
-          tableWrapperClassName: 'overflow-hidden',
-        }}
-      />
-      <div className='absolute inset-0 flex items-center justify-center'>
-        <DataStateSkeleton icon={icon} title={title} description={subtitle} />
-      </div>
-    </div>
-  );
-};
-
-export default NonstockTableSkeleton;

src/components/pages/master-data/product-category/ProductCategoryTable.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { ChangeEventHandler, useEffect, useMemo, useState } from 'react';
-import { usePathname } from 'next/navigation';
+import { ChangeEventHandler, useEffect, useRef, useState } from 'react';
 import useSWR from 'swr';
 import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
 import toast from 'react-hot-toast';
@@ -12,99 +11,78 @@ import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import Button from '@/components/Button';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import RequirePermission from '@/components/helper/RequirePermission';
-import PopoverButton from '@/components/popover/PopoverButton';
-import PopoverContent from '@/components/popover/PopoverContent';
-import ProductCategoryTableSkeleton from '@/components/pages/master-data/product-category/skeleton/ProductCategoryTableSkeleton';
 
 import { ProductCategory } from '@/types/api/master-data/product-category';
 import { ProductCategoryApi } from '@/services/api/master-data';
+import { cn } from '@/lib/helper';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { useUiStore } from '@/stores/ui/ui.store';
+import { ROWS_OPTIONS } from '@/config/constant';
 
 const RowOptionsMenu = ({
-  popoverPosition = 'bottom',
+  type = 'dropdown',
   props,
   deleteClickHandler,
 }: {
-  popoverPosition: 'bottom' | 'top';
+  type: 'dropdown' | 'collapse';
   props: CellContext<ProductCategory, unknown>;
   deleteClickHandler: () => void;
 }) => {
-  const popoverId = `product-category#${props.row.original.id}`;
-  const popoverAnchorName = `--anchor-product-category#${props.row.original.id}`;
-
-  const closePopover = () => {
-    document.getElementById(popoverId)?.hidePopover();
-  };
-
   return (
-    <div className='relative'>
-      <PopoverButton
-        tabIndex={0}
-        variant='ghost'
-        color='none'
-        popoverTarget={popoverId}
-        anchorName={popoverAnchorName}
-      >
-        <Icon icon='material-symbols:more-vert' width={16} height={16} />
-      </PopoverButton>
+    <RowOptionsMenuWrapper type={type}>
+      <RequirePermission permissions='lti.master.product_categories.detail'>
+        <Button
+          href={`/master-data/product-category/detail/?productCategoryId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
+          className='justify-start text-sm'
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+      </RequirePermission>
 
-      <PopoverContent
-        id={popoverId}
-        anchorName={popoverAnchorName}
-        position={popoverPosition === 'bottom' ? 'bottom-start' : 'left'}
-        className='w-full max-w-40 rounded-xl border border-base-content/5 shadow-sm'
-      >
-        <div className='flex flex-col bg-base-100 rounded-xl'>
-          <RequirePermission permissions='lti.master.product_categories.detail'>
-            <Button
-              href={`/master-data/product-category/detail/?productCategoryId=${props.row.original.id}`}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full'
-              onClick={closePopover}
-            >
-              <Icon icon='heroicons:eye' width={20} height={20} />
-              Detail
-            </Button>
-          </RequirePermission>
-          <RequirePermission permissions='lti.master.product_categories.update'>
-            <Button
-              href={`/master-data/product-category/detail/edit/?productCategoryId=${props.row.original.id}`}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full'
-              onClick={closePopover}
-            >
-              <Icon icon='heroicons:pencil-square' width={20} height={20} />
-              Edit
-            </Button>
-          </RequirePermission>
-          <RequirePermission permissions='lti.master.product_categories.delete'>
-            <Button
-              onClick={() => {
-                deleteClickHandler();
-                closePopover();
-              }}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full text-error hover:text-error'
-            >
-              <Icon icon='heroicons:trash' width={20} height={20} />
-              Delete
-            </Button>
-          </RequirePermission>
-        </div>
-      </PopoverContent>
-    </div>
+      <RequirePermission permissions='lti.master.product_categories.update'>
+        <Button
+          href={`/master-data/product-category/detail/edit/?productCategoryId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='mdi:pencil-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.product_categories.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='mdi:delete-outline'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
+    </RowOptionsMenuWrapper>
   );
 };
 
 const ProductCategoryTable = () => {
-  const { searchValue, setSearchValue, setTableState } = useUiStore();
-  const pathname = usePathname();
+  const { searchValue, setSearchValue, resetSearchValue } = useUiStore();
+  const previousPathRef = useRef<string | null>(null);
 
   const {
     state: tableFilterState,
@@ -113,21 +91,10 @@ const ProductCategoryTable = () => {
     setPageSize,
     toQueryString: getTableFilterQueryString,
   } = useTableFilter({
-    initial: {
-      search: '',
-    },
-    paramMap: {
-      page: 'page',
-      pageSize: 'limit',
-    },
+    initial: { search: searchValue, nameSort: '' },
+    paramMap: { page: 'page', pageSize: 'limit', nameSort: 'sort_name' },
   });
 
-  useEffect(() => {
-    updateFilter('search', searchValue);
-  }, [searchValue, updateFilter]);
-
-  const [sorting, setSorting] = useState<SortingState>([]);
-
   const {
     data: productCategories,
     isLoading,
@@ -138,15 +105,71 @@ const ProductCategoryTable = () => {
   );
 
   const deleteModal = useModal();
+
   const [selectedProductCategory, setSelectedProductCategory] = useState<
     ProductCategory | undefined
   >(undefined);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
-  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
-    setSearchValue(e.target.value);
-    updateFilter('search', e.target.value);
-  };
+  const [sorting, setSorting] = useState<SortingState>([]);
+
+  const productCategoryColumns: ColumnDef<ProductCategory>[] = [
+    {
+      header: '#',
+      cell: (props) =>
+        tableFilterState.pageSize * (tableFilterState.page - 1) +
+        props.row.index +
+        1,
+    },
+    {
+      accessorKey: 'code',
+      header: 'Code',
+    },
+    {
+      accessorKey: 'name',
+      header: 'Nama',
+    },
+    {
+      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 deleteClickHandler = () => {
+          setSelectedProductCategory(props.row.original);
+          deleteModal.openModal();
+        };
+
+        return (
+          <>
+            {currentPageSize > 2 && (
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowDropdownOptions>
+            )}
+
+            {currentPageSize <= 2 && (
+              <RowCollapseOptions>
+                <RowOptionsMenu
+                  type='collapse'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowCollapseOptions>
+            )}
+          </>
+        );
+      },
+    },
+  ];
 
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
@@ -168,141 +191,123 @@ const ProductCategoryTable = () => {
     setIsDeleteLoading(false);
   };
 
-  const productCategoryColumns: ColumnDef<ProductCategory>[] = useMemo(
-    () => [
-      {
-        header: 'No',
-        cell: (props) =>
-          tableFilterState.pageSize * (tableFilterState.page - 1) +
-          props.row.index +
-          1,
-      },
-      {
-        accessorKey: 'code',
-        header: 'Code',
-      },
-      {
-        accessorKey: 'name',
-        header: 'Nama',
-      },
-      {
-        header: 'Aksi',
-        cell: (props: CellContext<ProductCategory, unknown>) => {
-          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 searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    setSearchValue(e.target.value);
+    updateFilter('search', e.target.value);
+  };
 
-          const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
-
-          const deleteClickHandler = () => {
-            setSelectedProductCategory(props.row.original);
-            deleteModal.openModal();
-          };
-
-          return (
-            <RowOptionsMenu
-              props={props}
-              popoverPosition={isLast2Rows ? 'top' : 'bottom'}
-              deleteClickHandler={deleteClickHandler}
-            />
-          );
-        },
-      },
-    ],
-    [tableFilterState.pageSize, tableFilterState.page, deleteModal]
-  );
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
+    setPageSize(newVal.value as number);
+  };
 
   useEffect(() => {
-    setTableState('product-category-table', pathname);
-  }, [pathname, setTableState]);
+    // Store current path on mount
+    previousPathRef.current = window.location.pathname;
+
+    return () => {
+      const currentPath = window.location.pathname;
+
+      // if both paths are within /master-data/product-category module
+      const isCurrentPathProductCategory = currentPath.includes(
+        '/master-data/product-category'
+      );
+      const isPreviousPathProductCategory = previousPathRef.current?.includes(
+        '/master-data/product-category'
+      );
+
+      // reset if we outside product category module entirely
+      if (isPreviousPathProductCategory && !isCurrentPathProductCategory) {
+        resetSearchValue();
+      }
+    };
+  }, [resetSearchValue]);
+
+  useEffect(() => {
+    const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
+    if (!isNameSorted) {
+      updateFilter('nameSort', '');
+    } else {
+      updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
+    }
+  }, [sorting, updateFilter]);
 
   return (
     <>
-      <div className='w-full'>
-        {/* Header Section */}
-        <div className='w-full p-3 flex flex-row justify-between gap-3 flex-wrap border-b border-base-content/10'>
-          {/* Action Buttons */}
-          <div className='w-fit flex flex-row gap-3 flex-wrap'>
-            <RequirePermission permissions='lti.master.product_categories.create'>
-              <Button
-                href='/master-data/product-category/add'
-                color='primary'
-                className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
-              >
-                <Icon icon='heroicons:plus' width={20} height={20} />
-                Add Product Category
-              </Button>
-            </RequirePermission>
-          </div>
-
-          {/* Search */}
-          <div className='flex flex-1 flex-row justify-start sm:justify-end items-center gap-3 flex-wrap'>
+      <div className='w-full p-0 sm:p-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
+            <div className='w-full flex flex-row'>
+              <RequirePermission permissions='lti.master.product_categories.create'>
+                <Button
+                  href='/master-data/product-category/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
+            </div>
             <DebouncedTextInput
               name='search'
-              placeholder='Search'
-              value={tableFilterState.search ?? ''}
+              placeholder='Cari Product Category'
+              value={tableFilterState.search}
               onChange={searchChangeHandler}
-              startAdornment={
-                <Icon
-                  icon='heroicons:magnifying-glass'
-                  width={20}
-                  height={20}
-                />
-              }
-              className={{
-                wrapper: 'w-full min-w-24 max-w-3xs',
-                inputWrapper: 'rounded-xl! shadow-button-soft',
-                input:
-                  'placeholder:font-semibold placeholder:text-base-content/50',
+              className={{ wrapper: 'sm:max-w-3xs' }}
+            />
+          </div>
+          <div className='flex flex-row justify-end'>
+            <SelectInput
+              label='Baris'
+              options={ROWS_OPTIONS}
+              value={{
+                label: String(tableFilterState.pageSize),
+                value: tableFilterState.pageSize,
               }}
+              onChange={pageSizeChangeHandler}
+              className={{ wrapper: 'max-w-28' }}
             />
           </div>
         </div>
-
-        {/* Table Section */}
-        <div className='flex flex-col mb-4'>
-          {isLoading ? (
-            <div className='w-full flex flex-row justify-center items-center p-4'>
-              <span className='loading loading-spinner loading-xl' />
-            </div>
-          ) : !isResponseSuccess(productCategories) ||
-            productCategories.data?.length === 0 ? (
-            <div className='p-3'>
-              <ProductCategoryTableSkeleton
-                columns={productCategoryColumns}
-                icon={
-                  <Icon
-                    icon='heroicons:document-text'
-                    className='text-white'
-                    width={20}
-                    height={20}
-                  />
-                }
-              />
-            </div>
-          ) : (
-            <Table<ProductCategory>
-              data={productCategories?.data}
-              columns={productCategoryColumns}
-              pageSize={tableFilterState.pageSize}
-              page={productCategories?.meta?.page ?? 0}
-              totalItems={productCategories?.meta?.total_results ?? 0}
-              onPageChange={setPage}
-              onPageSizeChange={setPageSize}
-              isLoading={false}
-              sorting={sorting}
-              setSorting={setSorting}
-              className={{
-                containerClassName: 'p-3 mb-0',
-                headerColumnClassName: 'text-nowrap',
-              }}
-            />
-          )}
-        </div>
+        <Table<ProductCategory>
+          data={
+            isResponseSuccess(productCategories) ? productCategories?.data : []
+          }
+          columns={productCategoryColumns}
+          pageSize={tableFilterState.pageSize}
+          page={
+            isResponseSuccess(productCategories)
+              ? productCategories?.meta?.page
+              : 0
+          }
+          totalItems={
+            isResponseSuccess(productCategories)
+              ? productCategories?.meta?.total_results
+              : 0
+          }
+          onPageChange={setPage}
+          isLoading={isLoading}
+          sorting={sorting}
+          setSorting={setSorting}
+          className={{
+            containerClassName: cn({
+              'mb-20':
+                isResponseSuccess(productCategories) &&
+                productCategories?.data?.length === 0,
+            }),
+            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+            tableClassName: 'font-inter w-full table-auto min-h-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+            bodyRowClassName: 'border-b border-b-gray-200',
+            bodyColumnClassName:
+              'px-6 py-3 last:flex last:flex-row last:justify-end',
+          }}
+        />
       </div>
-
       <ConfirmationModal
         ref={deleteModal.ref}
         type='error'

src/components/pages/master-data/product-category/skeleton/ProductCategoryTableSkeleton.tsx

@@ -1,37 +0,0 @@
-import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
-import Table from '@/components/Table';
-import { ProductCategory } from '@/types/api/master-data/product-category';
-import { ColumnDef } from '@tanstack/react-table';
-
-const ProductCategoryTableSkeleton = ({
-  columns,
-  icon,
-  title = 'No Data Available',
-  subtitle = 'There is no product category data displayed. Enter product category data to get started.',
-}: {
-  columns: ColumnDef<ProductCategory>[];
-  icon: React.ReactNode;
-  title?: string;
-  subtitle?: string;
-}) => {
-  return (
-    <div className='relative size-full'>
-      <Table
-        data={[]}
-        columns={columns}
-        isLoading={true}
-        className={{
-          skeletonCellClassName: 'animate-none w-full h-5 bg-base-content/4',
-          headerColumnClassName: 'whitespace-nowrap',
-          containerClassName: 'mb-0 overflow-hidden',
-          tableWrapperClassName: 'overflow-hidden',
-        }}
-      />
-      <div className='absolute inset-0 flex items-center justify-center'>
-        <DataStateSkeleton icon={icon} title={title} description={subtitle} />
-      </div>
-    </div>
-  );
-};
-
-export default ProductCategoryTableSkeleton;

src/components/pages/master-data/product/ProductTable.tsx

@@ -1,127 +1,86 @@
 'use client';
 
-import {
-  ChangeEventHandler,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
-import { usePathname } from 'next/navigation';
+import { ChangeEventHandler, useCallback, useEffect, useState } from 'react';
 import useSWR from 'swr';
-import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
+import {
+  CellContext,
+  ColumnDef,
+  ColumnSort,
+  SortingState,
+} from '@tanstack/react-table';
 import toast from 'react-hot-toast';
-import { useFormik } from 'formik';
 
 import { Icon } from '@iconify/react';
 import Table from '@/components/Table';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import Button from '@/components/Button';
-import Modal, { useModal } from '@/components/Modal';
+import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import RequirePermission from '@/components/helper/RequirePermission';
-import PopoverButton from '@/components/popover/PopoverButton';
-import PopoverContent from '@/components/popover/PopoverContent';
-import ProductTableSkeleton from '@/components/pages/master-data/product/skeleton/ProductTableSkeleton';
-import SelectInput, { useSelect } from '@/components/input/SelectInput';
-import { OptionType } from '@/components/input/SelectInput';
-import ButtonFilter from '@/components/helper/ButtonFilter';
 
 import { Product } from '@/types/api/master-data/product';
-import { ProductCategory } from '@/types/api/master-data/product-category';
-import { ProductApi, ProductCategoryApi } from '@/services/api/master-data';
-import { formatCurrency } from '@/lib/helper';
+import { ProductApi } from '@/services/api/master-data';
+import { cn } from '@/lib/helper';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
-import { useUiStore } from '@/stores/ui/ui.store';
-import {
-  ProductFilterSchema,
-  ProductFilterType,
-} from '@/components/pages/master-data/product/filter/ProductFilter';
+import { ROWS_OPTIONS } from '@/config/constant';
 
 const RowOptionsMenu = ({
-  popoverPosition = 'bottom',
+  type = 'dropdown',
   props,
   deleteClickHandler,
 }: {
-  popoverPosition: 'bottom' | 'top';
+  type: 'dropdown' | 'collapse';
   props: CellContext<Product, unknown>;
   deleteClickHandler: () => void;
-}) => {
-  const popoverId = `product#${props.row.original.id}`;
-  const popoverAnchorName = `--anchor-product#${props.row.original.id}`;
-
-  const closePopover = () => {
-    document.getElementById(popoverId)?.hidePopover();
-  };
-
-  return (
-    <div className='relative'>
-      <PopoverButton
-        tabIndex={0}
+}) => (
+  <RowOptionsMenuWrapper type={type}>
+    <RequirePermission permissions='lti.master.products.detail'>
+      <Button
+        href={`/master-data/product/detail/?productId=${props.row.original.id}`}
         variant='ghost'
-        color='none'
-        popoverTarget={popoverId}
-        anchorName={popoverAnchorName}
+        color='primary'
+        className='justify-start text-sm'
       >
-        <Icon icon='material-symbols:more-vert' width={16} height={16} />
-      </PopoverButton>
-
-      <PopoverContent
-        id={popoverId}
-        anchorName={popoverAnchorName}
-        position={popoverPosition === 'bottom' ? 'bottom-start' : 'left'}
-        className='w-full max-w-40 rounded-xl border border-base-content/5 shadow-sm'
+        <Icon icon='mdi:eye-outline' width={16} height={16} />
+        Detail
+      </Button>
+    </RequirePermission>
+    <RequirePermission permissions='lti.master.products.update'>
+      <Button
+        href={`/master-data/product/detail/edit/?productId=${props.row.original.id}`}
+        variant='ghost'
+        color='warning'
+        className='justify-start text-sm'
       >
-        <div className='flex flex-col bg-base-100 rounded-xl'>
-          <RequirePermission permissions='lti.master.products.detail'>
-            <Button
-              href={`/master-data/product/detail/?productId=${props.row.original.id}`}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full'
-              onClick={closePopover}
-            >
-              <Icon icon='heroicons:eye' width={20} height={20} />
-              Detail
-            </Button>
-          </RequirePermission>
-          <RequirePermission permissions='lti.master.products.update'>
-            <Button
-              href={`/master-data/product/detail/edit/?productId=${props.row.original.id}`}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full'
-              onClick={closePopover}
-            >
-              <Icon icon='heroicons:pencil-square' width={20} height={20} />
-              Edit
-            </Button>
-          </RequirePermission>
-          <RequirePermission permissions='lti.master.products.delete'>
-            <Button
-              onClick={() => {
-                deleteClickHandler();
-                closePopover();
-              }}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full text-error hover:text-error'
-            >
-              <Icon icon='heroicons:trash' width={20} height={20} />
-              Delete
-            </Button>
-          </RequirePermission>
-        </div>
-      </PopoverContent>
-    </div>
-  );
-};
+        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+        Edit
+      </Button>
+    </RequirePermission>
+    <RequirePermission permissions='lti.master.products.delete'>
+      <Button
+        onClick={deleteClickHandler}
+        variant='ghost'
+        color='error'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+      >
+        <Icon
+          icon='material-symbols:delete-outline-rounded'
+          width={16}
+          height={16}
+          className='justify-start text-sm'
+        />
+        Delete
+      </Button>
+    </RequirePermission>
+  </RowOptionsMenuWrapper>
+);
 
 const ProductsTable = () => {
-  const { searchValue, setSearchValue, setTableState } = useUiStore();
-  const pathname = usePathname();
-
   const {
     state: tableFilterState,
     updateFilter,
@@ -131,80 +90,21 @@ const ProductsTable = () => {
   } = useTableFilter({
     initial: {
       search: '',
-      productCategoryFilter: '',
+      nameSort: '',
+      skuSort: '',
+      brandSort: '',
+      categorySort: '',
     },
     paramMap: {
       page: 'page',
       pageSize: 'limit',
-      productCategoryFilter: 'product_category_id',
+      nameSort: 'sort_name',
+      skuSort: 'sort_sku',
+      brandSort: 'sort_brand',
+      categorySort: 'sort_category',
     },
   });
 
-  // ===== FILTER MODAL STATE =====
-  const filterModal = useModal();
-
-  // ===== FORMIK SETUP =====
-  const formik = useFormik<ProductFilterType>({
-    initialValues: {
-      product_category_id: null,
-    },
-    validationSchema: ProductFilterSchema,
-    onSubmit: (values, { setSubmitting }) => {
-      updateFilter('productCategoryFilter', values.product_category_id || '');
-      filterModal.closeModal();
-      setSubmitting(false);
-    },
-    onReset: () => {
-      updateFilter('productCategoryFilter', '');
-    },
-  });
-
-  // ===== PRODUCT CATEGORY OPTIONS =====
-  const {
-    setInputValue: setProductCategoryInputValue,
-    options: productCategoryOptions,
-    isLoadingOptions: isLoadingProductCategoryOptions,
-    loadMore: loadMoreProductCategories,
-  } = useSelect<ProductCategory>(
-    filterModal.open ? ProductCategoryApi.basePath : null,
-    'id',
-    'name',
-    'search'
-  );
-
-  // ===== FILTER HANDLERS =====
-  const handleFilterProductCategoryChange = useCallback(
-    (val: OptionType | OptionType[] | null) => {
-      const category = val as OptionType | null;
-      const categoryId = category?.value ? String(category.value) : null;
-
-      formik.setFieldValue('product_category_id', categoryId);
-    },
-    [formik]
-  );
-
-  // ===== FILTER HELPERS =====
-  const productCategoryIdValue = useMemo(() => {
-    if (!formik.values.product_category_id) return null;
-    return (
-      productCategoryOptions.find(
-        (opt) => String(opt.value) === formik.values.product_category_id
-      ) || null
-    );
-  }, [formik.values.product_category_id, productCategoryOptions]);
-
-  // ===== HANDLE FILTER MODAL OPEN =====
-  const handleFilterModalOpen = () => {
-    filterModal.openModal();
-    formik.validateForm();
-  };
-
-  useEffect(() => {
-    updateFilter('search', searchValue);
-  }, [searchValue, updateFilter]);
-
-  const [sorting, setSorting] = useState<SortingState>([]);
-
   const {
     data: products,
     isLoading,
@@ -219,15 +119,114 @@ const ProductsTable = () => {
     undefined
   );
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [sorting, setSorting] = useState<SortingState>([]);
 
-  useEffect(() => {
-    setTableState('product-table', pathname);
-  }, [pathname, setTableState]);
+  const productsColumns: ColumnDef<Product>[] = [
+    {
+      header: '#',
+      cell: (props) =>
+        tableFilterState.pageSize * (tableFilterState.page - 1) +
+        props.row.index +
+        1,
+    },
+    {
+      accessorKey: 'name',
+      header: 'Nama',
+    },
+    {
+      accessorKey: 'sku',
+      header: 'SKU',
+    },
+    {
+      accessorKey: 'brand',
+      header: 'Merek',
+    },
+    {
+      accessorKey: 'product_category',
+      header: 'Kategori',
+      cell: (props) => props.row.original.product_category?.name ?? '-',
+    },
+    {
+      accessorKey: 'uom',
+      header: 'Satuan',
+      cell: (props) => props.row.original.uom?.name ?? '-',
+    },
+    {
+      accessorKey: 'product_price',
+      header: 'Harga Produk',
+      cell: (props) =>
+        props.row.original.product_price?.toLocaleString() ?? '-',
+    },
+    {
+      accessorKey: 'selling_price',
+      header: 'Harga Jual',
+      cell: (props) =>
+        props.row.original.selling_price?.toLocaleString() ?? '-',
+    },
+    {
+      accessorKey: 'tax',
+      header: 'Pajak (%)',
+      cell: (props) => props.row.original.tax ?? '-',
+    },
+    {
+      accessorKey: 'expiry_period',
+      header: 'Kadaluarsa (hari)',
+      cell: (props) => props.row.original.expiry_period ?? '-',
+    },
+    {
+      accessorKey: 'suppliers',
+      header: 'Supplier',
+      cell: (props) =>
+        props.row.original.suppliers?.map((s) => s.name).join(', ') || '-',
+    },
+    {
+      accessorKey: 'flags',
+      header: 'Flags',
+      cell: (props) =>
+        props.row.original.flags?.length
+          ? props.row.original.flags.join(', ')
+          : '-',
+    },
+    {
+      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 searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
-    setSearchValue(e.target.value);
-    updateFilter('search', e.target.value);
-  };
+        const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
+
+        const deleteClickHandler = () => {
+          setSelectedProduct(props.row.original);
+          deleteModal.openModal();
+        };
+
+        return (
+          <>
+            {currentPageSize > 2 && (
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowDropdownOptions>
+            )}
+            {currentPageSize <= 2 && (
+              <RowCollapseOptions>
+                <RowOptionsMenu
+                  type='collapse'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowCollapseOptions>
+            )}
+          </>
+        );
+      },
+    },
+  ];
 
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
@@ -249,197 +248,110 @@ const ProductsTable = () => {
     setIsDeleteLoading(false);
   };
 
-  const productsColumns: ColumnDef<Product>[] = useMemo(
-    () => [
-      {
-        header: 'No',
-        cell: (props) =>
-          tableFilterState.pageSize * (tableFilterState.page - 1) +
-          props.row.index +
-          1,
-      },
-      {
-        accessorKey: 'name',
-        header: 'Nama',
-      },
-      {
-        accessorKey: 'sku',
-        header: 'SKU',
-      },
-      {
-        accessorKey: 'brand',
-        header: 'Merek',
-      },
-      {
-        accessorFn: (row) => row.product_category?.name ?? '-',
-        header: 'Kategori',
-      },
-      {
-        accessorFn: (row) => row.uom?.name ?? '-',
-        header: 'Satuan',
-      },
-      {
-        accessorKey: 'product_price',
-        header: 'Harga Produk',
-        cell: (props) =>
-          props.row.original.product_price
-            ? formatCurrency(props.row.original.product_price)
-            : '-',
-      },
-      {
-        accessorKey: 'selling_price',
-        header: 'Harga Jual',
-        cell: (props) =>
-          props.row.original.selling_price
-            ? formatCurrency(props.row.original.selling_price)
-            : '-',
-      },
-      {
-        accessorKey: 'tax',
-        header: 'Pajak (%)',
-        cell: (props) => props.row.original.tax ?? '-',
-      },
-      {
-        accessorKey: 'expiry_period',
-        header: 'Kadaluarsa (hari)',
-        cell: (props) => props.row.original.expiry_period ?? '-',
-      },
-      {
-        accessorFn: (row) =>
-          row.suppliers?.map((s) => s.name).join(', ') || '-',
-        header: 'Supplier',
-      },
-      {
-        accessorKey: 'flag',
-        header: 'Flag',
-        cell: (props) =>
-          props.row.original.flag ? props.row.original.flag : '-',
-      },
-      {
-        accessorFn: (row) =>
-          row.sub_flags?.length ? row.sub_flags.join(', ') : '-',
-        header: 'Kategori Flags',
-      },
-      {
-        header: 'Aksi',
-        cell: (props: CellContext<Product, unknown>) => {
-          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 searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
 
-          const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
+    setPageSize(newVal.value as number);
+  };
 
-          const deleteClickHandler = () => {
-            setSelectedProduct(props.row.original);
-            deleteModal.openModal();
-          };
-
-          return (
-            <RowOptionsMenu
-              props={props}
-              popoverPosition={isLast2Rows ? 'top' : 'bottom'}
-              deleteClickHandler={deleteClickHandler}
-            />
-          );
-        },
-      },
-    ],
-    [tableFilterState.pageSize, tableFilterState.page, deleteModal]
+  const updateSortingFilter = useCallback(
+    (
+      sortName: Exclude<keyof typeof tableFilterState, 'page' | 'pageSize'>,
+      sortFilter: ColumnSort | undefined
+    ) => {
+      if (!sortFilter) {
+        updateFilter(sortName, '');
+      } else {
+        updateFilter(sortName, sortFilter.desc ? 'desc' : 'asc');
+      }
+    },
+    [updateFilter]
   );
 
+  useEffect(() => {
+    const nameSortFilter = sorting.find((sortItem) => sortItem.id === 'name');
+    const skuSortFilter = sorting.find((sortItem) => sortItem.id === 'sku');
+    const brandSortFilter = sorting.find((sortItem) => sortItem.id === 'brand');
+    const categorySortFilter = sorting.find(
+      (sortItem) => sortItem.id === 'product_category'
+    );
+
+    updateSortingFilter('nameSort', nameSortFilter);
+    updateSortingFilter('skuSort', skuSortFilter);
+    updateSortingFilter('brandSort', brandSortFilter);
+    updateSortingFilter('categorySort', categorySortFilter);
+  }, [sorting, updateSortingFilter]);
+
   return (
     <>
-      <div className='w-full'>
-        {/* Header Section */}
-        <div className='w-full p-3 flex flex-row justify-between gap-3 flex-wrap border-b border-base-content/10'>
-          {/* Action Buttons */}
-          <div className='w-fit flex flex-row gap-3 flex-wrap'>
-            <RequirePermission permissions='lti.master.products.create'>
-              <Button
-                href='/master-data/product/add'
-                color='primary'
-                className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
-              >
-                <Icon icon='heroicons:plus' width={20} height={20} />
-                Add Product
-              </Button>
-            </RequirePermission>
-          </div>
-
-          {/* Search and Filter */}
-          <div className='flex flex-1 flex-row justify-start sm:justify-end items-center gap-3 flex-wrap'>
+      <div className='w-full p-0 sm:p-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
+            <div className='w-full flex flex-row'>
+              <RequirePermission permissions='lti.master.products.create'>
+                <Button
+                  href='/master-data/product/add'
+                  variant='outline'
+                  className='w-full sm:w-fit'
+                  color='primary'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
+            </div>
             <DebouncedTextInput
               name='search'
-              placeholder='Search'
-              value={tableFilterState.search ?? ''}
+              placeholder='Cari Produk'
+              value={tableFilterState.search}
               onChange={searchChangeHandler}
-              startAdornment={
-                <Icon
-                  icon='heroicons:magnifying-glass'
-                  width={20}
-                  height={20}
-                />
-              }
-              className={{
-                wrapper: 'w-full min-w-24 max-w-3xs',
-                inputWrapper: 'rounded-xl! shadow-button-soft',
-                input:
-                  'placeholder:font-semibold placeholder:text-base-content/50',
-              }}
+              className={{ wrapper: 'sm:max-w-3xs' }}
             />
-
-            <ButtonFilter
-              values={tableFilterState}
-              excludeFields={['page', 'pageSize', 'search']}
-              onClick={handleFilterModalOpen}
-              className='px-3 py-2.5'
+          </div>
+          <div className='flex flex-row justify-end'>
+            <SelectInput
+              label='Baris'
+              options={ROWS_OPTIONS}
+              value={{
+                label: String(tableFilterState.pageSize),
+                value: tableFilterState.pageSize,
+              }}
+              onChange={pageSizeChangeHandler}
+              className={{ wrapper: 'max-w-28' }}
             />
           </div>
         </div>
-
-        {/* Table Section */}
-        <div className='flex flex-col mb-4'>
-          {isLoading ? (
-            <div className='w-full flex flex-row justify-center items-center p-4'>
-              <span className='loading loading-spinner loading-xl' />
-            </div>
-          ) : !isResponseSuccess(products) || products.data?.length === 0 ? (
-            <div className='p-3'>
-              <ProductTableSkeleton
-                columns={productsColumns}
-                icon={
-                  <Icon
-                    icon='heroicons:document-text'
-                    className='text-white'
-                    width={20}
-                    height={20}
-                  />
-                }
-              />
-            </div>
-          ) : (
-            <Table<Product>
-              data={products?.data}
-              columns={productsColumns}
-              pageSize={tableFilterState.pageSize}
-              page={products?.meta?.page ?? 0}
-              totalItems={products?.meta?.total_results ?? 0}
-              onPageChange={setPage}
-              onPageSizeChange={setPageSize}
-              isLoading={false}
-              sorting={sorting}
-              setSorting={setSorting}
-              className={{
-                containerClassName: 'p-3 mb-0',
-                headerColumnClassName: 'text-nowrap',
-              }}
-            />
-          )}
-        </div>
+        <Table<Product>
+          data={isResponseSuccess(products) ? products?.data : []}
+          columns={productsColumns}
+          pageSize={tableFilterState.pageSize}
+          page={isResponseSuccess(products) ? products?.meta?.page : 0}
+          totalItems={
+            isResponseSuccess(products) ? products?.meta?.total_results : 0
+          }
+          onPageChange={setPage}
+          isLoading={isLoading}
+          sorting={sorting}
+          setSorting={setSorting}
+          className={{
+            containerClassName: cn({
+              'mb-20':
+                isResponseSuccess(products) && products?.data?.length === 0,
+            }),
+            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+            tableClassName: 'font-inter w-full table-auto min-h-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+            bodyRowClassName: 'border-b border-b-gray-200',
+            bodyColumnClassName:
+              'px-6 py-3 last:flex last:flex-row last:justify-end',
+          }}
+        />
       </div>
-
       <ConfirmationModal
         ref={deleteModal.ref}
         type='error'
@@ -454,68 +366,6 @@ const ProductsTable = () => {
           onClick: confirmationModalDeleteClickHandler,
         }}
       />
-
-      {/* Filter Modal */}
-      <Modal
-        ref={filterModal.ref}
-        className={{
-          modal: 'p-0',
-          modalBox: 'p-0 rounded-[0.875rem] xl:max-w-4/12 max-w-sm',
-        }}
-      >
-        {/* Modal Header */}
-        <div className='flex items-center justify-between gap-2 border-b border-base-content/10 p-4'>
-          <div className='flex items-center gap-2 text-primary'>
-            <Icon icon='heroicons:funnel' width={20} height={20} />
-            <h3 className='font-medium text-sm'>Filter Data</h3>
-          </div>
-          <Button
-            variant='link'
-            onClick={filterModal.closeModal}
-            className='text-base-content/50 hover:text-base-content transition-colors cursor-pointer'
-          >
-            <Icon icon='heroicons:x-mark' width={20} height={20} />
-          </Button>
-        </div>
-        <form onSubmit={formik.handleSubmit} onReset={formik.handleReset}>
-          <div className='p-4 flex flex-col gap-1.5'>
-            <SelectInput
-              label='Kategori Produk'
-              placeholder='Pilih Kategori Produk'
-              options={productCategoryOptions}
-              value={productCategoryIdValue}
-              onChange={handleFilterProductCategoryChange}
-              onInputChange={setProductCategoryInputValue}
-              isLoading={isLoadingProductCategoryOptions}
-              isClearable
-              onMenuScrollToBottom={loadMoreProductCategories}
-              className={{ wrapper: 'w-full' }}
-            />
-          </div>
-
-          {/* Modal Footer */}
-          <div className='flex justify-between items-center gap-4 p-4 border-t border-base-content/10 bg-gray-50'>
-            <Button
-              type='button'
-              variant='soft'
-              className='rounded-lg text-base-content/65 bg-transparent border-none hover:bg-base-content/10 hover:text-base-content/65 transition-colors px-3 py-2'
-              onClick={() => {
-                formik.resetForm();
-                filterModal.closeModal();
-              }}
-            >
-              Reset Filter
-            </Button>
-            <Button
-              type='submit'
-              className='min-w-40 text-sm rounded-lg py-3 text-white font-semibold'
-              disabled={!formik.isValid || formik.isSubmitting}
-            >
-              Apply Filter
-            </Button>
-          </div>
-        </form>
-      </Modal>
     </>
   );
 };

src/components/pages/master-data/product/filter/ProductFilter.ts

@@ -1,9 +0,0 @@
-import { string, object } from 'yup';
-
-export const ProductFilterSchema = object().shape({
-  product_category_id: string().nullable(),
-});
-
-export type ProductFilterType = {
-  product_category_id: string | null;
-};

src/components/pages/master-data/product/form/ProductForm.schema.ts

@@ -1,5 +1,4 @@
 import * as Yup from 'yup';
-import { PRODUCT_FLAG_MAPPING } from '@/config/constant';
 
 type ProductFormSchemaType = {
   name: string;
@@ -26,8 +25,7 @@ type ProductFormSchemaType = {
     } | null;
     price: number;
   }[];
-  flag: string;
-  sub_flags?: string[];
+  flags: string[];
 };
 
 export const ProductFormSchema: Yup.ObjectSchema<ProductFormSchemaType> =
@@ -96,26 +94,10 @@ export const ProductFormSchema: Yup.ObjectSchema<ProductFormSchemaType> =
       )
       .required('Supplier wajib diisi!'),
 
-    flag: Yup.string()
-      .min(1, 'Flag wajib diisi!')
-      .required('Flag wajib diisi!')
-      .typeError('Flag wajib diisi!'),
-
-    sub_flags: Yup.array()
+    flags: Yup.array()
       .of(Yup.string().required())
-      .when('flag', {
-        is: (flag: string) => {
-          const mapping = PRODUCT_FLAG_MAPPING.options.find(
-            (opt) => opt.flag.value === flag
-          );
-          return mapping?.allow_without_sub_flag === false;
-        },
-        then: (schema) =>
-          schema
-            .required('Sub flag wajib diisi!')
-            .min(1, 'Sub flag wajib diisi!'),
-        otherwise: (schema) => schema,
-      }),
+      .min(1, 'Minimal harus ada 1 flag!')
+      .required('Flag wajib diisi!'),
   });
 
 export const UpdateProductFormSchema = ProductFormSchema;

src/components/pages/master-data/product/form/ProductForm.tsx

@@ -36,16 +36,8 @@ import {
   ProductApi,
 } from '@/services/api/master-data';
 import { cn } from '@/lib/helper';
-
+import { PRODUCT_FLAG_OPTIONS } from '@/config/constant';
 import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
-import { ConstantsApi } from '@/services/api/constants/constants';
-import type {
-  TransformedConstants,
-  ProductFlagMapping,
-} from '@/types/api/constants/constants';
-import useSWR from 'swr';
-import { PRODUCT_FLAG_MAPPING } from '@/config/constant';
-
 import { Supplier } from '@/types/api/master-data/supplier';
 import Card from '@/components/Card';
 import { removeArrayItemAndSync } from '@/lib/utils/formik';
@@ -61,24 +53,6 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
 
   const [productFormErrorMessage, setProductFormErrorMessage] = useState('');
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-  const {
-    data: constants,
-    error: constantsError,
-    isLoading: isLoadingConstants,
-  } = useSWR<TransformedConstants | undefined>(
-    'constants',
-    ConstantsApi.fetchTransformedConstants.bind(ConstantsApi),
-    {
-      shouldRetryOnError: false,
-    }
-  );
-
-  const productFlagMapping: ProductFlagMapping | null = useMemo(() => {
-    if (constantsError || !constants?.product_flag_mapping) {
-      return PRODUCT_FLAG_MAPPING as unknown as ProductFlagMapping;
-    }
-    return constants.product_flag_mapping;
-  }, [constants, constantsError]);
 
   const createProductHandler = useCallback(
     async (payload: CreateProductPayload) => {
@@ -136,8 +110,7 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
             price: supplier.price,
           }))
         : [],
-      flag: initialValues?.flag ?? '',
-      sub_flags: initialValues?.sub_flags ?? [],
+      flags: initialValues?.flags ?? [],
     }),
     [initialValues]
   );
@@ -166,8 +139,7 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
           supplier_id: s.supplier?.value as number,
           price: parseInt(s.price.toString()) || 0,
         })),
-        flag: values.flag,
-        sub_flags: values.sub_flags,
+        flags: values.flags.filter((f): f is string => typeof f === 'string'),
       };
       switch (type) {
         case 'add':
@@ -228,28 +200,6 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
     });
   }, [supplierOptions, formik.values.suppliers]);
 
-  const selectedFlagMapping = useMemo(() => {
-    return productFlagMapping?.options.find(
-      (opt) => opt.flag.value === formik.values.flag
-    );
-  }, [formik.values.flag, productFlagMapping]);
-
-  const subFlagOptions = useMemo<OptionType[]>(() => {
-    return selectedFlagMapping?.sub_flags ?? [];
-  }, [selectedFlagMapping]);
-
-  const selectedSubFlagValues = useMemo<OptionType[]>(() => {
-    return (
-      selectedFlagMapping?.sub_flags.filter((subFlag) =>
-        formik.values.sub_flags?.includes(subFlag.value as string)
-      ) ?? []
-    );
-  }, [selectedFlagMapping, formik.values.sub_flags]);
-
-  const isSubFlagRequired = useMemo(() => {
-    return selectedFlagMapping?.allow_without_sub_flag === false;
-  }, [selectedFlagMapping]);
-
   const addSupplierHandler = () => {
     formik.setFieldValue('suppliers', [
       ...formik.values.suppliers,
@@ -263,6 +213,7 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
   const deleteSupplierItemHandler = (idx: number) => {
     const path = 'suppliers';
 
+    // trims values, errors, and touched at idx
     removeArrayItemAndSync(formik, path, idx);
   };
 
@@ -477,48 +428,26 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
                 readOnly={type === 'detail'}
               />
             </div>
-            <div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
+            <div className='grid sm:grid-cols-1 gap-4'>
               <SelectInput
                 required
                 label='Flags'
                 placeholder='Pilih flags...'
-                value={productFlagMapping?.flags.find(
-                  (opt) => opt.value === formik.values.flag
-                )}
-                onChange={(val) => {
-                  const selectedFlag = String((val as OptionType)?.value ?? '');
-                  formik.setFieldValue('flag', selectedFlag);
-                  formik.setFieldValue('sub_flags', []);
-                }}
-                options={productFlagMapping?.flags ?? []}
-                isLoading={isLoadingConstants && !productFlagMapping}
-                isError={formik.touched.flag && Boolean(formik.errors.flag)}
-                errorMessage={formik.errors.flag as string}
-                isDisabled={type === 'detail'}
-                isClearable
-              />
-
-              <SelectInput
-                label='Kategori Flags'
-                placeholder='Pilih kategori flags...'
                 isMulti
-                required={isSubFlagRequired}
-                value={selectedSubFlagValues}
+                value={PRODUCT_FLAG_OPTIONS.filter((opt) =>
+                  (formik.values.flags || []).includes(opt.value)
+                )}
                 onChange={(val) => {
                   const arr = Array.isArray(val) ? val : val ? [val] : [];
                   formik.setFieldValue(
-                    'sub_flags',
-                    arr.map((v) => String((v as OptionType).value))
+                    'flags',
+                    arr.map((v) => (v as OptionType).value)
                   );
                 }}
-                options={subFlagOptions}
-                isLoading={isLoadingConstants && !productFlagMapping}
-                isError={
-                  formik.touched.sub_flags && Boolean(formik.errors.sub_flags)
-                }
-                errorMessage={formik.errors.sub_flags as string}
-                isDisabled={type === 'detail' || !formik.values.flag}
-                closeMenuOnSelect={false}
+                options={PRODUCT_FLAG_OPTIONS}
+                isError={formik.touched.flags && Boolean(formik.errors.flags)}
+                errorMessage={formik.errors.flags as string}
+                isDisabled={type === 'detail'}
                 isClearable
               />
             </div>

src/components/pages/master-data/product/skeleton/ProductTableSkeleton.tsx

@@ -1,37 +0,0 @@
-import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
-import Table from '@/components/Table';
-import { Product } from '@/types/api/master-data/product';
-import { ColumnDef } from '@tanstack/react-table';
-
-const ProductTableSkeleton = ({
-  columns,
-  icon,
-  title = 'No Data Available',
-  subtitle = 'There is no product data displayed. Enter product data to get started.',
-}: {
-  columns: ColumnDef<Product>[];
-  icon: React.ReactNode;
-  title?: string;
-  subtitle?: string;
-}) => {
-  return (
-    <div className='relative size-full'>
-      <Table
-        data={[]}
-        columns={columns}
-        isLoading={true}
-        className={{
-          skeletonCellClassName: 'animate-none w-full h-5 bg-base-content/4',
-          headerColumnClassName: 'whitespace-nowrap',
-          containerClassName: 'mb-0 overflow-hidden',
-          tableWrapperClassName: 'overflow-hidden',
-        }}
-      />
-      <div className='absolute inset-0 flex items-center justify-center'>
-        <DataStateSkeleton icon={icon} title={title} description={subtitle} />
-      </div>
-    </div>
-  );
-};
-
-export default ProductTableSkeleton;

src/components/pages/master-data/production-standard/ProductionStandardTable.tsx

@@ -1,211 +1,92 @@
 'use client';
 
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { usePathname } from 'next/navigation';
-import useSWR from 'swr';
-import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
-import toast from 'react-hot-toast';
-import { useFormik } from 'formik';
-
-import { Icon } from '@iconify/react';
-import Table from '@/components/Table';
 import Button from '@/components/Button';
-import Modal, { useModal } from '@/components/Modal';
-import ConfirmationModal from '@/components/modal/ConfirmationModal';
-import RequirePermission from '@/components/helper/RequirePermission';
-import PopoverButton from '@/components/popover/PopoverButton';
-import PopoverContent from '@/components/popover/PopoverContent';
-import ProductionStandardTableSkeleton from '@/components/pages/master-data/production-standard/skeleton/ProductionStandardTableSkeleton';
-import { OptionType } from '@/components/input/SelectInput';
-import ButtonFilter from '@/components/helper/ButtonFilter';
-
+import Table, { TABLE_DEFAULT_STYLING } from '@/components/Table';
 import { ProductionStandard } from '@/types/api/master-data/production-standard';
+import { Icon } from '@iconify/react';
+import useSWR from 'swr';
 import { ProductionStandardApi } from '@/services/api/master-data';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import { useTableFilter } from '@/services/hooks/useTableFilter';
-import { useUiStore } from '@/stores/ui/ui.store';
-import {
-  ProductionStandardFilterSchema,
-  ProductionStandardFilterType,
-} from '@/components/pages/master-data/production-standard/filter/ProductionStandardFilter';
-import SelectInputRadio from '@/components/input/SelectInputRadio';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import { CellContext } from '@tanstack/react-table';
+import { useModal } from '@/components/Modal';
+import { useState } from 'react';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import toast from 'react-hot-toast';
+import { cn } from '@/lib/helper';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 const RowOptionsMenu = ({
-  popoverPosition = 'bottom',
+  type = 'dropdown',
   props,
   deleteClickHandler,
 }: {
-  popoverPosition: 'bottom' | 'top';
+  type: 'dropdown' | 'collapse';
   props: CellContext<ProductionStandard, unknown>;
   deleteClickHandler: () => void;
 }) => {
-  const popoverId = `production-standard#${props.row.original.id}`;
-  const popoverAnchorName = `--anchor-production-standard#${props.row.original.id}`;
-
-  const closePopover = () => {
-    document.getElementById(popoverId)?.hidePopover();
-  };
-
   return (
-    <div className='relative'>
-      <PopoverButton
-        tabIndex={0}
-        variant='ghost'
-        color='none'
-        popoverTarget={popoverId}
-        anchorName={popoverAnchorName}
-      >
-        <Icon icon='material-symbols:more-vert' width={16} height={16} />
-      </PopoverButton>
+    <RowOptionsMenuWrapper type={type}>
+      <RequirePermission permissions='lti.master.production_standards.detail'>
+        <Button
+          href={`/master-data/production-standard/detail/?productionStandardId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
+          className='justify-start text-sm'
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+      </RequirePermission>
 
-      <PopoverContent
-        id={popoverId}
-        anchorName={popoverAnchorName}
-        position={popoverPosition === 'bottom' ? 'bottom-start' : 'left'}
-        className='w-full max-w-40 rounded-xl border border-base-content/5 shadow-sm'
-      >
-        <div className='flex flex-col bg-base-100 rounded-xl'>
-          <RequirePermission permissions='lti.master.production_standards.detail'>
-            <Button
-              href={`/master-data/production-standard/detail/?productionStandardId=${props.row.original.id}`}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full'
-              onClick={closePopover}
-            >
-              <Icon icon='heroicons:eye' width={20} height={20} />
-              Detail
-            </Button>
-          </RequirePermission>
-          <RequirePermission permissions='lti.master.production_standards.update'>
-            <Button
-              href={`/master-data/production-standard/detail/edit/?productionStandardId=${props.row.original.id}`}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full'
-              onClick={closePopover}
-            >
-              <Icon icon='heroicons:pencil-square' width={20} height={20} />
-              Edit
-            </Button>
-          </RequirePermission>
-          <RequirePermission permissions='lti.master.production_standards.delete'>
-            <Button
-              onClick={() => {
-                deleteClickHandler();
-                closePopover();
-              }}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full text-error hover:text-error'
-            >
-              <Icon icon='heroicons:trash' width={20} height={20} />
-              Delete
-            </Button>
-          </RequirePermission>
-        </div>
-      </PopoverContent>
-    </div>
+      <RequirePermission permissions='lti.master.production_standards.update'>
+        <Button
+          href={`/master-data/production-standard/detail/edit/?productionStandardId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.production_standards.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='text-error hover:text-inherit'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
+    </RowOptionsMenuWrapper>
   );
 };
 
 const ProductionStandardTable = () => {
-  const { setTableState } = useUiStore();
-  const pathname = usePathname();
-
-  const {
-    state: tableFilterState,
-    updateFilter,
-    setPage,
-    setPageSize,
-    toQueryString: getTableFilterQueryString,
-  } = useTableFilter({
-    initial: {
-      projectCategoryFilter: '',
-    },
-    paramMap: {
-      page: 'page',
-      pageSize: 'limit',
-      projectCategoryFilter: 'project_category',
-    },
-  });
-
-  // ===== FILTER MODAL STATE =====
-  const filterModal = useModal();
-
-  // ===== FORMIK SETUP =====
-  const formik = useFormik<ProductionStandardFilterType>({
-    initialValues: {
-      project_category: null,
-    },
-    validationSchema: ProductionStandardFilterSchema,
-    onSubmit: (values, { setSubmitting }) => {
-      updateFilter('projectCategoryFilter', values.project_category || '');
-      filterModal.closeModal();
-      setSubmitting(false);
-    },
-    onReset: () => {
-      updateFilter('projectCategoryFilter', '');
-    },
-  });
-
-  // ===== PROJECT CATEGORY OPTIONS (GROWING or LAYING) =====
-  const projectCategoryOptions = useMemo(
-    () => [
-      { value: 'GROWING', label: 'Growing' },
-      { value: 'LAYING', label: 'Laying' },
-    ],
-    []
-  );
-
-  // ===== FILTER HANDLERS =====
-  const handleFilterProjectCategoryChange = useCallback(
-    (val: OptionType | OptionType[] | null) => {
-      const option = val as OptionType | null;
-      const category = option?.value ? String(option.value) : null;
-
-      formik.setFieldValue('project_category', category);
-    },
-    [formik]
-  );
-
-  // ===== FILTER HELPERS =====
-  const projectCategoryValue = useMemo(() => {
-    if (!formik.values.project_category) return null;
-    return (
-      projectCategoryOptions.find(
-        (opt) => opt.value === formik.values.project_category
-      ) || null
-    );
-  }, [formik.values.project_category, projectCategoryOptions]);
-
-  // ===== HANDLE FILTER MODAL OPEN =====
-  const handleFilterModalOpen = () => {
-    filterModal.openModal();
-    formik.validateForm();
-  };
-
-  useEffect(() => {
-    setTableState('production-standard-table', pathname);
-  }, [pathname, setTableState]);
-
-  const [sorting, setSorting] = useState<SortingState>([]);
-
-  const {
-    data: productionStandards,
-    isLoading,
-    mutate: refreshProductionStandards,
-  } = useSWR(
-    `${ProductionStandardApi.basePath}${getTableFilterQueryString()}`,
-    ProductionStandardApi.getAllFetcher
-  );
-
   const deleteModal = useModal();
+
   const [selectedProductionStandard, setSelectedProductionStandard] = useState<
     ProductionStandard | undefined
   >(undefined);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
+  const { data: productionStandards, mutate: refreshProductionStandards } =
+    useSWR(
+      `${ProductionStandardApi.basePath}`,
+      ProductionStandardApi.getAllFetcher
+    );
+
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
 
@@ -226,197 +107,112 @@ const ProductionStandardTable = () => {
     setIsDeleteLoading(false);
   };
 
-  const productionStandardColumns: ColumnDef<ProductionStandard>[] = useMemo(
-    () => [
-      {
-        header: 'No',
-        cell: (props) =>
-          tableFilterState.pageSize * (tableFilterState.page - 1) +
-          props.row.index +
-          1,
-      },
-      {
-        accessorKey: 'name',
-        header: 'Nama',
-      },
-      {
-        accessorFn: (row) => row.project_category ?? '-',
-        header: 'Kategori',
-      },
-      {
-        header: 'Aksi',
-        cell: (props: CellContext<ProductionStandard, unknown>) => {
-          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 deleteClickHandler = () => {
-            setSelectedProductionStandard(props.row.original);
-            deleteModal.openModal();
-          };
-
-          return (
-            <RowOptionsMenu
-              props={props}
-              popoverPosition={isLast2Rows ? 'top' : 'bottom'}
-              deleteClickHandler={deleteClickHandler}
-            />
-          );
-        },
-      },
-    ],
-    [tableFilterState.pageSize, tableFilterState.page, deleteModal]
-  );
-
   return (
     <>
-      <div className='w-full'>
-        {/* Header Section */}
-        <div className='w-full p-3 flex flex-row justify-between gap-3 flex-wrap border-b border-base-content/10'>
-          {/* Action Buttons */}
-          <div className='w-fit flex flex-row gap-3 flex-wrap'>
-            <RequirePermission permissions='lti.master.production_standards.create'>
-              <Button
-                href='/master-data/production-standard/add'
-                color='primary'
-                className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
-              >
-                <Icon icon='heroicons:plus' width={20} height={20} />
-                Add Standard Production
-              </Button>
-            </RequirePermission>
-          </div>
-
-          {/* Filter */}
-          <div className='flex flex-1 flex-row justify-start sm:justify-end items-center gap-3 flex-wrap'>
-            <ButtonFilter
-              values={tableFilterState}
-              excludeFields={['page', 'pageSize']}
-              onClick={handleFilterModalOpen}
-              className='px-3 py-2.5'
-            />
-          </div>
+      <div className='flex flex-col gap-6 p-6'>
+        <div className='flex flex-row gap-6 justify-start'>
+          <RequirePermission permissions='lti.master.production_standards.create'>
+            <Button
+              href='/master-data/production-standard/add'
+              variant='outline'
+            >
+              <Icon icon='mdi:plus' /> Tambah
+            </Button>
+          </RequirePermission>
         </div>
+        <RequirePermission permissions='lti.master.production_standards.list'>
+          <Table<ProductionStandard>
+            data={
+              isResponseSuccess(productionStandards)
+                ? productionStandards.data
+                : []
+            }
+            columns={[
+              {
+                header: 'No',
+                accessorFn: (row, index) => index + 1,
+              },
+              {
+                header: 'Nama',
+                accessorKey: 'name',
+              },
+              {
+                header: 'Kategori',
+                accessorFn: (row) => row.project_category,
+              },
+              {
+                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;
 
-        {/* Table Section */}
-        <div className='flex flex-col mb-4'>
-          {isLoading ? (
-            <div className='w-full flex flex-row justify-center items-center p-4'>
-              <span className='loading loading-spinner loading-xl' />
-            </div>
-          ) : !isResponseSuccess(productionStandards) ||
-            productionStandards.data?.length === 0 ? (
-            <div className='p-3'>
-              <ProductionStandardTableSkeleton
-                columns={productionStandardColumns}
-                icon={
-                  <Icon
-                    icon='heroicons:document-text'
-                    className='text-white'
-                    width={20}
-                    height={20}
-                  />
-                }
-              />
-            </div>
-          ) : (
-            <Table<ProductionStandard>
-              data={productionStandards.data}
-              columns={productionStandardColumns}
-              pageSize={tableFilterState.pageSize}
-              page={productionStandards?.meta?.page ?? 0}
-              totalItems={productionStandards?.meta?.total_results ?? 0}
-              onPageChange={setPage}
-              onPageSizeChange={setPageSize}
-              isLoading={false}
-              sorting={sorting}
-              setSorting={setSorting}
-              className={{
-                containerClassName: 'p-3 mb-0',
-                headerColumnClassName: 'text-nowrap',
-              }}
-            />
-          )}
-        </div>
+                  const isLast2Rows =
+                    currentRowRelativeIndex > currentPageSize - 2;
+
+                  const deleteClickHandler = () => {
+                    setSelectedProductionStandard(props.row.original);
+                    deleteModal.openModal();
+                  };
+
+                  return (
+                    <>
+                      {currentPageSize > 2 && (
+                        <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                          <RowOptionsMenu
+                            type='dropdown'
+                            props={props}
+                            deleteClickHandler={deleteClickHandler}
+                          />
+                        </RowDropdownOptions>
+                      )}
+
+                      {currentPageSize <= 2 && (
+                        <RowCollapseOptions>
+                          <RowOptionsMenu
+                            type='collapse'
+                            props={props}
+                            deleteClickHandler={deleteClickHandler}
+                          />
+                        </RowCollapseOptions>
+                      )}
+                    </>
+                  );
+                },
+              },
+            ]}
+            className={{
+              headerColumnClassName: cn(
+                TABLE_DEFAULT_STYLING.headerColumnClassName,
+                'last:flex last:flex-row last:justify-end'
+              ),
+              bodyColumnClassName: cn(
+                TABLE_DEFAULT_STYLING.bodyColumnClassName,
+                'last:flex last:flex-row last:justify-end'
+              ),
+            }}
+          />
+        </RequirePermission>
       </div>
-
-      <ConfirmationModal
-        ref={deleteModal.ref}
-        type='error'
-        text={`Apakah anda yakin ingin menghapus data Production Standard ini (${selectedProductionStandard?.name})?`}
-        secondaryButton={{
-          text: 'Tidak',
-        }}
-        primaryButton={{
-          text: 'Ya',
-          color: 'error',
-          isLoading: isDeleteLoading,
-          onClick: confirmationModalDeleteClickHandler,
-        }}
-      />
-
-      {/* Filter Modal */}
-      <Modal
-        ref={filterModal.ref}
-        className={{
-          modal: 'p-0',
-          modalBox: 'p-0 rounded-[0.875rem] xl:max-w-4/12 max-w-sm',
-        }}
-      >
-        {/* Modal Header */}
-        <div className='flex items-center justify-between gap-2 border-b border-base-content/10 p-4'>
-          <div className='flex items-center gap-2 text-primary'>
-            <Icon icon='heroicons:funnel' width={20} height={20} />
-            <h3 className='font-medium text-sm'>Filter Data</h3>
-          </div>
-          <Button
-            variant='link'
-            onClick={filterModal.closeModal}
-            className='text-base-content/50 hover:text-base-content transition-colors cursor-pointer'
-          >
-            <Icon icon='heroicons:x-mark' width={20} height={20} />
-          </Button>
-        </div>
-        <form onSubmit={formik.handleSubmit} onReset={formik.handleReset}>
-          <div className='p-4 flex flex-col gap-1.5'>
-            <SelectInputRadio
-              label='Kategori'
-              placeholder='Pilih Kategori'
-              options={projectCategoryOptions}
-              value={projectCategoryValue}
-              onChange={handleFilterProjectCategoryChange}
-              isClearable
-              className={{ wrapper: 'w-full' }}
-            />
-          </div>
-
-          {/* Modal Footer */}
-          <div className='flex justify-between items-center gap-4 p-4 border-t border-base-content/10 bg-gray-50'>
-            <Button
-              type='button'
-              variant='soft'
-              className='rounded-lg text-base-content/65 bg-transparent border-none hover:bg-base-content/10 hover:text-base-content/65 transition-colors px-3 py-2'
-              onClick={() => {
-                formik.resetForm();
-                filterModal.closeModal();
-              }}
-            >
-              Reset Filter
-            </Button>
-            <Button
-              type='submit'
-              className='min-w-40 text-sm rounded-lg py-3 text-white font-semibold'
-              disabled={!formik.isValid || formik.isSubmitting}
-            >
-              Apply Filter
-            </Button>
-          </div>
-        </form>
-      </Modal>
+      <RequirePermission permissions='lti.master.production_standards.delete'>
+        <ConfirmationModal
+          ref={deleteModal.ref}
+          type='error'
+          text={`Apakah anda yakin ingin menghapus data Production Standard ini (${selectedProductionStandard?.name})?`}
+          secondaryButton={{
+            text: 'Tidak',
+          }}
+          primaryButton={{
+            text: 'Ya',
+            color: 'error',
+            isLoading: isDeleteLoading,
+            onClick: confirmationModalDeleteClickHandler,
+          }}
+        />
+      </RequirePermission>
     </>
   );
 };

src/components/pages/master-data/production-standard/filter/ProductionStandardFilter.ts

@@ -1,9 +0,0 @@
-import { string, object } from 'yup';
-
-export const ProductionStandardFilterSchema = object().shape({
-  project_category: string().nullable(),
-});
-
-export type ProductionStandardFilterType = {
-  project_category: string | null;
-};

src/components/pages/master-data/production-standard/form/ProductionStandardForm.tsx

@@ -178,7 +178,14 @@ const ProductionStandardForm = ({
   const router = useRouter();
 
   // ===== Store =====
-  const { formData, setFormData, clearCache } = useFormStore();
+  const {
+    formData,
+    setFormData,
+    addDetail,
+    updateDetail,
+    deleteDetail,
+    clearCache,
+  } = useFormStore();
 
   // ===== Formik =====
   // Initial values - only recalculate when initialValue changes (for edit/detail mode)

src/components/pages/master-data/production-standard/skeleton/ProductionStandardTableSkeleton.tsx

@@ -1,37 +0,0 @@
-import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
-import Table from '@/components/Table';
-import { ProductionStandard } from '@/types/api/master-data/production-standard';
-import { ColumnDef } from '@tanstack/react-table';
-
-const ProductionStandardTableSkeleton = ({
-  columns,
-  icon,
-  title = 'No Data Available',
-  subtitle = 'There is no production standard data displayed. Enter production standard data to get started.',
-}: {
-  columns: ColumnDef<ProductionStandard>[];
-  icon: React.ReactNode;
-  title?: string;
-  subtitle?: string;
-}) => {
-  return (
-    <div className='relative size-full'>
-      <Table
-        data={[]}
-        columns={columns}
-        isLoading={true}
-        className={{
-          skeletonCellClassName: 'animate-none w-full h-5 bg-base-content/4',
-          headerColumnClassName: 'whitespace-nowrap',
-          containerClassName: 'mb-0 overflow-hidden',
-          tableWrapperClassName: 'overflow-hidden',
-        }}
-      />
-      <div className='absolute inset-0 flex items-center justify-center'>
-        <DataStateSkeleton icon={icon} title={title} description={subtitle} />
-      </div>
-    </div>
-  );
-};
-
-export default ProductionStandardTableSkeleton;

src/components/pages/master-data/supplier/SupplierTable.tsx

@@ -1,125 +1,91 @@
 'use client';
 
-import {
-  ChangeEventHandler,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
-import { usePathname } from 'next/navigation';
-import useSWR from 'swr';
-import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
-import toast from 'react-hot-toast';
-import { useFormik } from 'formik';
-
-import { Icon } from '@iconify/react';
-import Table from '@/components/Table';
-import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import Button from '@/components/Button';
-import Modal, { useModal } from '@/components/Modal';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import Table from '@/components/Table';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import RequirePermission from '@/components/helper/RequirePermission';
-import PopoverButton from '@/components/popover/PopoverButton';
-import PopoverContent from '@/components/popover/PopoverContent';
-import SupplierTableSkeleton from '@/components/pages/master-data/supplier/skeleton/SupplierTableSkeleton';
-import { OptionType } from '@/components/input/SelectInput';
-import ButtonFilter from '@/components/helper/ButtonFilter';
-
-import { Supplier } from '@/types/api/master-data/supplier';
-import { SupplierApi } from '@/services/api/master-data';
+import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { cn } from '@/lib/helper';
+import { SupplierApi } from '@/services/api/master-data';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
-import { useUiStore } from '@/stores/ui/ui.store';
-import {
-  SupplierFilterSchema,
-  SupplierFilterType,
-} from '@/components/pages/master-data/supplier/filter/SupplierFilter';
-import SelectInputRadio from '@/components/input/SelectInputRadio';
+import { Supplier } from '@/types/api/master-data/supplier';
+import { Icon } from '@iconify/react';
+import { CellContext, ColumnDef } from '@tanstack/react-table';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import useSWR from 'swr';
 
-const RowOptionsMenu = ({
-  popoverPosition = 'bottom',
+const RowOptions = ({
+  type = 'dropdown',
   props,
   deleteClickHandler,
 }: {
-  popoverPosition: 'bottom' | 'top';
+  type: 'dropdown' | 'collapse';
   props: CellContext<Supplier, unknown>;
   deleteClickHandler: () => void;
 }) => {
-  const popoverId = `supplier#${props.row.original.id}`;
-  const popoverAnchorName = `--anchor-supplier#${props.row.original.id}`;
-
-  const closePopover = () => {
-    document.getElementById(popoverId)?.hidePopover();
-  };
-
   return (
-    <div className='relative'>
-      <PopoverButton
-        tabIndex={0}
-        variant='ghost'
-        color='none'
-        popoverTarget={popoverId}
-        anchorName={popoverAnchorName}
-      >
-        <Icon icon='material-symbols:more-vert' width={16} height={16} />
-      </PopoverButton>
-
-      <PopoverContent
-        id={popoverId}
-        anchorName={popoverAnchorName}
-        position={popoverPosition === 'bottom' ? 'bottom-start' : 'left'}
-        className='w-full max-w-40 rounded-xl border border-base-content/5 shadow-sm'
-      >
-        <div className='flex flex-col bg-base-100 rounded-xl'>
-          <RequirePermission permissions='lti.master.suppliers.detail'>
-            <Button
-              href={`/master-data/supplier/detail/?supplierId=${props.row.original.id}`}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full'
-              onClick={closePopover}
-            >
-              <Icon icon='heroicons:eye' width={20} height={20} />
-              Detail
-            </Button>
-          </RequirePermission>
-          <RequirePermission permissions='lti.master.suppliers.update'>
-            <Button
-              href={`/master-data/supplier/detail/edit/?supplierId=${props.row.original.id}`}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full'
-              onClick={closePopover}
-            >
-              <Icon icon='heroicons:pencil-square' width={20} height={20} />
-              Edit
-            </Button>
-          </RequirePermission>
-          <RequirePermission permissions='lti.master.suppliers.delete'>
-            <Button
-              onClick={() => {
-                deleteClickHandler();
-                closePopover();
-              }}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full text-error hover:text-error'
-            >
-              <Icon icon='heroicons:trash' width={20} height={20} />
-              Delete
-            </Button>
-          </RequirePermission>
-        </div>
-      </PopoverContent>
-    </div>
+    <RowOptionsMenuWrapper type={type}>
+      <RequirePermission permissions='lti.master.suppliers.detail'>
+        <Button
+          href={`/master-data/supplier/detail/?supplierId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
+          className='justify-start text-sm'
+        >
+          <Icon
+            icon='mdi:eye-outline'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Detail
+        </Button>
+      </RequirePermission>
+      <RequirePermission permissions='lti.master.suppliers.update'>
+        <Button
+          href={`/master-data/supplier/detail/edit/?supplierId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon
+            icon='material-symbols:edit-outline'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Edit
+        </Button>
+      </RequirePermission>
+      <RequirePermission permissions='lti.master.suppliers.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
+    </RowOptionsMenuWrapper>
   );
 };
 
 const SuppliersTable = () => {
-  const { searchValue, setSearchValue, setTableState } = useUiStore();
-  const pathname = usePathname();
-
   const {
     state: tableFilterState,
     updateFilter,
@@ -127,132 +93,15 @@ const SuppliersTable = () => {
     setPageSize,
     toQueryString: getTableFilterQueryString,
   } = useTableFilter({
-    initial: {
-      search: '',
-      categoryFilter: '',
-      flagFilter: '',
-    },
+    initial: { search: '', nameSort: '' },
     paramMap: {
       page: 'page',
       pageSize: 'limit',
-      categoryFilter: 'category_id',
-      flagFilter: 'flag',
+      nameSort: 'sort_name',
     },
   });
 
-  // ===== FILTER MODAL STATE =====
-  const filterModal = useModal();
-
-  // ===== FORMIK SETUP =====
-  const formik = useFormik<SupplierFilterType>({
-    initialValues: {
-      category_id: null,
-      flag: false,
-    },
-    validationSchema: SupplierFilterSchema,
-    onSubmit: (values, { setSubmitting }) => {
-      updateFilter('categoryFilter', values.category_id || '');
-      updateFilter(
-        'flagFilter',
-        values.flag === true ? 'EKSPEDISI' : values.flag === false ? '' : ''
-      );
-      filterModal.closeModal();
-      setSubmitting(false);
-    },
-    onReset: () => {
-      updateFilter('categoryFilter', '');
-      updateFilter('flagFilter', '');
-      formik.setFieldValue('flag', false);
-    },
-  });
-
-  const { setFieldValue } = formik;
-
-  // ===== CATEGORY OPTIONS (SAPRONAK or BOP) =====
-  const categoryOptions = useMemo(
-    () => [
-      { value: 'SAPRONAK', label: 'SAPRONAK' },
-      { value: 'BOP', label: 'BOP' },
-    ],
-    []
-  );
-
-  // ===== FLAG OPTIONS (EKSPEDISI) =====
-  const flagOptions = useMemo(
-    () => [
-      { value: 'true', label: 'Ya' },
-      { value: 'false', label: 'Tidak' },
-    ],
-    []
-  );
-
-  // ===== FILTER HANDLERS =====
-  const handleFilterCategoryChange = useCallback(
-    (val: OptionType | OptionType[] | null) => {
-      const option = val as OptionType | null;
-      const categoryId = option?.value ? String(option.value) : null;
-
-      setFieldValue('category_id', categoryId);
-    },
-    [setFieldValue]
-  );
-
-  const handleFilterFlagChange = useCallback(
-    (val: OptionType | OptionType[] | null) => {
-      const option = val as OptionType | null;
-      const boolValue =
-        option?.value === 'true'
-          ? true
-          : option?.value === 'false'
-            ? false
-            : null;
-
-      setFieldValue('flag', boolValue);
-    },
-    [setFieldValue]
-  );
-
-  // ===== FILTER HELPERS =====
-  const categoryIdValue = useMemo(() => {
-    if (!formik.values.category_id) return null;
-    return (
-      categoryOptions.find((opt) => opt.value === formik.values.category_id) ||
-      null
-    );
-  }, [formik.values.category_id, categoryOptions]);
-
-  const flagValue = useMemo(() => {
-    if (formik.values.flag === null) return null;
-    return (
-      flagOptions.find((opt) => opt.value === String(formik.values.flag)) ||
-      flagOptions[1]
-    );
-  }, [formik.values.flag, flagOptions]);
-
-  // ===== HANDLE FILTER MODAL OPEN =====
-  const handleFilterModalOpen = () => {
-    filterModal.openModal();
-    formik.validateForm();
-  };
-
-  useEffect(() => {
-    if (filterModal.open) {
-      const flagBoolValue =
-        tableFilterState.flagFilter === 'EKSPEDISI' ? true : false;
-      setFieldValue('flag', flagBoolValue);
-    }
-  }, [filterModal.open, tableFilterState.flagFilter, setFieldValue]);
-
-  useEffect(() => {
-    updateFilter('search', searchValue);
-  }, [searchValue, updateFilter]);
-
-  useEffect(() => {
-    setTableState('suppliers-table', pathname);
-  }, [pathname, setTableState]);
-
-  const [sorting, setSorting] = useState<SortingState>([]);
-
+  // Fetch Data
   const {
     data: suppliers,
     isLoading,
@@ -262,17 +111,97 @@ const SuppliersTable = () => {
     SupplierApi.getAllFetcher
   );
 
+  // State
   const deleteModal = useModal();
   const [selectedSupplier, setSelectedSupplier] = useState<
     Supplier | undefined
   >(undefined);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
-  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
-    setSearchValue(e.target.value);
-    updateFilter('search', e.target.value);
-  };
+  // Columns Definition
+  const suppliersColumns: ColumnDef<Supplier>[] = [
+    {
+      header: '#',
+      cell: (props) =>
+        tableFilterState.pageSize * (tableFilterState.page - 1) +
+        props.row.index +
+        1,
+    },
+    {
+      accessorKey: 'name',
+      header: 'Nama',
+    },
+    {
+      accessorKey: 'alias',
+      header: 'Alias',
+    },
+    {
+      accessorKey: 'pic',
+      header: 'Nama PIC',
+    },
+    {
+      accessorKey: 'category',
+      header: 'Kategori',
+    },
+    {
+      accessorKey: 'type',
+      header: 'Tipe',
+    },
+    {
+      accessorKey: 'phone',
+      header: 'No. Telp',
+    },
+    {
+      accessorKey: 'email',
+      header: 'Email',
+    },
+    {
+      accessorKey: 'address',
+      header: 'Alamat',
+    },
+    {
+      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 deleteClickHandler = () => {
+          setSelectedSupplier(props.row.original);
+          deleteModal.openModal();
+        };
+
+        return (
+          <>
+            {currentPageSize > 2 && (
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowOptions
+                  type='dropdown'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowDropdownOptions>
+            )}
+
+            {currentPageSize <= 2 && (
+              <RowCollapseOptions>
+                <RowOptions
+                  type='collapse'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowCollapseOptions>
+            )}
+          </>
+        );
+      },
+    },
+  ];
+
+  // Handler
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
 
@@ -292,168 +221,82 @@ const SuppliersTable = () => {
     toast.success('Successfully delete Supplier!');
     setIsDeleteLoading(false);
   };
-
-  const suppliersColumns: ColumnDef<Supplier>[] = useMemo(
-    () => [
-      {
-        header: 'No',
-        cell: (props) =>
-          tableFilterState.pageSize * (tableFilterState.page - 1) +
-          props.row.index +
-          1,
-      },
-      {
-        accessorKey: 'name',
-        header: 'Nama',
-      },
-      {
-        accessorKey: 'alias',
-        header: 'Alias',
-      },
-      {
-        accessorKey: 'pic',
-        header: 'Nama PIC',
-      },
-      {
-        accessorKey: 'category',
-        header: 'Kategori',
-      },
-      {
-        accessorKey: 'type',
-        header: 'Tipe',
-      },
-      {
-        accessorKey: 'phone',
-        header: 'No. Telp',
-      },
-      {
-        accessorKey: 'email',
-        header: 'Email',
-      },
-      {
-        accessorKey: 'address',
-        header: 'Alamat',
-      },
-      {
-        header: 'Aksi',
-        cell: (props: CellContext<Supplier, unknown>) => {
-          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 deleteClickHandler = () => {
-            setSelectedSupplier(props.row.original);
-            deleteModal.openModal();
-          };
-
-          return (
-            <RowOptionsMenu
-              props={props}
-              popoverPosition={isLast2Rows ? 'top' : 'bottom'}
-              deleteClickHandler={deleteClickHandler}
-            />
-          );
-        },
-      },
-    ],
-    [tableFilterState.pageSize, tableFilterState.page, deleteModal]
-  );
+  const searchChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    updateFilter('search', e.target.value);
+  };
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
+    setPageSize(newVal.value as number);
+  };
 
   return (
     <>
-      <div className='w-full'>
-        {/* Header Section */}
-        <div className='w-full p-3 flex flex-row justify-between gap-3 flex-wrap border-b border-base-content/10'>
-          {/* Action Buttons */}
-          <div className='w-fit flex flex-row gap-3 flex-wrap'>
-            <RequirePermission permissions='lti.master.suppliers.create'>
-              <Button
-                href='/master-data/supplier/add'
-                color='primary'
-                className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
-              >
-                <Icon icon='heroicons:plus' width={20} height={20} />
-                Add Supplier
-              </Button>
-            </RequirePermission>
-          </div>
+      <div className='w-full p-0 sm:p-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
+            <div className='w-full flex flex-row'>
+              <RequirePermission permissions='lti.master.suppliers.create'>
+                <Button
+                  href='/master-data/supplier/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
+            </div>
 
-          {/* Search and Filter */}
-          <div className='flex flex-1 flex-row justify-start sm:justify-end items-center gap-3 flex-wrap'>
             <DebouncedTextInput
               name='search'
-              placeholder='Search'
-              value={tableFilterState.search ?? ''}
+              placeholder='Cari Supplier'
+              value={tableFilterState.search}
               onChange={searchChangeHandler}
-              startAdornment={
-                <Icon
-                  icon='heroicons:magnifying-glass'
-                  width={20}
-                  height={20}
-                />
-              }
-              className={{
-                wrapper: 'w-full min-w-24 max-w-3xs',
-                inputWrapper: 'rounded-xl! shadow-button-soft',
-                input:
-                  'placeholder:font-semibold placeholder:text-base-content/50',
-              }}
+              className={{ wrapper: 'sm:max-w-3xs' }}
             />
+          </div>
 
-            <ButtonFilter
-              values={tableFilterState}
-              excludeFields={['page', 'pageSize', 'search']}
-              onClick={handleFilterModalOpen}
-              className='px-3 py-2.5'
+          <div className='flex flex-row justify-end'>
+            <SelectInput
+              label='Baris'
+              options={ROWS_OPTIONS}
+              value={{
+                label: String(tableFilterState.pageSize),
+                value: tableFilterState.pageSize,
+              }}
+              onChange={pageSizeChangeHandler}
+              className={{ wrapper: 'max-w-28' }}
             />
           </div>
         </div>
 
-        {/* Table Section */}
-        <div className='flex flex-col mb-4'>
-          {isLoading ? (
-            <div className='w-full flex flex-row justify-center items-center p-4'>
-              <span className='loading loading-spinner loading-xl' />
-            </div>
-          ) : !isResponseSuccess(suppliers) || suppliers.data?.length === 0 ? (
-            <div className='p-3'>
-              <SupplierTableSkeleton
-                columns={suppliersColumns}
-                icon={
-                  <Icon
-                    icon='heroicons:document-text'
-                    className='text-white'
-                    width={20}
-                    height={20}
-                  />
-                }
-              />
-            </div>
-          ) : (
-            <Table<Supplier>
-              data={suppliers?.data}
-              columns={suppliersColumns}
-              pageSize={tableFilterState.pageSize}
-              page={suppliers?.meta?.page ?? 0}
-              totalItems={suppliers?.meta?.total_results ?? 0}
-              onPageChange={setPage}
-              onPageSizeChange={setPageSize}
-              isLoading={false}
-              sorting={sorting}
-              setSorting={setSorting}
-              className={{
-                containerClassName: 'p-3 mb-0',
-                headerColumnClassName: 'text-nowrap',
-              }}
-            />
-          )}
-        </div>
+        <Table<Supplier>
+          data={isResponseSuccess(suppliers) ? suppliers?.data : []}
+          columns={suppliersColumns}
+          pageSize={tableFilterState.pageSize}
+          page={isResponseSuccess(suppliers) ? suppliers?.meta?.page : 0}
+          totalItems={
+            isResponseSuccess(suppliers) ? suppliers?.meta?.total_results : 0
+          }
+          onPageChange={setPage}
+          isLoading={isLoading}
+          className={{
+            containerClassName: cn({
+              'mb-20':
+                isResponseSuccess(suppliers) && suppliers?.data?.length === 0,
+            }),
+            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+            tableClassName: 'font-inter w-full table-auto min-h-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+            bodyRowClassName: 'border-b border-b-gray-200',
+            bodyColumnClassName:
+              'px-6 py-3 last:flex last:flex-row last:justify-end',
+          }}
+        />
       </div>
-
       <ConfirmationModal
         ref={deleteModal.ref}
         type='error'
@@ -468,75 +311,6 @@ const SuppliersTable = () => {
           onClick: confirmationModalDeleteClickHandler,
         }}
       />
-
-      {/* Filter Modal */}
-      <Modal
-        ref={filterModal.ref}
-        className={{
-          modal: 'p-0',
-          modalBox: 'p-0 rounded-[0.875rem] xl:max-w-4/12 max-w-sm',
-        }}
-      >
-        {/* Modal Header */}
-        <div className='flex items-center justify-between gap-2 border-b border-base-content/10 p-4'>
-          <div className='flex items-center gap-2 text-primary'>
-            <Icon icon='heroicons:funnel' width={20} height={20} />
-            <h3 className='font-medium text-sm'>Filter Data</h3>
-          </div>
-          <Button
-            variant='link'
-            onClick={filterModal.closeModal}
-            className='text-base-content/50 hover:text-base-content transition-colors cursor-pointer'
-          >
-            <Icon icon='heroicons:x-mark' width={20} height={20} />
-          </Button>
-        </div>
-        <form onSubmit={formik.handleSubmit} onReset={formik.handleReset}>
-          <div className='p-4 flex flex-col gap-1.5'>
-            <SelectInputRadio
-              label='Kategori'
-              placeholder='Pilih Kategori'
-              options={categoryOptions}
-              value={categoryIdValue}
-              onChange={handleFilterCategoryChange}
-              isClearable
-              className={{ wrapper: 'w-full' }}
-            />
-
-            <SelectInputRadio
-              label='Flag Ekspedisi'
-              placeholder='Pilih'
-              options={flagOptions}
-              value={flagValue}
-              onChange={handleFilterFlagChange}
-              isClearable
-              className={{ wrapper: 'w-full' }}
-            />
-          </div>
-
-          {/* Modal Footer */}
-          <div className='flex justify-between items-center gap-4 p-4 border-t border-base-content/10 bg-gray-50'>
-            <Button
-              type='button'
-              variant='soft'
-              className='rounded-lg text-base-content/65 bg-transparent border-none hover:bg-base-content/10 hover:text-base-content/65 transition-colors px-3 py-2'
-              onClick={() => {
-                formik.resetForm();
-                filterModal.closeModal();
-              }}
-            >
-              Reset Filter
-            </Button>
-            <Button
-              type='submit'
-              className='min-w-40 text-sm rounded-lg py-3 text-white font-semibold'
-              disabled={!formik.isValid || formik.isSubmitting}
-            >
-              Apply Filter
-            </Button>
-          </div>
-        </form>
-      </Modal>
     </>
   );
 };

src/components/pages/master-data/supplier/filter/SupplierFilter.ts

@@ -1,11 +0,0 @@
-import { string, boolean, object } from 'yup';
-
-export const SupplierFilterSchema = object().shape({
-  category_id: string().nullable(),
-  flag: boolean().nullable(),
-});
-
-export type SupplierFilterType = {
-  category_id: string | null;
-  flag: boolean | null;
-};

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

@@ -167,26 +167,29 @@ const SupplierForm = ({
     },
   });
 
-  const { setFieldValue } = formik;
+  const { setValues: formikSetValues } = formik;
 
   // Initialize Formik
   useEffect(() => {
-    if (formType !== 'add' && initialValues?.hatchery) {
-      const hatcheryArrays = initialValues.hatchery.split(',');
-      const hatcheryCreatedOptions = hatcheryArrays.map((item) => ({
+    formikSetValues(formikInitialValues);
+    if (formType != 'add') {
+      const hatcheryArrays = formikInitialValues.hatchery?.split(',');
+      const hatcheryCreatedOptions = hatcheryArrays?.map((item) => ({
         value: item,
         label: item,
       }));
-      setHatcheryOptionValues(hatcheryCreatedOptions);
+      setHatcheryOptionValues(hatcheryCreatedOptions ?? []);
     }
-  }, [formType, initialValues?.hatchery]);
-
+  }, [formikSetValues, formikInitialValues, setHatcheryOptionValues]);
   useEffect(() => {
     const commaSeparatedValues = hatcheryOptionsValues
       .map((item) => item.value)
       .join(',');
-    setFieldValue('hatchery', commaSeparatedValues);
-  }, [hatcheryOptionsValues, setFieldValue]);
+    formikSetValues({
+      ...formik.values,
+      hatchery: commaSeparatedValues,
+    });
+  }, [hatcheryOptionsValues, formikSetValues]);
 
   // Option Handler
   const typeChangeHandler = (val: OptionType | OptionType[] | null) => {

src/components/pages/master-data/supplier/skeleton/SupplierTableSkeleton.tsx

@@ -1,37 +0,0 @@
-import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
-import Table from '@/components/Table';
-import { Supplier } from '@/types/api/master-data/supplier';
-import { ColumnDef } from '@tanstack/react-table';
-
-const SupplierTableSkeleton = ({
-  columns,
-  icon,
-  title = 'No Data Available',
-  subtitle = 'There is no supplier data displayed. Enter supplier data to get started.',
-}: {
-  columns: ColumnDef<Supplier>[];
-  icon: React.ReactNode;
-  title?: string;
-  subtitle?: string;
-}) => {
-  return (
-    <div className='relative size-full'>
-      <Table
-        data={[]}
-        columns={columns}
-        isLoading={true}
-        className={{
-          skeletonCellClassName: 'animate-none w-full h-5 bg-base-content/4',
-          headerColumnClassName: 'whitespace-nowrap',
-          containerClassName: 'mb-0 overflow-hidden',
-          tableWrapperClassName: 'overflow-hidden',
-        }}
-      />
-      <div className='absolute inset-0 flex items-center justify-center'>
-        <DataStateSkeleton icon={icon} title={title} description={subtitle} />
-      </div>
-    </div>
-  );
-};
-
-export default SupplierTableSkeleton;

src/components/pages/master-data/uom/UomsTable.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ChangeEventHandler, useEffect, useMemo, useState } from 'react';
+import { ChangeEventHandler, useEffect, useState } from 'react';
 import useSWR from 'swr';
 import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
 import toast from 'react-hot-toast';
@@ -11,101 +11,75 @@ import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import Button from '@/components/Button';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import RequirePermission from '@/components/helper/RequirePermission';
-import PopoverButton from '@/components/popover/PopoverButton';
-import PopoverContent from '@/components/popover/PopoverContent';
-import UomTableSkeleton from '@/components/pages/master-data/uom/skeleton/UomTableSkeleton';
 
 import { Uom } from '@/types/api/master-data/uom';
 import { UomApi } from '@/services/api/master-data';
+import { cn } from '@/lib/helper';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
-import { usePathname } from 'next/navigation';
-import { useUiStore } from '@/stores/ui/ui.store';
+import { ROWS_OPTIONS } from '@/config/constant';
 
 const RowOptionsMenu = ({
-  popoverPosition = 'bottom',
+  type = 'dropdown',
   props,
   deleteClickHandler,
 }: {
-  popoverPosition: 'bottom' | 'top';
+  type: 'dropdown' | 'collapse';
   props: CellContext<Uom, unknown>;
   deleteClickHandler: () => void;
 }) => {
-  const popoverId = `uom#${props.row.original.id}`;
-  const popoverAnchorName = `--anchor-uom#${props.row.original.id}`;
-
-  const closePopover = () => {
-    document.getElementById(popoverId)?.hidePopover();
-  };
-
   return (
-    <div className='relative'>
-      <PopoverButton
-        tabIndex={0}
-        variant='ghost'
-        color='none'
-        popoverTarget={popoverId}
-        anchorName={popoverAnchorName}
-      >
-        <Icon icon='material-symbols:more-vert' width={16} height={16} />
-      </PopoverButton>
+    <RowOptionsMenuWrapper type={type}>
+      <RequirePermission permissions='lti.master.uoms.detail'>
+        <Button
+          href={`/master-data/uom/detail/?uomId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
+          className='justify-start text-sm'
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+      </RequirePermission>
 
-      <PopoverContent
-        id={popoverId}
-        anchorName={popoverAnchorName}
-        position={popoverPosition === 'bottom' ? 'bottom-start' : 'left'}
-        className='w-full max-w-40 rounded-xl border border-base-content/5 shadow-sm'
-      >
-        <div className='flex flex-col bg-base-100 rounded-xl'>
-          <RequirePermission permissions='lti.master.uoms.detail'>
-            <Button
-              href={`/master-data/uom/detail/?uomId=${props.row.original.id}`}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full'
-              onClick={closePopover}
-            >
-              <Icon icon='heroicons:eye' width={20} height={20} />
-              Detail
-            </Button>
-          </RequirePermission>
-          <RequirePermission permissions='lti.master.uoms.update'>
-            <Button
-              href={`/master-data/uom/detail/edit/?uomId=${props.row.original.id}`}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full'
-              onClick={closePopover}
-            >
-              <Icon icon='heroicons:pencil-square' width={20} height={20} />
-              Edit
-            </Button>
-          </RequirePermission>
-          <RequirePermission permissions='lti.master.uoms.delete'>
-            <Button
-              onClick={() => {
-                deleteClickHandler();
-                closePopover();
-              }}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full text-error hover:text-error'
-            >
-              <Icon icon='heroicons:trash' width={20} height={20} />
-              Delete
-            </Button>
-          </RequirePermission>
-        </div>
-      </PopoverContent>
-    </div>
+      <RequirePermission permissions='lti.master.uoms.update'>
+        <Button
+          href={`/master-data/uom/detail/edit/?uomId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.uoms.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
+    </RowOptionsMenuWrapper>
   );
 };
 
 const UomsTable = () => {
-  const { searchValue, setSearchValue, setTableState } = useUiStore();
-  const pathname = usePathname();
-
   const {
     state: tableFilterState,
     updateFilter,
@@ -113,25 +87,10 @@ const UomsTable = () => {
     setPageSize,
     toQueryString: getTableFilterQueryString,
   } = useTableFilter({
-    initial: {
-      search: searchValue,
-    },
-    paramMap: {
-      page: 'page',
-      pageSize: 'limit',
-    },
+    initial: { search: '', nameSort: '' },
+    paramMap: { page: 'page', pageSize: 'limit', nameSort: 'sort_name' },
   });
 
-  useEffect(() => {
-    updateFilter('search', searchValue);
-  }, [searchValue, updateFilter]);
-
-  useEffect(() => {
-    setTableState('uoms-table', pathname);
-  }, [pathname, setTableState]);
-
-  const [sorting, setSorting] = useState<SortingState>([]);
-
   const {
     data: uoms,
     isLoading,
@@ -142,13 +101,65 @@ const UomsTable = () => {
   );
 
   const deleteModal = useModal();
+
   const [selectedUom, setSelectedUom] = useState<Uom | undefined>(undefined);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
-  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
-    setSearchValue(e.target.value);
-    updateFilter('search', e.target.value);
-  };
+  const [sorting, setSorting] = useState<SortingState>([]);
+
+  const uomsColumns: ColumnDef<Uom>[] = [
+    {
+      header: '#',
+      cell: (props) =>
+        tableFilterState.pageSize * (tableFilterState.page - 1) +
+        props.row.index +
+        1,
+    },
+    {
+      accessorKey: 'name',
+      header: 'Nama',
+    },
+    {
+      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 deleteClickHandler = () => {
+          setSelectedUom(props.row.original);
+          deleteModal.openModal();
+        };
+
+        return (
+          <>
+            {currentPageSize > 2 && (
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowDropdownOptions>
+            )}
+
+            {currentPageSize <= 2 && (
+              <RowCollapseOptions>
+                <RowOptionsMenu
+                  type='collapse'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowCollapseOptions>
+            )}
+          </>
+        );
+      },
+    },
+  ];
 
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
@@ -168,130 +179,93 @@ const UomsTable = () => {
     setIsDeleteLoading(false);
   };
 
-  const uomsColumns: ColumnDef<Uom>[] = useMemo(
-    () => [
-      {
-        header: 'No',
-        cell: (props) =>
-          tableFilterState.pageSize * (tableFilterState.page - 1) +
-          props.row.index +
-          1,
-      },
-      {
-        accessorKey: 'name',
-        header: 'Nama',
-      },
-      {
-        header: 'Aksi',
-        cell: (props: CellContext<Uom, unknown>) => {
-          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 searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
 
-          const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
 
-          const deleteClickHandler = () => {
-            setSelectedUom(props.row.original);
-            deleteModal.openModal();
-          };
+    setPageSize(newVal.value as number);
+  };
 
-          return (
-            <RowOptionsMenu
-              props={props}
-              popoverPosition={isLast2Rows ? 'top' : 'bottom'}
-              deleteClickHandler={deleteClickHandler}
-            />
-          );
-        },
-      },
-    ],
-    [tableFilterState.pageSize, tableFilterState.page, deleteModal]
-  );
+  // track sorting
+  useEffect(() => {
+    const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
+
+    if (!isNameSorted) {
+      updateFilter('nameSort', '');
+    } else {
+      updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
+    }
+  }, [sorting, updateFilter]);
 
   return (
     <>
-      <div className='w-full'>
-        {/* Header Section */}
-        <div className='w-full p-3 flex flex-row justify-between gap-3 flex-wrap border-b border-base-content/10'>
-          {/* Action Buttons */}
-          <div className='w-fit flex flex-row gap-3 flex-wrap'>
-            <RequirePermission permissions='lti.master.uoms.create'>
-              <Button
-                href='/master-data/uom/add'
-                color='primary'
-                className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
-              >
-                <Icon icon='heroicons:plus' width={20} height={20} />
-                Add UOM
-              </Button>
-            </RequirePermission>
-          </div>
+      <div className='w-full p-0 sm:p-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
+            <div className='w-full flex flex-row'>
+              <RequirePermission permissions='lti.master.uoms.create'>
+                <Button
+                  href='/master-data/uom/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
+            </div>
 
-          {/* Search */}
-          <div className='flex flex-1 flex-row justify-start sm:justify-end items-center gap-3 flex-wrap'>
             <DebouncedTextInput
               name='search'
-              placeholder='Search'
-              value={tableFilterState.search ?? ''}
+              placeholder='Cari UOM'
+              value={tableFilterState.search}
               onChange={searchChangeHandler}
-              startAdornment={
-                <Icon
-                  icon='heroicons:magnifying-glass'
-                  width={20}
-                  height={20}
-                />
-              }
-              className={{
-                wrapper: 'w-full min-w-24 max-w-3xs',
-                inputWrapper: 'rounded-xl! shadow-button-soft',
-                input:
-                  'placeholder:font-semibold placeholder:text-base-content/50',
+              className={{ wrapper: 'sm:max-w-3xs' }}
+            />
+          </div>
+
+          <div className='flex flex-row justify-end'>
+            <SelectInput
+              label='Baris'
+              options={ROWS_OPTIONS}
+              value={{
+                label: String(tableFilterState.pageSize),
+                value: tableFilterState.pageSize,
               }}
+              onChange={pageSizeChangeHandler}
+              className={{ wrapper: 'max-w-28' }}
             />
           </div>
         </div>
 
-        {/* Table Section */}
-        <div className='flex flex-col mb-4'>
-          {isLoading ? (
-            <div className='w-full flex flex-row justify-center items-center p-4'>
-              <span className='loading loading-spinner loading-xl' />
-            </div>
-          ) : !isResponseSuccess(uoms) || uoms.data?.length === 0 ? (
-            <div className='p-3'>
-              <UomTableSkeleton
-                columns={uomsColumns}
-                icon={
-                  <Icon
-                    icon='heroicons:document-text'
-                    className='text-white'
-                    width={20}
-                    height={20}
-                  />
-                }
-              />
-            </div>
-          ) : (
-            <Table<Uom>
-              data={uoms?.data}
-              columns={uomsColumns}
-              pageSize={tableFilterState.pageSize}
-              page={uoms?.meta?.page ?? 0}
-              totalItems={uoms?.meta?.total_results ?? 0}
-              onPageChange={setPage}
-              onPageSizeChange={setPageSize}
-              isLoading={false}
-              sorting={sorting}
-              setSorting={setSorting}
-              className={{
-                containerClassName: 'p-3 mb-0',
-                headerColumnClassName: 'text-nowrap',
-              }}
-            />
-          )}
-        </div>
+        <Table<Uom>
+          data={isResponseSuccess(uoms) ? uoms?.data : []}
+          columns={uomsColumns}
+          pageSize={tableFilterState.pageSize}
+          page={isResponseSuccess(uoms) ? uoms?.meta?.page : 0}
+          totalItems={isResponseSuccess(uoms) ? uoms?.meta?.total_results : 0}
+          onPageChange={setPage}
+          isLoading={isLoading}
+          sorting={sorting}
+          setSorting={setSorting}
+          className={{
+            containerClassName: cn({
+              'mb-20': isResponseSuccess(uoms) && uoms?.data?.length === 0,
+            }),
+            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+            tableClassName: 'font-inter w-full table-auto min-h-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+            bodyRowClassName: 'border-b border-b-gray-200',
+            bodyColumnClassName:
+              'px-6 py-3 last:flex last:flex-row last:justify-end',
+          }}
+        />
       </div>
 
       <ConfirmationModal

src/components/pages/master-data/uom/skeleton/UomTableSkeleton.tsx

@@ -1,37 +0,0 @@
-import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
-import Table from '@/components/Table';
-import { Uom } from '@/types/api/master-data/uom';
-import { ColumnDef } from '@tanstack/react-table';
-
-const UomTableSkeleton = ({
-  columns,
-  icon,
-  title = 'No Data Available',
-  subtitle = 'There is no uom data displayed. Enter uom data to get started.',
-}: {
-  columns: ColumnDef<Uom>[];
-  icon: React.ReactNode;
-  title?: string;
-  subtitle?: string;
-}) => {
-  return (
-    <div className='relative size-full'>
-      <Table
-        data={[]}
-        columns={columns}
-        isLoading={true}
-        className={{
-          skeletonCellClassName: 'animate-none w-full h-5 bg-base-content/4',
-          headerColumnClassName: 'whitespace-nowrap',
-          containerClassName: 'mb-0 overflow-hidden',
-          tableWrapperClassName: 'overflow-hidden',
-        }}
-      />
-      <div className='absolute inset-0 flex items-center justify-center'>
-        <DataStateSkeleton icon={icon} title={title} description={subtitle} />
-      </div>
-    </div>
-  );
-};
-
-export default UomTableSkeleton;

src/components/pages/master-data/warehouse/WarehousesTable.tsx

@@ -1,128 +1,90 @@
 'use client';
 
-import {
-  ChangeEventHandler,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
-import { usePathname } from 'next/navigation';
+import { ChangeEventHandler, useCallback, useEffect, useState } from 'react';
 import useSWR from 'swr';
-import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
+import {
+  CellContext,
+  ColumnDef,
+  ColumnSort,
+  SortingState,
+} from '@tanstack/react-table';
 import toast from 'react-hot-toast';
-import { useFormik } from 'formik';
 
 import { Icon } from '@iconify/react';
 import Table from '@/components/Table';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import Button from '@/components/Button';
-import Modal, { useModal } from '@/components/Modal';
+import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import RequirePermission from '@/components/helper/RequirePermission';
-import PopoverButton from '@/components/popover/PopoverButton';
-import PopoverContent from '@/components/popover/PopoverContent';
-import WarehouseTableSkeleton from '@/components/pages/master-data/warehouse/skeleton/WarehouseTableSkeleton';
-
-import { OptionType } from '@/components/input/SelectInput';
-import ButtonFilter from '@/components/helper/ButtonFilter';
 
 import { Warehouse } from '@/types/api/master-data/warehouse';
-import { WarehouseApi, AreaApi } from '@/services/api/master-data';
+import { WarehouseApi } from '@/services/api/master-data';
+import { cn } from '@/lib/helper';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
-import { useUiStore } from '@/stores/ui/ui.store';
-import {
-  WarehouseFilterSchema,
-  WarehouseFilterType,
-} from '@/components/pages/master-data/warehouse/filter/WarehouseFilter';
-import { Area } from '@/types/api/master-data/area';
-import SelectInput, { useSelect } from '@/components/input/SelectInput';
-import SelectInputRadio from '@/components/input/SelectInputRadio';
+import { ROWS_OPTIONS } from '@/config/constant';
 
 const RowOptionsMenu = ({
-  popoverPosition = 'bottom',
+  type = 'dropdown',
   props,
   deleteClickHandler,
 }: {
-  popoverPosition: 'bottom' | 'top';
+  type: 'dropdown' | 'collapse';
   props: CellContext<Warehouse, unknown>;
   deleteClickHandler: () => void;
 }) => {
-  const popoverId = `warehouse#${props.row.original.id}`;
-  const popoverAnchorName = `--anchor-warehouse#${props.row.original.id}`;
-
-  const closePopover = () => {
-    document.getElementById(popoverId)?.hidePopover();
-  };
-
   return (
-    <div className='relative'>
-      <PopoverButton
-        tabIndex={0}
-        variant='ghost'
-        color='none'
-        popoverTarget={popoverId}
-        anchorName={popoverAnchorName}
-      >
-        <Icon icon='material-symbols:more-vert' width={16} height={16} />
-      </PopoverButton>
+    <RowOptionsMenuWrapper type={type}>
+      <RequirePermission permissions='lti.master.warehouses.detail'>
+        <Button
+          href={`/master-data/warehouse/detail/?warehouseId=${props.row.original.id}`}
+          variant='ghost'
+          color='primary'
+          className='justify-start text-sm'
+        >
+          <Icon icon='mdi:eye-outline' width={16} height={16} />
+          Detail
+        </Button>
+      </RequirePermission>
 
-      <PopoverContent
-        id={popoverId}
-        anchorName={popoverAnchorName}
-        position={popoverPosition === 'bottom' ? 'bottom-start' : 'left'}
-        className='w-full max-w-40 rounded-xl border border-base-content/5 shadow-sm'
-      >
-        <div className='flex flex-col bg-base-100 rounded-xl'>
-          <RequirePermission permissions='lti.master.warehouses.detail'>
-            <Button
-              href={`/master-data/warehouse/detail/?warehouseId=${props.row.original.id}`}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full'
-              onClick={closePopover}
-            >
-              <Icon icon='heroicons:eye' width={20} height={20} />
-              Detail
-            </Button>
-          </RequirePermission>
-          <RequirePermission permissions='lti.master.warehouses.update'>
-            <Button
-              href={`/master-data/warehouse/detail/edit/?warehouseId=${props.row.original.id}`}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full'
-              onClick={closePopover}
-            >
-              <Icon icon='heroicons:pencil-square' width={20} height={20} />
-              Edit
-            </Button>
-          </RequirePermission>
-          <RequirePermission permissions='lti.master.warehouses.delete'>
-            <Button
-              onClick={() => {
-                deleteClickHandler();
-                closePopover();
-              }}
-              variant='ghost'
-              color='none'
-              className='p-3 justify-start text-sm font-semibold w-full text-error hover:text-error'
-            >
-              <Icon icon='heroicons:trash' width={20} height={20} />
-              Delete
-            </Button>
-          </RequirePermission>
-        </div>
-      </PopoverContent>
-    </div>
+      <RequirePermission permissions='lti.master.warehouses.update'>
+        <Button
+          href={`/master-data/warehouse/detail/edit/?warehouseId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+          Edit
+        </Button>
+      </RequirePermission>
+
+      <RequirePermission permissions='lti.master.warehouses.delete'>
+        <Button
+          onClick={deleteClickHandler}
+          variant='ghost'
+          color='error'
+          className='text-error hover:text-inherit'
+        >
+          <Icon
+            icon='material-symbols:delete-outline-rounded'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Delete
+        </Button>
+      </RequirePermission>
+    </RowOptionsMenuWrapper>
   );
 };
 
 const WarehousesTable = () => {
-  const { searchValue, setSearchValue, setTableState } = useUiStore();
-  const pathname = usePathname();
-
   const {
     state: tableFilterState,
     updateFilter,
@@ -132,139 +94,23 @@ const WarehousesTable = () => {
   } = useTableFilter({
     initial: {
       search: '',
-      areaFilter: '',
-      activeProjectFlockFilter: '',
+      nameSort: '',
+      typeSort: '',
+      areaSort: '',
+      locationSort: '',
+      kandangSort: '',
     },
     paramMap: {
       page: 'page',
       pageSize: 'limit',
-      areaFilter: 'area_id',
-      activeProjectFlockFilter: 'active_project_flock',
+      nameSort: 'sort_name',
+      typeSort: 'sort_type',
+      areaSort: ' sort_area',
+      locationSort: ' sort_location',
+      kandangSort: ' sort_kandang',
     },
   });
 
-  // ===== FILTER MODAL STATE =====
-  const filterModal = useModal();
-
-  // ===== FORMIK SETUP =====
-  const formik = useFormik<WarehouseFilterType>({
-    initialValues: {
-      area_id: null,
-      active_project_flock: false,
-    },
-    validationSchema: WarehouseFilterSchema,
-    onSubmit: (values, { setSubmitting }) => {
-      updateFilter('areaFilter', values.area_id || '');
-      updateFilter(
-        'activeProjectFlockFilter',
-        values.active_project_flock === true ? 'true' : ''
-      );
-      filterModal.closeModal();
-      setSubmitting(false);
-    },
-    onReset: () => {
-      updateFilter('areaFilter', '');
-      updateFilter('activeProjectFlockFilter', '');
-      formik.setFieldValue('active_project_flock', false);
-    },
-  });
-
-  const { setFieldValue } = formik;
-
-  // ===== AREA OPTIONS =====
-  const {
-    setInputValue: setAreaInputValue,
-    options: areaOptions,
-    isLoadingOptions: isLoadingAreaOptions,
-    loadMore: loadMoreAreas,
-  } = useSelect<Area>(
-    filterModal.open ? AreaApi.basePath : null,
-    'id',
-    'name',
-    'search'
-  );
-
-  // ===== ACTIVE PROJECT FLOCK OPTIONS =====
-  const activeProjectFlockOptions = useMemo(
-    () => [
-      { value: 'true', label: 'Kandang Aktif' },
-      { value: 'false', label: 'Semua Kandang' },
-    ],
-    []
-  );
-
-  // ===== FILTER HANDLERS =====
-  const handleFilterAreaChange = useCallback(
-    (val: OptionType | OptionType[] | null) => {
-      const area = val as OptionType | null;
-      const areaId = area?.value ? String(area.value) : null;
-
-      formik.setFieldValue('area_id', areaId);
-    },
-    [formik]
-  );
-
-  const handleFilterActiveProjectFlockChange = useCallback(
-    (val: OptionType | OptionType[] | null) => {
-      const option = val as OptionType | null;
-      const boolValue =
-        option?.value === 'true'
-          ? true
-          : option?.value === 'false'
-            ? false
-            : null;
-
-      formik.setFieldValue('active_project_flock', boolValue);
-    },
-    [formik]
-  );
-
-  // ===== FILTER HELPERS =====
-  const areaIdValue = useMemo(() => {
-    if (!formik.values.area_id) return null;
-    return (
-      areaOptions.find((opt) => String(opt.value) === formik.values.area_id) ||
-      null
-    );
-  }, [formik.values.area_id, areaOptions]);
-
-  const activeProjectFlockValue = useMemo(() => {
-    if (formik.values.active_project_flock === null) return null;
-    return (
-      activeProjectFlockOptions.find(
-        (opt) => opt.value === String(formik.values.active_project_flock)
-      ) || activeProjectFlockOptions[1]
-    );
-  }, [formik.values.active_project_flock, activeProjectFlockOptions]);
-
-  // ===== HANDLE FILTER MODAL OPEN =====
-  const handleFilterModalOpen = () => {
-    filterModal.openModal();
-    formik.validateForm();
-  };
-
-  useEffect(() => {
-    if (filterModal.open) {
-      const activeProjectFlockValue =
-        tableFilterState.activeProjectFlockFilter === 'true' ? true : false; // Default ke false (Semua Kandang)
-      setFieldValue('active_project_flock', activeProjectFlockValue);
-    }
-  }, [
-    filterModal.open,
-    tableFilterState.activeProjectFlockFilter,
-    setFieldValue,
-  ]);
-
-  useEffect(() => {
-    updateFilter('search', searchValue);
-  }, [searchValue, updateFilter]);
-
-  useEffect(() => {
-    setTableState('warehouses-table', pathname);
-  }, [pathname, setTableState]);
-
-  const [sorting, setSorting] = useState<SortingState>([]);
-
   const {
     data: warehouses,
     isLoading,
@@ -275,15 +121,101 @@ const WarehousesTable = () => {
   );
 
   const deleteModal = useModal();
+
   const [selectedWarehouse, setSelectedWarehouse] = useState<
     Warehouse | undefined
   >(undefined);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
-  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
-    setSearchValue(e.target.value);
-    updateFilter('search', e.target.value);
-  };
+  const [sorting, setSorting] = useState<SortingState>([]);
+
+  const warehousesColumns: ColumnDef<Warehouse>[] = [
+    {
+      header: '#',
+      cell: (props) =>
+        tableFilterState.pageSize * (tableFilterState.page - 1) +
+        props.row.index +
+        1,
+    },
+    {
+      accessorKey: 'name',
+      header: 'Nama',
+    },
+    {
+      accessorKey: 'type',
+      header: 'Tipe',
+    },
+    {
+      accessorKey: 'area',
+      header: 'Area',
+      cell: (props) => props.row.original.area.name,
+    },
+    {
+      accessorKey: 'location',
+      header: 'Lokasi',
+      cell: (props) => {
+        if (
+          props.row.original.type === 'LOKASI' ||
+          props.row.original.type === 'KANDANG'
+        ) {
+          return props.row.original.location.name;
+        } else {
+          return '-';
+        }
+      },
+    },
+    {
+      accessorKey: 'kandang',
+      header: 'Kandang',
+      cell: (props) => {
+        if (props.row.original.type === 'KANDANG') {
+          return props.row.original.kandang.name;
+        } else {
+          return '-';
+        }
+      },
+    },
+    {
+      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 deleteClickHandler = () => {
+          setSelectedWarehouse(props.row.original);
+          deleteModal.openModal();
+        };
+
+        return (
+          <>
+            {currentPageSize > 2 && (
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowDropdownOptions>
+            )}
+
+            {currentPageSize <= 2 && (
+              <RowCollapseOptions>
+                <RowOptionsMenu
+                  type='collapse'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowCollapseOptions>
+            )}
+          </>
+        );
+      },
+    },
+  ];
 
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
@@ -305,169 +237,118 @@ const WarehousesTable = () => {
     setIsDeleteLoading(false);
   };
 
-  const warehousesColumns: ColumnDef<Warehouse>[] = useMemo(
-    () => [
-      {
-        header: 'No',
-        cell: (props) =>
-          tableFilterState.pageSize * (tableFilterState.page - 1) +
-          props.row.index +
-          1,
-      },
-      {
-        accessorKey: 'name',
-        header: 'Nama',
-      },
-      {
-        accessorKey: 'type',
-        header: 'Tipe',
-      },
-      {
-        accessorFn: (row) => row.area?.name ?? '-',
-        header: 'Area',
-      },
-      {
-        accessorKey: 'location',
-        header: 'Lokasi',
-        cell: (props) => {
-          if (
-            props.row.original.type === 'LOKASI' ||
-            props.row.original.type === 'KANDANG'
-          ) {
-            return props.row.original.location?.name ?? '-';
-          }
-          return '-';
-        },
-      },
-      {
-        accessorKey: 'kandang',
-        header: 'Kandang',
-        cell: (props) => {
-          if (props.row.original.type === 'KANDANG') {
-            return props.row.original.kandang?.name ?? '-';
-          }
-          return '-';
-        },
-      },
-      {
-        header: 'Aksi',
-        cell: (props: CellContext<Warehouse, unknown>) => {
-          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 searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
 
-          const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
 
-          const deleteClickHandler = () => {
-            setSelectedWarehouse(props.row.original);
-            deleteModal.openModal();
-          };
+    setPageSize(newVal.value as number);
+  };
 
-          return (
-            <RowOptionsMenu
-              props={props}
-              popoverPosition={isLast2Rows ? 'top' : 'bottom'}
-              deleteClickHandler={deleteClickHandler}
-            />
-          );
-        },
-      },
-    ],
-    [tableFilterState.pageSize, tableFilterState.page, deleteModal]
+  const updateSortingFilter = useCallback(
+    (
+      sortName: Exclude<keyof typeof tableFilterState, 'page' | 'pageSize'>,
+      sortFilter: ColumnSort | undefined
+    ) => {
+      if (!sortFilter) {
+        updateFilter(sortName, '');
+      } else {
+        updateFilter(sortName, sortFilter.desc ? 'desc' : 'asc');
+      }
+    },
+    [updateFilter]
   );
 
+  // track sorting
+  useEffect(() => {
+    const nameSortFilter = sorting.find((sortItem) => sortItem.id === 'name');
+    const typeSortFilter = sorting.find((sortItem) => sortItem.id === 'type');
+    const areaSortFilter = sorting.find((sortItem) => sortItem.id === 'area');
+    const locationSortFilter = sorting.find(
+      (sortItem) => sortItem.id === 'location'
+    );
+    const kandangSortFilter = sorting.find(
+      (sortItem) => sortItem.id === 'kandang'
+    );
+
+    updateSortingFilter('nameSort', nameSortFilter);
+    updateSortingFilter('typeSort', typeSortFilter);
+    updateSortingFilter('areaSort', areaSortFilter);
+    updateSortingFilter('locationSort', locationSortFilter);
+    updateSortingFilter('kandangSort', kandangSortFilter);
+  }, [sorting, updateSortingFilter]);
+
   return (
     <>
-      <div className='w-full'>
-        {/* Header Section */}
-        <div className='w-full p-3 flex flex-row justify-between gap-3 flex-wrap border-b border-base-content/10'>
-          {/* Action Buttons */}
-          <div className='w-fit flex flex-row gap-3 flex-wrap'>
-            <RequirePermission permissions='lti.master.warehouses.create'>
-              <Button
-                href='/master-data/warehouse/add'
-                color='primary'
-                className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
-              >
-                <Icon icon='heroicons:plus' width={20} height={20} />
-                Add Warehouse
-              </Button>
-            </RequirePermission>
-          </div>
+      <div className='w-full p-0 sm:p-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
+            <div className='w-full flex flex-row'>
+              <RequirePermission permissions='lti.master.warehouses.create'>
+                <Button
+                  href='/master-data/warehouse/add'
+                  variant='outline'
+                  color='primary'
+                  className='w-full sm:w-fit'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} />
+                  Tambah
+                </Button>
+              </RequirePermission>
+            </div>
 
-          {/* Search and Filter */}
-          <div className='flex flex-1 flex-row justify-start sm:justify-end items-center gap-3 flex-wrap'>
             <DebouncedTextInput
               name='search'
-              placeholder='Search'
-              value={tableFilterState.search ?? ''}
+              placeholder='Cari Warehouse'
+              value={tableFilterState.search}
               onChange={searchChangeHandler}
-              startAdornment={
-                <Icon
-                  icon='heroicons:magnifying-glass'
-                  width={20}
-                  height={20}
-                />
-              }
-              className={{
-                wrapper: 'w-full min-w-24 max-w-3xs',
-                inputWrapper: 'rounded-xl! shadow-button-soft',
-                input:
-                  'placeholder:font-semibold placeholder:text-base-content/50',
-              }}
+              className={{ wrapper: 'sm:max-w-3xs' }}
             />
+          </div>
 
-            <ButtonFilter
-              values={tableFilterState}
-              excludeFields={['page', 'pageSize', 'search']}
-              onClick={handleFilterModalOpen}
-              className='px-3 py-2.5'
+          <div className='flex flex-row justify-end'>
+            <SelectInput
+              label='Baris'
+              options={ROWS_OPTIONS}
+              value={{
+                label: String(tableFilterState.pageSize),
+                value: tableFilterState.pageSize,
+              }}
+              onChange={pageSizeChangeHandler}
+              className={{ wrapper: 'max-w-28' }}
             />
           </div>
         </div>
 
-        {/* Table Section */}
-        <div className='flex flex-col mb-4'>
-          {isLoading ? (
-            <div className='w-full flex flex-row justify-center items-center p-4'>
-              <span className='loading loading-spinner loading-xl' />
-            </div>
-          ) : !isResponseSuccess(warehouses) ||
-            warehouses.data?.length === 0 ? (
-            <div className='p-3'>
-              <WarehouseTableSkeleton
-                columns={warehousesColumns}
-                icon={
-                  <Icon
-                    icon='heroicons:document-text'
-                    className='text-white'
-                    width={20}
-                    height={20}
-                  />
-                }
-              />
-            </div>
-          ) : (
-            <Table<Warehouse>
-              data={warehouses?.data}
-              columns={warehousesColumns}
-              pageSize={tableFilterState.pageSize}
-              page={warehouses?.meta?.page ?? 0}
-              totalItems={warehouses?.meta?.total_results ?? 0}
-              onPageChange={setPage}
-              onPageSizeChange={setPageSize}
-              isLoading={false}
-              sorting={sorting}
-              setSorting={setSorting}
-              className={{
-                containerClassName: 'p-3 mb-0',
-                headerColumnClassName: 'text-nowrap',
-              }}
-            />
-          )}
-        </div>
+        <Table<Warehouse>
+          data={isResponseSuccess(warehouses) ? warehouses?.data : []}
+          columns={warehousesColumns}
+          pageSize={tableFilterState.pageSize}
+          page={isResponseSuccess(warehouses) ? warehouses?.meta?.page : 0}
+          totalItems={
+            isResponseSuccess(warehouses) ? warehouses?.meta?.total_results : 0
+          }
+          onPageChange={setPage}
+          isLoading={isLoading}
+          sorting={sorting}
+          setSorting={setSorting}
+          className={{
+            containerClassName: cn({
+              'mb-20':
+                isResponseSuccess(warehouses) && warehouses?.data?.length === 0,
+            }),
+            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+            tableClassName: 'font-inter w-full table-auto min-h-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+            bodyRowClassName: 'border-b border-b-gray-200',
+            bodyColumnClassName:
+              'px-6 py-3 last:flex last:flex-row last:justify-end',
+          }}
+        />
       </div>
 
       <ConfirmationModal
@@ -484,77 +365,6 @@ const WarehousesTable = () => {
           onClick: confirmationModalDeleteClickHandler,
         }}
       />
-
-      {/* Filter Modal */}
-      <Modal
-        ref={filterModal.ref}
-        className={{
-          modal: 'p-0',
-          modalBox: 'p-0 rounded-[0.875rem] xl:max-w-4/12 max-w-sm',
-        }}
-      >
-        {/* Modal Header */}
-        <div className='flex items-center justify-between gap-2 border-b border-base-content/10 p-4'>
-          <div className='flex items-center gap-2 text-primary'>
-            <Icon icon='heroicons:funnel' width={20} height={20} />
-            <h3 className='font-medium text-sm'>Filter Data</h3>
-          </div>
-          <Button
-            variant='link'
-            onClick={filterModal.closeModal}
-            className='text-base-content/50 hover:text-base-content transition-colors cursor-pointer'
-          >
-            <Icon icon='heroicons:x-mark' width={20} height={20} />
-          </Button>
-        </div>
-        <form onSubmit={formik.handleSubmit} onReset={formik.handleReset}>
-          <div className='p-4 flex flex-col gap-1.5'>
-            <SelectInput
-              label='Area'
-              placeholder='Pilih Area'
-              options={areaOptions}
-              value={areaIdValue}
-              onChange={handleFilterAreaChange}
-              onInputChange={setAreaInputValue}
-              isLoading={isLoadingAreaOptions}
-              isClearable
-              onMenuScrollToBottom={loadMoreAreas}
-              className={{ wrapper: 'w-full' }}
-            />
-
-            <SelectInputRadio
-              label='Filter Berdasarkan'
-              placeholder='Pilih'
-              options={activeProjectFlockOptions}
-              value={activeProjectFlockValue}
-              onChange={handleFilterActiveProjectFlockChange}
-              className={{ wrapper: 'w-full' }}
-            />
-          </div>
-
-          {/* Modal Footer */}
-          <div className='flex justify-between items-center gap-4 p-4 border-t border-base-content/10 bg-gray-50'>
-            <Button
-              type='button'
-              variant='soft'
-              className='rounded-lg text-base-content/65 bg-transparent border-none hover:bg-base-content/10 hover:text-base-content/65 transition-colors px-3 py-2'
-              onClick={() => {
-                formik.resetForm();
-                filterModal.closeModal();
-              }}
-            >
-              Reset Filter
-            </Button>
-            <Button
-              type='submit'
-              className='min-w-40 text-sm rounded-lg py-3 text-white font-semibold'
-              disabled={!formik.isValid || formik.isSubmitting}
-            >
-              Apply Filter
-            </Button>
-          </div>
-        </form>
-      </Modal>
     </>
   );
 };