fix: disabled deliver item button if is submitting and set the is loading prop

All catch blocks in singleApproval, bulkApprovals (both classes), and
delivery now return error.response?.data for axios errors and undefined
otherwise, consistent with the BaseApiService pattern.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.gitignore

@@ -48,3 +48,6 @@ next-env.d.ts
 
 # rtk
 rtk.exe
+
+# local specs
+/local-specs

.rtk/filters.toml

@@ -0,0 +1,13 @@
+# Project-local RTK filters — commit this file with your repo.
+# Filters here override user-global and built-in filters.
+# Docs: https://github.com/rtk-ai/rtk#custom-filters
+schema_version = 1
+
+# Example: suppress build noise from a custom tool
+# [filters.my-tool]
+# description = "Compact my-tool output"
+# match_command = "^my-tool\\s+build"
+# strip_ansi = true
+# strip_lines_matching = ["^\\s*$", "^Downloading", "^Installing"]
+# max_lines = 30
+# on_empty = "my-tool: ok"

CLAUDE.md

@@ -80,76 +80,124 @@ Data tables across all modules (master-data, inventory, finance, purchase, etc.)
    - Apply to: search handlers, filter form submissions, reset handlers
 
 3. **Create custom formikResetHandler function**
-   - Clear each filter with `updateFilter(fieldName, defaultValue, true)`
+   - Call `resetFilter()` (single call — resets all `useTableFilter` state to defaults)
-   - Call `formik.resetForm({ values: { ...defaults } })`
+   - Reset any local error state (e.g. `setHasDateError(false)`, dismiss toasts)
-   - Close the modal at the end
+   - Call `formik.resetForm({ values: { ...defaults } })` to sync formik to defaults
-   - Attach to both button `onClick` and form `onReset` handler
+   - Call `filterModal.closeModal()` at the end
+   - Attach to form `onReset` handler (not `formik.handleReset`)
 
-**Optimization: Avoid useCallback for simple handlers**
+   ```tsx
+   const formikResetHandler = () => {
+     resetFilter();
+     setHasDateError(false);
+     if (dateErrorShown) { toast.dismiss(); setDateErrorShown(false); }
+     formik.resetForm({ values: { start_date: '', end_date: '', customers: [], filterBy: undefined } });
+     filterModal.closeModal();
+   };
+   // ...
+   <form onSubmit={formik.handleSubmit} onReset={formikResetHandler}>
+   ```
 
-- `useCallback` adds overhead and is only useful for complex logic or memoized child components
+**Optimization: Avoid useCallback and useMemo for trivial operations**
-- Simple pass-through handlers don't need it:
+
+- `useCallback` and `useMemo` add overhead; only use them when the computation is expensive or the result is passed to a memoized child
+- Simple derivations and pass-through handlers don't need them:
 
   ```tsx
-  // ✅ Good: Simple handler without useCallback
+  // ✅ Good: plain derivation
-  const handleFilterChange = (val) => setFieldValue('location', val);
+  const data = isResponseSuccess(response) ? (response.data ?? []) : [];
+  const meta =
+    isResponseSuccess(response) && response.meta ? response.meta : null;
 
-  // ❌ Avoid: Unnecessary useCallback overhead
+  // ❌ Avoid: useMemo for trivial conditional access
-  const handleFilterChange = useCallback(
+  const data = useMemo(
+    () => (isResponseSuccess(response) ? (response.data ?? []) : []),
+    [response]
+  );
+
+  // ✅ Good: simple handler
+  const handleChange = (val) => setFieldValue('location', val);
+
+  // ❌ Avoid: unnecessary useCallback
+  const handleChange = useCallback(
     (val) => setFieldValue('location', val),
     [setFieldValue]
   );
   ```
 
+- `useMemo` IS justified for large column definition arrays (TanStack Table re-processes on every render)
+
 **Best practice: Store OptionType objects directly, not IDs**
 
-For select inputs, store the complete `OptionType` object in both formik state and tableFilterState. This eliminates the need for computed helper values (like searching options arrays to find the matching object).
+For select inputs, store the complete `OptionType` object (or `OptionType[]` for multi-select) in both formik state and tableFilterState. `useTableFilter`'s `serializeValue` handles serialization automatically:
+
+- `OptionType<T>` → serialized as `String(value)` in the query string
+- `OptionType<T>[]` → serialized as comma-separated values (CSV) — ideal for multi-select API params like `customer_ids`, `sales_ids`
 
 ```tsx
-// Type the useTableFilter with the filter state structure
 const { state: tableFilterState, updateFilter, ... } = useTableFilter<{
   search: string;
-  locationFilter?: OptionType<string>;
+  customers: OptionType<number>[];     // multi-select → serializes as CSV
-  picFilter?: OptionType<string>;
+  location?: OptionType<string>;       // single-select → serializes as value string
+  filterBy?: OptionType<string>;       // single-select radio
 }>({
   initial: {
     search: '',
-    locationFilter: undefined,
+    customers: [],
-    picFilter: undefined
+    location: undefined,
+    filterBy: undefined,
   },
   paramMap: {
     page: 'page',
     pageSize: 'limit',
-    locationFilter: 'location_id',
+    customers: 'customer_ids',   // serializes OptionType[] → "1,2,3"
-    picFilter: 'pic_id',
+    location: 'location_id',     // serializes OptionType → "abc"
+    filterBy: 'filter_by',
   },
   persist: true,
-  storeName: 'kandangs-table',
+  storeName: 'my-table',
 });
 
-// Initialize formik with tableFilterState values (now typed OptionType objects)
+// Initialize formik directly from tableFilterState (no hardcoded defaults)
-const formik = useFormik<KandangFilterType>({
+const formik = useFormik({
   initialValues: {
-    location: tableFilterState.locationFilter,
+    customers: tableFilterState.customers,
-    pic: tableFilterState.picFilter,
+    location: tableFilterState.location,
+    filterBy: tableFilterState.filterBy,
   },
   ...
 });
 
-// Handlers store the complete OptionType, not just the ID
+// Use formik values directly — no computed helpers needed
-const handleFilterLocationChange = useCallback(
+<SelectInputCheckbox value={formik.values.customers} onChange={(val) => formik.setFieldValue('customers', Array.isArray(val) ? val : [])} />
-  (val) => setFieldValue('location', val),
+<SelectInput        value={formik.values.location}  onChange={(val) => formik.setFieldValue('location', val)} />
-  [setFieldValue]
+<SelectInputRadio   value={formik.values.filterBy ?? null} onChange={(val) => formik.setFieldValue('filterBy', !Array.isArray(val) ? (val ?? undefined) : undefined)} />
-);
-
-// Use formik values directly in select inputs (no computed helpers needed)
-<SelectInput
-  value={formik.values.location}
-  onChange={handleFilterLocationChange}
-  ...
-/>
 ```
 
+**Filter field naming convention**
+
+- Multi-select fields: use plural entity name — `customers`, `salesPersons`, `locations`
+- Single-select fields: use descriptive camelCase — `filterBy`, `status`, `category`
+- No `Filter` suffix (e.g. avoid `customerFilter`, `locationFilter`)
+
+**Filter modal: pass `openModal` directly, never use `enableReinitialize`**
+
+`enableReinitialize: true` resets formik mid-interaction whenever `tableFilterState` changes, breaking the modal UX. Pass `filterModal.openModal` directly to the button — no ref wrapper needed. Formik retains its last state across open/close, which is acceptable UX (values sync with `tableFilterState` on submit and reset anyway).
+
+```tsx
+// ❌ Avoid: enableReinitialize breaks modal mid-interaction
+const formik = useFormik({ initialValues: { ... }, enableReinitialize: true });
+
+// ❌ Avoid: unnecessary ref indirection
+const handleFilterModalOpenRef = useRef(() => {});
+handleFilterModalOpenRef.current = () => { formik.setValues({...}); filterModal.openModal(); };
+
+// ✅ Correct: pass openModal directly
+<ButtonFilter onClick={filterModal.openModal} ... />
+```
+
+Include `filterModal.openModal` in the `useEffect` deps array when it's used inside the effect.
+
 **Apply this pattern to:**
 
 - Any data table component across any module that needs persistent filters
@@ -159,7 +207,31 @@ const handleFilterLocationChange = useCallback(
 **Reference implementations:**
 
 - `SupplierTable`, `KandangsTable`, `LocationsTable`, `CustomersTable` in `src/components/pages/master-data/`
-- Use same pattern for data tables in other modules (inventory, finance, purchase, etc.)
+- `BalanceMonitoringTab` in `src/components/pages/report/finance/tab/` — multi-select + radio + date range
+
+## SWR fetch pattern
+
+Use `FinanceApi.getAllFetcher` (or the relevant service's `getAllFetcher`) when the result type matches the service generic `T`. When it differs, use `httpClientFetcher` with an explicit type:
+
+```tsx
+// ✅ Same type as service generic — use getAllFetcher
+const { data } = useSWR(
+  `${Api.basePath}${getTableFilterQueryString()}`,
+  Api.getAllFetcher
+);
+
+// ✅ Different type — use httpClientFetcher with explicit useSWR type
+const { data } = useSWR<
+  BaseApiResponse<BalanceMonitoringRow[]>,
+  AxiosError<BaseApiResponse>,
+  SWRHttpKey
+>(
+  `${FinanceApi.basePath}/balance-monitoring${getTableFilterQueryString()}`,
+  httpClientFetcher
+);
+```
+
+Always name the `toQueryString` alias `getTableFilterQueryString` when destructuring from `useTableFilter`.
 
 ## Server-side sorting pattern
 
@@ -260,3 +332,155 @@ const handleExportExcel = useCallback(async () => {
 - Do **not** import `xlsx`, `@react-pdf/renderer`, `jspdf`, `exceljs` in page/tab components.
 
 **Reference implementation:** `MarketingReportApiService.exportDailyMarketingToExcel` / `exportDailyMarketingToPDF` in [src/services/api/report/marketing-report.ts](src/services/api/report/marketing-report.ts), consumed by [src/components/pages/report/marketing/tab/DailyMarketingTab.tsx](src/components/pages/report/marketing/tab/DailyMarketingTab.tsx).
+
+<!-- rtk-instructions v2 -->
+
+# RTK (Rust Token Killer) - Token-Optimized Commands
+
+## Golden Rule
+
+**Always prefix commands with `rtk`**. If RTK has a dedicated filter, it uses it. If not, it passes through unchanged. This means RTK is always safe to use.
+
+**Important**: Even in command chains with `&&`, use `rtk`:
+
+```bash
+# ❌ Wrong
+git add . && git commit -m "msg" && git push
+
+# ✅ Correct
+rtk git add . && rtk git commit -m "msg" && rtk git push
+```
+
+## RTK Commands by Workflow
+
+### Build & Compile (80-90% savings)
+
+```bash
+rtk cargo build         # Cargo build output
+rtk cargo check         # Cargo check output
+rtk cargo clippy        # Clippy warnings grouped by file (80%)
+rtk tsc                 # TypeScript errors grouped by file/code (83%)
+rtk lint                # ESLint/Biome violations grouped (84%)
+rtk prettier --check    # Files needing format only (70%)
+rtk next build          # Next.js build with route metrics (87%)
+```
+
+### Test (60-99% savings)
+
+```bash
+rtk cargo test          # Cargo test failures only (90%)
+rtk go test             # Go test failures only (90%)
+rtk jest                # Jest failures only (99.5%)
+rtk vitest              # Vitest failures only (99.5%)
+rtk playwright test     # Playwright failures only (94%)
+rtk pytest              # Python test failures only (90%)
+rtk rake test           # Ruby test failures only (90%)
+rtk rspec               # RSpec test failures only (60%)
+rtk test <cmd>          # Generic test wrapper - failures only
+```
+
+### Git (59-80% savings)
+
+```bash
+rtk git status          # Compact status
+rtk git log             # Compact log (works with all git flags)
+rtk git diff            # Compact diff (80%)
+rtk git show            # Compact show (80%)
+rtk git add             # Ultra-compact confirmations (59%)
+rtk git commit          # Ultra-compact confirmations (59%)
+rtk git push            # Ultra-compact confirmations
+rtk git pull            # Ultra-compact confirmations
+rtk git branch          # Compact branch list
+rtk git fetch           # Compact fetch
+rtk git stash           # Compact stash
+rtk git worktree        # Compact worktree
+```
+
+Note: Git passthrough works for ALL subcommands, even those not explicitly listed.
+
+### GitHub (26-87% savings)
+
+```bash
+rtk gh pr view <num>    # Compact PR view (87%)
+rtk gh pr checks        # Compact PR checks (79%)
+rtk gh run list         # Compact workflow runs (82%)
+rtk gh issue list       # Compact issue list (80%)
+rtk gh api              # Compact API responses (26%)
+```
+
+### JavaScript/TypeScript Tooling (70-90% savings)
+
+```bash
+rtk pnpm list           # Compact dependency tree (70%)
+rtk pnpm outdated       # Compact outdated packages (80%)
+rtk pnpm install        # Compact install output (90%)
+rtk npm run <script>    # Compact npm script output
+rtk npx <cmd>           # Compact npx command output
+rtk prisma              # Prisma without ASCII art (88%)
+```
+
+### Files & Search (60-75% savings)
+
+```bash
+rtk ls <path>           # Tree format, compact (65%)
+rtk read <file>         # Code reading with filtering (60%)
+rtk grep <pattern>      # Search grouped by file (75%)
+rtk find <pattern>      # Find grouped by directory (70%)
+```
+
+### Analysis & Debug (70-90% savings)
+
+```bash
+rtk err <cmd>           # Filter errors only from any command
+rtk log <file>          # Deduplicated logs with counts
+rtk json <file>         # JSON structure without values
+rtk deps                # Dependency overview
+rtk env                 # Environment variables compact
+rtk summary <cmd>       # Smart summary of command output
+rtk diff                # Ultra-compact diffs
+```
+
+### Infrastructure (85% savings)
+
+```bash
+rtk docker ps           # Compact container list
+rtk docker images       # Compact image list
+rtk docker logs <c>     # Deduplicated logs
+rtk kubectl get         # Compact resource list
+rtk kubectl logs        # Deduplicated pod logs
+```
+
+### Network (65-70% savings)
+
+```bash
+rtk curl <url>          # Compact HTTP responses (70%)
+rtk wget <url>          # Compact download output (65%)
+```
+
+### Meta Commands
+
+```bash
+rtk gain                # View token savings statistics
+rtk gain --history      # View command history with savings
+rtk discover            # Analyze Claude Code sessions for missed RTK usage
+rtk proxy <cmd>         # Run command without filtering (for debugging)
+rtk init                # Add RTK instructions to CLAUDE.md
+rtk init --global       # Add RTK to ~/.claude/CLAUDE.md
+```
+
+## Token Savings Overview
+
+| Category         | Commands                       | Typical Savings |
+| ---------------- | ------------------------------ | --------------- |
+| Tests            | vitest, playwright, cargo test | 90-99%          |
+| Build            | next, tsc, lint, prettier      | 70-87%          |
+| Git              | status, log, diff, add, commit | 59-80%          |
+| GitHub           | gh pr, gh run, gh issue        | 26-87%          |
+| Package Managers | pnpm, npm, npx                 | 70-90%          |
+| Files            | ls, read, grep, find           | 60-75%          |
+| Infrastructure   | docker, kubectl                | 85%             |
+| Network          | curl, wget                     | 65-70%          |
+
+Overall average: **60-90% token reduction** on common development operations.
+
+<!-- /rtk-instructions -->

src/app/report/expense/layout.tsx

@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;

src/app/report/finance/layout.tsx

@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;

src/components/Table.tsx

@@ -173,6 +173,7 @@ const Table = <TData extends object>({
   const tableOptions: TableOptions<TData> = {
     columns,
     data: isLoading ? (DUMMY_SKELETON_DATA as TData[]) : data, // Type assertion
+    defaultColumn: { sortDescFirst: false },
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     getPaginationRowModel: getPaginationRowModel(),

src/components/Tabs.tsx

@@ -6,6 +6,7 @@ export interface TabItem {
   label: ReactNode;
   content?: ReactNode;
   disabled?: boolean;
+  hide?: boolean;
 }
 
 export interface TabsProps
@@ -122,17 +123,19 @@ const Tabs = ({
     >
       <div className={getSideContentClasses()}>
         <div role='tablist' className={getTabsClasses()}>
-          {tabs.map(({ id, label, disabled }) => (
+          {tabs.map(({ id, label, disabled, hide }) =>
-            <button
+            hide ? null : (
-              key={id}
+              <button
-              role='tab'
+                key={id}
-              className={getTabClasses(id === activeTabId, disabled)}
+                role='tab'
-              onClick={() => !disabled && handleTabChange(id)}
+                className={getTabClasses(id === activeTabId, disabled)}
-              disabled={disabled}
+                onClick={() => !disabled && handleTabChange(id)}
-            >
+                disabled={disabled}
-              {label}
+              >
-            </button>
+                {label}
-          ))}
+              </button>
+            )
+          )}
         </div>
         {sideContent && sideContent}
       </div>

src/components/modal/ConfirmationModalWithNotes.tsx

@@ -69,6 +69,7 @@ const ConfirmationModalWithNotes: React.FC<ConfirmationModalWithNotesProps> = ({
       secondaryButton={
         secondaryButton
           ? {
+              ...secondaryButton,
               text: secondaryButton?.text ?? 'Tidak',
               onClick: (e) => {
                 if (secondaryButton && secondaryButton?.onClick) {

src/components/pages/expense/ExpensesTable.tsx

@@ -1,18 +1,13 @@
 'use client';
 
-import {
+import { ChangeEventHandler, useCallback, useMemo, useState } from 'react';
-  ChangeEventHandler,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
 import useSWR from 'swr';
 import {
   CellContext,
   ColumnDef,
   Row,
   SortingState,
+  Updater,
 } from '@tanstack/react-table';
 import toast from 'react-hot-toast';
 
@@ -47,7 +42,8 @@ import { BaseApiResponse } from '@/types/api/api-general';
 
 type ExpenseTableFilters = {
   search: string;
-  nameSort: string;
+  sort_by: string;
+  order_by: string;
   transactionDate: string;
   realizationDate: string;
   locationId: string;
@@ -242,7 +238,8 @@ const ExpensesTable = () => {
       page: 1,
       pageSize: 10,
       search: '',
-      nameSort: '',
+      sort_by: '',
+      order_by: '',
       transactionDate: '',
       realizationDate: '',
       locationId: '',
@@ -261,7 +258,8 @@ const ExpensesTable = () => {
     paramMap: {
       page: 'page',
       pageSize: 'limit',
-      nameSort: 'sort_name',
+      sort_by: 'sort_by',
+      order_by: 'sort_order',
       transactionDate: 'transaction_date',
       realizationDate: 'realization_date',
       locationId: 'location_id',
@@ -319,7 +317,26 @@ const ExpensesTable = () => {
   const [exportProgressStartDate, setExportProgressStartDate] = useState('');
   const [exportProgressEndDate, setExportProgressEndDate] = useState('');
 
-  const [sorting, setSorting] = useState<SortingState>([]);
+  const sorting: SortingState = tableFilterState.sort_by
+    ? [
+        {
+          id: tableFilterState.sort_by,
+          desc: tableFilterState.order_by === 'desc',
+        },
+      ]
+    : [];
+
+  const handleSortingChange = (updater: Updater<SortingState>) => {
+    const next = typeof updater === 'function' ? updater(sorting) : updater;
+    if (next.length > 0) {
+      updateFilter('sort_by', next[0].id, true);
+      updateFilter('order_by', next[0].desc ? 'desc' : 'asc', true);
+    } else {
+      updateFilter('sort_by', '', true);
+      updateFilter('order_by', '', true);
+    }
+  };
+
   const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
   const selectedRowIds = Object.keys(rowSelection).map((item) =>
     parseInt(item)
@@ -437,10 +454,12 @@ const ExpensesTable = () => {
       cell: (props) => props.row.original.location?.name ?? '-',
     },
     {
+      accessorKey: 'created_user',
       accessorFn: (row) => row.created_user.name ?? '-',
       header: 'Nama Pengaju',
     },
     {
+      accessorKey: 'supplier',
       accessorFn: (row) => row.supplier.name ?? '-',
       header: 'Uraian',
     },
@@ -454,17 +473,20 @@ const ExpensesTable = () => {
     },
     {
       header: 'Status Pencairan',
+      enableSorting: false,
       cell: (props) => (
         <RealizationStatusBadge approval={props.row.original.latest_approval} />
       ),
     },
     {
       header: 'Status BOP',
+      enableSorting: false,
       cell: (props) => (
         <ExpenseStatusBadge approval={props.row.original.latest_approval} />
       ),
     },
     {
+      accessorKey: 'is_paid',
       header: 'Status Lunas',
       cell: (props) => {
         return (
@@ -478,6 +500,14 @@ const ExpensesTable = () => {
         );
       },
     },
+    {
+      accessorKey: 'created_at',
+      header: 'Tanggal Dibuat',
+      cell: (props) =>
+        props.row.original.created_at
+          ? formatDate(props.row.original.created_at, 'DD MMM YYYY')
+          : '-',
+    },
     {
       header: 'Aksi',
       cell: (props) => {
@@ -882,17 +912,6 @@ const ExpensesTable = () => {
     }
   }, [getTableFilterQueryString]);
 
-  // track sorting
-  useEffect(() => {
-    const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
-
-    if (!isNameSorted) {
-      updateFilter('nameSort', '', false);
-    } else {
-      updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
-    }
-  }, [sorting, updateFilter]);
-
   return (
     <>
       <div className='w-full'>
@@ -1051,7 +1070,8 @@ const ExpensesTable = () => {
                 'page',
                 'pageSize',
                 'search',
-                'nameSort',
+                'sort_by',
+                'order_by',
                 'userId',
                 'locationName',
                 'vendorName',
@@ -1152,7 +1172,8 @@ const ExpensesTable = () => {
               onPageSizeChange={setPageSize}
               isLoading={isLoading}
               sorting={sorting}
-              setSorting={setSorting}
+              setSorting={handleSortingChange}
+              manualSorting
               rowSelection={rowSelection}
               setRowSelection={setRowSelection}
               enableRowSelection={tableEnableRowSelectionHandler}

src/components/pages/finance/FinanceTable.tsx

@@ -1,7 +1,12 @@
 'use client';
 
 import React, { useEffect, useMemo, useState } from 'react';
-import { CellContext, ColumnDef } from '@tanstack/react-table';
+import {
+  CellContext,
+  ColumnDef,
+  SortingState,
+  Updater,
+} from '@tanstack/react-table';
 import useSWR from 'swr';
 import { Icon } from '@iconify/react';
 import { useFormik } from 'formik';
@@ -24,7 +29,7 @@ import {
   FINANCE_TRANSACTION_TYPE_OPTIONS,
 } from '@/config/constant';
 import { FinanceApi } from '@/services/api/finance';
-import { isResponseSuccess } from '@/lib/api-helper';
+import { getErrorMessage, 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';
@@ -34,6 +39,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import toast from 'react-hot-toast';
 import RequirePermission from '@/components/helper/RequirePermission';
 import ButtonFilter from '@/components/helper/ButtonFilter';
+import Dropdown from '@/components/dropdown/Dropdown';
 import {
   FinanceTableFilterSchema,
   FinanceTableFilterValues,
@@ -183,7 +189,8 @@ const FinanceTable = () => {
       bankIds: '',
       customerIds: '',
       supplierIds: '',
-      sortBy: '',
+      sort_by: '',
+      orderBy: '',
       startDate: '',
       endDate: '',
       bankNames: '',
@@ -197,7 +204,8 @@ const FinanceTable = () => {
       bankIds: 'bank_ids',
       customerIds: 'customer_ids',
       supplierIds: 'supplier_ids',
-      sortBy: 'sort_date',
+      sort_by: 'sort_by',
+      orderBy: 'sort_order',
       startDate: 'start_date',
       endDate: 'end_date',
     },
@@ -226,6 +234,7 @@ const FinanceTable = () => {
   const [selectedSortBy, setSelectedSortBy] = useState<OptionType | null>(null);
   const [selectedFinance, setSelectedFinance] = useState<Finance | null>(null);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [isExportLoading, setIsExportLoading] = useState(false);
   const [dateErrorShown, setDateErrorShown] = useState(false);
   const [hasDateError, setHasDateError] = useState(false);
 
@@ -248,7 +257,7 @@ const FinanceTable = () => {
       updateFilter('bankIds', values.bank_ids, true);
       updateFilter('customerIds', values.customer_ids, true);
       updateFilter('supplierIds', values.supplier_ids, true);
-      updateFilter('sortBy', values.sort_by, true);
+      updateFilter('sort_by', values.sort_by, true);
       updateFilter('startDate', values.start_date, true);
       updateFilter('endDate', values.end_date, true);
       // Save display names for restoration on modal reopen
@@ -276,7 +285,8 @@ const FinanceTable = () => {
       updateFilter('bankIds', '', true);
       updateFilter('customerIds', '', true);
       updateFilter('supplierIds', '', true);
-      updateFilter('sortBy', '', true);
+      updateFilter('sort_by', '', true);
+      updateFilter('orderBy', '', true);
       updateFilter('startDate', '', true);
       updateFilter('endDate', '', true);
       updateFilter('bankNames', '', true);
@@ -394,6 +404,26 @@ const FinanceTable = () => {
     );
   };
 
+  const sorting: SortingState = tableFilterState.sort_by
+    ? [
+        {
+          id: tableFilterState.sort_by,
+          desc: tableFilterState.orderBy === 'desc',
+        },
+      ]
+    : [];
+
+  const handleSortingChange = (updater: Updater<SortingState>) => {
+    const next = typeof updater === 'function' ? updater(sorting) : updater;
+    if (next.length > 0) {
+      updateFilter('sort_by', next[0].id, true);
+      updateFilter('orderBy', next[0].desc ? 'desc' : 'asc', true);
+    } else {
+      updateFilter('sort_by', '', true);
+      updateFilter('orderBy', '', true);
+    }
+  };
+
   const startDateChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
     const endDate = filterFormik.values.end_date;
@@ -505,7 +535,7 @@ const FinanceTable = () => {
     // Restore sort by
     const restoredSortBy =
       sortByOptions.find(
-        (opt) => String(opt.value) === tableFilterState.sortBy
+        (opt) => String(opt.value) === tableFilterState.sort_by
       ) || null;
     setSelectedSortBy(restoredSortBy);
 
@@ -516,7 +546,7 @@ const FinanceTable = () => {
       bank_ids: tableFilterState.bankIds || '',
       customer_ids: tableFilterState.customerIds || '',
       supplier_ids: tableFilterState.supplierIds || '',
-      sort_by: tableFilterState.sortBy || '',
+      sort_by: tableFilterState.sort_by || '',
       start_date: tableFilterState.startDate || '',
       end_date: tableFilterState.endDate || '',
     });
@@ -524,6 +554,20 @@ const FinanceTable = () => {
     filterModal.openModal();
   };
 
+  const exportToExcel = async () => {
+    setIsExportLoading(true);
+    try {
+      await FinanceApi.exportToExcel(getTableFilterQueryString());
+      toast.success('Excel berhasil dibuat dan diunduh.');
+    } catch (error) {
+      toast.error(
+        await getErrorMessage(error, 'Gagal mengekspor data finance.')
+      );
+    } finally {
+      setIsExportLoading(false);
+    }
+  };
+
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
 
@@ -540,10 +584,12 @@ const FinanceTable = () => {
       {
         header: 'ID',
         accessorKey: 'payment_code',
+        enableSorting: true,
       },
       {
         header: 'References Number',
         accessorKey: 'reference_number',
+        enableSorting: true,
         cell: (props: CellContext<Finance, unknown>) => {
           const value = props.row.original.reference_number;
           return <span>{value ?? '-'}</span>;
@@ -552,6 +598,7 @@ const FinanceTable = () => {
       {
         header: 'Jenis Transaksi',
         accessorKey: 'transaction_type',
+        enableSorting: true,
         cell: (props: CellContext<Finance, unknown>) => {
           const value = props.row.original.transaction_type
             .split('_')
@@ -561,7 +608,8 @@ const FinanceTable = () => {
       },
       {
         header: 'Pihak',
-        accessorFn: (finance: Finance) => finance.party?.name,
+        accessorKey: 'customer_name',
+        enableSorting: true,
         cell: (props: CellContext<Finance, unknown>) => {
           if (props.row.original.party?.id) {
             return <span>{props.row.original.party?.name}</span>;
@@ -571,16 +619,22 @@ const FinanceTable = () => {
       },
       {
         header: 'Tanggal Pembayaran',
-        accessorFn: (finance: Finance) =>
+        accessorKey: 'payment_date',
-          formatDate(finance.payment_date, 'DD MMM YYYY'),
+        enableSorting: true,
+        cell: (props) =>
+          formatDate(props.row.original.payment_date, 'DD MMM YYYY'),
       },
       {
         header: 'Tanggal Dibuat',
-        accessorFn: (finance) => formatDate(finance.created_at, 'DD MMM YYYY'),
+        accessorKey: 'created_at',
+        enableSorting: true,
+        cell: (props) =>
+          formatDate(props.row.original.created_at, 'DD MMM YYYY'),
       },
       {
         header: 'Metode Pembayaran',
         accessorKey: 'payment_method',
+        enableSorting: true,
         cell: (props: CellContext<Finance, unknown>) => {
           const value = props.row.original.payment_method.split('_').join(' ');
           return <span>{formatTitleCase(value)}</span>;
@@ -588,20 +642,26 @@ const FinanceTable = () => {
       },
       {
         header: 'Bank',
-        accessorFn: (finance: Finance) =>
+        accessorKey: 'bank',
-          finance.bank
+        enableSorting: true,
-            ? `${finance.bank?.alias} - ${finance.bank?.account_number} - ${finance.bank?.owner}`
+        cell: (props) =>
+          props.row.original.bank
+            ? `${props.row.original.bank?.alias} - ${props.row.original.bank?.account_number} - ${props.row.original.bank?.owner}`
             : '-',
       },
       {
         header: 'Pengeluaran (Rp)',
-        accessorFn: (finance: Finance) =>
+        accessorKey: 'expense_amount',
-          formatCurrency(Math.abs(finance.expense_amount)),
+        enableSorting: true,
+        cell: (props) =>
+          formatCurrency(Math.abs(props.row.original.expense_amount)),
       },
       {
         header: 'Pemasukan (Rp)',
-        accessorFn: (finance: Finance) =>
+        accessorKey: 'income_amount',
-          formatCurrency(Math.abs(finance.income_amount)),
+        enableSorting: true,
+        cell: (props) =>
+          formatCurrency(Math.abs(props.row.original.income_amount)),
       },
       {
         header: 'Aksi',
@@ -707,6 +767,7 @@ const FinanceTable = () => {
                 'page',
                 'pageSize',
                 'search',
+                'orderBy',
                 'bankNames',
                 'customerNames',
                 'supplierNames',
@@ -714,6 +775,51 @@ const FinanceTable = () => {
               onClick={handleFilterModalOpen}
               className='px-3 py-2.5'
             />
+
+            <Dropdown
+              align='end'
+              direction='bottom'
+              className={{
+                content:
+                  'mt-1 rounded-xl border border-base-content/5 shadow-sm overflow-hidden',
+              }}
+              trigger={
+                <Button
+                  variant='outline'
+                  color='none'
+                  className='px-3 py-2.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
+                >
+                  <div className='flex flex-row items-center gap-1.5'>
+                    <Icon
+                      icon='heroicons:cloud-arrow-down'
+                      width={20}
+                      height={20}
+                    />
+
+                    <span>Ekspor</span>
+
+                    <div className='w-px self-stretch bg-base-content/10' />
+
+                    <Icon
+                      icon='heroicons:chevron-down'
+                      width={14}
+                      height={14}
+                    />
+                  </div>
+                </Button>
+              }
+            >
+              <Button
+                variant='ghost'
+                color='none'
+                onClick={exportToExcel}
+                isLoading={isExportLoading}
+                className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
+              >
+                <Icon icon='heroicons:table-cells' width={20} height={20} />
+                Ekspor ke Excel
+              </Button>
+            </Dropdown>
           </div>
         </div>
 
@@ -749,6 +855,9 @@ const FinanceTable = () => {
               onPageChange={setPage}
               onPageSizeChange={setPageSize}
               isLoading={isLoading}
+              sorting={sorting}
+              setSorting={handleSortingChange}
+              manualSorting
               className={{
                 containerClassName: cn('p-3 mb-0'),
                 headerColumnClassName: 'text-nowrap',

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

@@ -56,6 +56,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
   const [productQtyErrorShown, setProductQtyErrorShown] = useState(false);
   const [deliveryQtyErrorShown, setDeliveryQtyErrorShown] = useState(false);
   const [isInitialized, setIsInitialized] = useState(false);
+  const productStockCacheRef = useRef<
+    Map<number, { quantity: number; transfer_available_qty?: number }>
+  >(new Map());
 
   // ===== FORM HANDLERS =====
   const createMovementHandler = useCallback(
@@ -337,6 +340,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
       prevSourceWarehouseId !== currentSourceWarehouseId &&
       prevSourceWarehouseId !== null
     ) {
+      productStockCacheRef.current = new Map();
       formik.setFieldValue('products', [
         {
           product: null,
@@ -399,6 +403,15 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
       : [];
   }, [productWarehouses]);
 
+  useEffect(() => {
+    productWarehouseOptions.forEach((pw) => {
+      productStockCacheRef.current.set(pw.product_id, {
+        quantity: pw.quantity,
+        transfer_available_qty: pw.transfer_available_qty,
+      });
+    });
+  }, [productWarehouseOptions]);
+
   // ===== HELPER FUNCTIONS =====
   const isRepeaterInputError = <T extends 'products' | 'deliveries'>(
     arrayName: T,
@@ -840,15 +853,12 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
   const getAvailableStock = useCallback(
     (productId: number) => {
       if (type === 'detail') return 0;
-      const productWarehouse = productWarehouseOptions.find(
+      const live = productWarehouseOptions.find(
         (pw) => pw.product_id === productId
       );
-
+      if (live) return live.transfer_available_qty ?? live.quantity ?? 0;
-      return (
+      const cached = productStockCacheRef.current.get(productId);
-        productWarehouse?.transfer_available_qty ??
+      return cached?.transfer_available_qty ?? cached?.quantity ?? 0;
-        productWarehouse?.quantity ??
-        0
-      );
     },
     [productWarehouseOptions, type]
   );
@@ -856,20 +866,25 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
   const getTotalStock = useCallback(
     (productId: number) => {
       if (type === 'detail') return 0;
-      const productWarehouse = productWarehouseOptions.find(
+      const live = productWarehouseOptions.find(
         (pw) => pw.product_id === productId
       );
-      return productWarehouse?.quantity ?? 0;
+      if (live) return live.quantity ?? 0;
+      return productStockCacheRef.current.get(productId)?.quantity ?? 0;
     },
     [productWarehouseOptions, type]
   );
 
   const hasAvailableQty = useCallback(
     (productId: number) => {
-      const productWarehouse = productWarehouseOptions.find(
+      const live = productWarehouseOptions.find(
         (pw) => pw.product_id === productId
       );
-      return productWarehouse?.transfer_available_qty !== undefined;
+      if (live) return live.transfer_available_qty !== undefined;
+      return (
+        productStockCacheRef.current.get(productId)?.transfer_available_qty !==
+        undefined
+      );
     },
     [productWarehouseOptions]
   );

src/components/pages/marketing/DeliveryOrderFormModal.tsx

@@ -847,9 +847,14 @@ const DeliveryOrderFormModal = ({}: { initialValues?: Marketing }) => {
                           }
                         }}
                         className='p-3  shadow-button-soft text-base-100 rounded-lg text-sm font-semibold'
-                        disabled={deliveryRejected}
+                        disabled={deliveryRejected || isLoading}
+                        isLoading={isLoading}
                       >
-                        Approve
+                        {marketing?.data?.latest_approval?.step_number === 1 &&
+                          'Approve'}
+
+                        {marketing?.data?.latest_approval?.step_number === 2 &&
+                          'Deliver Item'}
                       </Button>
                     </div>
                   )}

src/components/pages/marketing/MarketingTable.tsx

@@ -297,6 +297,8 @@ const MarketingTable = () => {
 
   const [isLoadingExportingToExcel, setIsLoadingExportingToExcel] =
     useState(false);
+  const [isApproveLoading, setIsApproveLoading] = useState(false);
+  const [isDeliveryLoading, setIsDeliveryLoading] = useState(false);
 
   const filterResetHandler = () => {
     updateFilter('product_ids', '', true);
@@ -452,23 +454,33 @@ const MarketingTable = () => {
       return;
     }
 
-    const approveMarketingRes: BaseApiResponse<unknown> | undefined =
+    setIsApproveLoading(true);
-      approveAction === 'APPROVED'
-        ? await MarketingApi.bulkApprovals(
-            idsToProcess,
-            nextApprovalStatus as 'SALES_ORDER' | 'DELIVERY_ORDER',
-            '',
-            notes || `APPROVED marketing ${idsToProcess.join(', ')}`
-          )
-        : await SalesOrderApi.bulkApprovals(idsToProcess, approveAction, notes);
 
-    if (isResponseSuccess(approveMarketingRes)) {
+    try {
-      confirmationModal.closeModal();
+      const approveMarketingRes: BaseApiResponse<unknown> | undefined =
-      toast.success(approveMarketingRes?.message as string);
+        approveAction === 'APPROVED'
-      setRowSelection({});
+          ? await MarketingApi.bulkApprovals(
+              idsToProcess,
+              nextApprovalStatus as 'SALES_ORDER' | 'DELIVERY_ORDER',
+              '',
+              notes || `APPROVED marketing ${idsToProcess.join(', ')}`
+            )
+          : await SalesOrderApi.bulkApprovals(
+              idsToProcess,
+              approveAction,
+              notes
+            );
+
+      if (isResponseSuccess(approveMarketingRes)) {
+        confirmationModal.closeModal();
+        toast.success(approveMarketingRes?.message as string);
+        setRowSelection({});
+      }
+
+      refreshMarketing();
+    } finally {
+      setIsApproveLoading(false);
     }
-
-    refreshMarketing();
   };
 
   const bulkDeliveryDateChangeHandler: ChangeEventHandler<HTMLInputElement> = (
@@ -530,13 +542,21 @@ const MarketingTable = () => {
   };
 
   const confirmationModalDeliveryClickHandler = async (notes: string) => {
-    const res = await SalesOrderApi.delivery(selectedItem?.id as number, notes);
+    setIsDeliveryLoading(true);
-    deliveryModal.closeModal();
+    try {
-    toast.success(res?.message as string);
+      const res = await SalesOrderApi.delivery(
-    refreshMarketing?.();
+        selectedItem?.id as number,
-    router.push(
+        notes
-      `/marketing/detail/delivery-orders/edit?id=${selectedItem?.id}`
+      );
-    );
+      deliveryModal.closeModal();
+      toast.success(res?.message as string);
+      refreshMarketing?.();
+      router.push(
+        `/marketing/detail/delivery-orders/edit?id=${selectedItem?.id}`
+      );
+    } finally {
+      setIsDeliveryLoading(false);
+    }
   };
 
   const getRowCanSelect = useCallback(
@@ -772,6 +792,14 @@ const MarketingTable = () => {
           }
         },
       },
+      {
+        accessorKey: 'created_at',
+        header: 'Tanggal Dibuat',
+        cell: (props) =>
+          props.row.original.created_at
+            ? formatDate(props.row.original.created_at, 'DD MMM yyyy')
+            : '-',
+      },
       {
         id: 'actions',
         maxSize: 80,
@@ -1012,11 +1040,13 @@ const MarketingTable = () => {
         text={`Apakah anda yakin ingin ${approveAction == 'APPROVED' ? 'approve' : 'reject'} data penjualan tahap ${selectedApprovalStep ?? '-'} (${idsToProcess.length} data)?`}
         secondaryButton={{
           text: 'Tidak',
+          isLoading: isApproveLoading,
           onClick: confirmationModal.closeModal,
         }}
         primaryButton={{
           text: 'Ya',
           color: approveAction === 'APPROVED' ? 'success' : 'error',
+          isLoading: isApproveLoading,
           onClick: approveMarketingHandler,
         }}
       />
@@ -1040,10 +1070,12 @@ const MarketingTable = () => {
         text={`Apakah anda yakin ingin deliver penjualan ${selectedItem?.so_number}?`}
         secondaryButton={{
           text: 'Tidak',
+          isLoading: isDeliveryLoading,
         }}
         primaryButton={{
           text: 'Ya',
           color: 'success',
+          isLoading: isDeliveryLoading,
           onClick: confirmationModalDeliveryClickHandler,
         }}
       />
@@ -1103,6 +1135,7 @@ const MarketingTable = () => {
             <Button
               variant='outline'
               color='none'
+              disabled={isSubmittingBulkDelivery}
               onClick={() => {
                 bulkDeliveryModal.closeModal();
                 setBulkDeliveryDate('');
@@ -1115,6 +1148,7 @@ const MarketingTable = () => {
             <Button
               color='success'
               isLoading={isSubmittingBulkDelivery}
+              disabled={isSubmittingBulkDelivery}
               onClick={() =>
                 submitBulkDeliveryApprovalHandler(
                   idsToProcess,

src/components/pages/marketing/SalesOrderFormModal.tsx

@@ -246,6 +246,7 @@ const SalesOrderFormModal = ({
                 })
                 .filter((item) => Boolean(item)),
             } as UpdateDeliveryOrderPayload);
+
       switch (modalAction) {
         case 'add':
           await createMarketingHandler(payload as CreateSalesOrderPayload);
@@ -261,11 +262,7 @@ const SalesOrderFormModal = ({
 
   // ===== Formik Error List =====
   const { formErrorList, setFormErrorList, close, handleFormSubmit } =
-    useFormikErrorList(formik, {
+    useFormikErrorList(formik);
-      onAfterSubmit: () => {
-        router.push('/marketing');
-      },
-    });
 
   // ================== FORM REPEATER HANDLER ==================
   const createMarketingHandler = async (values: CreateSalesOrderPayload) => {

src/components/pages/marketing/form/MarketingForm.schema.ts

@@ -71,14 +71,14 @@ export const DeliveryOrderSchema: Yup.ObjectSchema<DeliveryOrderSchemaType> =
       .required('Pengiriman wajib diisi!')
       .test(
         'at-least-one-valid-row',
-        'Minimal harus  ada satu baris pengiriman yang lengkap diisi!',
+        'Seluruh data pengiriman harus diisi lengkap!',
         function (items) {
           if (!items || items.length === 0) return false;
 
-          // VALIDASI: minimal 1 item valid full
+          // VALIDASI: seluruh item harus valid full
           const itemSchema = DeliveryOrderProductSchema;
 
-          const hasValidItem = items.some((item) => {
+          const hasValidItem = items.every((item) => {
             if (!item) return false;
             return itemSchema.isValidSync(item, { abortEarly: true });
           });
@@ -123,8 +123,17 @@ export const SalesProductToFieldValues = (
     total_price: product.total_price,
     marketing_type: product.marketing_type
       ? {
-          value: product.marketing_type,
+          value:
-          label: formatTitleCase(product.marketing_type),
+            product.marketing_type === 'AYAM' ||
+            product.marketing_type === 'AYAM_PULLET'
+              ? 'AYAM,AYAM_PULLET'
+              : product.marketing_type,
+          label: formatTitleCase(
+            product.marketing_type === 'AYAM' ||
+              product.marketing_type === 'AYAM_PULLET'
+              ? 'AYAM'
+              : product.marketing_type
+          ),
         }
       : null,
     convertion_unit: product.convertion_unit
@@ -185,8 +194,17 @@ export const DeliveryProductToFieldValues = (
       marketing_product_id: item.marketing_product_id ?? salesOrder?.id,
       marketing_type: salesOrder?.marketing_type
         ? {
-            value: salesOrder?.marketing_type,
+            value:
-            label: formatTitleCase(salesOrder?.marketing_type),
+              salesOrder?.marketing_type === 'AYAM' ||
+              salesOrder?.marketing_type === 'AYAM_PULLET'
+                ? 'AYAM,AYAM_PULLET'
+                : salesOrder?.marketing_type,
+            label: formatTitleCase(
+              salesOrder?.marketing_type === 'AYAM' ||
+                salesOrder?.marketing_type === 'AYAM_PULLET'
+                ? 'AYAM'
+                : salesOrder?.marketing_type
+            ),
           }
         : null,
       convertion_unit: salesOrder?.convertion_unit

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

@@ -146,15 +146,6 @@ const DeliveryOrderProductForm = ({
   );
 
   // ============ Fetch Data ============
-  const { data: productData } = useSWR(
-    selectedProduct?.value
-      ? ProductApi.basePath + '/' + selectedProduct?.value
-      : null,
-    () =>
-      selectedProduct?.value
-        ? ProductApi.getSingle(Number(selectedProduct?.value))
-        : undefined
-  );
 
   // Options Week dari minggu 1 - 22
   // const optionsWeek = useMemo(() => {
@@ -440,7 +431,8 @@ const DeliveryOrderProductForm = ({
         handleBlurField(currentInput);
         formik.setFieldValue(
           'uom',
-          isResponseSuccess(productData) ? productData?.data?.uom?.name : ''
+          initialValues?.marketing_product?.product_warehouse_data?.product?.uom
+            ?.name ?? ''
         );
       },
     }
@@ -813,9 +805,8 @@ const DeliveryOrderProductForm = ({
             endAdornment={
               <div className='flex items-center gap-2'>
                 <span className='text-sm text-gray-500'>
-                  {isResponseSuccess(productData)
+                  {initialValues?.marketing_product?.product_warehouse_data
-                    ? productData?.data?.uom.name
+                    ?.product?.uom?.name ?? ''}
-                    : ''}
                 </span>
               </div>
             }
@@ -826,9 +817,8 @@ const DeliveryOrderProductForm = ({
                     (item) => item.id === formik.values.marketing_product_id
                   )?.qty +
                   ' ' +
-                  (isResponseSuccess(productData)
+                  (initialValues?.marketing_product?.product_warehouse_data
-                    ? productData?.data?.uom.name
+                    ?.product?.uom?.name ?? '')
-                    : '')
                 : ''
             }
           />

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

@@ -252,6 +252,11 @@ const SalesOrderProductForm = ({
       setSelectedProductWarehouse(productWarehouse || null);
       formik.setFieldValue('product_warehouse_data', productWarehouse || null);
       formik.setFieldValue('qty', productWarehouse?.quantity);
+
+      if (productWarehouse?.quantity) {
+        handleFieldChange('qty', productWarehouse?.quantity);
+      }
+
       formik.setFieldValue('uom', productWarehouse?.product?.uom?.name || '');
       if (
         productWarehouse?.week !== undefined &&

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

@@ -189,6 +189,11 @@ const CustomersTable = () => {
         accessorKey: 'email',
         header: 'Email',
       },
+      {
+        accessorKey: 'bank_name',
+        header: 'Nama Bank',
+        cell: (props) => props.row.original.bank_name || '-',
+      },
       {
         header: 'Aksi',
         cell: (props: CellContext<Customer, unknown>) => {

src/components/pages/master-data/customer/form/CustomerForm.schema.ts

@@ -27,6 +27,9 @@ export const CustomerFormSchema = Yup.object({
     .email('Format email tidak valid!')
     .required('Email wajib diisi!'),
 
+  bank_name: Yup.string()
+    .min(3, 'Nama bank minimal 3 karakter!')
+    .required('Nama bank wajib diisi!'),
   account_number: Yup.string()
     .matches(/^[0-9]+$/, 'Nomor rekening hanya boleh berisi angka!')
     .required('Nomor rekening wajib diisi!'),

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

@@ -142,6 +142,7 @@ const CustomerForm = ({
           },
       type: normalizeType(initialValues?.type),
       address: initialValues?.address ?? '',
+      bank_name: initialValues?.bank_name ?? '',
       account_number: initialValues?.account_number ?? '',
     };
   }, [initialValues]);
@@ -164,6 +165,7 @@ const CustomerForm = ({
         pic_id: values.picId,
         type: (values.type as OptionType).value as string,
         address: values.address,
+        bank_name: values.bank_name,
         account_number: values.account_number,
       };
 
@@ -286,6 +288,22 @@ const CustomerForm = ({
               errorMessage={formik.errors.phone}
               readOnly={formType === 'detail'}
             />
+            <TextInput
+              required
+              label='Nama Bank'
+              name='bank_name'
+              placeholder='Masukkan nama bank customer'
+              value={formik.values.bank_name}
+              onChange={(e) =>
+                formik.setFieldValue('bank_name', e.target.value.toUpperCase())
+              }
+              onBlur={formik.handleBlur}
+              isError={
+                formik.touched.bank_name && Boolean(formik.errors.bank_name)
+              }
+              errorMessage={formik.errors.bank_name}
+              readOnly={formType === 'detail'}
+            />
             <TextInput
               required
               label='Nomor Rekening'

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

@@ -326,6 +326,11 @@ const SuppliersTable = () => {
         accessorKey: 'email',
         header: 'Email',
       },
+      {
+        accessorKey: 'bank_name',
+        header: 'Nama Bank',
+        cell: (props) => props.row.original.bank_name || '-',
+      },
       {
         accessorKey: 'address',
         header: 'Alamat',

src/components/pages/master-data/supplier/form/SupplierForm.schema.ts

@@ -31,6 +31,9 @@ export const SupplierFormSchema = Yup.object({
   npwp: Yup.string()
     .matches(/^[0-9]+$/, 'Nomor NPWP hanya boleh berisi angka!')
     .required('Nomor NPWP wajib diisi!'),
+  bank_name: Yup.string()
+    .min(3, 'Nama bank minimal 3 karakter!')
+    .required('Nama bank wajib diisi!'),
   account_number: Yup.string()
     .matches(/^[0-9]+$/, 'Nomor rekening hanya boleh berisi angka!')
     .required('Nomor rekening wajib diisi!'),

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

@@ -122,6 +122,7 @@ const SupplierForm = ({
       email: initialValues?.email ?? '',
       address: initialValues?.address ?? '',
       npwp: initialValues?.npwp ?? '',
+      bank_name: initialValues?.bank_name ?? '',
       account_number: initialValues?.account_number ?? '',
       due_date: initialValues?.due_date ?? 1,
     };
@@ -149,6 +150,7 @@ const SupplierForm = ({
         email: values.email,
         address: values.address,
         npwp: values.npwp,
+        bank_name: values.bank_name,
         account_number: values.account_number,
         due_date: parseInt(values.due_date.toString()),
       };
@@ -368,6 +370,22 @@ const SupplierForm = ({
               errorMessage={formik.errors.npwp}
               readOnly={formType === 'detail'}
             />
+            <TextInput
+              required
+              label='Nama Bank'
+              name='bank_name'
+              placeholder='Masukkan nama bank supplier'
+              value={formik.values.bank_name}
+              onChange={(e) =>
+                formik.setFieldValue('bank_name', e.target.value.toUpperCase())
+              }
+              onBlur={formik.handleBlur}
+              isError={
+                formik.touched.bank_name && Boolean(formik.errors.bank_name)
+              }
+              errorMessage={formik.errors.bank_name}
+              readOnly={formType === 'detail'}
+            />
             <TextInput
               required
               label='Nomor Rekening'

src/components/pages/production/chickin/form/tabs/ChickLogsView.tsx

@@ -2,16 +2,17 @@ import Alert from '@/components/Alert';
 import Button from '@/components/Button';
 import Card from '@/components/Card';
 import RequirePermission from '@/components/helper/RequirePermission';
+import DateInput from '@/components/input/DateInput';
 import PillBadge from '@/components/PillBadge';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { formatDate, formatNumber } from '@/lib/helper';
 import { ChickinApi } from '@/services/api/production/chickin';
+import { useChickinStore } from '@/stores/production/chickin/chickin.store';
 import { BaseApproval } from '@/types/api/api-general';
 import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
 import { Icon } from '@iconify/react';
 import { useState } from 'react';
 import toast from 'react-hot-toast';
-import { useChickinStore } from '@/stores/production/chickin/chickin.store';
 
 const ChickinLogsView = ({
   initialValues,
@@ -23,6 +24,9 @@ const ChickinLogsView = ({
   rawDataApprovals: BaseApproval[];
 }) => {
   const [chickinErrorMessage, setChickinErrorMessage] = useState('');
+  const [editingChickinId, setEditingChickinId] = useState<number | null>(null);
+  const [editDate, setEditDate] = useState('');
+  const [isEditLoading, setIsEditLoading] = useState(false);
   const { openChickinApproveModal, openChickinDeleteModal } = useChickinStore();
 
   const handleClickApprove = () => {
@@ -44,6 +48,23 @@ const ChickinLogsView = ({
     });
   };
 
+  const handleSaveChickinDate = async () => {
+    setIsEditLoading(true);
+    const res = await ChickinApi.updateChickinDate(
+      initialValues.id as number,
+      formatDate(editDate, 'YYYY-MM-DD')
+    );
+    setIsEditLoading(false);
+    if (isResponseSuccess(res)) {
+      toast.success(res?.message as string);
+      setEditingChickinId(null);
+      afterSubmit && afterSubmit();
+    }
+    if (isResponseError(res)) {
+      toast.error(res?.message as string);
+    }
+  };
+
   const handleDeleteChickin = (chickinId: number) => {
     openChickinDeleteModal(chickinId, async () => {
       const deleteRes = await ChickinApi.delete(chickinId);
@@ -133,9 +154,54 @@ const ChickinLogsView = ({
                       <Icon icon={'mdi:calendar'} width={14} height={14} />{' '}
                       <span>Tanggal Chick In</span>
                     </div>
-                    <div className='text-end text-gray-500'>
+                    {editingChickinId === chickin.id ? (
-                      {formatDate(chickin.chick_in_date, 'DD MMM YYYY')}
+                      <div className='flex flex-col gap-2 items-end w-1/2'>
-                    </div>
+                        <DateInput
+                          name='edit_chick_in_date'
+                          value={editDate}
+                          isNestedModal
+                          onChange={(e) => setEditDate(e.target.value)}
+                        />
+                        <div className='flex flex-row gap-1'>
+                          <Button
+                            color='none'
+                            className='btn-xs btn-ghost text-gray-500'
+                            onClick={() => setEditingChickinId(null)}
+                            disabled={isEditLoading}
+                          >
+                            Batal
+                          </Button>
+                          <Button
+                            color='success'
+                            className='btn-xs text-base-100'
+                            onClick={handleSaveChickinDate}
+                            isLoading={isEditLoading}
+                            disabled={!editDate || isEditLoading}
+                          >
+                            Simpan
+                          </Button>
+                        </div>
+                      </div>
+                    ) : (
+                      <div className='flex flex-row gap-2 items-center'>
+                        <span className='text-gray-500'>
+                          {formatDate(chickin.chick_in_date, 'DD MMM YYYY')}
+                        </span>
+                        <button
+                          className='btn btn-ghost btn-xs p-0 text-gray-400 hover:text-primary'
+                          onClick={() => {
+                            setEditingChickinId(chickin.id);
+                            setEditDate(chickin.chick_in_date);
+                          }}
+                        >
+                          <Icon
+                            icon='mdi:pencil-outline'
+                            width={13}
+                            height={13}
+                          />
+                        </button>
+                      </div>
+                    )}
                   </div>
 
                   {/* Kandang */}

src/components/pages/production/transfer-to-laying/TransferToLayingFormModal.tsx

@@ -233,13 +233,8 @@ const TransferToLayingFormModal = () => {
 
   const [maxSourceQuantity, setMaxSourceQuantity] = useState<number>(0);
 
-  const selectedFlockDestinationRawData = isResponseSuccess(
+  const [selectedFlockDestinationRawData, setSelectedFlockDestinationRawData] =
-    flockDestinationRawData
+    useState<ProjectFlock | undefined>(undefined);
-  )
-    ? flockDestinationRawData.data.find(
-        (item) => item.id === formik.values.flockDestination?.value
-      )
-    : undefined;
 
   const { data: flockSourceKandangsAvailability } = useSWR(
     formik.values.flockSource
@@ -456,15 +451,37 @@ const TransferToLayingFormModal = () => {
   }, [transferToLayingId, transferToLaying]);
 
   useEffect(() => {
+    if (!formik.values.flockSource) {
+      setSelectedFlockSourceRawData(undefined);
+      return;
+    }
+
     if (isResponseSuccess(flockSourceRawData)) {
-      const currentSelectedFlockSourceRawData = flockSourceRawData.data.find(
+      const found = flockSourceRawData.data.find(
         (item) => item.id === formik.values.flockSource?.value
       );
-
+      if (found) {
-      setSelectedFlockSourceRawData(currentSelectedFlockSourceRawData);
+        setSelectedFlockSourceRawData(found);
+      }
     }
   }, [flockSourceRawData, formikFlockSource]);
 
+  useEffect(() => {
+    if (!formik.values.flockDestination) {
+      setSelectedFlockDestinationRawData(undefined);
+      return;
+    }
+
+    if (isResponseSuccess(flockDestinationRawData)) {
+      const found = flockDestinationRawData.data.find(
+        (item) => item.id === formik.values.flockDestination?.value
+      );
+      if (found) {
+        setSelectedFlockDestinationRawData(found);
+      }
+    }
+  }, [flockDestinationRawData, formik.values.flockDestination]);
+
   useEffect(() => {
     formik.setFieldValue('totalQuantity', totalTransferedChicken);
     formik.setFieldValue('maxTotalQuantity', totalTransferedChicken);

src/components/pages/purchase/PurchaseFilterModal.tsx

@@ -10,6 +10,7 @@ import Button from '@/components/Button';
 import DateInput from '@/components/input/DateInput';
 import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
 import SelectInput from '@/components/input/SelectInput';
+import SelectInputRadio from '@/components/input/SelectInputRadio';
 
 import { OptionType, useSelect } from '@/components/input/SelectInput';
 import { PurchaseFilter } from '@/types/api/purchase/purchase';
@@ -24,10 +25,20 @@ import { ProjectFlockApi } from '@/services/api/production';
 import { ProjectFlock } from '@/types/api/production/project-flock';
 import { isResponseSuccess } from '@/lib/api-helper';
 
+const filterByOptions: OptionType<string>[] = [
+  { value: 'po_date', label: 'Tanggal PO' },
+  { value: 'received_date', label: 'Tanggal Terima' },
+  { value: 'due_date', label: 'Tanggal Jatuh Tempo' },
+  { value: 'created_at', label: 'Tanggal Dibuat' },
+];
+
 interface PurchaseFilterModalProps {
   ref: RefObject<HTMLDialogElement | null>;
   initialValues?: {
     poDate: string;
+    start_date: string;
+    end_date: string;
+    filterBy: OptionType<string> | undefined;
     category: OptionType<number>[];
     status: OptionType<string>[];
     supplier: OptionType<number> | null;
@@ -51,6 +62,7 @@ const PurchaseFilterModal = ({
   }, [ref]);
 
   // ===== DATE ERROR STATE =====
+  const [hasDateError, setHasDateError] = useState(false);
   const [dateErrorShown, setDateErrorShown] = useState(false);
 
   // ===== CLEANUP TOAST ON UNMOUNT =====
@@ -139,6 +151,9 @@ const PurchaseFilterModal = ({
 
   const formik = useFormik<{
     poDate: string;
+    start_date: string;
+    end_date: string;
+    filterBy: OptionType<string> | undefined;
     category: { label: string; value: number }[];
     status: { label: string; value: string }[];
     supplier: OptionType<number> | null;
@@ -150,6 +165,9 @@ const PurchaseFilterModal = ({
     // enableReinitialize: true,
     initialValues: initialValues || {
       poDate: '',
+      start_date: '',
+      end_date: '',
+      filterBy: undefined,
       category: [],
       status: [],
       supplier: null,
@@ -230,9 +248,17 @@ const PurchaseFilterModal = ({
   };
 
   const formikResetHandler = useCallback(() => {
+    setHasDateError(false);
+    if (dateErrorShown) {
+      toast.dismiss();
+      setDateErrorShown(false);
+    }
     resetForm({
       values: {
         poDate: '',
+        start_date: '',
+        end_date: '',
+        filterBy: undefined,
         category: [],
         status: [],
         supplier: null,
@@ -246,7 +272,56 @@ const PurchaseFilterModal = ({
     setSelectedLocationId('');
     onReset?.();
     closeModalHandler();
-  }, [resetForm, onReset, closeModalHandler]);
+  }, [resetForm, onReset, closeModalHandler, dateErrorShown]);
+
+  const handleStartDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    formik.setFieldValue('start_date', value);
+
+    if (value && formik.values.end_date) {
+      if (new Date(formik.values.end_date) < new Date(value)) {
+        setHasDateError(true);
+        if (!dateErrorShown) {
+          toast.error('Tanggal akhir tidak boleh sebelum tanggal mulai', {
+            duration: Infinity,
+          });
+          setDateErrorShown(true);
+        }
+      } else {
+        setHasDateError(false);
+        if (dateErrorShown) {
+          toast.dismiss();
+          setDateErrorShown(false);
+        }
+      }
+    } else {
+      setHasDateError(false);
+    }
+  };
+
+  const handleEndDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    formik.setFieldValue('end_date', value);
+
+    if (value && formik.values.start_date) {
+      if (new Date(value) < new Date(formik.values.start_date)) {
+        setHasDateError(true);
+        if (!dateErrorShown) {
+          toast.error('Tanggal akhir tidak boleh sebelum tanggal mulai', {
+            duration: Infinity,
+          });
+          setDateErrorShown(true);
+        }
+        return;
+      }
+    }
+
+    setHasDateError(false);
+    if (dateErrorShown) {
+      toast.dismiss();
+      setDateErrorShown(false);
+    }
+  };
 
   const formikSubmitHandler = useCallback(async () => {
     await submitForm();
@@ -287,6 +362,44 @@ const PurchaseFilterModal = ({
         {/* Modal Body */}
         <div className='p-4 flex flex-col gap-1.5'>
           <div className='flex flex-col'>
+            <div>
+              <label className='block text-xs font-semibold text-base-content py-2'>
+                Tanggal
+              </label>
+              <div className='flex flex-row gap-1.5 items-center justify-between'>
+                <DateInput
+                  name='start_date'
+                  value={formik.values.start_date}
+                  onChange={handleStartDateChange}
+                  className={{ wrapper: 'w-full' }}
+                  isNestedModal
+                />
+                <hr className='w-full max-w-3 h-px border-base-content/10' />
+                <DateInput
+                  name='end_date'
+                  value={formik.values.end_date}
+                  onChange={handleEndDateChange}
+                  className={{ wrapper: 'w-full' }}
+                  isNestedModal
+                  isError={hasDateError}
+                />
+              </div>
+            </div>
+
+            <SelectInputRadio
+              label='Filter Berdasarkan'
+              placeholder='Pilih Filter Berdasarkan'
+              options={filterByOptions}
+              value={formik.values.filterBy ?? null}
+              onChange={(val) =>
+                formik.setFieldValue(
+                  'filterBy',
+                  !Array.isArray(val) ? (val ?? undefined) : undefined
+                )
+              }
+              isClearable
+            />
+
             <DateInput
               label='PO Date'
               name='poDate'
@@ -436,6 +549,7 @@ const PurchaseFilterModal = ({
           <Button
             type='button'
             onClick={formikSubmitHandler}
+            disabled={hasDateError}
             className='p-3 rounded-lg w-fit sm:w-full max-w-40 text-base-100 text-sm'
           >
             Apply Filter

src/components/pages/purchase/PurchaseTable.tsx

@@ -2,7 +2,12 @@
 
 import { ChangeEventHandler, useCallback, useMemo, useState } from 'react';
 import useSWR from 'swr';
-import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
+import {
+  CellContext,
+  ColumnDef,
+  SortingState,
+  Updater,
+} from '@tanstack/react-table';
 import toast from 'react-hot-toast';
 
 import Link from 'next/link';
@@ -23,7 +28,7 @@ import PurchaseFilterModal from '@/components/pages/purchase/PurchaseFilterModal
 import Dropdown from '@/components/dropdown/Dropdown';
 import { OptionType } from '@/components/input/SelectInput';
 
-import { cn, formatDate } from '@/lib/helper';
+import { cn, formatCurrency, formatDate, formatNumber } from '@/lib/helper';
 import { getErrorMessage, isResponseSuccess } from '@/lib/api-helper';
 
 import { useTableFilter } from '@/services/hooks/useTableFilter';
@@ -34,6 +39,11 @@ import { PURCHASE_ORDER_APPROVAL_LINE } from '@/config/approval-line';
 
 type PurchaseTableFilters = {
   search: string;
+  sort_by: string;
+  order_by: string;
+  start_date: string;
+  end_date: string;
+  filter_by: string;
   po_date: string;
   approval_status: string;
   product_category_id: string;
@@ -157,18 +167,6 @@ const RowOptionsMenu = ({
 };
 
 const PurchaseTable = () => {
-  // ===== STATE MANAGEMENT =====
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-  const [isLoadingExportingToExcel, setIsLoadingExportingToExcel] =
-    useState(false);
-  const [isExportProgressLoading, setIsExportProgressLoading] = useState(false);
-  const [selectedPurchase, setSelectedPurchase] = useState<Purchase | null>(
-    null
-  );
-  const [exportProgressStartDate, setExportProgressStartDate] = useState('');
-  const [exportProgressEndDate, setExportProgressEndDate] = useState('');
-  const [sorting, setSorting] = useState<SortingState>([]);
-
   // ===== TABLE FILTER STATE =====
   const {
     state: tableFilterState,
@@ -180,6 +178,11 @@ const PurchaseTable = () => {
   } = useTableFilter<PurchaseTableFilters>({
     initial: {
       search: '',
+      sort_by: '',
+      order_by: '',
+      start_date: '',
+      end_date: '',
+      filter_by: '',
       po_date: '',
       approval_status: '',
       product_category_id: '',
@@ -198,6 +201,11 @@ const PurchaseTable = () => {
     paramMap: {
       page: 'page',
       pageSize: 'limit',
+      sort_by: 'sort_by',
+      order_by: 'sort_order',
+      start_date: 'start_date',
+      end_date: 'end_date',
+      filter_by: 'filter_by',
       po_date: 'po_date',
       approval_status: 'approval_status',
       product_category_id: 'product_category_id',
@@ -219,6 +227,36 @@ const PurchaseTable = () => {
     storeName: 'purchase-table',
   });
 
+  // ===== STATE MANAGEMENT =====
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [isLoadingExportingToExcel, setIsLoadingExportingToExcel] =
+    useState(false);
+  const [isExportProgressLoading, setIsExportProgressLoading] = useState(false);
+  const [selectedPurchase, setSelectedPurchase] = useState<Purchase | null>(
+    null
+  );
+  const [exportProgressStartDate, setExportProgressStartDate] = useState('');
+  const [exportProgressEndDate, setExportProgressEndDate] = useState('');
+  const sorting: SortingState = tableFilterState.sort_by
+    ? [
+        {
+          id: tableFilterState.sort_by,
+          desc: tableFilterState.order_by === 'desc',
+        },
+      ]
+    : [];
+
+  const handleSortingChange = (updater: Updater<SortingState>) => {
+    const next = typeof updater === 'function' ? updater(sorting) : updater;
+    if (next.length > 0) {
+      updateFilter('sort_by', next[0].id, true);
+      updateFilter('order_by', next[0].desc ? 'desc' : 'asc', true);
+    } else {
+      updateFilter('sort_by', '', true);
+      updateFilter('order_by', '', true);
+    }
+  };
+
   // ===== MODAL HOOKS =====
   const filterModal = useModal();
   const deleteModal = useModal();
@@ -237,6 +275,7 @@ const PurchaseTable = () => {
   // ===== TABLE COLUMNS DEFINITION =====
   const purchaseColumns: ColumnDef<Purchase>[] = [
     {
+      accessorKey: 'po_number',
       header: 'No. PR/PO',
       cell: (props) => {
         const { pr_number, po_number } = props.row.original;
@@ -267,36 +306,11 @@ const PurchaseTable = () => {
         );
       },
     },
-    {
-      accessorKey: 'supplier',
-      header: 'Vendor',
-      cell: (props) => props.row.original.supplier.name,
-    },
     {
       accessorKey: 'requester_name',
       header: 'Nama Pengaju',
       cell: (props) => props.row.original.requester_name || '-',
     },
-    {
-      accessorKey: 'products.name',
-      header: 'Produk',
-      cell: (props) => {
-        const products = props.row.original.products;
-        if (!products || products.length === 0) return '-';
-        return (
-          <ul className='list-disc pl-4'>
-            {products.map((product, index) => (
-              <li key={index}>{product.name}</li>
-            ))}
-          </ul>
-        );
-      },
-    },
-    {
-      accessorKey: 'location.name',
-      header: 'Lokasi',
-      cell: (props) => props.row.original.location?.name || '-',
-    },
     {
       accessorKey: 'po_date',
       header: 'Tgl. PO',
@@ -323,6 +337,7 @@ const PurchaseTable = () => {
     },
     {
       header: 'Aging',
+      enableSorting: false,
       cell: (props) => {
         const purchase = props.row.original;
         if (!purchase.po_date) return '-';
@@ -334,6 +349,203 @@ const PurchaseTable = () => {
       },
     },
     {
+      accessorKey: 'supplier',
+      header: 'Vendor',
+      cell: (props) => props.row.original.supplier.name,
+    },
+    {
+      accessorKey: 'location',
+      header: 'Lokasi',
+      cell: (props) => props.row.original.location?.name || '-',
+    },
+    {
+      accessorKey: 'warehouse',
+      header: 'Gudang',
+      enableSorting: false,
+      cell: (props) => {
+        const items = props.row.original.items;
+        if (!items || items.length === 0) return '-';
+        return (
+          <ul className='list-disc pl-4'>
+            {items.map((item, index) => (
+              <li key={index}>{item.warehouse?.name ?? '-'}</li>
+            ))}
+          </ul>
+        );
+      },
+    },
+    {
+      accessorKey: 'products',
+      header: 'Produk',
+      cell: (props) => {
+        const products = props.row.original.products;
+        if (!products || products.length === 0) return '-';
+        return (
+          <ul className='list-disc pl-4'>
+            {products.map((product, index) => (
+              <li key={index}>{product.name}</li>
+            ))}
+          </ul>
+        );
+      },
+    },
+    {
+      accessorKey: 'total_qty',
+      header: 'Kuantitas',
+      enableSorting: false,
+      cell: (props) => {
+        const items = props.row.original.items;
+        if (!items || items.length === 0) return '-';
+        return (
+          <ul className='list-disc pl-4'>
+            {items.map((item, index) => (
+              <li key={index}>{formatNumber(item.total_qty ?? 0)}</li>
+            ))}
+          </ul>
+        );
+      },
+    },
+    {
+      accessorKey: 'uom',
+      header: 'Satuan',
+      enableSorting: false,
+      cell: (props) => {
+        const items = props.row.original.items;
+        if (!items || items.length === 0) return '-';
+        return (
+          <ul className='list-disc pl-4'>
+            {items.map((item, index) => (
+              <li key={index}>{item.product?.uom?.name ?? '-'}</li>
+            ))}
+          </ul>
+        );
+      },
+    },
+    {
+      accessorKey: 'price',
+      header: 'Harga',
+      enableSorting: false,
+      cell: (props) => {
+        const items = props.row.original.items;
+        if (!items || items.length === 0) return '-';
+        return (
+          <ul className='list-disc pl-4'>
+            {items.map((item, index) => (
+              <li key={index}>{formatCurrency(item.price ?? 0)}</li>
+            ))}
+          </ul>
+        );
+      },
+    },
+    {
+      accessorKey: 'total_price',
+      header: 'Total Harga',
+      enableSorting: false,
+      cell: (props) => {
+        const items = props.row.original.items;
+        if (!items || items.length === 0) return '-';
+        return (
+          <ul className='list-disc pl-4'>
+            {items.map((item, index) => (
+              <li key={index}>{formatCurrency(item.total_price ?? 0)}</li>
+            ))}
+          </ul>
+        );
+      },
+    },
+    {
+      accessorKey: 'products_total',
+      header: 'Total Harga Produk',
+      cell: (props) => formatCurrency(props.row.original.products_total ?? 0),
+    },
+    {
+      accessorKey: 'expedition_vendor',
+      header: 'Vendor Ekspedisi',
+      enableSorting: false,
+      cell: (props) => {
+        const items = props.row.original.items;
+        if (!items || items.length === 0) return '-';
+        return (
+          <ul className='list-disc pl-4'>
+            {items.map((item, index) => (
+              <li key={index}>{item.expedition_vendor?.name ?? '-'}</li>
+            ))}
+          </ul>
+        );
+      },
+    },
+    {
+      accessorKey: 'expedition_qty',
+      header: 'Qty Ekspedisi',
+      enableSorting: false,
+      cell: (props) => {
+        const items = props.row.original.items;
+        if (!items || items.length === 0) return '-';
+        return (
+          <ul className='list-disc pl-4'>
+            {items.map((item, index) => (
+              <li key={index}>
+                {item.expedition_qty != null
+                  ? formatNumber(item.expedition_qty)
+                  : '-'}
+              </li>
+            ))}
+          </ul>
+        );
+      },
+    },
+    {
+      accessorKey: 'transport_per_item',
+      header: 'Harga Ekspedisi',
+      enableSorting: false,
+      cell: (props) => {
+        const items = props.row.original.items;
+        if (!items || items.length === 0) return '-';
+        return (
+          <ul className='list-disc pl-4'>
+            {items.map((item, index) => (
+              <li key={index}>
+                {item.transport_per_item != null
+                  ? formatCurrency(item.transport_per_item)
+                  : '-'}
+              </li>
+            ))}
+          </ul>
+        );
+      },
+    },
+    {
+      accessorKey: 'item_expedition_total',
+      header: 'Total Ekspedisi',
+      enableSorting: false,
+      cell: (props) => {
+        const items = props.row.original.items;
+        if (!items || items.length === 0) return '-';
+        return (
+          <ul className='list-disc pl-4'>
+            {items.map((item, index) => (
+              <li key={index}>
+                {item.expedition_total != null
+                  ? formatCurrency(item.expedition_total)
+                  : '-'}
+              </li>
+            ))}
+          </ul>
+        );
+      },
+    },
+    {
+      accessorKey: 'expedition_total',
+      header: 'Total Ekspedisi Semua Produk',
+      cell: (props) => formatCurrency(props.row.original.expedition_total ?? 0),
+    },
+    {
+      accessorKey: 'grand_total_all',
+      header: 'Grand Total All',
+      cell: (props) => formatCurrency(props.row.original.grand_total_all ?? 0),
+    },
+    {
+      accessorKey: 'status',
       header: 'Status Approval',
       cell: (props) => {
         const approval = props.row.original.latest_approval;
@@ -378,6 +590,19 @@ const PurchaseTable = () => {
         );
       },
     },
+    {
+      accessorKey: 'notes',
+      header: 'Notes',
+      cell: (props) => props.row.original.notes || '-',
+    },
+    {
+      accessorKey: 'created_at',
+      header: 'Tanggal Dibuat',
+      cell: (props) =>
+        props.row.original.created_at
+          ? formatDate(props.row.original.created_at, 'DD MMM YYYY')
+          : '-',
+    },
     {
       header: 'Aksi',
       cell: (props) => {
@@ -436,6 +661,9 @@ const PurchaseTable = () => {
 
   const filterSubmitHandler = (values: PurchaseFilter) => {
     setFilters({
+      start_date: values.start_date || '',
+      end_date: values.end_date || '',
+      filter_by: values.filterBy?.value || '',
       po_date: values.poDate,
       product_category_id: values.category.join(','),
       product_category_name:
@@ -460,6 +688,9 @@ const PurchaseTable = () => {
 
   const filterResetHandler = () => {
     setFilters({
+      start_date: '',
+      end_date: '',
+      filter_by: '',
       po_date: '',
       product_category_id: '',
       product_category_name: '',
@@ -478,6 +709,13 @@ const PurchaseTable = () => {
   };
 
   const purchaseFilterInitialValues = useMemo(() => {
+    const filterByLabelMap: Record<string, string> = {
+      po_date: 'Tanggal PO',
+      received_date: 'Tanggal Terima',
+      due_date: 'Tanggal Jatuh Tempo',
+      created_at: 'Tanggal Dibuat',
+    };
+
     const categoryIds = tableFilterState.product_category_id
       ? tableFilterState.product_category_id
           .split(',')
@@ -499,6 +737,16 @@ const PurchaseTable = () => {
 
     return {
       poDate: tableFilterState.po_date,
+      start_date: tableFilterState.start_date,
+      end_date: tableFilterState.end_date,
+      filterBy: tableFilterState.filter_by
+        ? {
+            value: tableFilterState.filter_by,
+            label:
+              filterByLabelMap[tableFilterState.filter_by] ||
+              tableFilterState.filter_by,
+          }
+        : undefined,
       category: categoryIds.map((value, index) => ({
         value: Number(value),
         label: categoryLabels[index] || value,
@@ -658,6 +906,7 @@ const PurchaseTable = () => {
                 'search',
                 'filter_by',
                 'sort_by',
+                'order_by',
                 'product_category_name',
                 'supplier_name',
                 'area_name',
@@ -665,7 +914,7 @@ const PurchaseTable = () => {
                 'project_flock_name',
                 'project_flock_kandang_name',
               ]}
-              fieldGroups={[['startDate', 'endDate']]}
+              fieldGroups={[['start_date', 'end_date']]}
               onClick={filterModal.openModal}
               className='px-3 py-2.5'
             />
@@ -771,7 +1020,8 @@ const PurchaseTable = () => {
               onPageSizeChange={setPageSize}
               isLoading={isLoading}
               sorting={sorting}
-              setSorting={setSorting}
+              setSorting={handleSortingChange}
+              manualSorting
               className={{
                 containerClassName: cn('p-3 mb-0'),
                 headerColumnClassName: 'text-nowrap',

src/components/pages/purchase/order/PurchaseOrderDetail.tsx

@@ -847,9 +847,25 @@ const PurchaseOrderDetail = ({
                   <span className='font-medium text-gray-600 min-w-[140px] shrink-0'>
                     Nomor
                   </span>
-                  <span className='text-gray-900 ml-3 break-all'>
+                  <div className='flex items-center gap-1'>
-                    : {purchaseData.pr_number}
+                    <span className='text-gray-900 ml-3 break-all'>
-                  </span>
+                      : {purchaseData.pr_number}
+                    </span>
+                    <Button
+                      type='button'
+                      variant='ghost'
+                      color='none'
+                      className='p-1 min-h-0 h-auto'
+                      onClick={() => {
+                        navigator.clipboard.writeText(
+                          purchaseData.pr_number || ''
+                        );
+                        toast.success('Nomor berhasil disalin');
+                      }}
+                    >
+                      <Icon icon='mdi:content-copy' width={14} height={14} />
+                    </Button>
+                  </div>
                 </div>
               </div>
               <div className='group'>
@@ -857,11 +873,31 @@ const PurchaseOrderDetail = ({
                   <span className='font-medium text-gray-600 min-w-[140px] shrink-0'>
                     Nomor PO
                   </span>
-                  <div className='ml-3'>
+                  <div className='ml-3 flex items-center gap-1'>
                     {canShowPurchaseOrderInvoice &&
                     purchaseData.po_number &&
                     purchaseData.po_number !== 'Belum dibuat' ? (
-                      <PurchaseOrderInvoice data={purchaseData} />
+                      <>
+                        <PurchaseOrderInvoice data={purchaseData} />
+                        <Button
+                          type='button'
+                          variant='ghost'
+                          color='none'
+                          className='p-1 min-h-0 h-auto'
+                          onClick={() => {
+                            navigator.clipboard.writeText(
+                              purchaseData.po_number || ''
+                            );
+                            toast.success('Nomor PO berhasil disalin');
+                          }}
+                        >
+                          <Icon
+                            icon='mdi:content-copy'
+                            width={14}
+                            height={14}
+                          />
+                        </Button>
+                      </>
                     ) : (
                       <>
                         : <i className='text-gray-400'>Belum dibuat</i>

src/components/pages/report/expense/ReportExpenseTabs.tsx

@@ -1,26 +1,38 @@
 'use client';
 
-import { useState } from 'react';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import Tabs from '@/components/Tabs';
 
 import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
 import ReportExpenseTab from '@/components/pages/report/expense/tab/ReportExpenseTab';
 import ReportDepreciationTab from '@/components/pages/report/expense/tab/ReportDepreciationTab';
 
+const VALID_TAB_IDS = ['operational-expense', 'depreciation'];
+
 const ReportExpenseTabs = () => {
-  const [activeTabId, setActiveTabId] = useState<string>('1');
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const tabParam = searchParams.get('tab') ?? 'operational-expense';
+  const activeTabId = VALID_TAB_IDS.includes(tabParam)
+    ? tabParam
+    : 'operational-expense';
   const tabActions = useTabActionsStore((state) => state.tabActions);
 
+  const handleTabChange = (tabId: string) => {
+    router.push(`${pathname}?tab=${tabId}`);
+  };
+
   const tabs = [
     {
-      id: '1',
+      id: 'operational-expense',
       label: 'Laporan Biaya Operasional',
-      content: <ReportExpenseTab tabId={'1'} />,
+      content: <ReportExpenseTab tabId={'operational-expense'} />,
     },
     {
-      id: '2',
+      id: 'depreciation',
       label: 'Laporan Depresiasi',
-      content: <ReportDepreciationTab tabId={'2'} />,
+      content: <ReportDepreciationTab tabId={'depreciation'} />,
     },
   ];
 
@@ -30,7 +42,7 @@ const ReportExpenseTabs = () => {
         tabs={tabs}
         variant='boxed'
         activeTabId={activeTabId}
-        onTabChange={setActiveTabId}
+        onTabChange={handleTabChange}
         className={{
           tabHeaderWrapper:
             'justify-between items-center p-3 border-b border-base-content/10',

src/components/pages/report/expense/tab/ReportDepreciationFilterModal.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { RefObject, useEffect, useMemo, useState } from 'react';
+import { RefObject } from 'react';
 import { useFormik } from 'formik';
 import * as yup from 'yup';
 
@@ -20,32 +20,34 @@ import { Location } from '@/types/api/master-data/location';
 import { ProjectFlock } from '@/types/api/production/project-flock';
 
 export type ReportDepreciationFilterValues = {
-  area_id: string | null;
+  area?: OptionType<string>;
-  location_id: string | null;
+  location?: OptionType<string>;
-  project_flock_id: string | null;
+  projectFlock?: OptionType<string>;
   period: string | null;
 };
 
 export const ReportDepreciationFilterSchema = yup.object({
-  area_id: yup.string().nullable(),
+  area: yup.mixed<OptionType<string>>().optional(),
-  location_id: yup.string().nullable(),
+  location: yup.mixed<OptionType<string>>().optional(),
-  project_flock_id: yup.string().nullable(),
+  projectFlock: yup.mixed<OptionType<string>>().optional(),
   period: yup.string().nullable().required('Periode wajib dipilih'),
-}) as yup.ObjectSchema<ReportDepreciationFilterValues>;
+});
 
 interface ReportDepreciationFilterModalProps {
   ref: RefObject<HTMLDialogElement | null>;
-  initialValues?: ReportDepreciationFilterValues;
+  initialValues?: Partial<ReportDepreciationFilterValues>;
   onSubmit?: (values: Partial<ReportDepreciationFilterValues>) => void;
   onReset?: () => void;
 }
 
-const defaultInitialValues: ReportDepreciationFilterValues = {
+const defaultInitialValues: (
-  area_id: null,
+  initialValues?: Partial<ReportDepreciationFilterValues>
-  location_id: null,
+) => ReportDepreciationFilterValues = (initialValues) => ({
-  project_flock_id: null,
+  area: undefined,
-  period: null,
+  location: undefined,
-};
+  projectFlock: undefined,
+  period: initialValues?.period ?? null,
+});
 
 const ReportDepreciationFilterModal = ({
   ref,
@@ -53,22 +55,19 @@ const ReportDepreciationFilterModal = ({
   onSubmit,
   onReset,
 }: ReportDepreciationFilterModalProps) => {
-  const [selectedAreaId, setSelectedAreaId] = useState<string | undefined>(
-    initialValues?.area_id || undefined
-  );
-  const [selectedLocationId, setSelectedLocationId] = useState<
-    string | undefined
-  >(initialValues?.location_id || undefined);
-
-  useEffect(() => {
-    setSelectedAreaId(initialValues?.area_id || undefined);
-    setSelectedLocationId(initialValues?.location_id || undefined);
-  }, [initialValues?.area_id, initialValues?.location_id]);
-
   const closeModalHandler = () => {
     ref.current?.close();
   };
 
+  const formik = useFormik<ReportDepreciationFilterValues>({
+    initialValues: { ...defaultInitialValues(initialValues), ...initialValues },
+    validationSchema: ReportDepreciationFilterSchema,
+    onSubmit: async (values) => {
+      onSubmit?.(values);
+      closeModalHandler();
+    },
+  });
+
   const {
     setInputValue: setAreaInputValue,
     options: areaOptions,
@@ -82,7 +81,7 @@ const ReportDepreciationFilterModal = ({
     isLoadingOptions: isLoadingLocationOptions,
     loadMore: loadMoreLocations,
   } = useSelect<Location>(LocationApi.basePath, 'id', 'name', 'search', {
-    area_id: selectedAreaId || '',
+    area_id: String(formik.values.area?.value ?? ''),
   });
 
   const {
@@ -96,73 +95,35 @@ const ReportDepreciationFilterModal = ({
     'flock_name',
     'search',
     {
-      location_id: selectedLocationId || '',
+      location_id: String(formik.values.location?.value ?? ''),
     }
   );
 
-  const formik = useFormik<ReportDepreciationFilterValues>({
+  const formikResetHandler = () => {
-    initialValues: initialValues || defaultInitialValues,
+    onReset?.();
-    enableReinitialize: true,
+    formik.resetForm({ values: defaultInitialValues(initialValues) });
-    validationSchema: ReportDepreciationFilterSchema,
+    closeModalHandler();
-    onSubmit: async (values) => {
+  };
-      onSubmit?.(values);
-      closeModalHandler();
-    },
-    onReset: (_) => {
-      onReset?.();
-      closeModalHandler();
-    },
-  });
-
-  const areaValue = 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 locationValue = 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 projectFlockValue = useMemo(() => {
-    if (!formik.values.project_flock_id) return null;
-    return (
-      projectFlockOptions.find(
-        (opt) => String(opt.value) === formik.values.project_flock_id
-      ) || null
-    );
-  }, [formik.values.project_flock_id, projectFlockOptions]);
 
   const areaChangeHandler = (val: OptionType | OptionType[] | null) => {
-    const areaId = val && !Array.isArray(val) ? String(val.value) : null;
+    const area =
-
+      val && !Array.isArray(val) ? (val as OptionType<string>) : undefined;
-    setSelectedAreaId(areaId || undefined);
+    formik.setFieldValue('area', area);
-    formik.setFieldValue('area_id', areaId);
+    formik.setFieldValue('location', undefined);
-    formik.setFieldValue('location_id', null);
+    formik.setFieldValue('projectFlock', undefined);
-    formik.setFieldValue('project_flock_id', null);
-    setSelectedLocationId(undefined);
   };
 
   const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
-    const locationId = val && !Array.isArray(val) ? String(val.value) : null;
+    const location =
-
+      val && !Array.isArray(val) ? (val as OptionType<string>) : undefined;
-    setSelectedLocationId(locationId || undefined);
+    formik.setFieldValue('location', location);
-    formik.setFieldValue('location_id', locationId);
+    formik.setFieldValue('projectFlock', undefined);
-    formik.setFieldValue('project_flock_id', null);
   };
 
   const projectFlockChangeHandler = (val: OptionType | OptionType[] | null) => {
-    const projectFlockId =
+    const projectFlock =
-      val && !Array.isArray(val) ? String(val.value) : null;
+      val && !Array.isArray(val) ? (val as OptionType<string>) : undefined;
-
+    formik.setFieldValue('projectFlock', projectFlock);
-    formik.setFieldValue('project_flock_id', projectFlockId);
   };
 
   return (
@@ -174,7 +135,7 @@ const ReportDepreciationFilterModal = ({
     >
       <form
         onSubmit={formik.handleSubmit}
-        onReset={formik.handleReset}
+        onReset={formikResetHandler}
         className='w-full flex flex-col'
       >
         <div className='p-4 flex items-center justify-between gap-2 border-b border-base-content/10'>
@@ -199,7 +160,7 @@ const ReportDepreciationFilterModal = ({
             label='Area'
             placeholder='Pilih Area'
             options={areaOptions}
-            value={areaValue}
+            value={formik.values.area ?? null}
             onChange={areaChangeHandler}
             onInputChange={setAreaInputValue}
             onMenuScrollToBottom={loadMoreAreas}
@@ -213,7 +174,7 @@ const ReportDepreciationFilterModal = ({
             label='Lokasi'
             placeholder='Pilih Lokasi'
             options={locationOptions}
-            value={locationValue}
+            value={formik.values.location ?? null}
             onChange={locationChangeHandler}
             onInputChange={setLocationInputValue}
             onMenuScrollToBottom={loadMoreLocations}
@@ -227,7 +188,7 @@ const ReportDepreciationFilterModal = ({
             label='Project Flock'
             placeholder='Pilih Project Flock'
             options={projectFlockOptions}
-            value={projectFlockValue}
+            value={formik.values.projectFlock ?? null}
             onChange={projectFlockChangeHandler}
             onInputChange={setProjectFlockInputValue}
             onMenuScrollToBottom={loadMoreProjectFlocks}

src/components/pages/report/expense/tab/ReportDepreciationTab.tsx

@@ -17,6 +17,7 @@ import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
 import { ReportDepreciation } from '@/types/api/report/report-expense';
 import { DepreciationReportApi } from '@/services/api/report/expense-report';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { OptionType } from '@/components/input/SelectInput';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { formatCurrency, formatDate, formatNumber } from '@/lib/helper';
 
@@ -32,20 +33,27 @@ const ReportDepreciationTab = ({ tabId }: ReportDepreciationTabProps) => {
     setPageSize,
     toQueryString: getTableFilterQueryString,
     reset: resetFilter,
-  } = useTableFilter({
+  } = useTableFilter<{
+    area?: OptionType<string>;
+    location?: OptionType<string>;
+    projectFlock?: OptionType<string>;
+    period: string;
+  }>({
     initial: {
-      area_id: '',
+      area: undefined,
-      location_id: '',
+      location: undefined,
-      project_flock_id: '',
+      projectFlock: undefined,
       period: formatDate(Date.now(), 'YYYY-MM-DD'),
     },
     paramMap: {
       pageSize: 'limit',
-      area_id: 'area_id',
+      area: 'area_id',
-      location_id: 'location_id',
+      location: 'location_id',
-      project_flock_id: 'project_flock_id',
+      projectFlock: 'project_flock_id',
       period: 'period',
     },
+    persist: true,
+    storeName: 'report-depreciation-table',
   });
 
   const { data: depreciationsResponse, isLoading: isLoadingDepreciations } =
@@ -109,7 +117,7 @@ const ReportDepreciationTab = ({ tabId }: ReportDepreciationTabProps) => {
         <ButtonFilter
           values={tableFilterState}
           excludeFields={['page', 'pageSize']}
-          onClick={() => filterModal.openModal()}
+          onClick={filterModal.openModal}
           variant='outline'
           className='px-3 py-2.5'
         />
@@ -239,12 +247,13 @@ const ReportDepreciationTab = ({ tabId }: ReportDepreciationTabProps) => {
         initialValues={tableFilterState}
         onReset={resetFilter}
         onSubmit={(values) => {
-          updateFilter('area_id', values.area_id ?? '');
+          updateFilter('area', values.area, true);
-          updateFilter('location_id', values.location_id ?? '');
+          updateFilter('location', values.location, true);
-          updateFilter('project_flock_id', values.project_flock_id ?? '');
+          updateFilter('projectFlock', values.projectFlock, true);
           updateFilter(
             'period',
-            values.period ? formatDate(values.period, 'YYYY-MM-DD') : ''
+            values.period ? formatDate(values.period, 'YYYY-MM-DD') : '',
+            true
           );
         }}
       />

src/components/pages/report/expense/tab/ReportExpenseTab.tsx

@@ -39,7 +39,7 @@ import {
 } from '@/services/api/master-data';
 import { Supplier } from '@/types/api/master-data/supplier';
 import { Nonstock } from '@/types/api/master-data/nonstock';
-import { ColumnDef } from '@tanstack/react-table';
+import { ColumnDef, SortingState, Updater } from '@tanstack/react-table';
 import { httpClient } from '@/services/http/client';
 import { BaseApiResponse } from '@/types/api/api-general';
 import ButtonFilter from '@/components/helper/ButtonFilter';
@@ -73,6 +73,25 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
 
+  // ===== SORTING STATE =====
+  const [sortBy, setSortBy] = useState('');
+  const [orderBy, setOrderBy] = useState('');
+
+  const sorting: SortingState = sortBy
+    ? [{ id: sortBy, desc: orderBy === 'desc' }]
+    : [];
+
+  const handleSortingChange = (updater: Updater<SortingState>) => {
+    const next = typeof updater === 'function' ? updater(sorting) : updater;
+    if (next.length > 0) {
+      setSortBy(next[0].id);
+      setOrderBy(next[0].desc ? 'desc' : 'asc');
+    } else {
+      setSortBy('');
+      setOrderBy('');
+    }
+  };
+
   const handleFilterModalOpenRef = useRef(() => {});
 
   const filterModal = useModal();
@@ -252,6 +271,8 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
       if (filterParams.category) {
         params.append('category', filterParams.category);
       }
+      if (sortBy) params.append('sort_by', sortBy);
+      if (orderBy) params.append('sort_order', orderBy);
 
       Object.entries(extraParams ?? {}).forEach(([key, value]) => {
         params.set(key, value);
@@ -259,7 +280,7 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
 
       return params.toString();
     },
-    [filterParams]
+    [filterParams, sortBy, orderBy]
   );
 
   // ===== DATA FETCHING =====
@@ -443,19 +464,23 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
     return [
       {
         header: 'No',
+        enableSorting: false,
         cell: (props) => (page - 1) * pageSize + props.row.index + 1,
       },
       {
         header: 'No. PO',
         accessorKey: 'po_number',
+        enableSorting: true,
       },
       {
         header: 'No. Referensi',
         accessorKey: 'reference_number',
+        enableSorting: true,
       },
       {
         header: 'Tanggal Realisasi',
         accessorKey: 'realization_date',
+        enableSorting: true,
         cell: ({ row }) => {
           return formatDate(row.original?.realization_date, 'DD MMM, YYYY');
         },
@@ -463,6 +488,7 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
       {
         header: 'Tanggal Transaksi',
         accessorKey: 'transaction_date',
+        enableSorting: true,
         cell: ({ row }) => {
           return formatDate(row.original?.transaction_date, 'DD MMM, YYYY');
         },
@@ -470,21 +496,30 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
       {
         header: 'Kategori',
         accessorKey: 'category',
+        enableSorting: true,
       },
       {
         header: 'Produk',
+        accessorKey: 'product',
+        enableSorting: true,
         accessorFn: (row) => row.pengajuan?.nonstock?.name,
       },
       {
         header: 'Supplier',
+        accessorKey: 'supplier',
+        enableSorting: true,
         accessorFn: (row) => row.supplier?.name,
       },
       {
         header: 'Lokasi',
+        accessorKey: 'location',
+        enableSorting: true,
         accessorFn: (row) => row.kandang?.location?.name,
       },
       {
         header: 'Kandang',
+        accessorKey: 'kandang',
+        enableSorting: true,
         accessorFn: (row) => row.kandang?.name,
       },
       {
@@ -492,23 +527,19 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
         columns: [
           {
             header: 'Qty',
-            id: 'qty_pengajuan',
+            accessorKey: 'qty_pengajuan',
-            accessorFn: (row) => row.pengajuan?.qty,
             cell: ({ row }) =>
               row.original.pengajuan?.qty?.toLocaleString('id-ID') || '0',
           },
           {
             header: 'Harga',
-            id: 'harga_pengajuan',
+            accessorKey: 'price_pengajuan',
-            accessorFn: (row) => row.pengajuan?.price,
             cell: ({ row }) =>
               formatCurrency(row.original.pengajuan?.price || 0),
           },
           {
             header: 'Total',
-            id: 'total_pengajuan',
+            accessorKey: 'total_pengajuan',
-            accessorFn: (row) =>
-              (row.pengajuan?.qty || 0) * (row.pengajuan?.price || 0),
             cell: ({ row }) => {
               const total =
                 (row.original.pengajuan?.qty || 0) *
@@ -523,23 +554,19 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
         columns: [
           {
             header: 'Qty',
-            id: 'qty_realisasi',
+            accessorKey: 'qty_realisasi',
-            accessorFn: (row) => row.realisasi?.qty,
             cell: ({ row }) =>
               row.original.realisasi?.qty?.toLocaleString('id-ID') || '0',
           },
           {
             header: 'Harga',
-            id: 'harga_realisasi',
+            accessorKey: 'price_realisasi',
-            accessorFn: (row) => row.realisasi?.price,
             cell: ({ row }) =>
               formatCurrency(row.original.realisasi?.price || 0),
           },
           {
             header: 'Total',
-            id: 'total_realisasi',
+            accessorKey: 'total_realisasi',
-            accessorFn: (row) =>
-              (row.realisasi?.qty || 0) * (row.realisasi?.price || 0),
             cell: ({ row }) => {
               const total =
                 (row.original.realisasi?.qty || 0) *
@@ -550,6 +577,7 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
         ],
       },
       {
+        id: 'realization_status',
         header: 'Status Pencairan',
         cell: (props) => (
           <RealizationStatusBadge
@@ -558,6 +586,7 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
         ),
       },
       {
+        id: 'bop_status',
         header: 'Status BOP',
         cell: (props) => (
           <ExpenseStatusBadge approval={props.row.original?.latest_approval} />
@@ -602,6 +631,9 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
               totalItems={meta?.total_results || 0}
               onPageChange={setPage}
               onPageSizeChange={setPageSize}
+              sorting={sorting}
+              setSorting={handleSortingChange}
+              manualSorting
               className={{
                 containerClassName: 'w-full mb-0!',
                 tableWrapperClassName: 'overflow-x-auto',

src/components/pages/report/finance/FinanceTabs.tsx

@@ -1,25 +1,47 @@
 'use client';
 
-import { useState } from 'react';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import Tabs from '@/components/Tabs';
 import CustomerPaymentTab from '@/components/pages/report/finance/tab/CustomerPaymentTab';
 import DebtSupplierTab from '@/components/pages/report/finance/tab/DebtSupplierTab';
+import BalanceMonitoringTab from '@/components/pages/report/finance/tab/BalanceMonitoringTab';
 import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
 
+const VALID_TAB_IDS = [
+  'debt-supplier',
+  'customer-payment',
+  'balance-monitoring',
+];
+
 const FinanceTabs = () => {
-  const [activeTabId, setActiveTabId] = useState<string>('1');
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const tabParam = searchParams.get('tab') ?? 'debt-supplier';
+  const activeTabId = VALID_TAB_IDS.includes(tabParam)
+    ? tabParam
+    : 'debt-supplier';
   const tabActions = useTabActionsStore((state) => state.tabActions);
 
+  const handleTabChange = (tabId: string) => {
+    router.push(`${pathname}?tab=${tabId}`);
+  };
+
   const tabs = [
     {
-      id: '1',
+      id: 'debt-supplier',
       label: 'Rekapitulasi Hutang Ke Supplier',
-      content: <DebtSupplierTab tabId={'1'} />,
+      content: <DebtSupplierTab tabId={'debt-supplier'} />,
     },
     {
-      id: '2',
+      id: 'customer-payment',
       label: 'Kontrol Pembayaran Customer',
-      content: <CustomerPaymentTab tabId={'2'} />,
+      content: <CustomerPaymentTab tabId={'customer-payment'} />,
+    },
+    {
+      id: 'balance-monitoring',
+      label: 'Monitoring Saldo',
+      content: <BalanceMonitoringTab tabId={'balance-monitoring'} />,
     },
   ];
 
@@ -29,7 +51,7 @@ const FinanceTabs = () => {
         tabs={tabs}
         variant='boxed'
         activeTabId={activeTabId}
-        onTabChange={setActiveTabId}
+        onTabChange={handleTabChange}
         className={{
           tabHeaderWrapper:
             'justify-between items-center p-3 border-b border-base-content/10',

src/components/pages/report/finance/tab/BalanceMonitoringTab.tsx

@@ -0,0 +1,677 @@
+'use client';
+
+import { useState, useMemo, useEffect, useCallback } from 'react';
+import useSWR from 'swr';
+import { Icon } from '@iconify/react';
+import { useFormik } from 'formik';
+import toast from 'react-hot-toast';
+import { ColumnDef } from '@tanstack/react-table';
+import { AxiosError } from 'axios';
+import { FinanceApi } from '@/services/api/report/finance-report';
+import { CustomerApi } from '@/services/api/master-data';
+import { UserApi } from '@/services/api/user';
+import { useSelect, OptionType } from '@/components/input/SelectInput';
+import { httpClientFetcher, SWRHttpKey } from '@/services/http/client';
+import { BaseApiResponse } from '@/types/api/api-general';
+import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
+import SelectInputRadio from '@/components/input/SelectInputRadio';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
+import ButtonFilter from '@/components/helper/ButtonFilter';
+import { formatCurrency, formatNumber } from '@/lib/helper';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { BalanceMonitoringRow } from '@/types/api/report/balance-monitoring';
+import { CustomerPaymentRow } from '@/types/api/report/customer-payment';
+import Modal, { useModal } from '@/components/Modal';
+import Button from '@/components/Button';
+import Dropdown from '@/components/Dropdown';
+import DateInput from '@/components/input/DateInput';
+import Table from '@/components/Table';
+import CustomerSupplierSkeleton from '@/components/pages/report/finance/skeleton/CustomerSupplierSkeleton';
+
+interface BalanceMonitoringTabProps {
+  tabId: string;
+}
+
+const filterByOptions: OptionType<string>[] = [
+  { label: 'Tanggal Penjualan (SO Date)', value: 'sold_at' },
+  { label: 'Tanggal Realisasi (Delivery Date)', value: 'realized_at' },
+];
+
+const BalanceMonitoringTab = ({ tabId }: BalanceMonitoringTabProps) => {
+  const [hasDateError, setHasDateError] = useState(false);
+  const [dateErrorShown, setDateErrorShown] = useState(false);
+  const [isExcelExportLoading, setIsExcelExportLoading] = useState(false);
+
+  const filterModal = useModal();
+
+  const setTabActions = useTabActionsStore((state) => state.setTabActions);
+  const clearTabActions = useTabActionsStore((state) => state.clearTabActions);
+
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+    reset: resetFilter,
+  } = useTableFilter<{
+    start_date: string;
+    end_date: string;
+    customers: OptionType<number>[];
+    salesPersons: OptionType<number>[];
+    filterBy?: OptionType<string>;
+    sort_by: string;
+    order_by: string;
+  }>({
+    initial: {
+      start_date: '',
+      end_date: '',
+      customers: [],
+      salesPersons: [],
+      filterBy: undefined,
+      sort_by: '',
+      order_by: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      start_date: 'start_date',
+      end_date: 'end_date',
+      customers: 'customer_ids',
+      salesPersons: 'sales_ids',
+      filterBy: 'filter_by',
+      sort_by: 'sort_by',
+      order_by: 'sort_order',
+    },
+    persist: true,
+    storeName: 'balance-monitoring-table',
+  });
+
+  // const sorting: SortingState = tableFilterState.sort_by
+  //   ? [
+  //       {
+  //         id: tableFilterState.sort_by,
+  //         desc: tableFilterState.order_by === 'desc',
+  //       },
+  //     ]
+  //   : [];
+
+  // const handleSortingChange = (updater: Updater<SortingState>) => {
+  //   const next = typeof updater === 'function' ? updater(sorting) : updater;
+  //   if (next.length > 0) {
+  //     updateFilter('sort_by', next[0].id, true);
+  //     updateFilter('order_by', next[0].desc ? 'desc' : 'asc', true);
+  //   } else {
+  //     updateFilter('sort_by', '', true);
+  //     updateFilter('order_by', '', true);
+  //   }
+  // };
+
+  const {
+    options: customerOptions,
+    setInputValue: setCustomerInput,
+    isLoadingOptions: isLoadingCustomers,
+    loadMore: loadMoreCustomers,
+  } = useSelect(CustomerApi.basePath, 'id', 'name', 'search');
+
+  const {
+    options: salesOptions,
+    setInputValue: setSalesInput,
+    isLoadingOptions: isLoadingSales,
+    loadMore: loadMoreSales,
+  } = useSelect(UserApi.basePath, 'id', 'name', 'search');
+
+  const formik = useFormik({
+    initialValues: {
+      start_date: tableFilterState.start_date,
+      end_date: tableFilterState.end_date,
+      customers: tableFilterState.customers,
+      salesPersons: tableFilterState.salesPersons,
+      filterBy: tableFilterState.filterBy,
+    },
+    onSubmit: (values) => {
+      updateFilter('start_date', values.start_date, true);
+      updateFilter('end_date', values.end_date, true);
+      updateFilter('customers', values.customers, true);
+      updateFilter('salesPersons', values.salesPersons, true);
+      updateFilter('filterBy', values.filterBy, true);
+      filterModal.closeModal();
+    },
+  });
+
+  const formikResetHandler = () => {
+    resetFilter();
+
+    setHasDateError(false);
+    if (dateErrorShown) {
+      toast.dismiss();
+      setDateErrorShown(false);
+    }
+
+    formik.resetForm({
+      values: {
+        start_date: '',
+        end_date: '',
+        customers: [],
+        salesPersons: [],
+        filterBy: undefined,
+      },
+    });
+
+    filterModal.closeModal();
+  };
+
+  const handleStartDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    formik.setFieldValue('start_date', value);
+
+    if (value && formik.values.end_date) {
+      if (new Date(formik.values.end_date) < new Date(value)) {
+        setHasDateError(true);
+        if (!dateErrorShown) {
+          toast.error('Tanggal akhir tidak boleh masa lampau', {
+            duration: Infinity,
+          });
+          setDateErrorShown(true);
+        }
+      } else {
+        setHasDateError(false);
+        if (dateErrorShown) {
+          toast.dismiss();
+          setDateErrorShown(false);
+        }
+      }
+    } else {
+      setHasDateError(false);
+    }
+  };
+
+  const handleEndDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    formik.setFieldValue('end_date', value);
+
+    if (value && formik.values.start_date) {
+      if (new Date(value) < new Date(formik.values.start_date)) {
+        setHasDateError(true);
+        if (!dateErrorShown) {
+          toast.error('Tanggal akhir tidak boleh masa lampau', {
+            duration: Infinity,
+          });
+          setDateErrorShown(true);
+        }
+        return;
+      }
+    }
+
+    setHasDateError(false);
+    if (dateErrorShown) {
+      toast.dismiss();
+      setDateErrorShown(false);
+    }
+  };
+
+  const { data: balanceMonitoringsResponse, isLoading } = useSWR<
+    BaseApiResponse<BalanceMonitoringRow[]>,
+    AxiosError<BaseApiResponse>,
+    SWRHttpKey
+  >(
+    `${FinanceApi.basePath}/balance-monitoring${getTableFilterQueryString()}`,
+    httpClientFetcher
+  );
+
+  const balanceMonitorings: BalanceMonitoringRow[] = isResponseSuccess(
+    balanceMonitoringsResponse
+  )
+    ? ((balanceMonitoringsResponse.data as BalanceMonitoringRow[]) ?? [])
+    : [];
+
+  const meta =
+    isResponseSuccess(balanceMonitoringsResponse) &&
+    balanceMonitoringsResponse.meta
+      ? balanceMonitoringsResponse.meta
+      : null;
+
+  const handleExportExcel = useCallback(async () => {
+    setIsExcelExportLoading(true);
+    try {
+      const customer_ids =
+        tableFilterState.customers.length > 0
+          ? tableFilterState.customers.map((o) => String(o.value)).join(',')
+          : undefined;
+      const sales_ids =
+        tableFilterState.salesPersons.length > 0
+          ? tableFilterState.salesPersons.map((o) => String(o.value)).join(',')
+          : undefined;
+
+      await FinanceApi.exportBalanceMonitoringToExcel(
+        customer_ids,
+        sales_ids,
+        tableFilterState.filterBy?.value,
+        tableFilterState.start_date || undefined,
+        tableFilterState.end_date || undefined
+      );
+      toast.success('Excel berhasil dibuat dan diunduh.');
+    } catch {
+      toast.error('Gagal membuat Excel. Silakan coba lagi.');
+    } finally {
+      setIsExcelExportLoading(false);
+    }
+  }, [tableFilterState]);
+
+  // Inject tab actions directly — no nested component, no remount cycle
+  useEffect(() => {
+    setTabActions(
+      tabId,
+      <div className='flex flex-row gap-3'>
+        <ButtonFilter
+          values={{
+            start_date: tableFilterState.start_date,
+            end_date: tableFilterState.end_date,
+            customers: tableFilterState.customers,
+            salesPersons: tableFilterState.salesPersons,
+            filterBy: tableFilterState.filterBy,
+          }}
+          fieldGroups={[['start_date', 'end_date']]}
+          onClick={filterModal.openModal}
+          variant='outline'
+          className='px-3 py-2.5'
+        />
+
+        <Dropdown
+          align='end'
+          direction='bottom'
+          className={{
+            content:
+              'mt-1 rounded-xl border border-base-content/5 shadow-sm overflow-hidden',
+          }}
+          trigger={
+            <Button
+              variant='outline'
+              color='none'
+              isLoading={isExcelExportLoading}
+              className='px-3 py-2.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
+            >
+              <div className='flex flex-row items-center gap-1.5'>
+                <Icon
+                  icon='heroicons:cloud-arrow-down'
+                  width={20}
+                  height={20}
+                />
+                <span>Export</span>
+                <div className='w-px self-stretch bg-base-content/10' />
+                <Icon icon='heroicons:chevron-down' width={14} height={14} />
+              </div>
+            </Button>
+          }
+        >
+          <Button
+            variant='ghost'
+            color='none'
+            onClick={handleExportExcel}
+            isLoading={isExcelExportLoading}
+            className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
+          >
+            <Icon icon='heroicons:table-cells' width={20} height={20} />
+            Ekspor ke Excel
+          </Button>
+        </Dropdown>
+      </div>
+    );
+  }, [
+    tabId,
+    setTabActions,
+    tableFilterState,
+    filterModal.openModal,
+    isExcelExportLoading,
+    handleExportExcel,
+  ]);
+
+  useEffect(() => {
+    return () => clearTabActions(tabId);
+  }, [tabId, clearTabActions]);
+
+  const columns = useMemo(
+    (): ColumnDef<BalanceMonitoringRow>[] => [
+      {
+        header: 'No',
+        enableSorting: false,
+        cell: (props) =>
+          (tableFilterState.page - 1) * tableFilterState.pageSize +
+          props.row.index +
+          1,
+      },
+      {
+        header: 'Customer',
+        accessorKey: 'customer.name',
+        enableSorting: true,
+        id: 'customer_name',
+        cell: ({ row }) => row.original.customer.name,
+      },
+      {
+        header: 'Saldo Awal',
+        accessorKey: 'saldo_awal',
+        id: 'saldo_awal',
+        enableSorting: true,
+        cell: ({ row }) => (
+          <div className='text-right'>
+            {formatCurrency(row.original.saldo_awal)}
+          </div>
+        ),
+      },
+      {
+        header: 'Penjualan Ayam',
+        columns: [
+          {
+            header: 'Ekor',
+            accessorKey: 'penjualan_ayam.ekor',
+            id: 'penjualan_ayam_ekor',
+            enableSorting: true,
+            cell: ({ row }) => (
+              <div className='text-right'>
+                {formatNumber(row.original.penjualan_ayam.ekor)}
+              </div>
+            ),
+          },
+          {
+            header: 'Kg',
+            accessorKey: 'penjualan_ayam.kg',
+            id: 'penjualan_ayam_kg',
+            enableSorting: true,
+            cell: ({ row }) => (
+              <div className='text-right'>
+                {formatNumber(row.original.penjualan_ayam.kg)}
+              </div>
+            ),
+          },
+          {
+            header: 'Nominal',
+            accessorKey: 'penjualan_ayam.nominal',
+            id: 'penjualan_ayam_nominal',
+            enableSorting: true,
+            cell: ({ row }) => (
+              <div className='text-right'>
+                {formatCurrency(row.original.penjualan_ayam.nominal)}
+              </div>
+            ),
+          },
+        ],
+      },
+      {
+        header: 'Penjualan Telur',
+        columns: [
+          {
+            header: 'Butir',
+            accessorKey: 'penjualan_telur.butir',
+            id: 'penjualan_telur_butir',
+            enableSorting: true,
+            cell: ({ row }) => (
+              <div className='text-right'>
+                {formatNumber(row.original.penjualan_telur.butir)}
+              </div>
+            ),
+          },
+          {
+            header: 'Kg',
+            accessorKey: 'penjualan_telur.kg',
+            id: 'penjualan_telur_kg',
+            enableSorting: true,
+            cell: ({ row }) => (
+              <div className='text-right'>
+                {formatNumber(row.original.penjualan_telur.kg)}
+              </div>
+            ),
+          },
+          {
+            header: 'Nominal',
+            accessorKey: 'penjualan_telur.nominal',
+            id: 'penjualan_telur_nominal',
+            enableSorting: true,
+            cell: ({ row }) => (
+              <div className='text-right'>
+                {formatCurrency(row.original.penjualan_telur.nominal)}
+              </div>
+            ),
+          },
+        ],
+      },
+      {
+        header: 'Penjualan Trading',
+        accessorKey: 'penjualan_trading.nominal',
+        id: 'penjualan_trading',
+        enableSorting: true,
+        cell: ({ row }) => (
+          <div className='text-right'>
+            {formatCurrency(row.original.penjualan_trading.nominal)}
+          </div>
+        ),
+      },
+      {
+        header: 'Pembayaran',
+        accessorKey: 'pembayaran',
+        id: 'pembayaran',
+        enableSorting: true,
+        cell: ({ row }) => (
+          <div className='text-right'>
+            {formatCurrency(row.original.pembayaran)}
+          </div>
+        ),
+      },
+      {
+        header: 'Aging',
+        accessorKey: 'aging',
+        id: 'aging',
+        enableSorting: true,
+        cell: ({ row }) => (
+          <div className='text-center'>
+            {formatNumber(row.original.aging)} hari
+          </div>
+        ),
+      },
+      {
+        header: 'Aging Rata-Rata',
+        accessorKey: 'aging_rata_rata',
+        id: 'aging_rata_rata',
+        enableSorting: true,
+        cell: ({ row }) => (
+          <div className='text-center'>
+            {formatNumber(row.original.aging_rata_rata)} hari
+          </div>
+        ),
+      },
+      {
+        header: 'Saldo Akhir',
+        accessorKey: 'saldo_akhir',
+        id: 'saldo_akhir',
+        enableSorting: true,
+        cell: ({ row }) => (
+          <div
+            className={`text-right font-semibold ${row.original.saldo_akhir < 0 ? 'text-error' : ''}`}
+          >
+            {formatCurrency(row.original.saldo_akhir)}
+          </div>
+        ),
+      },
+    ],
+    [tableFilterState.page, tableFilterState.pageSize]
+  );
+
+  return (
+    <>
+      <div className='w-full p-0 sm:p-3 flex flex-col gap-3'>
+        {isLoading && (
+          <div className='w-full flex flex-row justify-center items-center p-4'>
+            <span className='loading loading-spinner loading-xl' />
+          </div>
+        )}
+
+        {!isLoading && balanceMonitorings.length === 0 && (
+          <CustomerSupplierSkeleton
+            columns={columns as unknown as ColumnDef<CustomerPaymentRow>[]}
+            icon={
+              <Icon
+                icon='heroicons:chart-bar'
+                className='text-white'
+                width={20}
+                height={20}
+              />
+            }
+            title='Data Not Yet Available'
+            subtitle='Please change your filters to get the data.'
+          />
+        )}
+
+        {!isLoading && balanceMonitorings.length > 0 && (
+          <>
+            <div className='w-full overflow-x-auto'>
+              <Table
+                data={balanceMonitorings}
+                columns={columns}
+                pageSize={tableFilterState.pageSize || 10}
+                page={tableFilterState.page || 1}
+                totalItems={meta?.total_results || 0}
+                onPageChange={setPage}
+                onPageSizeChange={setPageSize}
+                // sorting={sorting}
+                // setSorting={handleSortingChange}
+                // manualSorting
+                className={{
+                  containerClassName: 'w-full mb-0!',
+                  tableWrapperClassName: 'overflow-x-auto',
+                  tableClassName: 'w-full table-auto text-sm',
+                  headerRowClassName: 'border-b border-b-gray-200 bg-gray-50',
+                  headerColumnClassName:
+                    'px-4 py-3 text-xs font-semibold text-gray-700 text-left border border-gray-200 text-nowrap',
+                  bodyRowClassName:
+                    'hover:bg-gray-50 transition-colors border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200',
+                  bodyColumnClassName:
+                    'px-4 py-3 text-xs text-gray-900 whitespace-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>
+          <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={formikResetHandler}>
+          <div className='p-4 flex flex-col gap-3'>
+            <div>
+              <label className='block text-xs font-semibold text-base-content py-2'>
+                Tanggal
+              </label>
+              <div className='flex flex-row gap-1.5 items-center justify-between'>
+                <DateInput
+                  name='start_date'
+                  value={formik.values.start_date || ''}
+                  onChange={handleStartDateChange}
+                  className={{ wrapper: 'w-full' }}
+                  isNestedModal
+                />
+                <hr className='w-full max-w-3 h-px border-base-content/10' />
+                <DateInput
+                  name='end_date'
+                  value={formik.values.end_date || ''}
+                  onChange={handleEndDateChange}
+                  className={{ wrapper: 'w-full' }}
+                  isNestedModal
+                  isError={hasDateError}
+                />
+              </div>
+            </div>
+
+            <SelectInputCheckbox
+              label='Customer'
+              placeholder='Pilih Customer'
+              options={customerOptions}
+              value={formik.values.customers}
+              onChange={(val) =>
+                formik.setFieldValue('customers', Array.isArray(val) ? val : [])
+              }
+              onInputChange={setCustomerInput}
+              isLoading={isLoadingCustomers}
+              isClearable
+              onMenuScrollToBottom={loadMoreCustomers}
+              className={{ wrapper: 'w-full' }}
+            />
+
+            <SelectInputCheckbox
+              label='Sales'
+              placeholder='Pilih Sales'
+              options={salesOptions}
+              value={formik.values.salesPersons}
+              onChange={(val) =>
+                formik.setFieldValue(
+                  'salesPersons',
+                  Array.isArray(val) ? val : []
+                )
+              }
+              onInputChange={setSalesInput}
+              isLoading={isLoadingSales}
+              isClearable
+              onMenuScrollToBottom={loadMoreSales}
+              className={{ wrapper: 'w-full' }}
+            />
+
+            <SelectInputRadio
+              label='Filter Berdasarkan'
+              placeholder='Pilih Filter Berdasarkan'
+              options={filterByOptions}
+              value={formik.values.filterBy ?? null}
+              onChange={(val) =>
+                formik.setFieldValue(
+                  'filterBy',
+                  !Array.isArray(val) ? (val ?? undefined) : undefined
+                )
+              }
+              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='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={hasDateError}
+            >
+              Apply Filter
+            </Button>
+          </div>
+        </form>
+      </Modal>
+    </>
+  );
+};
+
+export default BalanceMonitoringTab;

src/components/pages/report/finance/tab/CustomerPaymentTab.tsx

@@ -1,14 +1,17 @@
-import { useState, useMemo, useCallback, useEffect, useRef } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import useSWR from 'swr';
 import { Icon } from '@iconify/react';
+import { AxiosError } from 'axios';
 import Card from '@/components/Card';
 import StatusBadge from '@/components/helper/StatusBadge';
-import { useSelect } from '@/components/input/SelectInput';
+import { useSelect, OptionType } from '@/components/input/SelectInput';
 import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
 import SelectInputRadio from '@/components/input/SelectInputRadio';
 import DateInput from '@/components/input/DateInput';
 import { CustomerApi } from '@/services/api/master-data';
 import { FinanceApi } from '@/services/api/report/finance-report';
+import { httpClientFetcher, SWRHttpKey } from '@/services/http/client';
+import { BaseApiResponse } from '@/types/api/api-general';
 import Table from '@/components/Table';
 import { ColumnDef } from '@tanstack/react-table';
 import {
@@ -27,56 +30,70 @@ import Dropdown from '@/components/Dropdown';
 import Modal, { useModal } from '@/components/Modal';
 import toast from 'react-hot-toast';
 import { useFormik } from 'formik';
-import {
-  CustomerPaymentFilterSchema,
-  CustomerPaymentFilterType,
-} from '@/components/pages/report/finance/filter/CustomerPaymentFilter';
-import { generateCustomerPaymentExcel } from '@/components/pages/report/finance/export/CustomerPaymentExportXLSX';
 import { generateCustomerPaymentPDF } from '@/components/pages/report/finance/export/CustomerPaymentExportPDF';
 import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
 import CustomerSupplierSkeleton from '@/components/pages/report/finance/skeleton/CustomerSupplierSkeleton';
-import { OptionType } from '@/components/table/TableRowSizeSelector';
 import { Color } from '@/types/theme';
 import ButtonFilter from '@/components/helper/ButtonFilter';
 import Pagination from '@/components/Pagination';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
 
 interface CustomerPaymentTabProps {
   tabId: string;
 }
 
-interface FilterParams {
+const dataTypeOptions: OptionType<string>[] = [
-  customer_ids?: string;
+  { value: 'trans_date', label: 'Tanggal Jual/Bayar' },
-  start_date?: string;
+  { value: 'realization_date', label: 'Tanggal Realisasi' },
-  end_date?: string;
+];
-  filter_by?: string;
-}
 
 const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
   // ===== STATE MANAGEMENT =====
   const [isPdfExportLoading, setIsPdfExportLoading] = useState(false);
   const [isExcelExportLoading, setIsExcelExportLoading] = useState(false);
-  const isAnyExportLoading = isPdfExportLoading || isExcelExportLoading;
+  const [isExcelGeneralExportLoading, setIsExcelGeneralExportLoading] =
+    useState(false);
+  const isAnyExportLoading =
+    isPdfExportLoading || isExcelExportLoading || isExcelGeneralExportLoading;
 
-  // ===== PAGINATION STATE =====
-  const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
-
-  // ===== SUBMISSION STATE =====
-  const [filterParams, setFilterParams] = useState<FilterParams>({});
   const [dateErrorShown, setDateErrorShown] = useState(false);
   const [hasDateError, setHasDateError] = useState(false);
 
-  const handleFilterModalOpenRef = useRef(() => {});
-
   const filterModal = useModal();
 
-  const dataTypeOptions = useMemo(
+  const setTabActions = useTabActionsStore((state) => state.setTabActions);
-    () => [
+  const clearTabActions = useTabActionsStore((state) => state.clearTabActions);
-      { value: 'trans_date', label: 'Tanggal Jual/Bayar' },
+
-      { value: 'realization_date', label: 'Tanggal Realisasi' },
+  const {
-    ],
+    state: tableFilterState,
-    []
+    updateFilter,
-  );
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+    reset: resetFilter,
+  } = useTableFilter<{
+    start_date: string;
+    end_date: string;
+    customers: OptionType<number>[];
+    filterBy?: OptionType<string>;
+  }>({
+    initial: {
+      start_date: '',
+      end_date: '',
+      customers: [],
+      filterBy: undefined,
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      start_date: 'start_date',
+      end_date: 'end_date',
+      customers: 'customer_ids',
+      filterBy: 'filter_by',
+    },
+    persist: true,
+    storeName: 'customer-payment-report-table',
+  });
 
   const {
     options: customerOptions,
@@ -86,236 +103,188 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
   } = useSelect(CustomerApi.basePath, 'id', 'name', 'search');
 
   // ===== FORMIK SETUP =====
-  const formik = useFormik<CustomerPaymentFilterType>({
+  const formik = useFormik({
     initialValues: {
-      start_date: null,
+      start_date: tableFilterState.start_date,
-      end_date: null,
+      end_date: tableFilterState.end_date,
-      customer_ids: null,
+      customers: tableFilterState.customers,
-      filter_by: null,
+      filterBy: tableFilterState.filterBy,
     },
-    validationSchema: CustomerPaymentFilterSchema,
+    onSubmit: (values) => {
-    onSubmit: (values, { setSubmitting }) => {
+      updateFilter('start_date', values.start_date, true);
-      setFilterParams({
+      updateFilter('end_date', values.end_date, true);
-        start_date: values.start_date || undefined,
+      updateFilter('customers', values.customers, true);
-        end_date: values.end_date || undefined,
+      updateFilter('filterBy', values.filterBy, true);
-        customer_ids: values.customer_ids || undefined,
-        filter_by: values.filter_by || undefined,
-      });
-      filterModal.closeModal();
-      setCurrentPage(1);
-      setSubmitting(false);
-    },
-    onReset: () => {
-      setFilterParams({});
-      setCurrentPage(1);
-      setHasDateError(false);
-      if (dateErrorShown) {
-        toast.dismiss();
-        setDateErrorShown(false);
-      }
       filterModal.closeModal();
     },
   });
 
-  handleFilterModalOpenRef.current = () => {
+  const formikResetHandler = () => {
-    formik.setValues({
+    resetFilter();
-      start_date: filterParams.start_date || null,
+
-      end_date: filterParams.end_date || null,
+    setHasDateError(false);
-      customer_ids: filterParams.customer_ids || null,
+    if (dateErrorShown) {
-      filter_by: filterParams.filter_by || null,
+      toast.dismiss();
+      setDateErrorShown(false);
+    }
+
+    formik.resetForm({
+      values: {
+        start_date: '',
+        end_date: '',
+        customers: [],
+        filterBy: undefined,
+      },
     });
-    filterModal.openModal();
+
+    filterModal.closeModal();
   };
 
   const getPaymentStatusBadgeColor = (notes: string): Color => {
     const normalizedValue = notes.toLowerCase();
-
+    if (normalizedValue === 'lunas') return 'primary';
-    if (normalizedValue === 'lunas') {
+    if (normalizedValue.includes('belum')) return 'warning';
-      return 'primary';
-    }
-
-    if (normalizedValue.includes('belum')) {
-      return 'warning';
-    }
-
     return 'neutral';
   };
 
   // ===== DATE CHANGE HANDLERS =====
-  const handleStartDateChange = useCallback(
+  const handleStartDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
-      const value = e.target.value;
+    formik.setFieldValue('start_date', value);
-      formik.setFieldValue('start_date', value || null);
 
-      if (value && formik.values.end_date) {
+    if (value && formik.values.end_date) {
-        const startDate = new Date(value);
+      if (new Date(formik.values.end_date) < new Date(value)) {
-        const endDateObj = new Date(formik.values.end_date);
+        setHasDateError(true);
-
+        if (!dateErrorShown) {
-        if (endDateObj < startDate) {
+          toast.error('Tanggal akhir tidak boleh masa lampau', {
-          setHasDateError(true);
+            duration: Infinity,
-          if (!dateErrorShown) {
+          });
-            toast.error('Tanggal akhir tidak boleh masa lampau', {
+          setDateErrorShown(true);
-              duration: Infinity,
-            });
-            setDateErrorShown(true);
-          }
-        } else {
-          setHasDateError(false);
-          if (dateErrorShown) {
-            toast.dismiss();
-            setDateErrorShown(false);
-          }
         }
       } else {
         setHasDateError(false);
-      }
+        if (dateErrorShown) {
-    },
+          toast.dismiss();
-    [formik, dateErrorShown]
+          setDateErrorShown(false);
-  );
-
-  const handleEndDateChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = e.target.value;
-      formik.setFieldValue('end_date', value || null);
-
-      if (value && formik.values.start_date) {
-        const startDateObj = new Date(formik.values.start_date);
-        const endDate = new Date(value);
-
-        if (endDate < startDateObj) {
-          setHasDateError(true);
-          if (!dateErrorShown) {
-            toast.error('Tanggal akhir tidak boleh masa lampau', {
-              duration: Infinity,
-            });
-            setDateErrorShown(true);
-          }
-          return;
         }
       }
-
+    } else {
       setHasDateError(false);
-      if (dateErrorShown) {
+    }
-        toast.dismiss();
+  };
-        setDateErrorShown(false);
+
+  const handleEndDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    formik.setFieldValue('end_date', value);
+
+    if (value && formik.values.start_date) {
+      if (new Date(value) < new Date(formik.values.start_date)) {
+        setHasDateError(true);
+        if (!dateErrorShown) {
+          toast.error('Tanggal akhir tidak boleh masa lampau', {
+            duration: Infinity,
+          });
+          setDateErrorShown(true);
+        }
+        return;
       }
-    },
+    }
-    [formik, dateErrorShown]
-  );
 
-  // ===== FILTER HELPERS =====
+    setHasDateError(false);
-  const customerIdsValue = useMemo(() => {
+    if (dateErrorShown) {
-    if (!formik.values.customer_ids) return [];
+      toast.dismiss();
-    return customerOptions.filter((opt) =>
+      setDateErrorShown(false);
-      formik.values.customer_ids?.split(',').includes(String(opt.value))
+    }
-    );
+  };
-  }, [formik.values.customer_ids, customerOptions]);
-
-  const filterByValue = useMemo(() => {
-    if (!formik.values.filter_by) return null;
-    return (
-      dataTypeOptions.find((opt) => opt.value === formik.values.filter_by) ||
-      null
-    );
-  }, [formik.values.filter_by, dataTypeOptions]);
 
   // ===== DATA FETCHING =====
-  const { data: customerPayment, isLoading } = useSWR(
+  const { data: customerPayment, isLoading } = useSWR<
-    () => {
+    BaseApiResponse<CustomerPaymentReport>,
-      const params = {
+    AxiosError<BaseApiResponse>,
-        customer_ids: filterParams.customer_ids,
+    SWRHttpKey
-        filter_by: filterParams.filter_by as
+  >(
-          | 'trans_date'
+    `${FinanceApi.basePath}/customer-payment${getTableFilterQueryString()}`,
-          | 'realization_date'
+    httpClientFetcher
-          | undefined,
-        start_date: filterParams.start_date,
-        end_date: filterParams.end_date,
-        page: currentPage,
-        limit: pageSize,
-      };
-
-      return ['customer-payment-report', params];
-    },
-    ([, params]) =>
-      FinanceApi.getCustomerPaymentReport(
-        params.customer_ids,
-        params.filter_by,
-        params.start_date,
-        params.end_date,
-        params.page,
-        params.limit
-      )
   );
 
-  const data: CustomerPaymentReport[] = useMemo(
+  const data: CustomerPaymentReport[] = isResponseSuccess(customerPayment)
-    () =>
+    ? (customerPayment?.data as unknown as CustomerPaymentReport[]) || []
-      isResponseSuccess(customerPayment)
+    : [];
-        ? (customerPayment?.data as unknown as CustomerPaymentReport[]) || []
-        : [],
-    [customerPayment]
-  );
 
-  const meta = useMemo(
+  const meta =
-    () =>
+    isResponseSuccess(customerPayment) && customerPayment.meta
-      isResponseSuccess(customerPayment) && customerPayment.meta
+      ? customerPayment.meta
-        ? customerPayment.meta
+      : null;
-        : null,
-    [customerPayment]
-  );
 
   // ===== EXPORT DATA FETCHER =====
   const customerPaymentExport = useCallback(async (): Promise<
     CustomerPaymentReport[] | null
   > => {
-    const params = {
+    const customer_ids =
-      customer_ids: filterParams.customer_ids,
+      tableFilterState.customers.length > 0
-      filter_by: filterParams.filter_by as
+        ? tableFilterState.customers.map((o) => String(o.value)).join(',')
-        | 'trans_date'
+        : undefined;
-        | 'realization_date'
+    const filter_by = tableFilterState.filterBy?.value as
-        | undefined,
+      | 'trans_date'
-      start_date: filterParams.start_date,
+      | 'realization_date'
-      end_date: filterParams.end_date,
+      | undefined;
-      limit: 100,
-      page: 1,
-    };
 
     const response = await FinanceApi.getCustomerPaymentReport(
-      params.customer_ids,
+      customer_ids,
-      params.filter_by,
+      filter_by,
-      params.start_date,
+      tableFilterState.start_date || undefined,
-      params.end_date,
+      tableFilterState.end_date || undefined,
-      params.page,
+      1,
-      params.limit
+      100
     );
 
     return isResponseSuccess(response)
       ? (response.data as unknown as CustomerPaymentReport[])
       : null;
-  }, [filterParams]);
+  }, [tableFilterState]);
 
   // ===== EXPORT HANDLERS =====
+  const handleExportExcelGeneral = useCallback(async () => {
+    setIsExcelGeneralExportLoading(true);
+    try {
+      const customer_ids =
+        tableFilterState.customers.length > 0
+          ? tableFilterState.customers.map((o) => String(o.value)).join(',')
+          : undefined;
+      await FinanceApi.exportCustomerPaymentToExcelGeneral(
+        customer_ids,
+        tableFilterState.filterBy?.value,
+        tableFilterState.start_date || undefined,
+        tableFilterState.end_date || undefined
+      );
+      toast.success('Excel General berhasil dibuat dan diunduh.');
+    } catch {
+      toast.error('Gagal membuat Excel General. Silakan coba lagi.');
+    } finally {
+      setIsExcelGeneralExportLoading(false);
+    }
+  }, [tableFilterState]);
+
   const handleExportExcel = useCallback(async () => {
     setIsExcelExportLoading(true);
     try {
-      const allDataForExport = await customerPaymentExport();
+      const customer_ids =
-
+        tableFilterState.customers.length > 0
-      if (
+          ? tableFilterState.customers.map((o) => String(o.value)).join(',')
-        !allDataForExport ||
+          : undefined;
-        !Array.isArray(allDataForExport) ||
+      await FinanceApi.exportCustomerPaymentToExcelCustomerPerSheet(
-        allDataForExport.length === 0
+        customer_ids,
-      ) {
+        tableFilterState.filterBy?.value,
-        toast.error('Tidak ada data untuk diekspor.');
+        tableFilterState.start_date || undefined,
-        return;
+        tableFilterState.end_date || undefined
-      }
+      );
-
-      await generateCustomerPaymentExcel({ data: allDataForExport });
       toast.success('Excel berhasil dibuat dan diunduh.');
     } catch {
       toast.error('Gagal membuat Excel. Silakan coba lagi.');
     } finally {
       setIsExcelExportLoading(false);
     }
-  }, [customerPaymentExport]);
+  }, [tableFilterState]);
 
   const handleExportPdf = useCallback(async () => {
     setIsPdfExportLoading(true);
@@ -331,22 +300,18 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
         return;
       }
 
-      const customerName = filterParams.customer_ids
+      const customerName =
-        ? customerOptions
+        tableFilterState.customers.length > 0
-            .filter((opt) =>
+          ? tableFilterState.customers.map((o) => o.label).join(', ')
-              filterParams.customer_ids?.split(',').includes(String(opt.value))
+          : 'Semua Customer';
-            )
-            .map((opt) => opt.label)
-            .join(', ') || 'Semua Customer'
-        : 'Semua Customer';
 
       await generateCustomerPaymentPDF({
         data: allDataForExport,
         params: {
           customer_name: customerName,
-          start_date: filterParams.start_date,
+          start_date: tableFilterState.start_date || undefined,
-          end_date: filterParams.end_date,
+          end_date: tableFilterState.end_date || undefined,
-          filter_by: filterParams.filter_by as
+          filter_by: tableFilterState.filterBy?.value as
             | 'trans_date'
             | 'realization_date'
             | undefined,
@@ -358,106 +323,103 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
     } finally {
       setIsPdfExportLoading(false);
     }
-  }, [customerPaymentExport, filterParams, customerOptions]);
+  }, [customerPaymentExport, tableFilterState]);
 
-  // ===== TAB ACTIONS COMPONENT =====
+  // ===== TAB ACTIONS =====
-  const TabActions = useMemo(() => {
+  useEffect(() => {
-    return function TabActionsComponent() {
+    setTabActions(
-      const setTabActions = useTabActionsStore((state) => state.setTabActions);
+      tabId,
-      const clearTabActions = useTabActionsStore(
+      <div className='flex flex-row gap-3'>
-        (state) => state.clearTabActions
+        <ButtonFilter
-      );
+          values={{
+            start_date: tableFilterState.start_date,
+            end_date: tableFilterState.end_date,
+            customers: tableFilterState.customers,
+            filterBy: tableFilterState.filterBy,
+          }}
+          fieldGroups={[['start_date', 'end_date']]}
+          onClick={filterModal.openModal}
+          variant='outline'
+          className='px-3 py-2.5'
+        />
 
-      useEffect(() => {
+        <Dropdown
-        setTabActions(
+          align='end'
-          tabId,
+          direction='bottom'
-          <div className='flex flex-row gap-3'>
+          className={{
-            <ButtonFilter
+            content:
-              values={filterParams}
+              'mt-1 rounded-xl border border-base-content/5 shadow-sm overflow-hidden',
-              fieldGroups={[['start_date', 'end_date']]}
+          }}
-              onClick={() => handleFilterModalOpenRef.current()}
+          trigger={
+            <Button
               variant='outline'
-              className='px-3 py-2.5'
+              color='none'
-            />
+              isLoading={isAnyExportLoading}
-
+              className='px-3 py-2.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
-            <Dropdown
-              align='end'
-              direction='bottom'
-              className={{
-                content:
-                  'mt-1 rounded-xl border border-base-content/5 shadow-sm overflow-hidden',
-              }}
-              trigger={
-                <Button
-                  variant='outline'
-                  color='none'
-                  isLoading={isAnyExportLoading}
-                  className='px-3 py-2.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
-                >
-                  <div className='flex flex-row items-center gap-1.5'>
-                    <Icon
-                      icon='heroicons:cloud-arrow-down'
-                      width={20}
-                      height={20}
-                    />
-
-                    <span>Export</span>
-
-                    <div className='w-px self-stretch bg-base-content/10' />
-
-                    <Icon
-                      icon='heroicons:chevron-down'
-                      width={14}
-                      height={14}
-                    />
-                  </div>
-                </Button>
-              }
             >
-              <Button
+              <div className='flex flex-row items-center gap-1.5'>
-                variant='ghost'
+                <Icon
-                color='none'
+                  icon='heroicons:cloud-arrow-down'
-                onClick={handleExportExcel}
+                  width={20}
-                isLoading={isExcelExportLoading}
+                  height={20}
-                className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
+                />
-              >
+                <span>Export</span>
-                <Icon icon='heroicons:table-cells' width={20} height={20} />
+                <div className='w-px self-stretch bg-base-content/10' />
-                Export to Excel
+                <Icon icon='heroicons:chevron-down' width={14} height={14} />
-              </Button>
+              </div>
-              <Button
+            </Button>
-                variant='ghost'
+          }
-                color='none'
+        >
-                onClick={handleExportPdf}
+          <Button
-                isLoading={isPdfExportLoading}
+            variant='ghost'
-                className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
+            color='none'
-              >
+            onClick={handleExportExcel}
-                <Icon icon='heroicons:document' width={20} height={20} />
+            isLoading={isExcelExportLoading}
-                Export to PDF
+            className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
-              </Button>
+          >
-            </Dropdown>
+            <Icon icon='heroicons:table-cells' width={20} height={20} />
-          </div>
+            Export to Excel - Customer Per Sheet
-        );
+          </Button>
-      }, [setTabActions]);
+          <Button
-
+            variant='ghost'
-      useEffect(() => {
+            color='none'
-        return () => {
+            onClick={handleExportExcelGeneral}
-          clearTabActions(tabId);
+            isLoading={isExcelGeneralExportLoading}
-        };
+            className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
-      }, [clearTabActions]);
+          >
-
+            <Icon icon='heroicons:table-cells' width={20} height={20} />
-      return null;
+            Export to Excel - General
-    };
+          </Button>
+          <Button
+            variant='ghost'
+            color='none'
+            onClick={handleExportPdf}
+            isLoading={isPdfExportLoading}
+            className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
+          >
+            <Icon icon='heroicons:document' width={20} height={20} />
+            Export to PDF
+          </Button>
+        </Dropdown>
+      </div>
+    );
   }, [
     tabId,
+    setTabActions,
+    tableFilterState,
+    filterModal.openModal,
     isAnyExportLoading,
     handleExportExcel,
+    handleExportExcelGeneral,
     handleExportPdf,
     isExcelExportLoading,
+    isExcelGeneralExportLoading,
     isPdfExportLoading,
-    filterParams,
   ]);
 
-  const TabActionsElement = useMemo(() => <TabActions />, [TabActions]);
+  useEffect(() => {
+    return () => clearTabActions(tabId);
+  }, [tabId, clearTabActions]);
 
   const getTableColumns = (
     summary: CustomerPaymentSummary
@@ -664,11 +626,7 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
         enableSorting: false,
         cell: (props) => {
           const value = props.row.original.status;
-
+          if (!value) return '-';
-          if (!value) {
-            return '-';
-          }
-
           return (
             <StatusBadge
               color={getPaymentStatusBadgeColor(value)}
@@ -707,7 +665,6 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
 
   return (
     <>
-      {TabActionsElement}
       <div className='w-full p-0 sm:p-3 flex flex-col gap-3'>
         {isLoading && (
           <div className='w-full flex flex-row justify-center items-center p-4'>
@@ -736,16 +693,16 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
             <Pagination
               totalItems={meta.total_results || 0}
               itemsPerPage={meta.limit || 0}
-              currentPage={meta.page || 0}
+              currentPage={tableFilterState.page}
-              onPrevPage={() =>
+              onPrevPage={() => setPage(Math.max(1, tableFilterState.page - 1))}
-                setCurrentPage((curr) => (curr > 1 ? curr - 1 : curr))
-              }
               onNextPage={() =>
-                setCurrentPage((curr) =>
+                setPage(
-                  meta.total_pages && curr < meta.total_pages ? curr + 1 : curr
+                  meta.total_pages && tableFilterState.page < meta.total_pages
+                    ? tableFilterState.page + 1
+                    : tableFilterState.page
                 )
               }
-              onPageChange={(pageNumber) => setCurrentPage(pageNumber)}
+              onPageChange={setPage}
               rowOptions={[10, 20, 50, 100]}
               onRowChange={setPageSize}
             />
@@ -852,16 +809,16 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
             <Pagination
               totalItems={meta.total_results || 0}
               itemsPerPage={meta.limit || 0}
-              currentPage={meta.page || 0}
+              currentPage={tableFilterState.page}
-              onPrevPage={() =>
+              onPrevPage={() => setPage(Math.max(1, tableFilterState.page - 1))}
-                setCurrentPage((curr) => (curr > 1 ? curr - 1 : curr))
-              }
               onNextPage={() =>
-                setCurrentPage((curr) =>
+                setPage(
-                  meta.total_pages && curr < meta.total_pages ? curr + 1 : curr
+                  meta.total_pages && tableFilterState.page < meta.total_pages
+                    ? tableFilterState.page + 1
+                    : tableFilterState.page
                 )
               }
-              onPageChange={(pageNumber) => setCurrentPage(pageNumber)}
+              onPageChange={setPage}
               rowOptions={[10, 20, 50, 100]}
               onRowChange={setPageSize}
             />
@@ -891,7 +848,7 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
             <Icon icon='heroicons:x-mark' width={20} height={20} />
           </Button>
         </div>
-        <form onSubmit={formik.handleSubmit} onReset={formik.handleReset}>
+        <form onSubmit={formik.handleSubmit} onReset={formikResetHandler}>
           <div className='p-4 flex flex-col gap-1.5'>
             <div>
               <label className='block text-xs font-semibold text-base-content py-2'>
@@ -901,29 +858,18 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
                 <DateInput
                   name='start_date'
                   value={formik.values.start_date || ''}
-                  errorMessage={formik.errors.start_date}
                   onChange={handleStartDateChange}
                   className={{ wrapper: 'w-full' }}
                   isNestedModal
-                  isError={
-                    formik.touched.start_date &&
-                    Boolean(formik.errors.start_date)
-                  }
                 />
                 <hr className='w-full max-w-3 h-px border-base-content/10' />
-
                 <DateInput
                   name='end_date'
                   value={formik.values.end_date || ''}
-                  errorMessage={formik.errors.end_date}
                   onChange={handleEndDateChange}
                   className={{ wrapper: 'w-full' }}
                   isNestedModal
-                  isError={
+                  isError={hasDateError}
-                    (formik.touched.end_date &&
-                      Boolean(formik.errors.end_date)) ||
-                    hasDateError
-                  }
                 />
               </div>
             </div>
@@ -932,15 +878,10 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
               label='Customer'
               placeholder='Pilih Customer'
               options={customerOptions}
-              value={customerIdsValue}
+              value={formik.values.customers}
-              onChange={(val) => {
+              onChange={(val) =>
-                formik.setFieldValue(
+                formik.setFieldValue('customers', Array.isArray(val) ? val : [])
-                  'customer_ids',
+              }
-                  Array.isArray(val) && val.length > 0
-                    ? val.map((v: OptionType) => String(v.value)).join(',')
-                    : null
-                );
-              }}
               onInputChange={setCustomerInputValue}
               isLoading={isLoadingCustomers}
               isClearable
@@ -952,14 +893,15 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
               label='Filter Berdasarkan'
               placeholder='Pilih Filter Berdasarkan'
               options={dataTypeOptions}
-              value={filterByValue}
+              value={formik.values.filterBy ?? null}
-              onChange={(val) => {
+              onChange={(val) =>
-                if (!Array.isArray(val)) {
+                formik.setFieldValue(
-                  formik.setFieldValue('filter_by', val?.value || null);
+                  'filterBy',
-                }
+                  !Array.isArray(val) ? (val ?? undefined) : undefined
-              }}
+                )
+              }
               className={{ wrapper: 'w-full' }}
-              isClearable={true}
+              isClearable
             />
           </div>
 
@@ -975,7 +917,7 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
             <Button
               type='submit'
               className='min-w-40 text-sm rounded-lg py-3 text-white font-semibold'
-              disabled={hasDateError || !formik.isValid || formik.isSubmitting}
+              disabled={hasDateError}
             >
               Apply Filter
             </Button>

src/components/pages/report/finance/tab/DebtSupplierTab.tsx

@@ -9,24 +9,15 @@ import Table, { TABLE_DEFAULT_STYLING } from '@/components/Table';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { cn, formatCurrency, formatDate, formatNumber } from '@/lib/helper';
 import { SupplierApi } from '@/services/api/master-data';
-import {
+import { DebtRow, DebtSupplier } from '@/types/api/report/debt-supplier';
-  DebtRow,
-  DebtSupplier,
-  DebtSupplierFilter,
-} from '@/types/api/report/debt-supplier';
-import { generateDebtSupplierExcel } from '@/components/pages/report/finance/export/DebtSupplierExportXLSX';
 import { generateDebtSupplierPDF } from '@/components/pages/report/finance/export/DebtSupllierExportPDF';
 import { Icon } from '@iconify/react';
 import { ColumnDef } from '@tanstack/react-table';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import toast from 'react-hot-toast';
 import useSWR from 'swr';
 import { DebtSupplierApi } from '@/services/api/report/debt-supplier';
 import { useFormik } from 'formik';
-import {
-  DebtSupplierFilterSchema,
-  DebtSupplierFilterType,
-} from '@/components/pages/report/finance/filter/DebtSupplierFilter';
 import ButtonFilter from '@/components/helper/ButtonFilter';
 import { Color } from '@/types/theme';
 import { Supplier } from '@/types/api/master-data/supplier';
@@ -35,6 +26,10 @@ import SelectInputRadio from '@/components/input/SelectInputRadio';
 import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
 import StatusBadge from '@/components/helper/StatusBadge';
 import DebtSupplierSkeleton from '@/components/pages/report/finance/skeleton/DebtSupplierSkeleton';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { httpClientFetcher, SWRHttpKey } from '@/services/http/client';
+import { BaseApiResponse } from '@/types/api/api-general';
+import { AxiosError } from 'axios';
 
 const dueStatus: Record<string, Color> = {
   'Sudah Jatuh Tempo': 'error',
@@ -52,7 +47,6 @@ const getPillBadge = (
   statusText: string,
   type: 'due' | 'payment' = 'payment'
 ) => {
-  // Get color based on type
   const color =
     type === 'due'
       ? dueStatus[statusText] || 'neutral'
@@ -69,6 +63,11 @@ const getPillBadge = (
   );
 };
 
+const dataTypeOptions: OptionType<string>[] = [
+  { value: 'received_date', label: 'Tanggal Terima' },
+  { value: 'po_date', label: 'Tanggal PO' },
+];
+
 interface DebtSupplierTabProps {
   tabId: string;
 }
@@ -77,28 +76,50 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
   // ===== STATE MANAGEMENT =====
   const [isPdfExportLoading, setIsPdfExportLoading] = useState(false);
   const [isExcelExportLoading, setIsExcelExportLoading] = useState(false);
-  const isAnyExportLoading = isPdfExportLoading || isExcelExportLoading;
+  const [isExcelGeneralExportLoading, setIsExcelGeneralExportLoading] =
+    useState(false);
+  const isAnyExportLoading =
+    isPdfExportLoading || isExcelExportLoading || isExcelGeneralExportLoading;
 
-  // ===== PAGINATION STATE =====
-  const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
-
-  // ===== SUBMISSION STATE =====
-  const [filterParams, setFilterParams] = useState<DebtSupplierFilter>({
-    start_date: undefined,
-    end_date: undefined,
-    supplier_ids: undefined,
-    filter_by: undefined,
-  });
-
-  // ===== DATE ERROR STATE =====
   const [dateErrorShown, setDateErrorShown] = useState(false);
   const [hasDateError, setHasDateError] = useState(false);
 
-  const handleFilterModalOpenRef = useRef(() => {});
-
   const filterModal = useModal();
 
+  const setTabActions = useTabActionsStore((state) => state.setTabActions);
+  const clearTabActions = useTabActionsStore((state) => state.clearTabActions);
+
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+    reset: resetFilter,
+  } = useTableFilter<{
+    start_date: string;
+    end_date: string;
+    suppliers: OptionType<number>[];
+    filterBy?: OptionType<string>;
+  }>({
+    initial: {
+      start_date: '',
+      end_date: '',
+      suppliers: [],
+      filterBy: undefined,
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      start_date: 'start_date',
+      end_date: 'end_date',
+      suppliers: 'supplier_ids',
+      filterBy: 'filter_by',
+    },
+    persist: true,
+    storeName: 'debt-supplier-report-table',
+  });
+
   const {
     setInputValue: setSupplierInputValue,
     options: supplierOptions,
@@ -106,168 +127,180 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
     loadMore: loadMoreSuppliers,
   } = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name');
 
-  const dataTypeOptions = useMemo(
-    () => [
-      { value: 'received_date', label: 'Tanggal Terima' },
-      { value: 'po_date', label: 'Tanggal PO' },
-    ],
-    []
-  );
-
   // ===== FORMIK SETUP =====
-  const formik = useFormik<DebtSupplierFilterType>({
+  const formik = useFormik({
     initialValues: {
-      startDate: null,
+      start_date: tableFilterState.start_date,
-      endDate: null,
+      end_date: tableFilterState.end_date,
-      supplierIds: null,
+      suppliers: tableFilterState.suppliers,
-      filterBy: null,
+      filterBy: tableFilterState.filterBy,
     },
-    validationSchema: DebtSupplierFilterSchema,
     onSubmit: (values) => {
-      setFilterParams({
+      updateFilter('start_date', values.start_date, true);
-        start_date: values.startDate?.toString() || undefined,
+      updateFilter('end_date', values.end_date, true);
-        end_date: values.endDate?.toString() || undefined,
+      updateFilter('suppliers', values.suppliers, true);
-        supplier_ids:
+      updateFilter('filterBy', values.filterBy, true);
-          values.supplierIds?.map((v) => String(v.value)).join(',') ||
-          undefined,
-        filter_by: values.filterBy?.value?.toString() || undefined,
-      });
-      filterModal.closeModal();
-      setCurrentPage(1);
-    },
-    onReset: () => {
-      setFilterParams({
-        start_date: undefined,
-        end_date: undefined,
-        supplier_ids: undefined,
-        filter_by: undefined,
-      });
-      setCurrentPage(1);
       filterModal.closeModal();
     },
   });
 
-  handleFilterModalOpenRef.current = () => {
+  const formikResetHandler = () => {
-    const restoredFilterBy =
+    resetFilter();
-      dataTypeOptions.find((opt) => opt.value === filterParams.filter_by) ||
-      null;
 
-    const supplierIdList = filterParams.supplier_ids
+    setHasDateError(false);
-      ? filterParams.supplier_ids.split(',')
+    if (dateErrorShown) {
-      : [];
+      toast.dismiss();
-    const restoredSupplierIds = supplierOptions.filter((opt) =>
+      setDateErrorShown(false);
-      supplierIdList.includes(String(opt.value))
+    }
-    );
 
-    formik.setValues({
+    formik.resetForm({
-      startDate: filterParams.start_date || null,
+      values: {
-      endDate: filterParams.end_date || null,
+        start_date: '',
-      supplierIds: restoredSupplierIds.length > 0 ? restoredSupplierIds : null,
+        end_date: '',
-      filterBy: restoredFilterBy,
+        suppliers: [],
+        filterBy: undefined,
+      },
     });
-    filterModal.openModal();
+
+    filterModal.closeModal();
+  };
+
+  // ===== DATE CHANGE HANDLERS =====
+  const handleStartDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    formik.setFieldValue('start_date', value);
+
+    if (value && formik.values.end_date) {
+      if (new Date(formik.values.end_date) < new Date(value)) {
+        setHasDateError(true);
+        if (!dateErrorShown) {
+          toast.error('Tanggal akhir tidak boleh masa lampau', {
+            duration: Infinity,
+          });
+          setDateErrorShown(true);
+        }
+      } else {
+        setHasDateError(false);
+        if (dateErrorShown) {
+          toast.dismiss();
+          setDateErrorShown(false);
+        }
+      }
+    } else {
+      setHasDateError(false);
+    }
+  };
+
+  const handleEndDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    formik.setFieldValue('end_date', value);
+
+    if (value && formik.values.start_date) {
+      if (new Date(value) < new Date(formik.values.start_date)) {
+        setHasDateError(true);
+        if (!dateErrorShown) {
+          toast.error('Tanggal akhir tidak boleh masa lampau', {
+            duration: Infinity,
+          });
+          setDateErrorShown(true);
+        }
+        return;
+      }
+    }
+
+    setHasDateError(false);
+    if (dateErrorShown) {
+      toast.dismiss();
+      setDateErrorShown(false);
+    }
   };
 
   // ===== DATA FETCHING =====
-  const { data: debtSupplier, isLoading } = useSWR(
+  const { data: debtSupplierResponse, isLoading } = useSWR<
-    () => {
+    BaseApiResponse<DebtSupplier[]>,
-      const params = {
+    AxiosError<BaseApiResponse>,
-        supplier_ids: filterParams.supplier_ids,
+    SWRHttpKey
-        filter_by: filterParams.filter_by,
+  >(
-        start_date: filterParams.start_date,
+    `${DebtSupplierApi.basePath}/debt-supplier${getTableFilterQueryString()}`,
-        end_date: filterParams.end_date,
+    httpClientFetcher
-        page: currentPage,
-        limit: pageSize,
-      };
-
-      return ['debt-supplier-report', params];
-    },
-    ([, params]) =>
-      DebtSupplierApi.getDebtSupplierReport(
-        params.supplier_ids,
-        params.filter_by,
-        params.start_date,
-        params.end_date,
-        params.page,
-        params.limit
-      )
   );
 
-  const data: DebtSupplier[] = useMemo(
+  const data: DebtSupplier[] = isResponseSuccess(debtSupplierResponse)
-    () =>
+    ? ((debtSupplierResponse?.data as unknown as DebtSupplier[]) ?? [])
-      isResponseSuccess(debtSupplier)
+    : [];
-        ? (debtSupplier?.data as unknown as DebtSupplier[]) || []
-        : [],
-    [debtSupplier]
-  );
 
-  const meta = useMemo(
+  const meta =
-    () =>
+    isResponseSuccess(debtSupplierResponse) && debtSupplierResponse.meta
-      isResponseSuccess(debtSupplier) && debtSupplier.meta
+      ? debtSupplierResponse.meta
-        ? debtSupplier.meta
+      : null;
-        : null,
-    [debtSupplier]
-  );
 
   // ===== EXPORT DATA FETCHER =====
   const debtSupplierExport = useCallback(async (): Promise<
     DebtSupplier[] | null
   > => {
-    const params = {
+    const supplier_ids =
-      supplier_ids:
+      tableFilterState.suppliers.length > 0
-        formik.values.supplierIds && formik.values.supplierIds.length > 0
+        ? tableFilterState.suppliers.map((o) => String(o.value)).join(',')
-          ? formik.values.supplierIds.map((v) => String(v.value)).join(',')
+        : undefined;
-          : undefined,
-      filter_by: formik.values.filterBy?.value?.toString() || undefined,
-      start_date: formik.values.startDate || undefined,
-      end_date: formik.values.endDate || undefined,
-      date_type: formik.values.filterBy
-        ? formik.values.filterBy.value
-        : undefined,
-      limit: 100,
-      page: 1,
-    };
 
     const response = await DebtSupplierApi.getDebtSupplierReport(
-      params.supplier_ids,
+      supplier_ids,
-      params.filter_by,
+      tableFilterState.filterBy?.value,
-      params.start_date,
+      tableFilterState.start_date || undefined,
-      params.end_date
+      tableFilterState.end_date || undefined,
+      1,
+      100
     );
 
     return isResponseSuccess(response)
       ? (response.data as unknown as DebtSupplier[])
       : null;
-  }, [
+  }, [tableFilterState]);
-    formik.values.supplierIds,
-    formik.values.startDate,
-    formik.values.endDate,
-    formik.values.filterBy,
-  ]);
 
   // ===== EXPORT HANDLERS =====
   const handleExportExcel = useCallback(async () => {
     setIsExcelExportLoading(true);
     try {
-      const allDataForExport = await debtSupplierExport();
+      const supplier_ids =
-
+        tableFilterState.suppliers.length > 0
-      if (
+          ? tableFilterState.suppliers.map((o) => String(o.value)).join(',')
-        !allDataForExport ||
+          : undefined;
-        !Array.isArray(allDataForExport) ||
+      await DebtSupplierApi.exportToExcelSupplierPerSheet(
-        allDataForExport.length === 0
+        supplier_ids,
-      ) {
+        tableFilterState.filterBy?.value,
-        toast.error('Tidak ada data untuk diekspor.');
+        tableFilterState.start_date || undefined,
-        return;
+        tableFilterState.end_date || undefined
-      }
+      );
-
-      generateDebtSupplierExcel({ data: allDataForExport });
       toast.success('Excel berhasil dibuat dan diunduh.');
     } catch {
       toast.error('Gagal membuat Excel. Silakan coba lagi.');
     } finally {
       setIsExcelExportLoading(false);
     }
-  }, [debtSupplierExport]);
+  }, [tableFilterState]);
+
+  const handleExportExcelGeneral = useCallback(async () => {
+    setIsExcelGeneralExportLoading(true);
+    try {
+      const supplier_ids =
+        tableFilterState.suppliers.length > 0
+          ? tableFilterState.suppliers.map((o) => String(o.value)).join(',')
+          : undefined;
+
+      await DebtSupplierApi.exportToExcelGeneral(
+        supplier_ids,
+        tableFilterState.filterBy?.value,
+        tableFilterState.start_date || undefined,
+        tableFilterState.end_date || undefined
+      );
+
+      toast.success('Excel General berhasil dibuat dan diunduh.');
+    } catch {
+      toast.error('Gagal membuat Excel General. Silakan coba lagi.');
+    } finally {
+      setIsExcelGeneralExportLoading(false);
+    }
+  }, [tableFilterState]);
 
   const handleExportPdf = useCallback(async () => {
     setIsPdfExportLoading(true);
@@ -283,15 +316,18 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
         return;
       }
 
+      const supplierName =
+        tableFilterState.suppliers.length > 0
+          ? tableFilterState.suppliers.map((o) => o.label).join(', ')
+          : undefined;
+
       await generateDebtSupplierPDF({
         data: allDataForExport,
         params: {
-          supplier_name: formik.values.supplierIds
+          supplier_name: supplierName,
-            ?.map((v) => v.label)
+          filter_by: tableFilterState.filterBy?.label,
-            .join(', '),
+          start_date: tableFilterState.start_date || undefined,
-          filter_by: formik.values.filterBy?.label,
+          end_date: tableFilterState.end_date || undefined,
-          start_date: formik.values.startDate || undefined,
-          end_date: formik.values.endDate || undefined,
         },
       });
       toast.success('PDF berhasil dibuat dan diunduh.');
@@ -300,129 +336,103 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
     } finally {
       setIsPdfExportLoading(false);
     }
-  }, [
+  }, [debtSupplierExport, tableFilterState]);
-    debtSupplierExport,
-    formik.values.supplierIds,
-    formik.values.filterBy,
-    formik.values.startDate,
-    formik.values.endDate,
-  ]);
 
-  // ===== TAB ACTIONS COMPONENT =====
+  // ===== TAB ACTIONS =====
-  const TabActions = useMemo(() => {
+  useEffect(() => {
-    return function TabActionsComponent() {
+    setTabActions(
-      const setTabActions = useTabActionsStore((state) => state.setTabActions);
+      tabId,
-      const clearTabActions = useTabActionsStore(
+      <div className='flex flex-row gap-3'>
-        (state) => state.clearTabActions
+        <ButtonFilter
-      );
+          values={{
+            start_date: tableFilterState.start_date,
+            end_date: tableFilterState.end_date,
+            suppliers: tableFilterState.suppliers,
+            filterBy: tableFilterState.filterBy,
+          }}
+          fieldGroups={[['start_date', 'end_date']]}
+          onClick={filterModal.openModal}
+          variant='outline'
+          className='px-3 py-2.5'
+        />
 
-      useEffect(() => {
+        <Dropdown
-        setTabActions(
+          align='end'
-          tabId,
+          direction='bottom'
-          <div className='flex flex-row gap-3'>
+          className={{
-            <ButtonFilter
+            content:
-              values={filterParams}
+              'mt-1 rounded-xl border border-base-content/5 shadow-sm overflow-hidden',
-              fieldGroups={[['start_date', 'end_date']]}
+          }}
-              onClick={() => handleFilterModalOpenRef.current()}
+          trigger={
+            <Button
               variant='outline'
-              className='px-3 py-2.5'
+              color='none'
-            />
+              isLoading={isAnyExportLoading}
-
+              className='px-3 py-2.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
-            <Dropdown
-              align='end'
-              direction='bottom'
-              className={{
-                content:
-                  'mt-1 rounded-xl border border-base-content/5 shadow-sm overflow-hidden',
-              }}
-              trigger={
-                <Button
-                  variant='outline'
-                  color='none'
-                  isLoading={isAnyExportLoading}
-                  className='px-3 py-2.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
-                >
-                  <div className='flex flex-row items-center gap-1.5'>
-                    <Icon
-                      icon='heroicons:cloud-arrow-down'
-                      width={20}
-                      height={20}
-                    />
-
-                    <span>Export</span>
-
-                    <div className='w-px self-stretch bg-base-content/10' />
-
-                    <Icon
-                      icon='heroicons:chevron-down'
-                      width={14}
-                      height={14}
-                    />
-                  </div>
-                </Button>
-              }
             >
-              <Button
+              <div className='flex flex-row items-center gap-1.5'>
-                variant='ghost'
+                <Icon
-                color='none'
+                  icon='heroicons:cloud-arrow-down'
-                onClick={handleExportExcel}
+                  width={20}
-                isLoading={isExcelExportLoading}
+                  height={20}
-                className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
+                />
-              >
+                <span>Export</span>
-                <Icon icon='heroicons:table-cells' width={20} height={20} />
+                <div className='w-px self-stretch bg-base-content/10' />
-                Export to Excel
+                <Icon icon='heroicons:chevron-down' width={14} height={14} />
-              </Button>
+              </div>
-              <Button
+            </Button>
-                variant='ghost'
+          }
-                color='none'
+        >
-                onClick={handleExportPdf}
+          <Button
-                isLoading={isPdfExportLoading}
+            variant='ghost'
-                className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
+            color='none'
-              >
+            onClick={handleExportExcel}
-                <Icon icon='heroicons:document' width={20} height={20} />
+            isLoading={isExcelExportLoading}
-                Export to PDF
+            className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
-              </Button>
+          >
-            </Dropdown>
+            <Icon icon='heroicons:table-cells' width={20} height={20} />
-          </div>
+            Export to Excel - Supplier Per Sheet
-        );
+          </Button>
-      }, [setTabActions]);
+          <Button
-
+            variant='ghost'
-      useEffect(() => {
+            color='none'
-        return () => {
+            onClick={handleExportExcelGeneral}
-          clearTabActions(tabId);
+            isLoading={isExcelGeneralExportLoading}
-        };
+            className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
-      }, [clearTabActions]);
+          >
-
+            <Icon icon='heroicons:table-cells' width={20} height={20} />
-      return null;
+            Export to Excel - General
-    };
+          </Button>
+          <Button
+            variant='ghost'
+            color='none'
+            onClick={handleExportPdf}
+            isLoading={isPdfExportLoading}
+            className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
+          >
+            <Icon icon='heroicons:document' width={20} height={20} />
+            Export to PDF
+          </Button>
+        </Dropdown>
+      </div>
+    );
   }, [
     tabId,
-    filterParams,
+    setTabActions,
+    tableFilterState,
+    filterModal.openModal,
     isAnyExportLoading,
     handleExportExcel,
+    handleExportExcelGeneral,
     handleExportPdf,
     isExcelExportLoading,
+    isExcelGeneralExportLoading,
     isPdfExportLoading,
   ]);
 
-  const TabActionsElement = useMemo(() => <TabActions />, [TabActions]);
-
   useEffect(() => {
-    return () => {
+    return () => clearTabActions(tabId);
-      if (dateErrorShown) {
+  }, [tabId, clearTabActions]);
-        toast.dismiss();
-      }
-    };
-  }, [dateErrorShown]);
-
-  useEffect(() => {
-    return () => {
-      if (dateErrorShown) {
-        toast.dismiss();
-        setDateErrorShown(false);
-      }
-    };
-  }, [filterModal.open, dateErrorShown]);
 
   const getTableColumns = (supplier?: DebtSupplier): ColumnDef<DebtRow>[] => [
     {
@@ -637,9 +647,9 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
       },
     },
   ];
+
   return (
     <>
-      {TabActionsElement}
       <div className='w-full p-0 sm:p-3 flex flex-col gap-3'>
         {isLoading && (
           <div className='w-full flex flex-row justify-center items-center p-4'>
@@ -668,16 +678,16 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
             <Pagination
               totalItems={meta.total_results || 0}
               itemsPerPage={meta.limit || 0}
-              currentPage={meta.page || 0}
+              currentPage={tableFilterState.page}
-              onPrevPage={() =>
+              onPrevPage={() => setPage(Math.max(1, tableFilterState.page - 1))}
-                setCurrentPage((curr) => (curr > 1 ? curr - 1 : curr))
-              }
               onNextPage={() =>
-                setCurrentPage((curr) =>
+                setPage(
-                  meta.total_pages && curr < meta.total_pages ? curr + 1 : curr
+                  meta.total_pages && tableFilterState.page < meta.total_pages
+                    ? tableFilterState.page + 1
+                    : tableFilterState.page
                 )
               }
-              onPageChange={(pageNumber) => setCurrentPage(pageNumber)}
+              onPageChange={setPage}
               rowOptions={[10, 20, 50, 100]}
               onRowChange={setPageSize}
             />
@@ -777,16 +787,16 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
             <Pagination
               totalItems={meta.total_results || 0}
               itemsPerPage={meta.limit || 0}
-              currentPage={meta.page || 0}
+              currentPage={tableFilterState.page}
-              onPrevPage={() =>
+              onPrevPage={() => setPage(Math.max(1, tableFilterState.page - 1))}
-                setCurrentPage((curr) => (curr > 1 ? curr - 1 : curr))
-              }
               onNextPage={() =>
-                setCurrentPage((curr) =>
+                setPage(
-                  meta.total_pages && curr < meta.total_pages ? curr + 1 : curr
+                  meta.total_pages && tableFilterState.page < meta.total_pages
+                    ? tableFilterState.page + 1
+                    : tableFilterState.page
                 )
               }
-              onPageChange={(pageNumber) => setCurrentPage(pageNumber)}
+              onPageChange={setPage}
               rowOptions={[10, 20, 50, 100]}
               onRowChange={setPageSize}
             />
@@ -802,23 +812,23 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
           modalBox: 'p-0 rounded-[0.875rem] xl:max-w-4/12 max-w-sm',
         }}
       >
-        <form onSubmit={formik.handleSubmit} onReset={formik.handleReset}>
+        {/* Modal Header */}
-          {/* Modal Header */}
+        <div className='flex items-center justify-between gap-2 border-b border-base-content/10 p-4'>
-          <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'>
-            <div className='flex items-center gap-2 text-primary'>
+            <Icon icon='heroicons:funnel' width={20} height={20} />
-              <Icon icon='heroicons:funnel' width={20} height={20} />
+            <h3 className='font-medium text-sm'>Filter Data</h3>
-              <h3 className='font-medium text-sm'>Filter Data</h3>
-            </div>
-            <Button
-              variant='link'
-              type='button'
-              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>
+          <Button
+            variant='link'
+            type='button'
+            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={formikResetHandler}>
           {/* Modal Body */}
           <div className='p-4 flex flex-col gap-1.5'>
             <div>
@@ -827,153 +837,68 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
               </label>
               <div className='flex flex-row gap-1.5 items-center justify-between'>
                 <DateInput
-                  name='startDate'
+                  name='start_date'
-                  value={formik.values.startDate || ''}
+                  value={formik.values.start_date || ''}
-                  onChange={(e) => {
+                  onChange={handleStartDateChange}
-                    const value = e.target.value;
-                    formik.setFieldValue('startDate', value || null);
-
-                    if (value && formik.values.endDate) {
-                      const startDate = new Date(value);
-                      const endDateObj = new Date(formik.values.endDate);
-
-                      if (endDateObj < startDate) {
-                        setHasDateError(true);
-                        if (!dateErrorShown) {
-                          toast.error('Tanggal akhir tidak boleh masa lampau', {
-                            duration: Infinity,
-                          });
-                          setDateErrorShown(true);
-                        }
-                      } else {
-                        setHasDateError(false);
-                        if (dateErrorShown) {
-                          toast.dismiss();
-                          setDateErrorShown(false);
-                        }
-                      }
-                    } else {
-                      setHasDateError(false);
-                    }
-                  }}
                   className={{ wrapper: 'w-full' }}
-                  isError={
-                    formik.touched.startDate && !!formik.errors.startDate
-                  }
-                  errorMessage={formik.errors.startDate}
                   isNestedModal
                 />
-                <hr className='w-full max-w-3 h-px border-base-content/10'></hr>
+                <hr className='w-full max-w-3 h-px border-base-content/10' />
                 <DateInput
-                  name='endDate'
+                  name='end_date'
-                  value={formik.values.endDate || ''}
+                  value={formik.values.end_date || ''}
-                  onChange={(e) => {
+                  onChange={handleEndDateChange}
-                    const value = e.target.value;
-                    formik.setFieldValue('endDate', value || null);
-
-                    if (value && formik.values.startDate) {
-                      const startDateObj = new Date(formik.values.startDate);
-                      const endDate = new Date(value);
-
-                      if (endDate < startDateObj) {
-                        setHasDateError(true);
-                        if (!dateErrorShown) {
-                          toast.error('Tanggal akhir tidak boleh masa lampau', {
-                            duration: Infinity,
-                          });
-                          setDateErrorShown(true);
-                        }
-                        return;
-                      }
-                    }
-
-                    setHasDateError(false);
-                    if (dateErrorShown) {
-                      toast.dismiss();
-                      setDateErrorShown(false);
-                    }
-                  }}
                   className={{ wrapper: 'w-full' }}
-                  isError={
-                    (formik.touched.endDate && !!formik.errors.endDate) ||
-                    hasDateError
-                  }
-                  errorMessage={formik.errors.endDate}
                   isNestedModal
+                  isError={hasDateError}
                 />
               </div>
             </div>
 
-            <div>
+            <SelectInputCheckbox
-              <SelectInputCheckbox
+              label='Supplier'
-                label='Supplier'
+              placeholder='Pilih Supplier'
-                placeholder='Pilih Supplier'
+              options={supplierOptions}
-                isMulti
+              value={formik.values.suppliers}
-                options={supplierOptions}
+              onChange={(val) =>
-                value={
+                formik.setFieldValue('suppliers', Array.isArray(val) ? val : [])
-                  (formik.values.supplierIds as
+              }
-                    | { value: number; label: string }
+              onInputChange={setSupplierInputValue}
-                    | { value: number; label: string }[]
+              onMenuScrollToBottom={loadMoreSuppliers}
-                    | null
+              isLoading={isLoadingSupplierOptions}
-                    | undefined) || []
+              isClearable
-                }
+              className={{ wrapper: 'w-full' }}
-                onChange={(val) => {
+            />
-                  formik.setFieldValue(
-                    'supplierIds',
-                    Array.isArray(val) ? val : val ? [val] : null
-                  );
-                }}
-                onInputChange={setSupplierInputValue}
-                onMenuScrollToBottom={loadMoreSuppliers}
-                isLoading={isLoadingSupplierOptions}
-                isClearable
-                className={{ wrapper: 'w-full' }}
-                isError={
-                  formik.touched.supplierIds && !!formik.errors.supplierIds
-                }
-                errorMessage={formik.errors.supplierIds as string}
-              />
-            </div>
 
-            <div>
+            <SelectInputRadio
-              <SelectInputRadio
+              label='Filter Berdasarkan'
-                label='Filter Berdasarkan'
+              placeholder='Pilih Filter Berdasarkan'
-                placeholder='Pilih Filter Berdasarkan'
+              options={dataTypeOptions}
-                options={dataTypeOptions}
+              value={formik.values.filterBy ?? null}
-                value={
+              onChange={(val) =>
-                  (formik.values.filterBy as
+                formik.setFieldValue(
-                    | { value: string; label: string }
+                  'filterBy',
-                    | { value: string; label: string }[]
+                  !Array.isArray(val) ? (val ?? undefined) : undefined
-                    | null
+                )
-                    | undefined) || null
+              }
-                }
+              className={{ wrapper: 'w-full' }}
-                onChange={(val) => {
+              isClearable
-                  formik.setFieldValue(
+            />
-                    'filterBy',
-                    val ? (val as OptionType) : null
-                  );
-                }}
-                className={{ wrapper: 'w-full' }}
-                isClearable
-                isError={formik.touched.filterBy && !!formik.errors.filterBy}
-                errorMessage={formik.errors.filterBy as string}
-              />
-            </div>
           </div>
 
-          {/* Action Buttons */}
+          {/* Modal Footer */}
           <div className='flex justify-between items-center gap-4 p-4 border-t border-base-content/10 bg-gray-50'>
             <Button
-              variant='soft'
-              color='none'
-              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'
               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
-              className='min-w-40 text-sm rounded-lg py-3 text-white font-semibold'
               type='submit'
+              className='min-w-40 text-sm rounded-lg py-3 text-white font-semibold'
+              disabled={hasDateError}
             >
               Apply Filter
             </Button>

src/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab.tsx

@@ -16,7 +16,6 @@ import {
   LogisticPurchasePerSupplierReport,
   LogisticPurchasePerSupplierSummary,
 } from '@/types/api/report/logistic-stock';
-import { generatePurchasesPerSupplierExcel } from '@/components/pages/report/logistic-stock/export/PurchasesPerSupplierExportXLSX';
 import { generatePurchasesPerSupplierPDF } from '@/components/pages/report/logistic-stock/export/PurchasesPerSupplierExportPDF';
 import { Icon } from '@iconify/react';
 import { ColumnDef } from '@tanstack/react-table';
@@ -53,7 +52,10 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
   // ===== STATE MANAGEMENT =====
   const [isPdfExportLoading, setIsPdfExportLoading] = useState(false);
   const [isExcelExportLoading, setIsExcelExportLoading] = useState(false);
-  const isAnyExportLoading = isPdfExportLoading || isExcelExportLoading;
+  const [isExcelGeneralExportLoading, setIsExcelGeneralExportLoading] =
+    useState(false);
+  const isAnyExportLoading =
+    isPdfExportLoading || isExcelExportLoading || isExcelGeneralExportLoading;
 
   // ===== PAGINATION STATE =====
   const [currentPage, setCurrentPage] = useState(1);
@@ -360,25 +362,44 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
   const handleExportExcel = useCallback(async () => {
     setIsExcelExportLoading(true);
     try {
-      const allDataForExport = await logisticPurchasePerSupplierExport();
+      await LogisticApi.exportToExcelSupplierPerSheet(
-
+        filterParams.area_id,
-      if (
+        filterParams.supplier_id,
-        !allDataForExport ||
+        filterParams.product_id,
-        !Array.isArray(allDataForExport) ||
+        filterParams.product_category_id,
-        allDataForExport.length === 0
+        filterParams.start_date,
-      ) {
+        filterParams.end_date,
-        toast.error('Tidak ada data untuk diekspor.');
+        filterParams.sort_by,
-        return;
+        filterParams.filter_by
-      }
+      );
-
-      await generatePurchasesPerSupplierExcel({ data: allDataForExport });
       toast.success('Excel berhasil dibuat dan diunduh.');
     } catch {
       toast.error('Gagal membuat Excel. Silakan coba lagi.');
     } finally {
       setIsExcelExportLoading(false);
     }
-  }, [logisticPurchasePerSupplierExport]);
+  }, [filterParams]);
+
+  const handleExportExcelGeneral = useCallback(async () => {
+    setIsExcelGeneralExportLoading(true);
+    try {
+      await LogisticApi.exportToExcelGeneral(
+        filterParams.area_id,
+        filterParams.supplier_id,
+        filterParams.product_id,
+        filterParams.product_category_id,
+        filterParams.start_date,
+        filterParams.end_date,
+        filterParams.sort_by,
+        filterParams.filter_by
+      );
+      toast.success('Excel General berhasil dibuat dan diunduh.');
+    } catch {
+      toast.error('Gagal membuat Excel General. Silakan coba lagi.');
+    } finally {
+      setIsExcelGeneralExportLoading(false);
+    }
+  }, [filterParams]);
 
   const handleExportPdf = useCallback(async () => {
     setIsPdfExportLoading(true);
@@ -523,7 +544,17 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
                 className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
               >
                 <Icon icon='heroicons:table-cells' width={20} height={20} />
-                Export to Excel
+                Export to Excel - Supplier Per Sheet
+              </Button>
+              <Button
+                variant='ghost'
+                color='none'
+                onClick={handleExportExcelGeneral}
+                isLoading={isExcelGeneralExportLoading}
+                className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
+              >
+                <Icon icon='heroicons:table-cells' width={20} height={20} />
+                Export to Excel - General
               </Button>
               <Button
                 variant='ghost'
@@ -553,8 +584,10 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
     filterParams,
     isAnyExportLoading,
     handleExportExcel,
+    handleExportExcelGeneral,
     handleExportPdf,
     isExcelExportLoading,
+    isExcelGeneralExportLoading,
     isPdfExportLoading,
   ]);
 

src/figma-make/components/base/date-picker.tsx

@@ -20,6 +20,7 @@ interface DatePickerProps {
   disabled?: boolean;
   placeholder?: string;
   formatDisplay?: (date: string) => string;
+  hasError?: boolean;
 }
 
 export function DatePicker({
@@ -28,6 +29,7 @@ export function DatePicker({
   disabled = false,
   placeholder = 'Select date',
   formatDisplay,
+  hasError = false,
 }: DatePickerProps) {
   const [open, setOpen] = useState(false);
   const [currentMonth, setCurrentMonth] = useState(() => {
@@ -154,7 +156,7 @@ export function DatePicker({
         <Button
           variant='outline'
           disabled={disabled}
-          className='w-full justify-start text-left font-normal border-gray-200 hover:bg-gray-50'
+          className={`w-full justify-start text-left font-normal hover:bg-gray-50 ${hasError ? 'border-red-500 focus:ring-red-500' : 'border-gray-200'}`}
         >
           <CalendarIcon className='mr-2 h-4 w-4 text-gray-500' />
           {date ? (

src/figma-make/components/pages/daily-checklist/DailyChecklistContent.tsx

@@ -181,6 +181,13 @@ export function DailyChecklistContent() {
   const [initialLoading, setInitialLoading] = useState(!!checklistIdFromUrl);
 
   const [emptyKandangEndDate, setEmptyKandangEndDate] = useState<string>('');
+  const [emptyKandangEndDateError, setEmptyKandangEndDateError] =
+    useState<string>('');
+
+  const [preloadedKandang, setPreloadedKandang] = useState<{
+    id: string;
+    name: string;
+  } | null>(null);
 
   const [existingDocuments, setExistingDocuments] = useState<Document[]>([]);
   const [documents, setDocuments] = useState<File[]>([]);
@@ -226,15 +233,23 @@ export function DailyChecklistContent() {
         const rawDate = data.date || '';
         setDate(rawDate.length > 10 ? rawDate.slice(0, 10) : rawDate);
         skipKandangClearRef.current = true;
-        setKandangId(String(data.kandang?.id || ''));
+        const loadedKandangId = String(data.kandang?.id || '');
+        setKandangId(loadedKandangId);
+        if (data.kandang?.name) {
+          setPreloadedKandang({ id: loadedKandangId, name: data.kandang.name });
+        }
 
         const isEmptyKandang =
           !!data.empty_kandang || data.category === 'empty_kandang';
         setEmptyKandang(isEmptyKandang);
         setSelectedCategory(isEmptyKandang ? 'empty_kandang' : data.category);
 
-        if (isEmptyKandang && data.empty_kandang_end_date) {
+        if (
-          const rawEnd = data.empty_kandang_end_date;
+          isEmptyKandang &&
+          data.empty_kandang &&
+          data.empty_kandang.end_date
+        ) {
+          const rawEnd = data.empty_kandang.end_date;
           setEmptyKandangEndDate(
             rawEnd.length > 10 ? rawEnd.slice(0, 10) : rawEnd
           );
@@ -784,6 +799,11 @@ export function DailyChecklistContent() {
       return;
     }
 
+    if (emptyKandang && !emptyKandangEndDate) {
+      setEmptyKandangEndDateError('Tanggal akhir kandang kosong wajib diisi');
+      return;
+    }
+
     setIsLoadingDraft(true);
 
     try {
@@ -861,6 +881,11 @@ export function DailyChecklistContent() {
       return;
     }
 
+    if (emptyKandang && !emptyKandangEndDate) {
+      setEmptyKandangEndDateError('Tanggal akhir kandang kosong wajib diisi');
+      return;
+    }
+
     if (!isKandangEmpty) {
       if (selectedEmployees.length === 0) {
         toast.error('Pilih minimal 1 ABK');
@@ -1146,9 +1171,17 @@ export function DailyChecklistContent() {
                     <SelectValue placeholder='Pilih kandang' />
                   </SelectTrigger>
                   <SelectContent onScroll={handleKandangScroll}>
-                    {kandangOptions.map((kandang) => (
+                    {preloadedKandang &&
+                      !kandangOptions.some(
+                        (k) => String(k.value) === preloadedKandang.id
+                      ) && (
+                        <SelectItem value={preloadedKandang.id}>
+                          {preloadedKandang.name}
+                        </SelectItem>
+                      )}
+                    {kandangOptions.map((kandang, kandangIdx) => (
                       <SelectItem
-                        key={kandang.value}
+                        key={`${kandang.value}-${kandangIdx}`}
                         value={String(kandang.value)}
                       >
                         {kandang.label}
@@ -1220,11 +1253,20 @@ export function DailyChecklistContent() {
                     <div className='mt-1.5'>
                       <DatePicker
                         date={emptyKandangEndDate}
-                        onDateChange={setEmptyKandangEndDate}
+                        onDateChange={(val) => {
+                          setEmptyKandangEndDate(val);
+                          if (val) setEmptyKandangEndDateError('');
+                        }}
                         disabled={!isChecklistStatusDraft}
                         placeholder='Pilih tanggal'
                         formatDisplay={formatDateForDisplay}
+                        hasError={!!emptyKandangEndDateError}
                       />
+                      {emptyKandangEndDateError && (
+                        <p className='text-xs text-red-500 mt-1'>
+                          {emptyKandangEndDateError}
+                        </p>
+                      )}
                     </div>
                   </div>
                 </div>

src/figma-make/components/pages/list-daily-checklist/detail/DetailDailyChecklistContent.tsx

@@ -60,6 +60,7 @@ interface ChecklistHeader {
   progress_percent: number;
   total_phases: number;
   total_activities: number;
+  empty_kandang_end_date?: string | null;
 }
 
 interface PhaseGroup {
@@ -179,6 +180,9 @@ export function DetailDailyChecklistContent() {
 
       setDocuments(rawDetailChecklist?.document_urls || []);
 
+      const emptyKandangEndDate =
+        rawDetailChecklist?.empty_kandang?.end_date ?? null;
+
       const checklistData = {
         id: rawDetailChecklist?.id,
         date: rawDetailChecklist?.date,
@@ -205,6 +209,7 @@ export function DetailDailyChecklistContent() {
           progress_percent: 0,
           total_phases: 0,
           total_activities: 0,
+          empty_kandang_end_date: emptyKandangEndDate,
         });
         setLoading(false);
         return;
@@ -272,6 +277,7 @@ export function DetailDailyChecklistContent() {
           progress_percent: 0,
           total_phases: new Set(tasks.map((t) => t.phase_id)).size,
           total_activities: tasks.length,
+          empty_kandang_end_date: emptyKandangEndDate,
         });
         setLoading(false);
         return;
@@ -322,6 +328,7 @@ export function DetailDailyChecklistContent() {
         progress_percent: progressPercent,
         total_phases: uniquePhases.size,
         total_activities: uniqueActivities.size,
+        empty_kandang_end_date: emptyKandangEndDate,
       });
     } catch (error) {
       console.error('Error fetching checklist detail:', error);
@@ -777,6 +784,18 @@ export function DetailDailyChecklistContent() {
                   {CATEGORY_LABELS[header.category] || header.category}
                 </p>
               </div>
+              {header.category === 'empty_kandang' && (
+                <div>
+                  <Label className='text-xs text-gray-500'>
+                    Tanggal Selesai Kandang Kosong
+                  </Label>
+                  <p className='text-sm font-medium text-gray-900 mt-1'>
+                    {header.empty_kandang_end_date
+                      ? formatDate(header.empty_kandang_end_date)
+                      : '-'}
+                  </p>
+                </div>
+              )}
               <div>
                 <Label className='text-xs text-gray-500'>Status</Label>
                 <div className='mt-1'>{getStatusBadge(header.status)}</div>

src/services/api/finance.ts

@@ -2,6 +2,7 @@ import axios from 'axios';
 import { BaseApiService } from '@/services/api/base';
 import { BaseApiResponse } from '@/types/api/api-general';
 import { httpClient, httpClientFetcher } from '@/services/http/client';
+import { formatDate } from '@/lib/helper';
 import {
   CreateFinancePayment,
   CreateInitialBalance,
@@ -174,6 +175,30 @@ export class FinanceApiService extends BaseApiService<
     }
   }
 
+  async exportToExcel(initialQueryString: string) {
+    const params = new URLSearchParams(initialQueryString);
+
+    params.set('export', 'excel');
+    params.set('page', '1');
+    params.set('limit', '99999999999');
+
+    const res = await httpClient<Blob>(
+      `${this.basePath}/transactions?${params.toString()}`,
+      { method: 'GET', responseType: 'blob' }
+    );
+
+    const url = window.URL.createObjectURL(new Blob([res]));
+    const link = document.createElement('a');
+    link.href = url;
+    link.setAttribute(
+      'download',
+      `finance-${formatDate(Date.now(), 'DD-MM-YYYY')}.xlsx`
+    );
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+  }
+
   async delete(id: number) {
     try {
       const deletePath = `${this.basePath}/transactions/${id}`;

src/services/api/marketing/marketing.ts

@@ -45,8 +45,11 @@ export class SalesOrderService extends BaseApiService<
           notes: notes || `${action} marketing ${id}`,
         },
       });
-    } catch (error) {
+    } catch (error: unknown) {
-      throw error;
+      if (axios.isAxiosError<BaseApiResponse<{ message: string }>>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
     }
   }
 
@@ -68,8 +71,11 @@ export class SalesOrderService extends BaseApiService<
           notes: notes || `${action} marketing ${ids.join(', ')}`,
         },
       });
-    } catch (error) {
+    } catch (error: unknown) {
-      throw error;
+      if (axios.isAxiosError<BaseApiResponse<{ message: string }>>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
     }
   }
 
@@ -110,8 +116,11 @@ export class SalesOrderService extends BaseApiService<
           notes: notes || `Delivery marketing ${id}`,
         },
       });
-    } catch (error) {
+    } catch (error: unknown) {
-      throw error;
+      if (axios.isAxiosError<BaseApiResponse<{ message: string }>>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
     }
   }
 }
@@ -142,8 +151,11 @@ class MarketingExportService extends BaseApiService<
           notes: notes,
         },
       });
-    } catch (error) {
+    } catch (error: unknown) {
-      throw error;
+      if (axios.isAxiosError<BaseApiResponse<Marketing[] | Marketing>>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
     }
   }
 

src/services/api/production/chickin.ts

@@ -6,6 +6,7 @@ import {
 import { BaseApiService } from '@/services/api/base';
 import { BaseApiResponse } from '@/types/api/api-general';
 import { httpClient } from '@/services/http/client';
+import axios from 'axios';
 
 export class ChickinService extends BaseApiService<
   Chickin,
@@ -16,6 +17,29 @@ export class ChickinService extends BaseApiService<
     super(basePath);
   }
 
+  async updateChickinDate(
+    projectFlockKandangId: number,
+    chickInDate: string
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    try {
+      return await httpClient<BaseApiResponse<{ message: string }>>(
+        `${this.basePath}/chick-in-date`,
+        {
+          method: 'PATCH',
+          body: {
+            project_flock_kandang_id: projectFlockKandangId,
+            chick_in_date: chickInDate,
+          },
+        }
+      );
+    } catch (error: unknown) {
+      if (axios.isAxiosError<BaseApiResponse<{ message: string }>>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
+    }
+  }
+
   /**
    * Approve single marketing data
    */

src/services/api/report/debt-supplier.ts

@@ -1,4 +1,6 @@
 import { BaseApiService } from '@/services/api/base';
+import { httpClient } from '@/services/http/client';
+import { formatDate } from '@/lib/helper';
 import { BaseApiResponse } from '@/types/api/api-general';
 import { DebtSupplier } from '@/types/api/report/debt-supplier';
 
@@ -11,6 +13,82 @@ export class DebtSupplierApiService extends BaseApiService<
     super(basePath);
   }
 
+  async exportToExcelGeneral(
+    supplier_ids?: string,
+    filter_by?: string,
+    start_date?: string,
+    end_date?: string
+  ) {
+    const params = new URLSearchParams();
+
+    if (supplier_ids) params.set('supplier_ids', supplier_ids);
+    if (filter_by) params.set('filter_by', filter_by);
+    if (start_date) params.set('start_date', start_date);
+    if (end_date) params.set('end_date', end_date);
+    params.set('export', 'excel-all');
+    params.set('page', '1');
+    params.set('limit', '99999999999');
+
+    const queryString = `?${params.toString()}`;
+
+    const res = await httpClient<Blob>(
+      `${this.basePath.replace(/\/$/, '')}/debt-supplier${queryString}`,
+      {
+        method: 'GET',
+        responseType: 'blob',
+      }
+    );
+
+    const url = window.URL.createObjectURL(new Blob([res]));
+    const link = document.createElement('a');
+    link.href = url;
+
+    const fileName = `laporan-hutang-supplier-general-${formatDate(Date.now(), 'DD-MM-YYYY')}.xlsx`;
+    link.setAttribute('download', fileName);
+
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+  }
+
+  async exportToExcelSupplierPerSheet(
+    supplier_ids?: string,
+    filter_by?: string,
+    start_date?: string,
+    end_date?: string
+  ) {
+    const params = new URLSearchParams();
+
+    if (supplier_ids) params.set('supplier_ids', supplier_ids);
+    if (filter_by) params.set('filter_by', filter_by);
+    if (start_date) params.set('start_date', start_date);
+    if (end_date) params.set('end_date', end_date);
+    params.set('export', 'excel');
+    params.set('page', '1');
+    params.set('limit', '99999999999');
+
+    const queryString = `?${params.toString()}`;
+
+    const res = await httpClient<Blob>(
+      `${this.basePath.replace(/\/$/, '')}/debt-supplier${queryString}`,
+      {
+        method: 'GET',
+        responseType: 'blob',
+      }
+    );
+
+    const url = window.URL.createObjectURL(new Blob([res]));
+    const link = document.createElement('a');
+    link.href = url;
+
+    const fileName = `laporan-hutang-supplier-per-sheet-${formatDate(Date.now(), 'DD-MM-YYYY')}.xlsx`;
+    link.setAttribute('download', fileName);
+
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+  }
+
   async getDebtSupplierReport(
     supplier_ids?: string,
     filter_by?: string,

src/services/api/report/finance-report.ts

@@ -1,6 +1,9 @@
 import { BaseApiService } from '@/services/api/base';
 import { BaseApiResponse } from '@/types/api/api-general';
 import { CustomerPaymentReport } from '@/types/api/report/customer-payment';
+import { httpClient } from '@/services/http/client';
+import { formatDate } from '@/lib/helper';
+import { BalanceMonitoringRow } from '@/types/api/report/balance-monitoring';
 
 export class FinanceApiService extends BaseApiService<
   CustomerPaymentReport,
@@ -11,6 +14,129 @@ export class FinanceApiService extends BaseApiService<
     super(basePath);
   }
 
+  async exportCustomerPaymentToExcelGeneral(
+    customer_ids?: string,
+    filter_by?: string,
+    start_date?: string,
+    end_date?: string
+  ) {
+    const params = new URLSearchParams();
+
+    if (customer_ids) params.set('customer_ids', customer_ids);
+    if (filter_by) params.set('filter_by', filter_by);
+    if (start_date) params.set('start_date', start_date);
+    if (end_date) params.set('end_date', end_date);
+    params.set('export', 'excel-all');
+    params.set('page', '1');
+    params.set('limit', '9999999999');
+
+    const res = await httpClient<Blob>(
+      `${this.basePath}/customer-payment?${params.toString()}`,
+      {
+        method: 'GET',
+        responseType: 'blob',
+      }
+    );
+
+    const url = window.URL.createObjectURL(new Blob([res]));
+    const link = document.createElement('a');
+    link.href = url;
+
+    const fileName = `laporan-piutang-customer-general-${formatDate(Date.now(), 'DD-MM-YYYY')}.xlsx`;
+    link.setAttribute('download', fileName);
+
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+  }
+
+  async exportCustomerPaymentToExcelCustomerPerSheet(
+    customer_ids?: string,
+    filter_by?: string,
+    start_date?: string,
+    end_date?: string
+  ) {
+    const params = new URLSearchParams();
+
+    if (customer_ids) params.set('customer_ids', customer_ids);
+    if (filter_by) params.set('filter_by', filter_by);
+    if (start_date) params.set('start_date', start_date);
+    if (end_date) params.set('end_date', end_date);
+    params.set('export', 'excel');
+    params.set('page', '1');
+    params.set('limit', '9999999999');
+
+    const res = await httpClient<Blob>(
+      `${this.basePath}/customer-payment?${params.toString()}`,
+      {
+        method: 'GET',
+        responseType: 'blob',
+      }
+    );
+
+    const url = window.URL.createObjectURL(new Blob([res]));
+    const link = document.createElement('a');
+    link.href = url;
+
+    const fileName = `laporan-piutang-customer-per-sheet-${formatDate(Date.now(), 'DD-MM-YYYY')}.xlsx`;
+    link.setAttribute('download', fileName);
+
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+  }
+
+  async exportBalanceMonitoringToExcel(
+    customer_ids?: string,
+    sales_ids?: string,
+    filter_by?: string,
+    start_date?: string,
+    end_date?: string
+  ) {
+    const params = new URLSearchParams();
+    if (customer_ids) params.set('customer_ids', customer_ids);
+    if (sales_ids) params.set('sales_ids', sales_ids);
+    if (filter_by) params.set('filter_by', filter_by);
+    if (start_date) params.set('start_date', start_date);
+    if (end_date) params.set('end_date', end_date);
+    params.set('export', 'excel');
+    params.set('page', '1');
+    params.set('limit', '9999999999');
+
+    const res = await httpClient<Blob>(
+      `${this.basePath}/balance-monitoring?${params.toString()}`,
+      { method: 'GET', responseType: 'blob' }
+    );
+
+    const url = window.URL.createObjectURL(new Blob([res]));
+    const link = document.createElement('a');
+    link.href = url;
+    link.setAttribute(
+      'download',
+      `laporan-balance-monitoring-${formatDate(Date.now(), 'DD-MM-YYYY')}.xlsx`
+    );
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+  }
+
+  async getBalanceMonitoringReport(params: {
+    start_date?: string;
+    end_date?: string;
+    customer_ids?: string;
+    sales_ids?: string;
+    filter_by?: string;
+    sort_by?: string;
+    sort_order?: string;
+    page?: number;
+    limit?: number;
+  }): Promise<BaseApiResponse<BalanceMonitoringRow[]> | undefined> {
+    return await this.customRequest<BaseApiResponse<BalanceMonitoringRow[]>>(
+      'balance-monitoring',
+      { method: 'GET', params }
+    );
+  }
+
   async getCustomerPaymentReport(
     customer_ids?: string,
     // TODO: Uncomment when BE is ready

src/services/api/report/logistic-stock.ts

@@ -1,4 +1,6 @@
 import { BaseApiService } from '@/services/api/base';
+import { httpClient } from '@/services/http/client';
+import { formatDate } from '@/lib/helper';
 import { BaseApiResponse } from '@/types/api/api-general';
 import { LogisticPurchasePerSupplierReport } from '@/types/api/report/logistic-stock';
 
@@ -11,6 +13,115 @@ export class LogisticApiService extends BaseApiService<
     super(basePath);
   }
 
+  private buildPurchaseSupplierParams(
+    area_id?: string,
+    supplier_id?: string,
+    product_id?: string,
+    product_category_id?: string,
+    start_date?: string,
+    end_date?: string,
+    sort_by?: string,
+    filter_by?: string
+  ): URLSearchParams {
+    const params = new URLSearchParams();
+    if (area_id) params.set('area_id', area_id);
+    if (supplier_id) params.set('supplier_id', supplier_id);
+    if (product_id) params.set('product_id', product_id);
+    if (product_category_id)
+      params.set('product_category_id', product_category_id);
+    if (filter_by === 'received_date' && start_date)
+      params.set('received_date', start_date);
+    if (filter_by === 'po_date' && start_date)
+      params.set('po_date', start_date);
+    if (start_date) params.set('start_date', start_date);
+    if (end_date) params.set('end_date', end_date);
+    if (sort_by) params.set('sort_by', sort_by);
+    if (filter_by) params.set('filter_by', filter_by);
+    return params;
+  }
+
+  async exportToExcelSupplierPerSheet(
+    area_id?: string,
+    supplier_id?: string,
+    product_id?: string,
+    product_category_id?: string,
+    start_date?: string,
+    end_date?: string,
+    sort_by?: string,
+    filter_by?: string
+  ) {
+    const params = this.buildPurchaseSupplierParams(
+      area_id,
+      supplier_id,
+      product_id,
+      product_category_id,
+      start_date,
+      end_date,
+      sort_by,
+      filter_by
+    );
+    params.set('export', 'excel');
+    params.set('page', '1');
+    params.set('limit', '99999999999');
+
+    const res = await httpClient<Blob>(
+      `${this.basePath.replace(/\/$/, '')}/purchase-supplier?${params.toString()}`,
+      { method: 'GET', responseType: 'blob' }
+    );
+
+    const url = window.URL.createObjectURL(new Blob([res]));
+    const link = document.createElement('a');
+    link.href = url;
+    link.setAttribute(
+      'download',
+      `laporan-pembelian-per-supplier-per-sheet-${formatDate(Date.now(), 'DD-MM-YYYY')}.xlsx`
+    );
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+  }
+
+  async exportToExcelGeneral(
+    area_id?: string,
+    supplier_id?: string,
+    product_id?: string,
+    product_category_id?: string,
+    start_date?: string,
+    end_date?: string,
+    sort_by?: string,
+    filter_by?: string
+  ) {
+    const params = this.buildPurchaseSupplierParams(
+      area_id,
+      supplier_id,
+      product_id,
+      product_category_id,
+      start_date,
+      end_date,
+      sort_by,
+      filter_by
+    );
+    params.set('export', 'excel-all');
+    params.set('page', '1');
+    params.set('limit', '99999999999');
+
+    const res = await httpClient<Blob>(
+      `${this.basePath.replace(/\/$/, '')}/purchase-supplier?${params.toString()}`,
+      { method: 'GET', responseType: 'blob' }
+    );
+
+    const url = window.URL.createObjectURL(new Blob([res]));
+    const link = document.createElement('a');
+    link.href = url;
+    link.setAttribute(
+      'download',
+      `laporan-pembelian-per-supplier-general-${formatDate(Date.now(), 'DD-MM-YYYY')}.xlsx`
+    );
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+  }
+
   async getLogisticPurchasePerSupplierReport(
     area_id?: string,
     supplier_id?: string,

src/types/api/daily-checklist/daily-checklist.d.ts

@@ -12,8 +12,11 @@ export type BaseDailyChecklist = {
   status: string;
   category: string;
   date: string;
-  empty_kandang?: boolean;
+  empty_kandang?: {
-  empty_kandang_end_date?: string | null;
+    id: boolean;
+    start_date: string;
+    end_date: string;
+  };
   kandang?: Pick<BaseKandang, 'id' | 'name' | 'status' | 'capacity'>;
   total_phase: number;
   total_activity: number;

src/types/api/master-data/customer.d.ts

@@ -10,6 +10,7 @@ export type BaseCustomer = {
   phone: string;
   email: string;
   account_number: string;
+  bank_name: string;
 };
 
 export type Customer = BaseMetadata & BaseCustomer;
@@ -22,6 +23,7 @@ export type CreateCustomerPayload = {
   phone: string;
   email: string;
   account_number: string;
+  bank_name: string;
 };
 
 export type UpdateCustomerPayload = CreateCustomerPayload;

src/types/api/master-data/supplier.d.ts

@@ -16,6 +16,7 @@ export type BaseSupplier = {
   account_number: string;
   due_date: number;
   balance?: number;
+  bank_name: string;
 };
 
 export type Supplier = BaseMetadata & BaseSupplier;
@@ -45,6 +46,7 @@ export type CreateSupplierPayload = {
   account_number: string;
   due_date: number;
   balance?: number;
+  bank_name: string;
 };
 
 export type UpdateSupplierPayload = CreateSupplierPayload;

src/types/api/purchase/purchase.d.ts

@@ -57,6 +57,8 @@ export type PurchaseItem = {
     alias?: string;
     category?: string;
   } | null;
+  expedition_qty?: number;
+  expedition_total?: number;
 };
 
 export type BasePurchase = {
@@ -81,6 +83,9 @@ export type BasePurchase = {
   po_expedition?: { id: number; refrence: string }[];
   created_user?: CreatedUser;
   products?: PurchaseItemProduct[];
+  products_total?: number;
+  expedition_total?: number;
+  grand_total_all?: number;
 };
 
 export type Purchase = BaseMetadata & BasePurchase;
@@ -149,6 +154,9 @@ export type UpdatePurchaseRequestPayload = CreatePurchaseRequestPayload;
 
 export type PurchaseFilter = {
   poDate: string;
+  start_date?: string;
+  end_date?: string;
+  filterBy?: { label: string; value: string };
   category: string[];
   category_labels?: { label: string; value: number }[];
   status: string[];

src/types/api/report/balance-monitoring.d.ts

@@ -0,0 +1,25 @@
+import { Customer } from '@/services/api/master-data';
+
+export type BalanceMonitoringRow = {
+  customer: Customer;
+  saldo_awal: number;
+  penjualan_ayam: {
+    ekor: number;
+    kg: number;
+    nominal: number;
+  };
+  penjualan_telur: {
+    butir: number;
+    kg: number;
+    nominal: number;
+  };
+  penjualan_trading: {
+    qty: number;
+    kg: number;
+    nominal: number;
+  };
+  pembayaran: number;
+  aging: number;
+  aging_rata_rata: number;
+  saldo_akhir: number;
+};