diff --git a/src/components/pages/report/sale/tab/HppPerKandangTab.tsx b/src/components/pages/report/sale/tab/HppPerKandangTab.tsx
index 8a6e8a9c..9a9ddde7 100644
--- a/src/components/pages/report/sale/tab/HppPerKandangTab.tsx
+++ b/src/components/pages/report/sale/tab/HppPerKandangTab.tsx
@@ -43,9 +43,9 @@ const HppPerKandangTab = () => {
   // ===== TABLE FILTER STATE =====
   const { state: tableFilterState, updateFilter } = useTableFilter({
     initial: {
-      area_id: '',
-      location_id: '',
-      kandang_id: '',
+      area_id: [] as string[],
+      location_id: [] as string[],
+      kandang_id: [] as string[],
       weight_min: '',
       weight_max: '',
       period: '',
@@ -78,8 +78,11 @@ const HppPerKandangTab = () => {
 
   const areaChangeHandler = useCallback(
     (val: OptionType | OptionType[] | null) => {
-      const newVal = val as OptionType;
-      updateFilter('area_id', newVal?.value ? String(newVal.value) : '');
+      const arr = Array.isArray(val) ? val : val ? [val] : [];
+      updateFilter(
+        'area_id',
+        arr.map((v) => String((v as OptionType).value))
+      );
       setIsSubmitted(false);
     },
     [updateFilter]
@@ -87,8 +90,11 @@ const HppPerKandangTab = () => {
 
   const locationChangeHandler = useCallback(
     (val: OptionType | OptionType[] | null) => {
-      const newVal = val as OptionType;
-      updateFilter('location_id', newVal?.value ? String(newVal.value) : '');
+      const arr = Array.isArray(val) ? val : val ? [val] : [];
+      updateFilter(
+        'location_id',
+        arr.map((v) => String((v as OptionType).value))
+      );
       setIsSubmitted(false);
     },
     [updateFilter]
@@ -96,8 +102,11 @@ const HppPerKandangTab = () => {
 
   const kandangChangeHandler = useCallback(
     (val: OptionType | OptionType[] | null) => {
-      const newVal = val as OptionType;
-      updateFilter('kandang_id', newVal?.value ? String(newVal.value) : '');
+      const arr = Array.isArray(val) ? val : val ? [val] : [];
+      updateFilter(
+        'kandang_id',
+        arr.map((v) => String((v as OptionType).value))
+      );
       setIsSubmitted(false);
     },
     [updateFilter]
@@ -144,9 +153,9 @@ const HppPerKandangTab = () => {
   );
 
   const resetFilters = useCallback(() => {
-    updateFilter('area_id', '');
-    updateFilter('location_id', '');
-    updateFilter('kandang_id', '');
+    updateFilter('area_id', []);
+    updateFilter('location_id', []);
+    updateFilter('kandang_id', []);
     updateFilter('weight_min', '');
     updateFilter('weight_max', '');
     updateFilter('period', '');
@@ -168,15 +177,18 @@ const HppPerKandangTab = () => {
     isSubmitted
       ? () => {
           const params = {
-            area_id: tableFilterState.area_id
-              ? Number(tableFilterState.area_id)
-              : undefined,
-            location_id: tableFilterState.location_id
-              ? Number(tableFilterState.location_id)
-              : undefined,
-            kandang_id: tableFilterState.kandang_id
-              ? Number(tableFilterState.kandang_id)
-              : undefined,
+            area_id:
+              tableFilterState.area_id.length > 0
+                ? tableFilterState.area_id.join(',')
+                : undefined,
+            location_id:
+              tableFilterState.location_id.length > 0
+                ? tableFilterState.location_id.join(',')
+                : undefined,
+            kandang_id:
+              tableFilterState.kandang_id.length > 0
+                ? tableFilterState.kandang_id.join(',')
+                : undefined,
             weight_min: tableFilterState.weight_min
               ? Number(tableFilterState.weight_min)
               : undefined,
@@ -226,15 +238,18 @@ const HppPerKandangTab = () => {
   const hppPerKandangExport =
     useCallback(async (): Promise<HppPerKandangReport | null> => {
       const params = {
-        area_id: tableFilterState.area_id
-          ? Number(tableFilterState.area_id)
-          : undefined,
-        location_id: tableFilterState.location_id
-          ? Number(tableFilterState.location_id)
-          : undefined,
-        kandang_id: tableFilterState.kandang_id
-          ? Number(tableFilterState.kandang_id)
-          : undefined,
+        area_id:
+          tableFilterState.area_id.length > 0
+            ? tableFilterState.area_id.join(',')
+            : undefined,
+        location_id:
+          tableFilterState.location_id.length > 0
+            ? tableFilterState.location_id.join(',')
+            : undefined,
+        kandang_id:
+          tableFilterState.kandang_id.length > 0
+            ? tableFilterState.kandang_id.join(',')
+            : undefined,
         weight_min: tableFilterState.weight_min
           ? Number(tableFilterState.weight_min)
           : undefined,
@@ -386,23 +401,38 @@ const HppPerKandangTab = () => {
       const workbook = XLSX.utils.book_new();
       XLSX.utils.book_append_sheet(workbook, worksheet, 'HPP Per Kandang');
 
-      const areaName = tableFilterState.area_id
-        ? areaOptions.find(
-            (opt) => opt.value === Number(tableFilterState.area_id)
-          )?.label || 'Semua Area'
-        : 'Semua Area';
+      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 locationName = tableFilterState.location_id
-        ? locationOptions.find(
-            (opt) => opt.value === Number(tableFilterState.location_id)
-          )?.label || 'Semua Lokasi'
-        : 'Semua Lokasi';
+      const locationName =
+        tableFilterState.location_id.length > 0
+          ? tableFilterState.location_id
+              .map(
+                (id) =>
+                  locationOptions.find((opt) => opt.value === Number(id))?.label
+              )
+              .filter(Boolean)
+              .join(', ') || 'Semua Lokasi'
+          : 'Semua Lokasi';
 
-      const kandangName = tableFilterState.kandang_id
-        ? kandangOptions.find(
-            (opt) => opt.value === Number(tableFilterState.kandang_id)
-          )?.label || 'Semua Kandang'
-        : 'Semua Kandang';
+      const kandangName =
+        tableFilterState.kandang_id.length > 0
+          ? tableFilterState.kandang_id
+              .map(
+                (id) =>
+                  kandangOptions.find((opt) => opt.value === Number(id))?.label
+              )
+              .filter(Boolean)
+              .join(', ') || 'Semua Kandang'
+          : 'Semua Kandang';
 
       const filename = `Laporan_HPP_Per_Kandang_${areaName}_${locationName}_${kandangName}_${tableFilterState.period}.xlsx`;
 
@@ -435,23 +465,38 @@ const HppPerKandangTab = () => {
         return;
       }
 
-      const areaName = tableFilterState.area_id
-        ? areaOptions.find(
-            (opt) => opt.value === Number(tableFilterState.area_id)
-          )?.label || 'Semua Area'
-        : 'Semua Area';
+      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 locationName = tableFilterState.location_id
-        ? locationOptions.find(
-            (opt) => opt.value === Number(tableFilterState.location_id)
-          )?.label || 'Semua Lokasi'
-        : 'Semua Lokasi';
+      const locationName =
+        tableFilterState.location_id.length > 0
+          ? tableFilterState.location_id
+              .map(
+                (id) =>
+                  locationOptions.find((opt) => opt.value === Number(id))?.label
+              )
+              .filter(Boolean)
+              .join(', ') || 'Semua Lokasi'
+          : 'Semua Lokasi';
 
-      const kandangName = tableFilterState.kandang_id
-        ? kandangOptions.find(
-            (opt) => opt.value === Number(tableFilterState.kandang_id)
-          )?.label || 'Semua Kandang'
-        : 'Semua Kandang';
+      const kandangName =
+        tableFilterState.kandang_id.length > 0
+          ? tableFilterState.kandang_id
+              .map(
+                (id) =>
+                  kandangOptions.find((opt) => opt.value === Number(id))?.label
+              )
+              .filter(Boolean)
+              .join(', ') || 'Semua Kandang'
+          : 'Semua Kandang';
 
       await generateHppPerKandangPDF(allDataForExport, {
         area_name: areaName,
@@ -716,15 +761,13 @@ const HppPerKandangTab = () => {
           <SelectInput
             label='Area'
             placeholder='Pilih Area'
+            isMulti
             options={areaOptions}
-            value={
-              tableFilterState.area_id
-                ? areaOptions.find(
-                    (option) =>
-                      option.value === Number(tableFilterState.area_id)
-                  ) || null
-                : null
-            }
+            value={areaOptions.filter((opt) =>
+              (tableFilterState.area_id || [])
+                .map(String)
+                .includes(String(opt.value))
+            )}
             onChange={areaChangeHandler}
             isLoading={isLoadingAreas}
             isClearable
@@ -732,15 +775,13 @@ const HppPerKandangTab = () => {
           <SelectInput
             label='Lokasi'
             placeholder='Pilih Lokasi'
+            isMulti
             options={locationOptions}
-            value={
-              tableFilterState.location_id
-                ? locationOptions.find(
-                    (option) =>
-                      option.value === Number(tableFilterState.location_id)
-                  ) || null
-                : null
-            }
+            value={locationOptions.filter((opt) =>
+              (tableFilterState.location_id || [])
+                .map(String)
+                .includes(String(opt.value))
+            )}
             onChange={locationChangeHandler}
             isLoading={isLoadingLocations}
             isClearable
@@ -748,15 +789,13 @@ const HppPerKandangTab = () => {
           <SelectInput
             label='Kandang'
             placeholder='Pilih Kandang'
+            isMulti
             options={kandangOptions}
-            value={
-              tableFilterState.kandang_id
-                ? kandangOptions.find(
-                    (option) =>
-                      option.value === Number(tableFilterState.kandang_id)
-                  ) || null
-                : null
-            }
+            value={kandangOptions.filter((opt) =>
+              (tableFilterState.kandang_id || [])
+                .map(String)
+                .includes(String(opt.value))
+            )}
             onChange={kandangChangeHandler}
             isLoading={isLoadingKandangs}
             isClearable
diff --git a/src/services/api/report/marketing-sale.ts b/src/services/api/report/marketing-sale.ts
index ba8fe481..4422957e 100644
--- a/src/services/api/report/marketing-sale.ts
+++ b/src/services/api/report/marketing-sale.ts
@@ -12,9 +12,9 @@ export class MarketingSaleReportService extends BaseApiService<
   }
 
   async getHppPerKandangReport(
-    area_id?: number,
-    location_id?: number,
-    kandang_id?: number,
+    area_id?: string,
+    location_id?: string,
+    kandang_id?: string,
     weight_min?: number,
     weight_max?: number,
     period?: string,
@@ -48,9 +48,6 @@ export const SaleReportApi = new MarketingSaleReportService(
   'reports/marketings'
 );
 
-/* For local testing purpose only
-export const SaleReportApi = new MarketingSaleReportService(
-    'http://localhost:4010/api/reports/marketings'
-  'reports/marketings'
-  );
-*/
+// export const SaleReportApi = new MarketingSaleReportService(
+//   'http://localhost:4010/api/reports/marketings'
+// );