feat(FE): Fetch sales from UserApi and use sales_id param

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

@@ -11,6 +11,7 @@ import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
 import DateInput from '@/components/input/DateInput';
 import { CustomerApi } from '@/services/api/master-data';
 import { FinanceApi } from '@/services/api/report/finance-report';
+import { UserApi } from '@/services/api/user';
 import Table from '@/components/Table';
 import { ColumnDef } from '@tanstack/react-table';
 import { formatCurrency, formatDate, formatNumber } from '@/lib/helper';
@@ -46,7 +47,7 @@ const CustomerPaymentTab = () => {
   const [filterCustomer, setFilterCustomer] = useState<typeof customerOptions>(
     []
   );
-  const [filterSales, setFilterSales] = useState<OptionType[]>([]);
+  const [filterSales, setFilterSales] = useState<typeof salesOptions>([]);
   const [filterStartDate, setFilterStartDate] = useState('');
   const [filterEndDate, setFilterEndDate] = useState('');
 
@@ -55,14 +56,11 @@ const CustomerPaymentTab = () => {
   const { options: customerOptions, isLoadingOptions: isLoadingCustomers } =
     useSelect(CustomerApi.basePath, 'id', 'name', 'search');
 
-  const salesOptions = useMemo(
-    () => [
-      { value: 'Sales A', label: 'Sales A' },
-      { value: 'Sales B', label: 'Sales B' },
-      { value: 'Sales C', label: 'Sales C' },
-      // TODO: Fetch sales options from API
-    ],
-    []
+  const { options: salesOptions, isLoadingOptions: isLoadingSales } = useSelect(
+    UserApi.basePath,
+    'id',
+    'name',
+    'search'
   );
 
   const dataTypeOptions = useMemo(
@@ -161,7 +159,7 @@ const CustomerPaymentTab = () => {
               filterCustomer.length > 0
                 ? filterCustomer.map((v) => String(v.value)).join(',')
                 : undefined,
-            sales:
+            sales_id:
               filterSales.length > 0
                 ? filterSales.map((v) => String(v.value)).join(',')
                 : undefined,
@@ -178,7 +176,7 @@ const CustomerPaymentTab = () => {
     ([, params]) =>
       FinanceApi.getCustomerPaymentReport(
         params.customer_id,
-        params.sales,
+        params.sales_id,
         params.filter_by,
         params.start_date,
         params.end_date,
@@ -204,7 +202,7 @@ const CustomerPaymentTab = () => {
         filterCustomer.length > 0
           ? filterCustomer.map((v) => String(v.value)).join(',')
           : undefined,
-      sales:
+      sales_id:
         filterSales.length > 0
           ? filterSales.map((v) => String(v.value)).join(',')
           : undefined,
@@ -217,7 +215,7 @@ const CustomerPaymentTab = () => {
 
     const response = await FinanceApi.getCustomerPaymentReport(
       params.customer_id,
-      params.sales,
+      params.sales_id,
       params.filter_by,
       params.start_date,
       params.end_date,
@@ -659,15 +657,15 @@ const CustomerPaymentTab = () => {
               </div>
 
               <div>
-                <SelectInput
+                <SelectInputCheckbox
                   label='Sales'
                   placeholder='Pilih Sales'
-                  isMulti
                   options={salesOptions}
                   value={filterSales}
                   onChange={(val) => {
                     setFilterSales(Array.isArray(val) ? val : val ? [val] : []);
                   }}
+                  isLoading={isLoadingSales}
                   isClearable
                   className={{ wrapper: 'w-full' }}
                 />

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

@@ -14,7 +14,7 @@ export class FinanceApiService extends BaseApiService<
 
   async getCustomerPaymentReport(
     customer_id?: string,
-    sales?: string,
+    sales_id?: string,
     filter_by?: 'do_date',
     start_date?: string,
     end_date?: string,
@@ -27,7 +27,7 @@ export class FinanceApiService extends BaseApiService<
         method: 'GET',
         params: {
           customer_id: customer_id,
-          sales: sales,
+          sales_id: sales_id,
           filter_by: filter_by,
           start_date: start_date,
           end_date: end_date,