From 9350a6bd3ed3764af92946fc892c8757458609ae Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 19 May 2026 17:30:13 +0700
Subject: [PATCH 01/14] fix: add Monitoring Saldo tab

---
 src/components/pages/report/finance/FinanceTabs.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/pages/report/finance/FinanceTabs.tsx b/src/components/pages/report/finance/FinanceTabs.tsx
index 5c49ed3c..29abe5e9 100644
--- a/src/components/pages/report/finance/FinanceTabs.tsx
+++ b/src/components/pages/report/finance/FinanceTabs.tsx
@@ -4,6 +4,7 @@ import { useState } from 'react';
 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 FinanceTabs = () => {
@@ -21,6 +22,11 @@ const FinanceTabs = () => {
       label: 'Kontrol Pembayaran Customer',
       content: <CustomerPaymentTab tabId={'2'} />,
     },
+    {
+      id: '3',
+      label: 'Monitoring Saldo',
+      content: <BalanceMonitoringTab tabId={'3'} />,
+    },
   ];
 
   return (

From 3c175d4586c11b996c7f2cb98420b65664e5c7ef Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 19 May 2026 17:30:28 +0700
Subject: [PATCH 02/14] feat: create BalanceMonitoringTab component

---
 .../finance/tab/BalanceMonitoringTab.tsx      | 665 ++++++++++++++++++
 1 file changed, 665 insertions(+)
 create mode 100644 src/components/pages/report/finance/tab/BalanceMonitoringTab.tsx

diff --git a/src/components/pages/report/finance/tab/BalanceMonitoringTab.tsx b/src/components/pages/report/finance/tab/BalanceMonitoringTab.tsx
new file mode 100644
index 00000000..134f27df
--- /dev/null
+++ b/src/components/pages/report/finance/tab/BalanceMonitoringTab.tsx
@@ -0,0 +1,665 @@
+'use client';
+
+import { useState, useMemo, useCallback, useEffect, useRef } from 'react';
+import useSWR from 'swr';
+import { Icon } from '@iconify/react';
+import { useFormik } from 'formik';
+import toast from 'react-hot-toast';
+import { ColumnDef, SortingState, Updater } from '@tanstack/react-table';
+import { FinanceApi } from '@/services/api/report/finance-report';
+import { CustomerApi } from '@/services/api/master-data';
+import { UserApi } from '@/services/api/user';
+import SelectInput, {
+  useSelect,
+  OptionType,
+} from '@/components/input/SelectInput';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
+import Dropdown from '@/components/Dropdown';
+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 DateInput from '@/components/input/DateInput';
+import Pagination from '@/components/Pagination';
+import Table from '@/components/Table';
+import CustomerSupplierSkeleton from '@/components/pages/report/finance/skeleton/CustomerSupplierSkeleton';
+
+interface BalanceMonitoringTabProps {
+  tabId: string;
+}
+
+const BalanceMonitoringTab = ({ tabId }: BalanceMonitoringTabProps) => {
+  const [isPdfExportLoading, setIsPdfExportLoading] = useState(false);
+  const [hasDateError, setHasDateError] = useState(false);
+  const [dateErrorShown, setDateErrorShown] = 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,
+  } = useTableFilter<{
+    start_date: string;
+    end_date: string;
+    customerFilter?: OptionType<number>;
+    salesFilter?: OptionType<number>;
+    sort_by: string;
+    order_by: string;
+  }>({
+    initial: {
+      start_date: '',
+      end_date: '',
+      customerFilter: undefined,
+      salesFilter: undefined,
+      sort_by: '',
+      order_by: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      start_date: 'start_date',
+      end_date: 'end_date',
+      customerFilter: 'customer_id',
+      salesFilter: 'sales_id',
+      sort_by: 'sort_by',
+      order_by: 'sort_order',
+    },
+    persist: true,
+    storeName: 'balance-monitoring-table',
+  });
+
+  // Keep a stable ref so handleExportPDF doesn't need toQueryString as a dep
+  const toQueryStringRef = useRef(toQueryString);
+  useEffect(() => {
+    toQueryStringRef.current = toQueryString;
+  });
+
+  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,
+      customerFilter: tableFilterState.customerFilter,
+      salesFilter: tableFilterState.salesFilter,
+    },
+    enableReinitialize: true,
+    onSubmit: (values) => {
+      updateFilter('start_date', values.start_date, true);
+      updateFilter('end_date', values.end_date, true);
+      updateFilter('customerFilter', values.customerFilter, true);
+      updateFilter('salesFilter', values.salesFilter, true);
+      filterModal.closeModal();
+    },
+    onReset: () => {
+      updateFilter('start_date', '', true);
+      updateFilter('end_date', '', true);
+      updateFilter('customerFilter', undefined, true);
+      updateFilter('salesFilter', undefined, true);
+      setHasDateError(false);
+      if (dateErrorShown) {
+        toast.dismiss();
+        setDateErrorShown(false);
+      }
+      filterModal.closeModal();
+    },
+  });
+
+  handleFilterModalOpenRef.current = () => {
+    filterModal.openModal();
+  };
+
+  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 queryString = toQueryString();
+
+  const { data: response, isLoading } = useSWR(queryString, (qs) =>
+    FinanceApi.getBalanceMonitoringReport(
+      Object.fromEntries(new URLSearchParams(qs)) as Parameters<
+        typeof FinanceApi.getBalanceMonitoringReport
+      >[0]
+    )
+  );
+
+  const data: BalanceMonitoringRow[] = useMemo(
+    () =>
+      isResponseSuccess(response)
+        ? ((response.data as BalanceMonitoringRow[]) ?? [])
+        : [],
+    [response]
+  );
+
+  const meta = useMemo(
+    () => (isResponseSuccess(response) && response.meta ? response.meta : null),
+    [response]
+  );
+
+  // Stable — uses ref so toQueryString is always current without being a dep
+  const handleExportPDF = useCallback(async () => {
+    setIsPdfExportLoading(true);
+    try {
+      await FinanceApi.exportBalanceMonitoringToPDF(toQueryStringRef.current());
+      toast.success('PDF berhasil dibuat dan diunduh.');
+    } catch {
+      toast.error('Gagal membuat PDF. Silakan coba lagi.');
+    } finally {
+      setIsPdfExportLoading(false);
+    }
+  }, []);
+
+  // 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,
+            customerFilter: tableFilterState.customerFilter,
+            salesFilter: tableFilterState.salesFilter,
+          }}
+          fieldGroups={[['start_date', 'end_date']]}
+          onClick={() => handleFilterModalOpenRef.current()}
+          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={isPdfExportLoading}
+              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={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,
+    isPdfExportLoading,
+    handleExportPDF,
+    tableFilterState.start_date,
+    tableFilterState.end_date,
+    tableFilterState.customerFilter,
+    tableFilterState.salesFilter,
+  ]);
+
+  useEffect(() => {
+    return () => clearTabActions(tabId);
+  }, [tabId, clearTabActions]);
+
+  const page = meta?.page || tableFilterState.page;
+  const pageSize = meta?.limit || tableFilterState.pageSize;
+
+  const columns = useMemo(
+    (): ColumnDef<BalanceMonitoringRow>[] => [
+      {
+        header: 'No',
+        enableSorting: false,
+        cell: (props) => (page - 1) * pageSize + props.row.index + 1,
+      },
+      {
+        header: 'Customer',
+        accessorKey: 'customer_name',
+        enableSorting: true,
+        id: '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: 'Kuantitas',
+            accessorKey: 'penjualan_telur_kuantitas',
+            id: 'penjualan_telur_kuantitas',
+            enableSorting: true,
+            cell: ({ row }) => (
+              <div className='text-right'>
+                {formatNumber(row.original.penjualan_telur_kuantitas)}
+              </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',
+        id: 'penjualan_trading',
+        enableSorting: true,
+        cell: ({ row }) => (
+          <div className='text-right'>
+            {formatCurrency(row.original.penjualan_trading)}
+          </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>
+        ),
+      },
+    ],
+    [page, 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 && data.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 && data.length > 0 && (
+          <>
+            <div className='w-full overflow-x-auto'>
+              <Table
+                data={data}
+                columns={columns}
+                pageSize={pageSize}
+                page={meta?.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',
+                  paginationClassName: 'hidden',
+                }}
+              />
+            </div>
+
+            {meta && (
+              <div className='mt-5 px-3'>
+                <Pagination
+                  totalItems={meta.total_results || 0}
+                  itemsPerPage={meta.limit || 0}
+                  currentPage={meta.page || 0}
+                  onPrevPage={() => setPage(Math.max(1, (meta.page || 1) - 1))}
+                  onNextPage={() =>
+                    setPage(
+                      meta.total_pages && (meta.page || 1) < meta.total_pages
+                        ? (meta.page || 1) + 1
+                        : meta.page || 1
+                    )
+                  }
+                  onPageChange={setPage}
+                  rowOptions={[10, 20, 50, 100]}
+                  onRowChange={setPageSize}
+                />
+              </div>
+            )}
+          </>
+        )}
+      </div>
+
+      {/* Filter Modal */}
+      <Modal
+        ref={filterModal.ref}
+        className={{
+          modal: 'p-0',
+          modalBox: 'p-0 rounded-[0.875rem] xl:max-w-4/12 max-w-sm',
+        }}
+      >
+        {/* Modal Header */}
+        <div className='flex items-center justify-between gap-2 border-b border-base-content/10 p-4'>
+          <div className='flex items-center gap-2 text-primary'>
+            <Icon icon='heroicons:funnel' width={20} height={20} />
+            <h3 className='font-medium text-sm'>Filter Data</h3>
+          </div>
+          <Button
+            variant='link'
+            onClick={filterModal.closeModal}
+            className='text-base-content/50 hover:text-base-content transition-colors cursor-pointer'
+          >
+            <Icon icon='heroicons:x-mark' width={20} height={20} />
+          </Button>
+        </div>
+
+        <form onSubmit={formik.handleSubmit} onReset={formik.handleReset}>
+          <div className='p-4 flex flex-col gap-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>
+
+            <SelectInput
+              label='Customer'
+              placeholder='Pilih Customer'
+              options={customerOptions}
+              value={formik.values.customerFilter ?? null}
+              onChange={(val) =>
+                formik.setFieldValue(
+                  'customerFilter',
+                  val as OptionType<number> | null
+                )
+              }
+              onInputChange={setCustomerInput}
+              isLoading={isLoadingCustomers}
+              isClearable
+              onMenuScrollToBottom={loadMoreCustomers}
+              className={{ wrapper: 'w-full' }}
+            />
+
+            <SelectInput
+              label='Sales'
+              placeholder='Pilih Sales'
+              options={salesOptions}
+              value={formik.values.salesFilter ?? null}
+              onChange={(val) =>
+                formik.setFieldValue(
+                  'salesFilter',
+                  val as OptionType<number> | null
+                )
+              }
+              onInputChange={setSalesInput}
+              isLoading={isLoadingSales}
+              isClearable
+              onMenuScrollToBottom={loadMoreSales}
+              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;

From 8df5af0124d5eac9e7bafd9526ec45dfea46a874 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 19 May 2026 17:30:38 +0700
Subject: [PATCH 03/14] feat: create getBalanceMonitoringReport method

---
 src/services/api/report/finance-report.ts | 253 ++++++++++++++++++++++
 1 file changed, 253 insertions(+)

diff --git a/src/services/api/report/finance-report.ts b/src/services/api/report/finance-report.ts
index 95a85b85..e5ec9b64 100644
--- a/src/services/api/report/finance-report.ts
+++ b/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,256 @@ export class FinanceApiService extends BaseApiService<
     super(basePath);
   }
 
+  async getBalanceMonitoringReport(params: {
+    start_date?: string;
+    end_date?: string;
+    customer_id?: string;
+    sales_id?: string;
+    sort_by?: string;
+    sort_order?: string;
+    page?: number;
+    limit?: number;
+  }): Promise<BaseApiResponse<BalanceMonitoringRow[]> | undefined> {
+    // TODO: Remove dummy data when BE is ready
+    const dummyRows: BalanceMonitoringRow[] = [
+      {
+        customer_id: 1,
+        customer_name: 'PT Maju Bersama',
+        saldo_awal: 12500000,
+        penjualan_ayam_ekor: 450,
+        penjualan_ayam_kg: 1125.5,
+        penjualan_ayam_nominal: 22510000,
+        penjualan_telur_kuantitas: 300,
+        penjualan_telur_kg: 900,
+        penjualan_telur_nominal: 4500000,
+        penjualan_trading: 3000000,
+        pembayaran: 30000000,
+        aging: 15,
+        aging_rata_rata: 12,
+        saldo_akhir: 12510000,
+      },
+      {
+        customer_id: 2,
+        customer_name: 'CV Sumber Rezeki',
+        saldo_awal: 8750000,
+        penjualan_ayam_ekor: 320,
+        penjualan_ayam_kg: 800,
+        penjualan_ayam_nominal: 16000000,
+        penjualan_telur_kuantitas: 150,
+        penjualan_telur_kg: 450,
+        penjualan_telur_nominal: 2250000,
+        penjualan_trading: 0,
+        pembayaran: 20000000,
+        aging: 7,
+        aging_rata_rata: 8,
+        saldo_akhir: 7000000,
+      },
+      {
+        customer_id: 3,
+        customer_name: 'UD Karya Mandiri',
+        saldo_awal: 5000000,
+        penjualan_ayam_ekor: 600,
+        penjualan_ayam_kg: 1500,
+        penjualan_ayam_nominal: 30000000,
+        penjualan_telur_kuantitas: 0,
+        penjualan_telur_kg: 0,
+        penjualan_telur_nominal: 0,
+        penjualan_trading: 1500000,
+        pembayaran: 25000000,
+        aging: 30,
+        aging_rata_rata: 22,
+        saldo_akhir: 11500000,
+      },
+      {
+        customer_id: 4,
+        customer_name: 'PT Sejahtera Abadi',
+        saldo_awal: 20000000,
+        penjualan_ayam_ekor: 100,
+        penjualan_ayam_kg: 250,
+        penjualan_ayam_nominal: 5000000,
+        penjualan_telur_kuantitas: 500,
+        penjualan_telur_kg: 1500,
+        penjualan_telur_nominal: 7500000,
+        penjualan_trading: 2000000,
+        pembayaran: 40000000,
+        aging: 45,
+        aging_rata_rata: 38,
+        saldo_akhir: -5500000,
+      },
+      {
+        customer_id: 5,
+        customer_name: 'CV Berkah Jaya',
+        saldo_awal: 3200000,
+        penjualan_ayam_ekor: 200,
+        penjualan_ayam_kg: 500,
+        penjualan_ayam_nominal: 10000000,
+        penjualan_telur_kuantitas: 200,
+        penjualan_telur_kg: 600,
+        penjualan_telur_nominal: 3000000,
+        penjualan_trading: 500000,
+        pembayaran: 15000000,
+        aging: 10,
+        aging_rata_rata: 9,
+        saldo_akhir: 1700000,
+      },
+      {
+        customer_id: 6,
+        customer_name: 'PT Harapan Makmur',
+        saldo_awal: 17000000,
+        penjualan_ayam_ekor: 780,
+        penjualan_ayam_kg: 1950,
+        penjualan_ayam_nominal: 39000000,
+        penjualan_telur_kuantitas: 400,
+        penjualan_telur_kg: 1200,
+        penjualan_telur_nominal: 6000000,
+        penjualan_trading: 4500000,
+        pembayaran: 50000000,
+        aging: 20,
+        aging_rata_rata: 17,
+        saldo_akhir: 16500000,
+      },
+      {
+        customer_id: 7,
+        customer_name: 'UD Rejeki Lancar',
+        saldo_awal: 2000000,
+        penjualan_ayam_ekor: 50,
+        penjualan_ayam_kg: 125,
+        penjualan_ayam_nominal: 2500000,
+        penjualan_telur_kuantitas: 80,
+        penjualan_telur_kg: 240,
+        penjualan_telur_nominal: 1200000,
+        penjualan_trading: 0,
+        pembayaran: 5000000,
+        aging: 5,
+        aging_rata_rata: 6,
+        saldo_akhir: 700000,
+      },
+      {
+        customer_id: 8,
+        customer_name: 'CV Putra Unggul',
+        saldo_awal: 9500000,
+        penjualan_ayam_ekor: 410,
+        penjualan_ayam_kg: 1025,
+        penjualan_ayam_nominal: 20500000,
+        penjualan_telur_kuantitas: 250,
+        penjualan_telur_kg: 750,
+        penjualan_telur_nominal: 3750000,
+        penjualan_trading: 1000000,
+        pembayaran: 28000000,
+        aging: 18,
+        aging_rata_rata: 15,
+        saldo_akhir: 6750000,
+      },
+      {
+        customer_id: 9,
+        customer_name: 'PT Duta Poultry',
+        saldo_awal: 35000000,
+        penjualan_ayam_ekor: 1200,
+        penjualan_ayam_kg: 3000,
+        penjualan_ayam_nominal: 60000000,
+        penjualan_telur_kuantitas: 800,
+        penjualan_telur_kg: 2400,
+        penjualan_telur_nominal: 12000000,
+        penjualan_trading: 8000000,
+        pembayaran: 70000000,
+        aging: 60,
+        aging_rata_rata: 50,
+        saldo_akhir: -15000000,
+      },
+      {
+        customer_id: 10,
+        customer_name: 'UD Sari Ayam',
+        saldo_awal: 6800000,
+        penjualan_ayam_ekor: 350,
+        penjualan_ayam_kg: 875,
+        penjualan_ayam_nominal: 17500000,
+        penjualan_telur_kuantitas: 0,
+        penjualan_telur_kg: 0,
+        penjualan_telur_nominal: 0,
+        penjualan_trading: 2500000,
+        pembayaran: 22000000,
+        aging: 12,
+        aging_rata_rata: 11,
+        saldo_akhir: 4800000,
+      },
+      {
+        customer_id: 11,
+        customer_name: 'CV Nusa Ternak',
+        saldo_awal: 14200000,
+        penjualan_ayam_ekor: 530,
+        penjualan_ayam_kg: 1325,
+        penjualan_ayam_nominal: 26500000,
+        penjualan_telur_kuantitas: 350,
+        penjualan_telur_kg: 1050,
+        penjualan_telur_nominal: 5250000,
+        penjualan_trading: 3500000,
+        pembayaran: 35000000,
+        aging: 25,
+        aging_rata_rata: 20,
+        saldo_akhir: 14450000,
+      },
+      {
+        customer_id: 12,
+        customer_name: 'PT Agro Sentosa',
+        saldo_awal: 4100000,
+        penjualan_ayam_ekor: 180,
+        penjualan_ayam_kg: 450,
+        penjualan_ayam_nominal: 9000000,
+        penjualan_telur_kuantitas: 120,
+        penjualan_telur_kg: 360,
+        penjualan_telur_nominal: 1800000,
+        penjualan_trading: 750000,
+        pembayaran: 12000000,
+        aging: 8,
+        aging_rata_rata: 9,
+        saldo_akhir: 3650000,
+      },
+    ];
+
+    const page = Number(params.page) || 1;
+    const limit = Number(params.limit) || 10;
+
+    return {
+      status: 'success',
+      message: 'Data retrieved successfully',
+      data: dummyRows,
+      meta: {
+        page,
+        limit,
+        total_results: dummyRows.length,
+        total_pages: 1,
+      },
+    } as BaseApiResponse<BalanceMonitoringRow[]>;
+
+    // return await this.customRequest<BaseApiResponse<BalanceMonitoringRow[]>>(
+    //   'balance-monitoring',
+    //   { method: 'GET', params }
+    // );
+  }
+
+  async exportBalanceMonitoringToPDF(initialQueryString: string) {
+    const params = new URLSearchParams(initialQueryString);
+    params.set('export', 'pdf');
+    params.set('page', '1');
+    params.set('limit', '99999999999');
+
+    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',
+      `monitoring-saldo-${formatDate(Date.now(), 'DD-MM-YYYY')}.pdf`
+    );
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+  }
+
   async getCustomerPaymentReport(
     customer_ids?: string,
     // TODO: Uncomment when BE is ready

From f76b5b981c93cd3198094bb9619a83e7306cc1fb Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 19 May 2026 17:31:00 +0700
Subject: [PATCH 04/14] feat: create balance-monitoring type

---
 src/types/api/report/balance-monitoring.d.ts | 23 ++++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 src/types/api/report/balance-monitoring.d.ts

diff --git a/src/types/api/report/balance-monitoring.d.ts b/src/types/api/report/balance-monitoring.d.ts
new file mode 100644
index 00000000..9c7933dd
--- /dev/null
+++ b/src/types/api/report/balance-monitoring.d.ts
@@ -0,0 +1,23 @@
+export type BalanceMonitoringRow = {
+  customer_id: number;
+  customer_name: string;
+  saldo_awal: number;
+  penjualan_ayam_ekor: number;
+  penjualan_ayam_kg: number;
+  penjualan_ayam_nominal: number;
+  penjualan_telur_kuantitas: number;
+  penjualan_telur_kg: number;
+  penjualan_telur_nominal: number;
+  penjualan_trading: number;
+  pembayaran: number;
+  aging: number;
+  aging_rata_rata: number;
+  saldo_akhir: number;
+};
+
+export type BalanceMonitoringMeta = {
+  page: number;
+  limit: number;
+  total_results: number;
+  total_pages: number;
+};

From 94d623d79321d09d16ba21adb5d52e34fa878b8e Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 19 May 2026 17:31:18 +0700
Subject: [PATCH 05/14] feat: update gitignore

---
 .gitignore | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.gitignore b/.gitignore
index 9e1fadc8..44fee0bc 100644
--- a/.gitignore
+++ b/.gitignore
@@ -48,3 +48,6 @@ next-env.d.ts
 
 # rtk
 rtk.exe
+
+# local specs
+/local-specs
\ No newline at end of file

From 7437e2e5840ba9d7a5a42656aa8b7277a75f7357 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Wed, 20 May 2026 16:08:19 +0700
Subject: [PATCH 06/14] fix: update pattern context

---
 CLAUDE.md | 146 ++++++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 109 insertions(+), 37 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 711d5a1c..a0e24f9b 100644
--- a/CLAUDE.md
+++ b/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 `formik.resetForm({ values: { ...defaults } })`
-   - Close the modal at the end
-   - Attach to both button `onClick` and form `onReset` handler
+   - Call `resetFilter()` (single call — resets all `useTableFilter` state to defaults)
+   - Reset any local error state (e.g. `setHasDateError(false)`, dismiss toasts)
+   - Call `formik.resetForm({ values: { ...defaults } })` to sync formik to defaults
+   - 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
-- Simple pass-through handlers don't need it:
+**Optimization: Avoid useCallback and useMemo for trivial operations**
+
+- `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
-  const handleFilterChange = (val) => setFieldValue('location', val);
+  // ✅ Good: plain derivation
+  const data = isResponseSuccess(response) ? (response.data ?? []) : [];
+  const meta =
+    isResponseSuccess(response) && response.meta ? response.meta : null;
 
-  // ❌ Avoid: Unnecessary useCallback overhead
-  const handleFilterChange = useCallback(
+  // ❌ Avoid: useMemo for trivial conditional access
+  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>;
-  picFilter?: OptionType<string>;
+  customers: OptionType<number>[];     // multi-select → serializes as CSV
+  location?: OptionType<string>;       // single-select → serializes as value string
+  filterBy?: OptionType<string>;       // single-select radio
 }>({
   initial: {
     search: '',
-    locationFilter: undefined,
-    picFilter: undefined
+    customers: [],
+    location: undefined,
+    filterBy: undefined,
   },
   paramMap: {
     page: 'page',
     pageSize: 'limit',
-    locationFilter: 'location_id',
-    picFilter: 'pic_id',
+    customers: 'customer_ids',   // serializes OptionType[] → "1,2,3"
+    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)
-const formik = useFormik<KandangFilterType>({
+// Initialize formik directly from tableFilterState (no hardcoded defaults)
+const formik = useFormik({
   initialValues: {
-    location: tableFilterState.locationFilter,
-    pic: tableFilterState.picFilter,
+    customers: tableFilterState.customers,
+    location: tableFilterState.location,
+    filterBy: tableFilterState.filterBy,
   },
   ...
 });
 
-// Handlers store the complete OptionType, not just the ID
-const handleFilterLocationChange = useCallback(
-  (val) => setFieldValue('location', val),
-  [setFieldValue]
-);
-
-// Use formik values directly in select inputs (no computed helpers needed)
-<SelectInput
-  value={formik.values.location}
-  onChange={handleFilterLocationChange}
-  ...
-/>
+// Use formik values directly — no computed helpers needed
+<SelectInputCheckbox value={formik.values.customers} onChange={(val) => formik.setFieldValue('customers', Array.isArray(val) ? val : [])} />
+<SelectInput        value={formik.values.location}  onChange={(val) => formik.setFieldValue('location', val)} />
+<SelectInputRadio   value={formik.values.filterBy ?? null} onChange={(val) => formik.setFieldValue('filterBy', !Array.isArray(val) ? (val ?? undefined) : undefined)} />
 ```
 
+**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
 

From c98a51326fdd772d2a7a0db7a0608e7de8b0ff8f Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Wed, 20 May 2026 16:10:01 +0700
Subject: [PATCH 07/14] refactor: optimize BalanceMonitoringTab with
 useTableFilter persistence pattern

Replace single-select customerFilter/salesFilter with OptionType[] multi-select
(customers, salesPersons, filterBy), switch SWR to httpClientFetcher with explicit
type, remove PDF export, enableReinitialize, useRef modal hack, useMemo on data/meta,
and useCallback on trivial handlers. Add formikResetHandler using resetFilter().

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../finance/tab/BalanceMonitoringTab.tsx      | 351 +++++++-----------
 1 file changed, 144 insertions(+), 207 deletions(-)

diff --git a/src/components/pages/report/finance/tab/BalanceMonitoringTab.tsx b/src/components/pages/report/finance/tab/BalanceMonitoringTab.tsx
index 134f27df..b2920008 100644
--- a/src/components/pages/report/finance/tab/BalanceMonitoringTab.tsx
+++ b/src/components/pages/report/finance/tab/BalanceMonitoringTab.tsx
@@ -1,21 +1,22 @@
 'use client';
 
-import { useState, useMemo, useCallback, useEffect, useRef } from 'react';
+import { useState, useMemo, useEffect } from 'react';
 import useSWR from 'swr';
 import { Icon } from '@iconify/react';
 import { useFormik } from 'formik';
 import toast from 'react-hot-toast';
-import { ColumnDef, SortingState, Updater } from '@tanstack/react-table';
+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 SelectInput, {
-  useSelect,
-  OptionType,
-} from '@/components/input/SelectInput';
+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 Dropdown from '@/components/Dropdown';
 import ButtonFilter from '@/components/helper/ButtonFilter';
 import { formatCurrency, formatNumber } from '@/lib/helper';
 import { isResponseSuccess } from '@/lib/api-helper';
@@ -24,7 +25,6 @@ import { CustomerPaymentRow } from '@/types/api/report/customer-payment';
 import Modal, { useModal } from '@/components/Modal';
 import Button from '@/components/Button';
 import DateInput from '@/components/input/DateInput';
-import Pagination from '@/components/Pagination';
 import Table from '@/components/Table';
 import CustomerSupplierSkeleton from '@/components/pages/report/finance/skeleton/CustomerSupplierSkeleton';
 
@@ -32,12 +32,15 @@ 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 [isPdfExportLoading, setIsPdfExportLoading] = useState(false);
   const [hasDateError, setHasDateError] = useState(false);
   const [dateErrorShown, setDateErrorShown] = useState(false);
 
-  const handleFilterModalOpenRef = useRef(() => {});
   const filterModal = useModal();
 
   const setTabActions = useTabActionsStore((state) => state.setTabActions);
@@ -48,20 +51,23 @@ const BalanceMonitoringTab = ({ tabId }: BalanceMonitoringTabProps) => {
     updateFilter,
     setPage,
     setPageSize,
-    toQueryString,
+    toQueryString: getTableFilterQueryString,
+    reset: resetFilter,
   } = useTableFilter<{
     start_date: string;
     end_date: string;
-    customerFilter?: OptionType<number>;
-    salesFilter?: OptionType<number>;
+    customers: OptionType<number>[];
+    salesPersons: OptionType<number>[];
+    filterBy?: OptionType<string>;
     sort_by: string;
     order_by: string;
   }>({
     initial: {
       start_date: '',
       end_date: '',
-      customerFilter: undefined,
-      salesFilter: undefined,
+      customers: [],
+      salesPersons: [],
+      filterBy: undefined,
       sort_by: '',
       order_by: '',
     },
@@ -70,8 +76,9 @@ const BalanceMonitoringTab = ({ tabId }: BalanceMonitoringTabProps) => {
       pageSize: 'limit',
       start_date: 'start_date',
       end_date: 'end_date',
-      customerFilter: 'customer_id',
-      salesFilter: 'sales_id',
+      customers: 'customer_ids',
+      salesPersons: 'sales_ids',
+      filterBy: 'filter_by',
       sort_by: 'sort_by',
       order_by: 'sort_order',
     },
@@ -79,31 +86,25 @@ const BalanceMonitoringTab = ({ tabId }: BalanceMonitoringTabProps) => {
     storeName: 'balance-monitoring-table',
   });
 
-  // Keep a stable ref so handleExportPDF doesn't need toQueryString as a dep
-  const toQueryStringRef = useRef(toQueryString);
-  useEffect(() => {
-    toQueryStringRef.current = toQueryString;
-  });
+  // const sorting: SortingState = tableFilterState.sort_by
+  //   ? [
+  //       {
+  //         id: tableFilterState.sort_by,
+  //         desc: tableFilterState.order_by === 'desc',
+  //       },
+  //     ]
+  //   : [];
 
-  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 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,
@@ -123,33 +124,40 @@ const BalanceMonitoringTab = ({ tabId }: BalanceMonitoringTabProps) => {
     initialValues: {
       start_date: tableFilterState.start_date,
       end_date: tableFilterState.end_date,
-      customerFilter: tableFilterState.customerFilter,
-      salesFilter: tableFilterState.salesFilter,
+      customers: tableFilterState.customers,
+      salesPersons: tableFilterState.salesPersons,
+      filterBy: tableFilterState.filterBy,
     },
-    enableReinitialize: true,
     onSubmit: (values) => {
       updateFilter('start_date', values.start_date, true);
       updateFilter('end_date', values.end_date, true);
-      updateFilter('customerFilter', values.customerFilter, true);
-      updateFilter('salesFilter', values.salesFilter, true);
-      filterModal.closeModal();
-    },
-    onReset: () => {
-      updateFilter('start_date', '', true);
-      updateFilter('end_date', '', true);
-      updateFilter('customerFilter', undefined, true);
-      updateFilter('salesFilter', undefined, true);
-      setHasDateError(false);
-      if (dateErrorShown) {
-        toast.dismiss();
-        setDateErrorShown(false);
-      }
+      updateFilter('customers', values.customers, true);
+      updateFilter('salesPersons', values.salesPersons, true);
+      updateFilter('filterBy', values.filterBy, true);
       filterModal.closeModal();
     },
   });
 
-  handleFilterModalOpenRef.current = () => {
-    filterModal.openModal();
+  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>) => {
@@ -201,41 +209,26 @@ const BalanceMonitoringTab = ({ tabId }: BalanceMonitoringTabProps) => {
     }
   };
 
-  const queryString = toQueryString();
-
-  const { data: response, isLoading } = useSWR(queryString, (qs) =>
-    FinanceApi.getBalanceMonitoringReport(
-      Object.fromEntries(new URLSearchParams(qs)) as Parameters<
-        typeof FinanceApi.getBalanceMonitoringReport
-      >[0]
-    )
+  const { data: balanceMonitoringsResponse, isLoading } = useSWR<
+    BaseApiResponse<BalanceMonitoringRow[]>,
+    AxiosError<BaseApiResponse>,
+    SWRHttpKey
+  >(
+    `${FinanceApi.basePath}/balance-monitoring${getTableFilterQueryString()}`,
+    httpClientFetcher
   );
 
-  const data: BalanceMonitoringRow[] = useMemo(
-    () =>
-      isResponseSuccess(response)
-        ? ((response.data as BalanceMonitoringRow[]) ?? [])
-        : [],
-    [response]
-  );
+  const balanceMonitorings: BalanceMonitoringRow[] = isResponseSuccess(
+    balanceMonitoringsResponse
+  )
+    ? ((balanceMonitoringsResponse.data as BalanceMonitoringRow[]) ?? [])
+    : [];
 
-  const meta = useMemo(
-    () => (isResponseSuccess(response) && response.meta ? response.meta : null),
-    [response]
-  );
-
-  // Stable — uses ref so toQueryString is always current without being a dep
-  const handleExportPDF = useCallback(async () => {
-    setIsPdfExportLoading(true);
-    try {
-      await FinanceApi.exportBalanceMonitoringToPDF(toQueryStringRef.current());
-      toast.success('PDF berhasil dibuat dan diunduh.');
-    } catch {
-      toast.error('Gagal membuat PDF. Silakan coba lagi.');
-    } finally {
-      setIsPdfExportLoading(false);
-    }
-  }, []);
+  const meta =
+    isResponseSuccess(balanceMonitoringsResponse) &&
+    balanceMonitoringsResponse.meta
+      ? balanceMonitoringsResponse.meta
+      : null;
 
   // Inject tab actions directly — no nested component, no remount cycle
   useEffect(() => {
@@ -246,85 +239,39 @@ const BalanceMonitoringTab = ({ tabId }: BalanceMonitoringTabProps) => {
           values={{
             start_date: tableFilterState.start_date,
             end_date: tableFilterState.end_date,
-            customerFilter: tableFilterState.customerFilter,
-            salesFilter: tableFilterState.salesFilter,
+            customers: tableFilterState.customers,
+            salesPersons: tableFilterState.salesPersons,
+            filterBy: tableFilterState.filterBy,
           }}
           fieldGroups={[['start_date', 'end_date']]}
-          onClick={() => handleFilterModalOpenRef.current()}
+          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={isPdfExportLoading}
-              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={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,
-    isPdfExportLoading,
-    handleExportPDF,
-    tableFilterState.start_date,
-    tableFilterState.end_date,
-    tableFilterState.customerFilter,
-    tableFilterState.salesFilter,
-  ]);
+  }, [tabId, setTabActions, tableFilterState, filterModal.openModal]);
 
   useEffect(() => {
     return () => clearTabActions(tabId);
   }, [tabId, clearTabActions]);
 
-  const page = meta?.page || tableFilterState.page;
-  const pageSize = meta?.limit || tableFilterState.pageSize;
-
   const columns = useMemo(
     (): ColumnDef<BalanceMonitoringRow>[] => [
       {
         header: 'No',
         enableSorting: false,
-        cell: (props) => (page - 1) * pageSize + props.row.index + 1,
+        cell: (props) =>
+          (tableFilterState.page - 1) * tableFilterState.pageSize +
+          props.row.index +
+          1,
       },
       {
         header: 'Customer',
-        accessorKey: 'customer_name',
+        accessorKey: 'customer.name',
         enableSorting: true,
         id: 'customer_name',
+        cell: ({ row }) => row.original.customer.name,
       },
       {
         header: 'Saldo Awal',
@@ -342,34 +289,34 @@ const BalanceMonitoringTab = ({ tabId }: BalanceMonitoringTabProps) => {
         columns: [
           {
             header: 'Ekor',
-            accessorKey: 'penjualan_ayam_ekor',
+            accessorKey: 'penjualan_ayam.ekor',
             id: 'penjualan_ayam_ekor',
             enableSorting: true,
             cell: ({ row }) => (
               <div className='text-right'>
-                {formatNumber(row.original.penjualan_ayam_ekor)}
+                {formatNumber(row.original.penjualan_ayam.ekor)}
               </div>
             ),
           },
           {
             header: 'Kg',
-            accessorKey: 'penjualan_ayam_kg',
+            accessorKey: 'penjualan_ayam.kg',
             id: 'penjualan_ayam_kg',
             enableSorting: true,
             cell: ({ row }) => (
               <div className='text-right'>
-                {formatNumber(row.original.penjualan_ayam_kg)}
+                {formatNumber(row.original.penjualan_ayam.kg)}
               </div>
             ),
           },
           {
             header: 'Nominal',
-            accessorKey: 'penjualan_ayam_nominal',
+            accessorKey: 'penjualan_ayam.nominal',
             id: 'penjualan_ayam_nominal',
             enableSorting: true,
             cell: ({ row }) => (
               <div className='text-right'>
-                {formatCurrency(row.original.penjualan_ayam_nominal)}
+                {formatCurrency(row.original.penjualan_ayam.nominal)}
               </div>
             ),
           },
@@ -379,35 +326,35 @@ const BalanceMonitoringTab = ({ tabId }: BalanceMonitoringTabProps) => {
         header: 'Penjualan Telur',
         columns: [
           {
-            header: 'Kuantitas',
-            accessorKey: 'penjualan_telur_kuantitas',
-            id: 'penjualan_telur_kuantitas',
+            header: 'Butir',
+            accessorKey: 'penjualan_telur.butir',
+            id: 'penjualan_telur_butir',
             enableSorting: true,
             cell: ({ row }) => (
               <div className='text-right'>
-                {formatNumber(row.original.penjualan_telur_kuantitas)}
+                {formatNumber(row.original.penjualan_telur.butir)}
               </div>
             ),
           },
           {
             header: 'Kg',
-            accessorKey: 'penjualan_telur_kg',
+            accessorKey: 'penjualan_telur.kg',
             id: 'penjualan_telur_kg',
             enableSorting: true,
             cell: ({ row }) => (
               <div className='text-right'>
-                {formatNumber(row.original.penjualan_telur_kg)}
+                {formatNumber(row.original.penjualan_telur.kg)}
               </div>
             ),
           },
           {
             header: 'Nominal',
-            accessorKey: 'penjualan_telur_nominal',
+            accessorKey: 'penjualan_telur.nominal',
             id: 'penjualan_telur_nominal',
             enableSorting: true,
             cell: ({ row }) => (
               <div className='text-right'>
-                {formatCurrency(row.original.penjualan_telur_nominal)}
+                {formatCurrency(row.original.penjualan_telur.nominal)}
               </div>
             ),
           },
@@ -415,12 +362,12 @@ const BalanceMonitoringTab = ({ tabId }: BalanceMonitoringTabProps) => {
       },
       {
         header: 'Penjualan Trading',
-        accessorKey: 'penjualan_trading',
+        accessorKey: 'penjualan_trading.nominal',
         id: 'penjualan_trading',
         enableSorting: true,
         cell: ({ row }) => (
           <div className='text-right'>
-            {formatCurrency(row.original.penjualan_trading)}
+            {formatCurrency(row.original.penjualan_trading.nominal)}
           </div>
         ),
       },
@@ -471,7 +418,7 @@ const BalanceMonitoringTab = ({ tabId }: BalanceMonitoringTabProps) => {
         ),
       },
     ],
-    [page, pageSize]
+    [tableFilterState.page, tableFilterState.pageSize]
   );
 
   return (
@@ -483,7 +430,7 @@ const BalanceMonitoringTab = ({ tabId }: BalanceMonitoringTabProps) => {
           </div>
         )}
 
-        {!isLoading && data.length === 0 && (
+        {!isLoading && balanceMonitorings.length === 0 && (
           <CustomerSupplierSkeleton
             columns={columns as unknown as ColumnDef<CustomerPaymentRow>[]}
             icon={
@@ -499,20 +446,20 @@ const BalanceMonitoringTab = ({ tabId }: BalanceMonitoringTabProps) => {
           />
         )}
 
-        {!isLoading && data.length > 0 && (
+        {!isLoading && balanceMonitorings.length > 0 && (
           <>
             <div className='w-full overflow-x-auto'>
               <Table
-                data={data}
+                data={balanceMonitorings}
                 columns={columns}
-                pageSize={pageSize}
-                page={meta?.page || 1}
+                pageSize={tableFilterState.pageSize || 10}
+                page={tableFilterState.page || 1}
                 totalItems={meta?.total_results || 0}
                 onPageChange={setPage}
                 onPageSizeChange={setPageSize}
-                sorting={sorting}
-                setSorting={handleSortingChange}
-                manualSorting
+                // sorting={sorting}
+                // setSorting={handleSortingChange}
+                // manualSorting
                 className={{
                   containerClassName: 'w-full mb-0!',
                   tableWrapperClassName: 'overflow-x-auto',
@@ -524,31 +471,9 @@ const BalanceMonitoringTab = ({ tabId }: BalanceMonitoringTabProps) => {
                     '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',
-                  paginationClassName: 'hidden',
                 }}
               />
             </div>
-
-            {meta && (
-              <div className='mt-5 px-3'>
-                <Pagination
-                  totalItems={meta.total_results || 0}
-                  itemsPerPage={meta.limit || 0}
-                  currentPage={meta.page || 0}
-                  onPrevPage={() => setPage(Math.max(1, (meta.page || 1) - 1))}
-                  onNextPage={() =>
-                    setPage(
-                      meta.total_pages && (meta.page || 1) < meta.total_pages
-                        ? (meta.page || 1) + 1
-                        : meta.page || 1
-                    )
-                  }
-                  onPageChange={setPage}
-                  rowOptions={[10, 20, 50, 100]}
-                  onRowChange={setPageSize}
-                />
-              </div>
-            )}
           </>
         )}
       </div>
@@ -576,7 +501,7 @@ const BalanceMonitoringTab = ({ tabId }: BalanceMonitoringTabProps) => {
           </Button>
         </div>
 
-        <form onSubmit={formik.handleSubmit} onReset={formik.handleReset}>
+        <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'>
@@ -602,16 +527,13 @@ const BalanceMonitoringTab = ({ tabId }: BalanceMonitoringTabProps) => {
               </div>
             </div>
 
-            <SelectInput
+            <SelectInputCheckbox
               label='Customer'
               placeholder='Pilih Customer'
               options={customerOptions}
-              value={formik.values.customerFilter ?? null}
+              value={formik.values.customers}
               onChange={(val) =>
-                formik.setFieldValue(
-                  'customerFilter',
-                  val as OptionType<number> | null
-                )
+                formik.setFieldValue('customers', Array.isArray(val) ? val : [])
               }
               onInputChange={setCustomerInput}
               isLoading={isLoadingCustomers}
@@ -620,15 +542,15 @@ const BalanceMonitoringTab = ({ tabId }: BalanceMonitoringTabProps) => {
               className={{ wrapper: 'w-full' }}
             />
 
-            <SelectInput
+            <SelectInputCheckbox
               label='Sales'
               placeholder='Pilih Sales'
               options={salesOptions}
-              value={formik.values.salesFilter ?? null}
+              value={formik.values.salesPersons}
               onChange={(val) =>
                 formik.setFieldValue(
-                  'salesFilter',
-                  val as OptionType<number> | null
+                  'salesPersons',
+                  Array.isArray(val) ? val : []
                 )
               }
               onInputChange={setSalesInput}
@@ -637,6 +559,21 @@ const BalanceMonitoringTab = ({ tabId }: BalanceMonitoringTabProps) => {
               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 */}

From b3b60018bb9e3acd4a2483dca708371bf2e00d6b Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Wed, 20 May 2026 16:10:10 +0700
Subject: [PATCH 08/14] refactor: optimize CustomerPaymentTab with
 useTableFilter persistence pattern

Replace filterParams/currentPage/pageSize state with useTableFilter (persist:true),
switch SWR to httpClientFetcher with explicit type, store OptionType[] directly for
customers/filterBy, add formikResetHandler using resetFilter(), remove enableReinitialize
and handleFilterModalOpenRef, pass filterModal.openModal directly.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../report/finance/tab/CustomerPaymentTab.tsx | 644 ++++++++----------
 1 file changed, 280 insertions(+), 364 deletions(-)

diff --git a/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx b/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx
index e9c20053..e786c9a5 100644
--- a/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx
+++ b/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,28 +30,22 @@ 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 { 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 {
-  customer_ids?: string;
-  start_date?: string;
-  end_date?: string;
-  filter_by?: string;
-}
+const dataTypeOptions: OptionType<string>[] = [
+  { value: 'trans_date', label: 'Tanggal Jual/Bayar' },
+  { value: 'realization_date', label: 'Tanggal Realisasi' },
+];
 
 const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
   // ===== STATE MANAGEMENT =====
@@ -59,26 +56,44 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
   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(
-    () => [
-      { value: 'trans_date', label: 'Tanggal Jual/Bayar' },
-      { value: 'realization_date', label: 'Tanggal Realisasi' },
-    ],
-    []
-  );
+  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>[];
+    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,
@@ -88,222 +103,159 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
   } = useSelect(CustomerApi.basePath, 'id', 'name', 'search');
 
   // ===== FORMIK SETUP =====
-  const formik = useFormik<CustomerPaymentFilterType>({
+  const formik = useFormik({
     initialValues: {
-      start_date: null,
-      end_date: null,
-      customer_ids: null,
-      filter_by: null,
+      start_date: tableFilterState.start_date,
+      end_date: tableFilterState.end_date,
+      customers: tableFilterState.customers,
+      filterBy: tableFilterState.filterBy,
     },
-    validationSchema: CustomerPaymentFilterSchema,
-    onSubmit: (values, { setSubmitting }) => {
-      setFilterParams({
-        start_date: values.start_date || undefined,
-        end_date: values.end_date || undefined,
-        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);
-      }
+    onSubmit: (values) => {
+      updateFilter('start_date', values.start_date, true);
+      updateFilter('end_date', values.end_date, true);
+      updateFilter('customers', values.customers, true);
+      updateFilter('filterBy', values.filterBy, true);
       filterModal.closeModal();
     },
   });
 
-  handleFilterModalOpenRef.current = () => {
-    formik.setValues({
-      start_date: filterParams.start_date || null,
-      end_date: filterParams.end_date || null,
-      customer_ids: filterParams.customer_ids || null,
-      filter_by: filterParams.filter_by || null,
+  const formikResetHandler = () => {
+    resetFilter();
+
+    setHasDateError(false);
+    if (dateErrorShown) {
+      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.includes('belum')) {
-      return 'warning';
-    }
-
+    if (normalizedValue === 'lunas') return 'primary';
+    if (normalizedValue.includes('belum')) return 'warning';
     return 'neutral';
   };
 
   // ===== DATE CHANGE HANDLERS =====
-  const handleStartDateChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = e.target.value;
-      formik.setFieldValue('start_date', value || null);
+  const handleStartDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    formik.setFieldValue('start_date', value);
 
-      if (value && formik.values.end_date) {
-        const startDate = new Date(value);
-        const endDateObj = new Date(formik.values.end_date);
-
-        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);
-          }
+    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);
-      }
-    },
-    [formik, dateErrorShown]
-  );
-
-  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;
+        if (dateErrorShown) {
+          toast.dismiss();
+          setDateErrorShown(false);
         }
       }
-
+    } 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 =====
-  const customerIdsValue = useMemo(() => {
-    if (!formik.values.customer_ids) return [];
-    return customerOptions.filter((opt) =>
-      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]);
+    setHasDateError(false);
+    if (dateErrorShown) {
+      toast.dismiss();
+      setDateErrorShown(false);
+    }
+  };
 
   // ===== DATA FETCHING =====
-  const { data: customerPayment, isLoading } = useSWR(
-    () => {
-      const params = {
-        customer_ids: filterParams.customer_ids,
-        filter_by: filterParams.filter_by as
-          | 'trans_date'
-          | 'realization_date'
-          | 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: customerPayment, isLoading } = useSWR<
+    BaseApiResponse<CustomerPaymentReport>,
+    AxiosError<BaseApiResponse>,
+    SWRHttpKey
+  >(
+    `${FinanceApi.basePath}/customer-payment${getTableFilterQueryString()}`,
+    httpClientFetcher
   );
 
-  const data: CustomerPaymentReport[] = useMemo(
-    () =>
-      isResponseSuccess(customerPayment)
-        ? (customerPayment?.data as unknown as CustomerPaymentReport[]) || []
-        : [],
-    [customerPayment]
-  );
+  const data: CustomerPaymentReport[] = isResponseSuccess(customerPayment)
+    ? (customerPayment?.data as unknown as CustomerPaymentReport[]) || []
+    : [];
 
-  const meta = useMemo(
-    () =>
-      isResponseSuccess(customerPayment) && customerPayment.meta
-        ? customerPayment.meta
-        : null,
-    [customerPayment]
-  );
+  const meta =
+    isResponseSuccess(customerPayment) && customerPayment.meta
+      ? customerPayment.meta
+      : null;
 
   // ===== EXPORT DATA FETCHER =====
   const customerPaymentExport = useCallback(async (): Promise<
     CustomerPaymentReport[] | null
   > => {
-    const params = {
-      customer_ids: filterParams.customer_ids,
-      filter_by: filterParams.filter_by as
-        | 'trans_date'
-        | 'realization_date'
-        | undefined,
-      start_date: filterParams.start_date,
-      end_date: filterParams.end_date,
-      limit: 100,
-      page: 1,
-    };
+    const customer_ids =
+      tableFilterState.customers.length > 0
+        ? tableFilterState.customers.map((o) => String(o.value)).join(',')
+        : undefined;
+    const filter_by = tableFilterState.filterBy?.value as
+      | 'trans_date'
+      | 'realization_date'
+      | undefined;
 
     const response = await FinanceApi.getCustomerPaymentReport(
-      params.customer_ids,
-      params.filter_by,
-      params.start_date,
-      params.end_date,
-      params.page,
-      params.limit
+      customer_ids,
+      filter_by,
+      tableFilterState.start_date || undefined,
+      tableFilterState.end_date || undefined,
+      1,
+      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(
-        filterParams.customer_ids,
-        filterParams.filter_by,
-        filterParams.start_date,
-        filterParams.end_date
+        customer_ids,
+        tableFilterState.filterBy?.value,
+        tableFilterState.start_date || undefined,
+        tableFilterState.end_date || undefined
       );
       toast.success('Excel General berhasil dibuat dan diunduh.');
     } catch {
@@ -311,16 +263,20 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
     } finally {
       setIsExcelGeneralExportLoading(false);
     }
-  }, [filterParams]);
+  }, [tableFilterState]);
 
   const handleExportExcel = useCallback(async () => {
     setIsExcelExportLoading(true);
     try {
+      const customer_ids =
+        tableFilterState.customers.length > 0
+          ? tableFilterState.customers.map((o) => String(o.value)).join(',')
+          : undefined;
       await FinanceApi.exportCustomerPaymentToExcelCustomerPerSheet(
-        filterParams.customer_ids,
-        filterParams.filter_by,
-        filterParams.start_date,
-        filterParams.end_date
+        customer_ids,
+        tableFilterState.filterBy?.value,
+        tableFilterState.start_date || undefined,
+        tableFilterState.end_date || undefined
       );
       toast.success('Excel berhasil dibuat dan diunduh.');
     } catch {
@@ -328,7 +284,7 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
     } finally {
       setIsExcelExportLoading(false);
     }
-  }, [filterParams]);
+  }, [tableFilterState]);
 
   const handleExportPdf = useCallback(async () => {
     setIsPdfExportLoading(true);
@@ -344,22 +300,18 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
         return;
       }
 
-      const customerName = filterParams.customer_ids
-        ? customerOptions
-            .filter((opt) =>
-              filterParams.customer_ids?.split(',').includes(String(opt.value))
-            )
-            .map((opt) => opt.label)
-            .join(', ') || 'Semua Customer'
-        : 'Semua Customer';
+      const customerName =
+        tableFilterState.customers.length > 0
+          ? tableFilterState.customers.map((o) => o.label).join(', ')
+          : 'Semua Customer';
 
       await generateCustomerPaymentPDF({
         data: allDataForExport,
         params: {
           customer_name: customerName,
-          start_date: filterParams.start_date,
-          end_date: filterParams.end_date,
-          filter_by: filterParams.filter_by as
+          start_date: tableFilterState.start_date || undefined,
+          end_date: tableFilterState.end_date || undefined,
+          filter_by: tableFilterState.filterBy?.value as
             | 'trans_date'
             | 'realization_date'
             | undefined,
@@ -371,119 +323,103 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
     } finally {
       setIsPdfExportLoading(false);
     }
-  }, [customerPaymentExport, filterParams, customerOptions]);
+  }, [customerPaymentExport, tableFilterState]);
 
-  // ===== TAB ACTIONS COMPONENT =====
-  const TabActions = useMemo(() => {
-    return function TabActionsComponent() {
-      const setTabActions = useTabActionsStore((state) => state.setTabActions);
-      const clearTabActions = useTabActionsStore(
-        (state) => state.clearTabActions
-      );
+  // ===== TAB ACTIONS =====
+  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,
+            filterBy: tableFilterState.filterBy,
+          }}
+          fieldGroups={[['start_date', 'end_date']]}
+          onClick={filterModal.openModal}
+          variant='outline'
+          className='px-3 py-2.5'
+        />
 
-      useEffect(() => {
-        setTabActions(
-          tabId,
-          <div className='flex flex-row gap-3'>
-            <ButtonFilter
-              values={filterParams}
-              fieldGroups={[['start_date', 'end_date']]}
-              onClick={() => handleFilterModalOpenRef.current()}
+        <Dropdown
+          align='end'
+          direction='bottom'
+          className={{
+            content:
+              'mt-1 rounded-xl border border-base-content/5 shadow-sm overflow-hidden',
+          }}
+          trigger={
+            <Button
               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={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>
-              }
+              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'
             >
-              <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} />
-                Export to Excel - Customer 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'
-                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>
-        );
-      }, [setTabActions]);
-
-      useEffect(() => {
-        return () => {
-          clearTabActions(tabId);
-        };
-      }, [clearTabActions]);
-
-      return null;
-    };
+              <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} />
+            Export to Excel - Customer 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'
+            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,
-    handleExportExcelGeneral,
     handleExportExcel,
+    handleExportExcelGeneral,
     handleExportPdf,
-    isExcelGeneralExportLoading,
     isExcelExportLoading,
+    isExcelGeneralExportLoading,
     isPdfExportLoading,
-    filterParams,
   ]);
 
-  const TabActionsElement = useMemo(() => <TabActions />, [TabActions]);
+  useEffect(() => {
+    return () => clearTabActions(tabId);
+  }, [tabId, clearTabActions]);
 
   const getTableColumns = (
     summary: CustomerPaymentSummary
@@ -690,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)}
@@ -733,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'>
@@ -762,16 +693,16 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
             <Pagination
               totalItems={meta.total_results || 0}
               itemsPerPage={meta.limit || 0}
-              currentPage={meta.page || 0}
-              onPrevPage={() =>
-                setCurrentPage((curr) => (curr > 1 ? curr - 1 : curr))
-              }
+              currentPage={tableFilterState.page}
+              onPrevPage={() => setPage(Math.max(1, tableFilterState.page - 1))}
               onNextPage={() =>
-                setCurrentPage((curr) =>
-                  meta.total_pages && curr < meta.total_pages ? curr + 1 : curr
+                setPage(
+                  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}
             />
@@ -878,16 +809,16 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
             <Pagination
               totalItems={meta.total_results || 0}
               itemsPerPage={meta.limit || 0}
-              currentPage={meta.page || 0}
-              onPrevPage={() =>
-                setCurrentPage((curr) => (curr > 1 ? curr - 1 : curr))
-              }
+              currentPage={tableFilterState.page}
+              onPrevPage={() => setPage(Math.max(1, tableFilterState.page - 1))}
               onNextPage={() =>
-                setCurrentPage((curr) =>
-                  meta.total_pages && curr < meta.total_pages ? curr + 1 : curr
+                setPage(
+                  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}
             />
@@ -917,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'>
@@ -927,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={
-                    (formik.touched.end_date &&
-                      Boolean(formik.errors.end_date)) ||
-                    hasDateError
-                  }
+                  isError={hasDateError}
                 />
               </div>
             </div>
@@ -958,15 +878,10 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
               label='Customer'
               placeholder='Pilih Customer'
               options={customerOptions}
-              value={customerIdsValue}
-              onChange={(val) => {
-                formik.setFieldValue(
-                  'customer_ids',
-                  Array.isArray(val) && val.length > 0
-                    ? val.map((v: OptionType) => String(v.value)).join(',')
-                    : null
-                );
-              }}
+              value={formik.values.customers}
+              onChange={(val) =>
+                formik.setFieldValue('customers', Array.isArray(val) ? val : [])
+              }
               onInputChange={setCustomerInputValue}
               isLoading={isLoadingCustomers}
               isClearable
@@ -978,14 +893,15 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
               label='Filter Berdasarkan'
               placeholder='Pilih Filter Berdasarkan'
               options={dataTypeOptions}
-              value={filterByValue}
-              onChange={(val) => {
-                if (!Array.isArray(val)) {
-                  formik.setFieldValue('filter_by', val?.value || null);
-                }
-              }}
+              value={formik.values.filterBy ?? null}
+              onChange={(val) =>
+                formik.setFieldValue(
+                  'filterBy',
+                  !Array.isArray(val) ? (val ?? undefined) : undefined
+                )
+              }
               className={{ wrapper: 'w-full' }}
-              isClearable={true}
+              isClearable
             />
           </div>
 
@@ -1001,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>

From d60877d391cc1a43a6c843529460190f74ae8f29 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Wed, 20 May 2026 16:10:19 +0700
Subject: [PATCH 09/14] refactor: optimize DebtSupplierTab with useTableFilter
 persistence pattern

Replace filterParams/currentPage/pageSize state with useTableFilter (persist:true),
switch SWR to httpClientFetcher with explicit type, store OptionType[] directly for
suppliers/filterBy, add formikResetHandler using resetFilter(), remove TabActions
component anti-pattern and handleFilterModalOpenRef, pass filterModal.openModal directly.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../report/finance/tab/DebtSupplierTab.tsx    | 776 ++++++++----------
 1 file changed, 338 insertions(+), 438 deletions(-)

diff --git a/src/components/pages/report/finance/tab/DebtSupplierTab.tsx b/src/components/pages/report/finance/tab/DebtSupplierTab.tsx
index 95bed1f2..78d27f2a 100644
--- a/src/components/pages/report/finance/tab/DebtSupplierTab.tsx
+++ b/src/components/pages/report/finance/tab/DebtSupplierTab.tsx
@@ -9,23 +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 {
-  DebtRow,
-  DebtSupplier,
-  DebtSupplierFilter,
-} from '@/types/api/report/debt-supplier';
+import { DebtRow, DebtSupplier } from '@/types/api/report/debt-supplier';
 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';
@@ -34,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',
@@ -51,7 +47,6 @@ const getPillBadge = (
   statusText: string,
   type: 'due' | 'payment' = 'payment'
 ) => {
-  // Get color based on type
   const color =
     type === 'due'
       ? dueStatus[statusText] || 'neutral'
@@ -68,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;
 }
@@ -81,26 +81,45 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
   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,
@@ -108,154 +127,149 @@ 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,
-      endDate: null,
-      supplierIds: null,
-      filterBy: null,
+      start_date: tableFilterState.start_date,
+      end_date: tableFilterState.end_date,
+      suppliers: tableFilterState.suppliers,
+      filterBy: tableFilterState.filterBy,
     },
-    validationSchema: DebtSupplierFilterSchema,
     onSubmit: (values) => {
-      setFilterParams({
-        start_date: values.startDate?.toString() || undefined,
-        end_date: values.endDate?.toString() || undefined,
-        supplier_ids:
-          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);
+      updateFilter('start_date', values.start_date, true);
+      updateFilter('end_date', values.end_date, true);
+      updateFilter('suppliers', values.suppliers, true);
+      updateFilter('filterBy', values.filterBy, true);
       filterModal.closeModal();
     },
   });
 
-  handleFilterModalOpenRef.current = () => {
-    const restoredFilterBy =
-      dataTypeOptions.find((opt) => opt.value === filterParams.filter_by) ||
-      null;
+  const formikResetHandler = () => {
+    resetFilter();
 
-    const supplierIdList = filterParams.supplier_ids
-      ? filterParams.supplier_ids.split(',')
-      : [];
-    const restoredSupplierIds = supplierOptions.filter((opt) =>
-      supplierIdList.includes(String(opt.value))
-    );
+    setHasDateError(false);
+    if (dateErrorShown) {
+      toast.dismiss();
+      setDateErrorShown(false);
+    }
 
-    formik.setValues({
-      startDate: filterParams.start_date || null,
-      endDate: filterParams.end_date || null,
-      supplierIds: restoredSupplierIds.length > 0 ? restoredSupplierIds : null,
-      filterBy: restoredFilterBy,
+    formik.resetForm({
+      values: {
+        start_date: '',
+        end_date: '',
+        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 params = {
-        supplier_ids: filterParams.supplier_ids,
-        filter_by: filterParams.filter_by,
-        start_date: filterParams.start_date,
-        end_date: filterParams.end_date,
-        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: debtSupplierResponse, isLoading } = useSWR<
+    BaseApiResponse<DebtSupplier[]>,
+    AxiosError<BaseApiResponse>,
+    SWRHttpKey
+  >(
+    `${DebtSupplierApi.basePath}/debt-supplier${getTableFilterQueryString()}`,
+    httpClientFetcher
   );
 
-  const data: DebtSupplier[] = useMemo(
-    () =>
-      isResponseSuccess(debtSupplier)
-        ? (debtSupplier?.data as unknown as DebtSupplier[]) || []
-        : [],
-    [debtSupplier]
-  );
+  const data: DebtSupplier[] = isResponseSuccess(debtSupplierResponse)
+    ? ((debtSupplierResponse?.data as unknown as DebtSupplier[]) ?? [])
+    : [];
 
-  const meta = useMemo(
-    () =>
-      isResponseSuccess(debtSupplier) && debtSupplier.meta
-        ? debtSupplier.meta
-        : null,
-    [debtSupplier]
-  );
+  const meta =
+    isResponseSuccess(debtSupplierResponse) && debtSupplierResponse.meta
+      ? debtSupplierResponse.meta
+      : null;
 
   // ===== EXPORT DATA FETCHER =====
   const debtSupplierExport = useCallback(async (): Promise<
     DebtSupplier[] | null
   > => {
-    const params = {
-      supplier_ids:
-        formik.values.supplierIds && formik.values.supplierIds.length > 0
-          ? formik.values.supplierIds.map((v) => String(v.value)).join(',')
-          : 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 supplier_ids =
+      tableFilterState.suppliers.length > 0
+        ? tableFilterState.suppliers.map((o) => String(o.value)).join(',')
+        : undefined;
 
     const response = await DebtSupplierApi.getDebtSupplierReport(
-      params.supplier_ids,
-      params.filter_by,
-      params.start_date,
-      params.end_date
+      supplier_ids,
+      tableFilterState.filterBy?.value,
+      tableFilterState.start_date || undefined,
+      tableFilterState.end_date || undefined,
+      1,
+      100
     );
 
     return isResponseSuccess(response)
       ? (response.data as unknown as DebtSupplier[])
       : null;
-  }, [
-    formik.values.supplierIds,
-    formik.values.startDate,
-    formik.values.endDate,
-    formik.values.filterBy,
-  ]);
+  }, [tableFilterState]);
 
   // ===== EXPORT HANDLERS =====
   const handleExportExcel = useCallback(async () => {
     setIsExcelExportLoading(true);
     try {
+      const supplier_ids =
+        tableFilterState.suppliers.length > 0
+          ? tableFilterState.suppliers.map((o) => String(o.value)).join(',')
+          : undefined;
       await DebtSupplierApi.exportToExcelSupplierPerSheet(
-        filterParams.supplier_ids,
-        filterParams.filter_by,
-        filterParams.start_date,
-        filterParams.end_date
+        supplier_ids,
+        tableFilterState.filterBy?.value,
+        tableFilterState.start_date || undefined,
+        tableFilterState.end_date || undefined
       );
       toast.success('Excel berhasil dibuat dan diunduh.');
     } catch {
@@ -263,7 +277,30 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
     } finally {
       setIsExcelExportLoading(false);
     }
-  }, [filterParams]);
+  }, [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);
@@ -279,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
-            ?.map((v) => v.label)
-            .join(', '),
-          filter_by: formik.values.filterBy?.label,
-          start_date: formik.values.startDate || undefined,
-          end_date: formik.values.endDate || undefined,
+          supplier_name: supplierName,
+          filter_by: tableFilterState.filterBy?.label,
+          start_date: tableFilterState.start_date || undefined,
+          end_date: tableFilterState.end_date || undefined,
         },
       });
       toast.success('PDF berhasil dibuat dan diunduh.');
@@ -296,131 +336,91 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
     } finally {
       setIsPdfExportLoading(false);
     }
-  }, [
-    debtSupplierExport,
-    formik.values.supplierIds,
-    formik.values.filterBy,
-    formik.values.startDate,
-    formik.values.endDate,
-  ]);
+  }, [debtSupplierExport, tableFilterState]);
 
-  const handleExportExcelGeneral = useCallback(async () => {
-    setIsExcelGeneralExportLoading(true);
-    try {
-      await DebtSupplierApi.exportToExcelGeneral(
-        filterParams.supplier_ids,
-        filterParams.filter_by,
-        filterParams.start_date,
-        filterParams.end_date
-      );
-      toast.success('Excel General berhasil dibuat dan diunduh.');
-    } catch {
-      toast.error('Gagal membuat Excel General. Silakan coba lagi.');
-    } finally {
-      setIsExcelGeneralExportLoading(false);
-    }
-  }, [filterParams]);
+  // ===== TAB ACTIONS =====
+  useEffect(() => {
+    setTabActions(
+      tabId,
+      <div className='flex flex-row gap-3'>
+        <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'
+        />
 
-  // ===== TAB ACTIONS COMPONENT =====
-  const TabActions = useMemo(() => {
-    return function TabActionsComponent() {
-      const setTabActions = useTabActionsStore((state) => state.setTabActions);
-      const clearTabActions = useTabActionsStore(
-        (state) => state.clearTabActions
-      );
-
-      useEffect(() => {
-        setTabActions(
-          tabId,
-          <div className='flex flex-row gap-3'>
-            <ButtonFilter
-              values={filterParams}
-              fieldGroups={[['start_date', 'end_date']]}
-              onClick={() => handleFilterModalOpenRef.current()}
+        <Dropdown
+          align='end'
+          direction='bottom'
+          className={{
+            content:
+              'mt-1 rounded-xl border border-base-content/5 shadow-sm overflow-hidden',
+          }}
+          trigger={
+            <Button
               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={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>
-              }
+              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'
             >
-              <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} />
-                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'
-                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>
-        );
-      }, [setTabActions]);
-
-      useEffect(() => {
-        return () => {
-          clearTabActions(tabId);
-        };
-      }, [clearTabActions]);
-
-      return null;
-    };
+              <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} />
+            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'
+            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,
@@ -430,24 +430,9 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
     isPdfExportLoading,
   ]);
 
-  const TabActionsElement = useMemo(() => <TabActions />, [TabActions]);
-
   useEffect(() => {
-    return () => {
-      if (dateErrorShown) {
-        toast.dismiss();
-      }
-    };
-  }, [dateErrorShown]);
-
-  useEffect(() => {
-    return () => {
-      if (dateErrorShown) {
-        toast.dismiss();
-        setDateErrorShown(false);
-      }
-    };
-  }, [filterModal.open, dateErrorShown]);
+    return () => clearTabActions(tabId);
+  }, [tabId, clearTabActions]);
 
   const getTableColumns = (supplier?: DebtSupplier): ColumnDef<DebtRow>[] => [
     {
@@ -662,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'>
@@ -693,16 +678,16 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
             <Pagination
               totalItems={meta.total_results || 0}
               itemsPerPage={meta.limit || 0}
-              currentPage={meta.page || 0}
-              onPrevPage={() =>
-                setCurrentPage((curr) => (curr > 1 ? curr - 1 : curr))
-              }
+              currentPage={tableFilterState.page}
+              onPrevPage={() => setPage(Math.max(1, tableFilterState.page - 1))}
               onNextPage={() =>
-                setCurrentPage((curr) =>
-                  meta.total_pages && curr < meta.total_pages ? curr + 1 : curr
+                setPage(
+                  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,16 +787,16 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
             <Pagination
               totalItems={meta.total_results || 0}
               itemsPerPage={meta.limit || 0}
-              currentPage={meta.page || 0}
-              onPrevPage={() =>
-                setCurrentPage((curr) => (curr > 1 ? curr - 1 : curr))
-              }
+              currentPage={tableFilterState.page}
+              onPrevPage={() => setPage(Math.max(1, tableFilterState.page - 1))}
               onNextPage={() =>
-                setCurrentPage((curr) =>
-                  meta.total_pages && curr < meta.total_pages ? curr + 1 : curr
+                setPage(
+                  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}
             />
@@ -827,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 */}
-          <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'
-              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>
+        {/* 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'
+            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>
@@ -852,153 +837,68 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
               </label>
               <div className='flex flex-row gap-1.5 items-center justify-between'>
                 <DateInput
-                  name='startDate'
-                  value={formik.values.startDate || ''}
-                  onChange={(e) => {
-                    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);
-                    }
-                  }}
+                  name='start_date'
+                  value={formik.values.start_date || ''}
+                  onChange={handleStartDateChange}
                   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'
-                  value={formik.values.endDate || ''}
-                  onChange={(e) => {
-                    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);
-                    }
-                  }}
+                  name='end_date'
+                  value={formik.values.end_date || ''}
+                  onChange={handleEndDateChange}
                   className={{ wrapper: 'w-full' }}
-                  isError={
-                    (formik.touched.endDate && !!formik.errors.endDate) ||
-                    hasDateError
-                  }
-                  errorMessage={formik.errors.endDate}
                   isNestedModal
+                  isError={hasDateError}
                 />
               </div>
             </div>
 
-            <div>
-              <SelectInputCheckbox
-                label='Supplier'
-                placeholder='Pilih Supplier'
-                isMulti
-                options={supplierOptions}
-                value={
-                  (formik.values.supplierIds as
-                    | { value: number; label: string }
-                    | { value: number; label: string }[]
-                    | null
-                    | undefined) || []
-                }
-                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>
+            <SelectInputCheckbox
+              label='Supplier'
+              placeholder='Pilih Supplier'
+              options={supplierOptions}
+              value={formik.values.suppliers}
+              onChange={(val) =>
+                formik.setFieldValue('suppliers', Array.isArray(val) ? val : [])
+              }
+              onInputChange={setSupplierInputValue}
+              onMenuScrollToBottom={loadMoreSuppliers}
+              isLoading={isLoadingSupplierOptions}
+              isClearable
+              className={{ wrapper: 'w-full' }}
+            />
 
-            <div>
-              <SelectInputRadio
-                label='Filter Berdasarkan'
-                placeholder='Pilih Filter Berdasarkan'
-                options={dataTypeOptions}
-                value={
-                  (formik.values.filterBy as
-                    | { value: string; label: string }
-                    | { value: string; label: string }[]
-                    | null
-                    | undefined) || null
-                }
-                onChange={(val) => {
-                  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>
+            <SelectInputRadio
+              label='Filter Berdasarkan'
+              placeholder='Pilih Filter Berdasarkan'
+              options={dataTypeOptions}
+              value={formik.values.filterBy ?? null}
+              onChange={(val) =>
+                formik.setFieldValue(
+                  'filterBy',
+                  !Array.isArray(val) ? (val ?? undefined) : undefined
+                )
+              }
+              className={{ wrapper: 'w-full' }}
+              isClearable
+            />
           </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>

From 3d37fb2ecb7bfb4394a331eff37f76be73f0cc2b Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Wed, 20 May 2026 16:10:36 +0700
Subject: [PATCH 10/14] fix: remove dummy data

---
 src/services/api/report/finance-report.ts | 245 +---------------------
 1 file changed, 6 insertions(+), 239 deletions(-)

diff --git a/src/services/api/report/finance-report.ts b/src/services/api/report/finance-report.ts
index a4a5197b..132e3063 100644
--- a/src/services/api/report/finance-report.ts
+++ b/src/services/api/report/finance-report.ts
@@ -89,251 +89,18 @@ export class FinanceApiService extends BaseApiService<
   async getBalanceMonitoringReport(params: {
     start_date?: string;
     end_date?: string;
-    customer_id?: string;
-    sales_id?: string;
+    customer_ids?: string;
+    sales_ids?: string;
+    filter_by?: string;
     sort_by?: string;
     sort_order?: string;
     page?: number;
     limit?: number;
   }): Promise<BaseApiResponse<BalanceMonitoringRow[]> | undefined> {
-    // TODO: Remove dummy data when BE is ready
-    const dummyRows: BalanceMonitoringRow[] = [
-      {
-        customer_id: 1,
-        customer_name: 'PT Maju Bersama',
-        saldo_awal: 12500000,
-        penjualan_ayam_ekor: 450,
-        penjualan_ayam_kg: 1125.5,
-        penjualan_ayam_nominal: 22510000,
-        penjualan_telur_kuantitas: 300,
-        penjualan_telur_kg: 900,
-        penjualan_telur_nominal: 4500000,
-        penjualan_trading: 3000000,
-        pembayaran: 30000000,
-        aging: 15,
-        aging_rata_rata: 12,
-        saldo_akhir: 12510000,
-      },
-      {
-        customer_id: 2,
-        customer_name: 'CV Sumber Rezeki',
-        saldo_awal: 8750000,
-        penjualan_ayam_ekor: 320,
-        penjualan_ayam_kg: 800,
-        penjualan_ayam_nominal: 16000000,
-        penjualan_telur_kuantitas: 150,
-        penjualan_telur_kg: 450,
-        penjualan_telur_nominal: 2250000,
-        penjualan_trading: 0,
-        pembayaran: 20000000,
-        aging: 7,
-        aging_rata_rata: 8,
-        saldo_akhir: 7000000,
-      },
-      {
-        customer_id: 3,
-        customer_name: 'UD Karya Mandiri',
-        saldo_awal: 5000000,
-        penjualan_ayam_ekor: 600,
-        penjualan_ayam_kg: 1500,
-        penjualan_ayam_nominal: 30000000,
-        penjualan_telur_kuantitas: 0,
-        penjualan_telur_kg: 0,
-        penjualan_telur_nominal: 0,
-        penjualan_trading: 1500000,
-        pembayaran: 25000000,
-        aging: 30,
-        aging_rata_rata: 22,
-        saldo_akhir: 11500000,
-      },
-      {
-        customer_id: 4,
-        customer_name: 'PT Sejahtera Abadi',
-        saldo_awal: 20000000,
-        penjualan_ayam_ekor: 100,
-        penjualan_ayam_kg: 250,
-        penjualan_ayam_nominal: 5000000,
-        penjualan_telur_kuantitas: 500,
-        penjualan_telur_kg: 1500,
-        penjualan_telur_nominal: 7500000,
-        penjualan_trading: 2000000,
-        pembayaran: 40000000,
-        aging: 45,
-        aging_rata_rata: 38,
-        saldo_akhir: -5500000,
-      },
-      {
-        customer_id: 5,
-        customer_name: 'CV Berkah Jaya',
-        saldo_awal: 3200000,
-        penjualan_ayam_ekor: 200,
-        penjualan_ayam_kg: 500,
-        penjualan_ayam_nominal: 10000000,
-        penjualan_telur_kuantitas: 200,
-        penjualan_telur_kg: 600,
-        penjualan_telur_nominal: 3000000,
-        penjualan_trading: 500000,
-        pembayaran: 15000000,
-        aging: 10,
-        aging_rata_rata: 9,
-        saldo_akhir: 1700000,
-      },
-      {
-        customer_id: 6,
-        customer_name: 'PT Harapan Makmur',
-        saldo_awal: 17000000,
-        penjualan_ayam_ekor: 780,
-        penjualan_ayam_kg: 1950,
-        penjualan_ayam_nominal: 39000000,
-        penjualan_telur_kuantitas: 400,
-        penjualan_telur_kg: 1200,
-        penjualan_telur_nominal: 6000000,
-        penjualan_trading: 4500000,
-        pembayaran: 50000000,
-        aging: 20,
-        aging_rata_rata: 17,
-        saldo_akhir: 16500000,
-      },
-      {
-        customer_id: 7,
-        customer_name: 'UD Rejeki Lancar',
-        saldo_awal: 2000000,
-        penjualan_ayam_ekor: 50,
-        penjualan_ayam_kg: 125,
-        penjualan_ayam_nominal: 2500000,
-        penjualan_telur_kuantitas: 80,
-        penjualan_telur_kg: 240,
-        penjualan_telur_nominal: 1200000,
-        penjualan_trading: 0,
-        pembayaran: 5000000,
-        aging: 5,
-        aging_rata_rata: 6,
-        saldo_akhir: 700000,
-      },
-      {
-        customer_id: 8,
-        customer_name: 'CV Putra Unggul',
-        saldo_awal: 9500000,
-        penjualan_ayam_ekor: 410,
-        penjualan_ayam_kg: 1025,
-        penjualan_ayam_nominal: 20500000,
-        penjualan_telur_kuantitas: 250,
-        penjualan_telur_kg: 750,
-        penjualan_telur_nominal: 3750000,
-        penjualan_trading: 1000000,
-        pembayaran: 28000000,
-        aging: 18,
-        aging_rata_rata: 15,
-        saldo_akhir: 6750000,
-      },
-      {
-        customer_id: 9,
-        customer_name: 'PT Duta Poultry',
-        saldo_awal: 35000000,
-        penjualan_ayam_ekor: 1200,
-        penjualan_ayam_kg: 3000,
-        penjualan_ayam_nominal: 60000000,
-        penjualan_telur_kuantitas: 800,
-        penjualan_telur_kg: 2400,
-        penjualan_telur_nominal: 12000000,
-        penjualan_trading: 8000000,
-        pembayaran: 70000000,
-        aging: 60,
-        aging_rata_rata: 50,
-        saldo_akhir: -15000000,
-      },
-      {
-        customer_id: 10,
-        customer_name: 'UD Sari Ayam',
-        saldo_awal: 6800000,
-        penjualan_ayam_ekor: 350,
-        penjualan_ayam_kg: 875,
-        penjualan_ayam_nominal: 17500000,
-        penjualan_telur_kuantitas: 0,
-        penjualan_telur_kg: 0,
-        penjualan_telur_nominal: 0,
-        penjualan_trading: 2500000,
-        pembayaran: 22000000,
-        aging: 12,
-        aging_rata_rata: 11,
-        saldo_akhir: 4800000,
-      },
-      {
-        customer_id: 11,
-        customer_name: 'CV Nusa Ternak',
-        saldo_awal: 14200000,
-        penjualan_ayam_ekor: 530,
-        penjualan_ayam_kg: 1325,
-        penjualan_ayam_nominal: 26500000,
-        penjualan_telur_kuantitas: 350,
-        penjualan_telur_kg: 1050,
-        penjualan_telur_nominal: 5250000,
-        penjualan_trading: 3500000,
-        pembayaran: 35000000,
-        aging: 25,
-        aging_rata_rata: 20,
-        saldo_akhir: 14450000,
-      },
-      {
-        customer_id: 12,
-        customer_name: 'PT Agro Sentosa',
-        saldo_awal: 4100000,
-        penjualan_ayam_ekor: 180,
-        penjualan_ayam_kg: 450,
-        penjualan_ayam_nominal: 9000000,
-        penjualan_telur_kuantitas: 120,
-        penjualan_telur_kg: 360,
-        penjualan_telur_nominal: 1800000,
-        penjualan_trading: 750000,
-        pembayaran: 12000000,
-        aging: 8,
-        aging_rata_rata: 9,
-        saldo_akhir: 3650000,
-      },
-    ];
-
-    const page = Number(params.page) || 1;
-    const limit = Number(params.limit) || 10;
-
-    return {
-      status: 'success',
-      message: 'Data retrieved successfully',
-      data: dummyRows,
-      meta: {
-        page,
-        limit,
-        total_results: dummyRows.length,
-        total_pages: 1,
-      },
-    } as BaseApiResponse<BalanceMonitoringRow[]>;
-
-    // return await this.customRequest<BaseApiResponse<BalanceMonitoringRow[]>>(
-    //   'balance-monitoring',
-    //   { method: 'GET', params }
-    // );
-  }
-
-  async exportBalanceMonitoringToPDF(initialQueryString: string) {
-    const params = new URLSearchParams(initialQueryString);
-    params.set('export', 'pdf');
-    params.set('page', '1');
-    params.set('limit', '99999999999');
-
-    const res = await httpClient<Blob>(
-      `${this.basePath}/balance-monitoring?${params.toString()}`,
-      { method: 'GET', responseType: 'blob' }
+    return await this.customRequest<BaseApiResponse<BalanceMonitoringRow[]>>(
+      'balance-monitoring',
+      { method: 'GET', params }
     );
-
-    const url = window.URL.createObjectURL(new Blob([res]));
-    const link = document.createElement('a');
-    link.href = url;
-    link.setAttribute(
-      'download',
-      `monitoring-saldo-${formatDate(Date.now(), 'DD-MM-YYYY')}.pdf`
-    );
-    document.body.appendChild(link);
-    link.click();
-    link.remove();
   }
 
   async getCustomerPaymentReport(

From 8d014a8fea7d17415b180eaf9877279a31aa031f Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Wed, 20 May 2026 16:14:37 +0700
Subject: [PATCH 11/14] fix: adjust BalanceMonitoringRow type

---
 src/types/api/report/balance-monitoring.d.ts | 34 +++++++++++---------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/types/api/report/balance-monitoring.d.ts b/src/types/api/report/balance-monitoring.d.ts
index 9c7933dd..a2309314 100644
--- a/src/types/api/report/balance-monitoring.d.ts
+++ b/src/types/api/report/balance-monitoring.d.ts
@@ -1,23 +1,25 @@
+import { Customer } from '@/services/api/master-data';
+
 export type BalanceMonitoringRow = {
-  customer_id: number;
-  customer_name: string;
+  customer: Customer;
   saldo_awal: number;
-  penjualan_ayam_ekor: number;
-  penjualan_ayam_kg: number;
-  penjualan_ayam_nominal: number;
-  penjualan_telur_kuantitas: number;
-  penjualan_telur_kg: number;
-  penjualan_telur_nominal: number;
-  penjualan_trading: 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;
 };
-
-export type BalanceMonitoringMeta = {
-  page: number;
-  limit: number;
-  total_results: number;
-  total_pages: number;
-};

From 9abb8b0b583eae176b09810bc46bcfc2ed0e5ec5 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Wed, 20 May 2026 16:34:53 +0700
Subject: [PATCH 12/14] feat: add hide field in TabItem type

---
 src/components/Tabs.tsx | 25 ++++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx
index 52047d8b..6e6956d6 100644
--- a/src/components/Tabs.tsx
+++ b/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 }) => (
-            <button
-              key={id}
-              role='tab'
-              className={getTabClasses(id === activeTabId, disabled)}
-              onClick={() => !disabled && handleTabChange(id)}
-              disabled={disabled}
-            >
-              {label}
-            </button>
-          ))}
+          {tabs.map(({ id, label, disabled, hide }) =>
+            hide ? null : (
+              <button
+                key={id}
+                role='tab'
+                className={getTabClasses(id === activeTabId, disabled)}
+                onClick={() => !disabled && handleTabChange(id)}
+                disabled={disabled}
+              >
+                {label}
+              </button>
+            )
+          )}
         </div>
         {sideContent && sideContent}
       </div>

From c4827bb81055170ef29d154fbb4b4c253eb86618 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Wed, 20 May 2026 16:35:26 +0700
Subject: [PATCH 13/14] feat: implement Query Param Tab Navigation

---
 .../pages/report/finance/FinanceTabs.tsx      | 34 ++++++++++++++-----
 1 file changed, 25 insertions(+), 9 deletions(-)

diff --git a/src/components/pages/report/finance/FinanceTabs.tsx b/src/components/pages/report/finance/FinanceTabs.tsx
index 29abe5e9..0604cb48 100644
--- a/src/components/pages/report/finance/FinanceTabs.tsx
+++ b/src/components/pages/report/finance/FinanceTabs.tsx
@@ -1,31 +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: '3',
+      id: 'balance-monitoring',
       label: 'Monitoring Saldo',
-      content: <BalanceMonitoringTab tabId={'3'} />,
+      content: <BalanceMonitoringTab tabId={'balance-monitoring'} />,
     },
   ];
 
@@ -35,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',

From ef56f87e45149e19b84cd70a9c5245e69ffac3d4 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Wed, 20 May 2026 16:35:43 +0700
Subject: [PATCH 14/14] feat: create report finance layout file

---
 src/app/report/finance/layout.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 src/app/report/finance/layout.tsx

diff --git a/src/app/report/finance/layout.tsx b/src/app/report/finance/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/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;