refactor(FE): Add filter_by option to customer payment reports

src/components/pages/report/finance/export/CustomerPaymentExportPDF.tsx

@@ -96,8 +96,7 @@ interface CustomerPaymentExportPDFParams {
     // sales?: string;
     start_date?: string;
     end_date?: string;
-    // TODO: Uncomment when BE is ready
-    // filter_by?: string;
+    filter_by?: string;
   };
 }
 

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

@@ -14,7 +14,6 @@ import { ColumnDef } from '@tanstack/react-table';
 import { formatCurrency, formatDate, formatNumber, cn } from '@/lib/helper';
 import {
   CustomerPaymentReport,
-  CustomerPaymentRow,
   CustomerPaymentSummary,
 } from '@/types/api/report/customer-payment';
 import { isResponseSuccess } from '@/lib/api-helper';
@@ -53,33 +52,39 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
   );
   // TODO: Uncomment when BE is ready
   // const [filterSales, setFilterSales] = useState<typeof salesOptions>([]);
-  const [filterSales, setFilterSales] = useState<typeof salesOptions>([]);
   const [filterStartDate, setFilterStartDate] = useState('');
   const [filterEndDate, setFilterEndDate] = useState('');
 
   const filterModal = useModal();
 
+  const dataTypeOptions = useMemo(
+    () => [
+      { value: 'do_date', label: 'Tanggal Jual' },
+      { value: 'payment_date', label: 'Tanggal Bayar' },
+      { value: 'realization_date', label: 'Tanggal Realisasi' },
+    ],
+    []
+  );
+
+  const [filterByType, setFilterByType] = useState<(typeof dataTypeOptions)[0]>(
+    dataTypeOptions[0]
+  );
+
   const {
     options: customerOptions,
     setInputValue: setCustomerInputValue,
     isLoadingOptions: isLoadingCustomers,
     loadMore: loadMoreCustomers,
-    hasMore: hasMoreCustomers,
   } = useSelect(CustomerApi.basePath, 'id', 'name', 'search');
 
   // TODO: Uncomment when BE is ready
-  const {
-    options: salesOptions,
-    setInputValue: setSalesInputValue,
-    isLoadingOptions: isLoadingSales,
-    loadMore: loadMoreSales,
-    hasMore: hasMoreSales,
-  } = useSelect(UserApi.basePath, 'id', 'name', 'search');
-
-  const dataTypeOptions = useMemo(
-    () => [{ value: 'do_date', label: 'Tanggal Jual' }],
-    []
-  );
+  // const {
+  //   options: salesOptions,
+  //   setInputValue: setSalesInputValue,
+  //   isLoadingOptions: isLoadingSales,
+  //   loadMore: loadMoreSales,
+  //   hasMore: hasMoreSales,
+  // } = useSelect(UserApi.basePath, 'id', 'name', 'search');
 
   const getPaymentStatusColor = (notes: string) => {
     const normalizedValue = notes.toLowerCase();
@@ -125,10 +130,11 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
   const handleResetFilters = useCallback(() => {
     setIsSubmitted(false);
     setFilterCustomer([]);
-    setFilterSales([]);
+    // setFilterSales([]);
+    setFilterByType(dataTypeOptions[0]);
     setFilterStartDate('');
     setFilterEndDate('');
-  }, []);
+  }, [dataTypeOptions]);
 
   const handleApplyFilters = useCallback(() => {
     setIsSubmitted(true);
@@ -157,12 +163,7 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
     // }
 
     return count;
-  }, [
-    filterStartDate,
-    filterEndDate,
-    filterCustomer,
-    // filterSales,
-  ]);
+  }, [filterStartDate, filterEndDate, filterCustomer]);
 
   const hasFilters = activeFiltersCount > 0;
 
@@ -180,7 +181,10 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
             //   filterSales.length > 0
             //     ? filterSales.map((v) => String(v.value)).join(',')
             //     : undefined,
-            // filter_by: 'do_date' as const,
+            filter_by: filterByType.value as
+              | 'do_date'
+              | 'payment_date'
+              | 'realization_date',
             start_date: filterStartDate || undefined,
             end_date: filterEndDate || undefined,
             page: currentPage,
@@ -193,8 +197,7 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
     ([, params]) =>
       FinanceApi.getCustomerPaymentReport(
         params.customer_ids,
-        undefined, // TODO: Change to params.sales_id when BE is ready
-        undefined, // TODO: Change to params.filter_by when BE is ready
+        params.filter_by,
         params.start_date,
         params.end_date,
         params.page,
@@ -224,6 +227,10 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
       //   filterSales.length > 0
       //     ? filterSales.map((v) => String(v.value)).join(',')
       //     : undefined,
+      filter_by: filterByType.value as
+        | 'do_date'
+        | 'payment_date'
+        | 'realization_date',
       start_date: filterStartDate || undefined,
       end_date: filterEndDate || undefined,
       limit: 100,
@@ -232,8 +239,7 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
 
     const response = await FinanceApi.getCustomerPaymentReport(
       params.customer_ids,
-      undefined, // TODO: Change to params.sales_id when BE is ready
-      undefined, // TODO: Change to params.filter_by when BE is ready
+      params.filter_by,
       params.start_date,
       params.end_date,
       params.page,
@@ -243,7 +249,13 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
     return isResponseSuccess(response)
       ? (response.data as unknown as CustomerPaymentReport[])
       : null;
-  }, [filterCustomer, filterSales, filterStartDate, filterEndDate]);
+  }, [
+    filterCustomer,
+    // filterSales,
+    filterStartDate,
+    filterEndDate,
+    filterByType,
+  ]);
 
   // ===== EXPORT HANDLERS =====
   const handleExportExcel = useCallback(async () => {
@@ -297,8 +309,10 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
           //     : undefined,
           start_date: filterStartDate || undefined,
           end_date: filterEndDate || undefined,
-          // TODO: Uncomment when BE is ready
-          // filter_by: 'do_date' as const,
+          filter_by: filterByType.value as
+            | 'do_date'
+            | 'payment_date'
+            | 'realization_date',
         },
       });
       toast.success('PDF berhasil dibuat dan diunduh.');
@@ -406,7 +420,7 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
         footer: () => <div className='font-semibold text-gray-900'>Total</div>,
       },
       {
-        id: 'do_date_or_payment_date',
+        id: 'trans_date',
         header: 'Tanggal Jual/Bayar',
         accessorKey: 'trans_date',
         enableSorting: false,
@@ -864,17 +878,20 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
                 />
               </div> */}
 
-          {/* TODO: Uncomment when BE is ready */}
-          {/* <div>
-                <SelectInput
-                  label='Filter Berdasarkan'
-                  placeholder='Pilih Filter Berdasarkan'
-                  options={dataTypeOptions}
-                  value={dataTypeOptions[0]}
-                  isDisabled={true}
-                  className={{ wrapper: 'w-full' }}
-                />
-              </div> */}
+          <div>
+            <SelectInput
+              label='Filter Berdasarkan'
+              placeholder='Pilih Filter Berdasarkan'
+              options={dataTypeOptions}
+              value={filterByType}
+              onChange={(val) => {
+                if (val && !Array.isArray(val)) {
+                  setFilterByType(val);
+                }
+              }}
+              className={{ wrapper: 'w-full' }}
+            />
+          </div>
 
           {/* Action Buttons */}
         </div>