refactor(FE-364): Enable multi-select filters for purchases report

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

@@ -59,10 +59,10 @@ const PurchasesPerSupplierTab = () => {
   // ===== TABLE FILTER STATE =====
   const { state: tableFilterState, updateFilter } = useTableFilter({
     initial: {
-      area_id: '',
+      area_id: [] as string[],
-      supplier_id: '',
+      supplier_id: [] as string[],
-      product_id: '',
+      product_id: [] as string[],
-      product_category_id: '',
+      product_category_id: [] as string[],
       received_date: '',
       po_date: '',
       start_date: '',
@@ -104,8 +104,11 @@ const PurchasesPerSupplierTab = () => {
 
   const areaChangeHandler = useCallback(
     (val: OptionType | OptionType[] | null) => {
-      const newVal = val as OptionType;
+      const arr = Array.isArray(val) ? val : val ? [val] : [];
-      updateFilter('area_id', newVal?.value ? String(newVal.value) : '');
+      updateFilter(
+        'area_id',
+        arr.map((v) => String((v as OptionType).value))
+      );
       setIsSubmitted(false);
     },
     [updateFilter]
@@ -113,8 +116,11 @@ const PurchasesPerSupplierTab = () => {
 
   const supplierChangeHandler = useCallback(
     (val: OptionType | OptionType[] | null) => {
-      const newVal = val as OptionType;
+      const arr = Array.isArray(val) ? val : val ? [val] : [];
-      updateFilter('supplier_id', newVal?.value ? String(newVal.value) : '');
+      updateFilter(
+        'supplier_id',
+        arr.map((v) => String((v as OptionType).value))
+      );
       setIsSubmitted(false);
     },
     [updateFilter]
@@ -122,8 +128,11 @@ const PurchasesPerSupplierTab = () => {
 
   const productChangeHandler = useCallback(
     (val: OptionType | OptionType[] | null) => {
-      const newVal = val as OptionType;
+      const arr = Array.isArray(val) ? val : val ? [val] : [];
-      updateFilter('product_id', newVal?.value ? String(newVal.value) : '');
+      updateFilter(
+        'product_id',
+        arr.map((v) => String((v as OptionType).value))
+      );
       setIsSubmitted(false);
     },
     [updateFilter]
@@ -131,10 +140,10 @@ const PurchasesPerSupplierTab = () => {
 
   const productCategoryChangeHandler = useCallback(
     (val: OptionType | OptionType[] | null) => {
-      const newVal = val as OptionType;
+      const arr = Array.isArray(val) ? val : val ? [val] : [];
       updateFilter(
         'product_category_id',
-        newVal?.value ? String(newVal.value) : ''
+        arr.map((v) => String((v as OptionType).value))
       );
       setIsSubmitted(false);
     },
@@ -177,10 +186,10 @@ const PurchasesPerSupplierTab = () => {
   );
 
   const resetFilters = useCallback(() => {
-    updateFilter('area_id', '');
+    updateFilter('area_id', []);
-    updateFilter('supplier_id', '');
+    updateFilter('supplier_id', []);
-    updateFilter('product_id', '');
+    updateFilter('product_id', []);
-    updateFilter('product_category_id', '');
+    updateFilter('product_category_id', []);
     updateFilter('received_date', '');
     updateFilter('po_date', '');
     updateFilter('start_date', '');
@@ -200,18 +209,22 @@ const PurchasesPerSupplierTab = () => {
     isSubmitted
       ? () => {
           const params = {
-            area_id: tableFilterState.area_id
+            area_id:
-              ? Number(tableFilterState.area_id)
+              tableFilterState.area_id.length > 0
-              : undefined,
+                ? tableFilterState.area_id
-            supplier_id: tableFilterState.supplier_id
+                : undefined,
-              ? Number(tableFilterState.supplier_id)
+            supplier_id:
-              : undefined,
+              tableFilterState.supplier_id.length > 0
-            product_id: tableFilterState.product_id
+                ? tableFilterState.supplier_id
-              ? Number(tableFilterState.product_id)
+                : undefined,
-              : undefined,
+            product_id:
-            product_category_id: tableFilterState.product_category_id
+              tableFilterState.product_id.length > 0
-              ? Number(tableFilterState.product_category_id)
+                ? tableFilterState.product_id
-              : undefined,
+                : undefined,
+            product_category_id:
+              tableFilterState.product_category_id.length > 0
+                ? tableFilterState.product_category_id
+                : undefined,
             received_date:
               tableFilterState.filter_by === 'received_date'
                 ? tableFilterState.start_date || undefined
@@ -266,18 +279,22 @@ const PurchasesPerSupplierTab = () => {
     isSubmitted
       ? () => {
           const params = {
-            area_id: tableFilterState.area_id
+            area_id:
-              ? Number(tableFilterState.area_id)
+              tableFilterState.area_id.length > 0
-              : undefined,
+                ? tableFilterState.area_id
-            supplier_id: tableFilterState.supplier_id
+                : undefined,
-              ? Number(tableFilterState.supplier_id)
+            supplier_id:
-              : undefined,
+              tableFilterState.supplier_id.length > 0
-            product_id: tableFilterState.product_id
+                ? tableFilterState.supplier_id
-              ? Number(tableFilterState.product_id)
+                : undefined,
-              : undefined,
+            product_id:
-            product_category_id: tableFilterState.product_category_id
+              tableFilterState.product_id.length > 0
-              ? Number(tableFilterState.product_category_id)
+                ? tableFilterState.product_id
-              : undefined,
+                : undefined,
+            product_category_id:
+              tableFilterState.product_category_id.length > 0
+                ? tableFilterState.product_category_id
+                : undefined,
             received_date:
               tableFilterState.filter_by === 'received_date'
                 ? tableFilterState.start_date || undefined
@@ -344,17 +361,27 @@ const PurchasesPerSupplierTab = () => {
 
       const workbook = XLSX.utils.book_new();
 
-      const areaName = tableFilterState.area_id
+      const areaName =
-        ? areaOptions.find(
+        tableFilterState.area_id.length > 0
-            (opt) => opt.value === Number(tableFilterState.area_id)
+          ? tableFilterState.area_id
-          )?.label || 'Semua Area'
+              .map(
-        : 'Semua Area';
+                (id) =>
+                  areaOptions.find((opt) => opt.value === Number(id))?.label
+              )
+              .filter(Boolean)
+              .join(', ') || 'Semua Area'
+          : 'Semua Area';
 
-      const supplierName = tableFilterState.supplier_id
+      const supplierName =
-        ? supplierOptions.find(
+        tableFilterState.supplier_id.length > 0
-            (opt) => opt.value === Number(tableFilterState.supplier_id)
+          ? tableFilterState.supplier_id
-          )?.label || 'Semua Supplier'
+              .map(
-        : 'Semua Supplier';
+                (id) =>
+                  supplierOptions.find((opt) => opt.value === Number(id))?.label
+              )
+              .filter(Boolean)
+              .join(', ') || 'Semua Supplier'
+          : 'Semua Supplier';
 
       const startDate = tableFilterState.start_date || 'all';
       const endDate = tableFilterState.end_date || 'all';
@@ -469,28 +496,56 @@ const PurchasesPerSupplierTab = () => {
 
     setIsPdfExportLoading(true);
     try {
+      const areaName =
+        tableFilterState.area_id.length > 0
+          ? tableFilterState.area_id
+              .map(
+                (id) =>
+                  areaOptions.find((opt) => opt.value === Number(id))?.label
+              )
+              .filter(Boolean)
+              .join(', ') || 'Semua Area'
+          : 'Semua Area';
+
+      const supplierName =
+        tableFilterState.supplier_id.length > 0
+          ? tableFilterState.supplier_id
+              .map(
+                (id) =>
+                  supplierOptions.find((opt) => opt.value === Number(id))?.label
+              )
+              .filter(Boolean)
+              .join(', ') || 'Semua Supplier'
+          : 'Semua Supplier';
+
+      const productName =
+        tableFilterState.product_id.length > 0
+          ? tableFilterState.product_id
+              .map(
+                (id) =>
+                  productOptions.find((opt) => opt.value === Number(id))?.label
+              )
+              .filter(Boolean)
+              .join(', ') || 'Semua Produk'
+          : 'Semua Produk';
+
+      const productCategoryName =
+        tableFilterState.product_category_id.length > 0
+          ? tableFilterState.product_category_id
+              .map(
+                (id) =>
+                  productCategoryOptions.find((opt) => opt.value === Number(id))
+                    ?.label
+              )
+              .filter(Boolean)
+              .join(', ') || 'Semua Kategori Produk'
+          : 'Semua Kategori Produk';
+
       const exportParams = {
-        area_name: tableFilterState.area_id
+        area_name: areaName,
-          ? areaOptions.find(
+        supplier_name: supplierName,
-              (opt) => opt.value === Number(tableFilterState.area_id)
+        product_name: productName,
-            )?.label || ''
+        product_category_name: productCategoryName,
-          : 'Semua Area',
-        supplier_name: tableFilterState.supplier_id
-          ? supplierOptions.find(
-              (opt) => opt.value === Number(tableFilterState.supplier_id)
-            )?.label || ''
-          : 'Semua Supplier',
-        product_name: tableFilterState.product_id
-          ? productOptions.find(
-              (opt) => opt.value === Number(tableFilterState.product_id)
-            )?.label || ''
-          : 'Semua Produk',
-        product_category_name: tableFilterState.product_category_id
-          ? productCategoryOptions.find(
-              (opt) =>
-                opt.value === Number(tableFilterState.product_category_id)
-            )?.label || ''
-          : 'Semua Kategori Produk',
         filter_by: tableFilterState.filter_by || 'received_date',
         start_date: tableFilterState.start_date || '',
         end_date: tableFilterState.end_date || '',
@@ -748,15 +803,13 @@ const PurchasesPerSupplierTab = () => {
           <SelectInput
             label='Area'
             placeholder='Pilih Area'
+            isMulti
             options={areaOptions}
-            value={
+            value={areaOptions.filter((opt) =>
-              tableFilterState.area_id
+              (tableFilterState.area_id || [])
-                ? areaOptions.find(
+                .map(String)
-                    (option) =>
+                .includes(String(opt.value))
-                      option.value === Number(tableFilterState.area_id)
+            )}
-                  ) || null
-                : null
-            }
             onChange={areaChangeHandler}
             isLoading={isLoadingAreas}
             isClearable
@@ -764,15 +817,13 @@ const PurchasesPerSupplierTab = () => {
           <SelectInput
             label='Supplier'
             placeholder='Pilih Supplier'
+            isMulti
             options={supplierOptions}
-            value={
+            value={supplierOptions.filter((opt) =>
-              tableFilterState.supplier_id
+              (tableFilterState.supplier_id || [])
-                ? supplierOptions.find(
+                .map(String)
-                    (option) =>
+                .includes(String(opt.value))
-                      option.value === Number(tableFilterState.supplier_id)
+            )}
-                  ) || null
-                : null
-            }
             onChange={supplierChangeHandler}
             isLoading={isLoadingSuppliers}
             isClearable
@@ -780,15 +831,13 @@ const PurchasesPerSupplierTab = () => {
           <SelectInput
             label='Produk'
             placeholder='Pilih Produk'
+            isMulti
             options={productOptions}
-            value={
+            value={productOptions.filter((opt) =>
-              tableFilterState.product_id
+              (tableFilterState.product_id || [])
-                ? productOptions.find(
+                .map(String)
-                    (option) =>
+                .includes(String(opt.value))
-                      option.value === Number(tableFilterState.product_id)
+            )}
-                  ) || null
-                : null
-            }
             onChange={productChangeHandler}
             isLoading={isLoadingProducts}
             isClearable
@@ -798,16 +847,13 @@ const PurchasesPerSupplierTab = () => {
           <SelectInput
             label='Kategori Produk'
             placeholder='Pilih Kategori Produk'
+            isMulti
             options={productCategoryOptions}
-            value={
+            value={productCategoryOptions.filter((opt) =>
-              tableFilterState.product_category_id
+              (tableFilterState.product_category_id || [])
-                ? productCategoryOptions.find(
+                .map(String)
-                    (option) =>
+                .includes(String(opt.value))
-                      option.value ===
+            )}
-                      Number(tableFilterState.product_category_id)
-                  ) || null
-                : null
-            }
             onChange={productCategoryChangeHandler}
             isLoading={isLoadingProductCategories}
             isClearable

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

@@ -12,10 +12,10 @@ export class LogisticApiService extends BaseApiService<
   }
 
   async getLogisticPurchasePerSupplierReport(
-    area_id?: number,
+    area_id?: string,
-    supplier_id?: number,
+    supplier_id?: string,
-    product_id?: number,
+    product_id?: string,
-    product_category_id?: number,
+    product_category_id?: string,
     received_date?: string,
     po_date?: string,
     start_date?: string,