From 0b52fff5f5fb74c909032e1e9aeb5be9ced4866f Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 8 Apr 2026 09:54:40 +0700
Subject: [PATCH] refactor(FE-dashboard-modal): Refactor dashboard production
 data fetching logic

---
 .../pages/dashboard/DashboardProduction.tsx   | 98 +++++++------------
 src/services/api/dashboard.ts                 | 26 +++--
 2 files changed, 53 insertions(+), 71 deletions(-)

diff --git a/src/components/pages/dashboard/DashboardProduction.tsx b/src/components/pages/dashboard/DashboardProduction.tsx
index 27db0039..a0f7e471 100644
--- a/src/components/pages/dashboard/DashboardProduction.tsx
+++ b/src/components/pages/dashboard/DashboardProduction.tsx
@@ -68,7 +68,6 @@ const DashboardProduction = () => {
   const [analysisMode, setAnalysisMode] = useState<'OVERVIEW' | 'COMPARISON'>(
     (filterValues.analysisMode as 'OVERVIEW' | 'COMPARISON') || 'OVERVIEW'
   );
-  const [endpointUrl, setEndpointUrl] = useState('/dashboards');
   const [selectedLocationIds, setSelectedLocationIds] = useState<number[]>(
     normalizeToArray(filterValues.location)
   );
@@ -80,9 +79,29 @@ const DashboardProduction = () => {
   const {
     data: dashboardProductionResponse,
     isLoading: isLoadingDashboardProductionData,
-    mutate: refreshDashboardProductionData,
-  } = useSWR(endpointUrl, () =>
-    DashboardApi.getDashboardProductionFetcher(endpointUrl)
+  } = useSWR(
+    [
+      'dashboard-production',
+      filterValues.startDate ?? '',
+      filterValues.endDate ?? '',
+      filterValues.analysisMode ?? 'OVERVIEW',
+      normalizeToArray(filterValues.location).toString(),
+      normalizeToArray(filterValues.flock).toString(),
+      normalizeToArray(filterValues.kandang).toString(),
+      filterValues.comparisonType ?? '',
+    ],
+    () =>
+      DashboardApi.getDashboardProductionFetcher({
+        start_date: filterValues.startDate || '',
+        end_date: filterValues.endDate || '',
+        analysis_mode:
+          (filterValues.analysisMode as 'OVERVIEW' | 'COMPARISON') ||
+          'OVERVIEW',
+        location_ids: normalizeToArray(filterValues.location),
+        flock_ids: normalizeToArray(filterValues.flock),
+        kandang_ids: normalizeToArray(filterValues.kandang),
+        comparison_type: filterValues.comparisonType || '',
+      })
   );
 
   const dashboardProductionData = isResponseSuccess(dashboardProductionResponse)
@@ -135,18 +154,8 @@ const DashboardProduction = () => {
     enableReinitialize: true,
     validationSchema: getDashboardFilterSchema(analysisMode),
     onSubmit: (values) => {
-      // Save filter values to store
       setFilterValues(values);
-
-      handleApplyFilter({
-        start_date: values.startDate || '',
-        end_date: values.endDate || '',
-        analysis_mode: values.analysisMode as 'OVERVIEW' | 'COMPARISON',
-        location_ids: normalizeToArray(values.location),
-        flock_ids: normalizeToArray(values.flock),
-        kandang_ids: normalizeToArray(values.kandang),
-        comparison_type: values.comparisonType,
-      });
+      filterModal.closeModal();
     },
   });
 
@@ -156,48 +165,9 @@ const DashboardProduction = () => {
     resetForm();
     resetFilterValues(); // Clear stored filter values
     setAnalysisMode('OVERVIEW');
-    setEndpointUrl('/dashboards');
     setSelectedLocationIds([]);
   }, [resetForm, resetFilterValues]);
 
-  const handleApplyFilter = useCallback(
-    (values: DashboardFilter) => {
-      // Build query params object, only include non-empty values
-      const params: Record<string, string> = {};
-
-      if (values.start_date) params.start_date = values.start_date;
-      if (values.end_date) params.end_date = values.end_date;
-      if (values.analysis_mode) params.analysis_mode = values.analysis_mode;
-      if (values.location_ids.length > 0)
-        params.location_ids = values.location_ids.toString();
-      if (values.flock_ids.length > 0)
-        params.flock_ids = values.flock_ids.toString();
-      if (values.kandang_ids.length > 0)
-        params.kandang_ids = values.kandang_ids.toString();
-      if (values.comparison_type)
-        params.comparison_type = values.comparison_type;
-
-      setEndpointUrl(`/dashboards?${new URLSearchParams(params).toString()}`);
-      filterModal.closeModal();
-      refreshDashboardProductionData();
-    },
-    [filterModal, refreshDashboardProductionData]
-  );
-
-  // ===== Load filter from store on mount =====
-  useEffect(() => {
-    if (!filterValues) return;
-    handleApplyFilter({
-      start_date: filterValues.startDate,
-      end_date: filterValues.endDate,
-      analysis_mode: filterValues.analysisMode as 'OVERVIEW' | 'COMPARISON',
-      location_ids: normalizeToArray(filterValues.location),
-      flock_ids: normalizeToArray(filterValues.flock),
-      kandang_ids: normalizeToArray(filterValues.kandang),
-      comparison_type: filterValues.comparisonType,
-    });
-  }, [filterValues, handleApplyFilter]);
-
   // ===== Formik Error List =====
   const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
 
@@ -268,14 +238,6 @@ const DashboardProduction = () => {
     };
   }, [clearNavbarActions]);
 
-  if (isLoadingDashboardProductionData) {
-    return (
-      <div className='w-full min-h-screen flex items-center justify-center'>
-        <span className='loading loading-spinner loading-xl'></span>
-      </div>
-    );
-  }
-
   return (
     <>
       <section className='w-full p-3 space-y-3'>
@@ -327,9 +289,15 @@ const DashboardProduction = () => {
         </div>
         {/* Dashboard Stats */}
         <div>
-          <DashboardStats
-            data={dashboardProductionData?.statistics_data ?? []}
-          />
+          {isLoadingDashboardProductionData ? (
+            <div className='w-full min-h-screen flex items-center justify-center'>
+              <span className='loading loading-spinner loading-xl'></span>
+            </div>
+          ) : (
+            <DashboardStats
+              data={dashboardProductionData?.statistics_data ?? []}
+            />
+          )}
         </div>
 
         {/* Use DashboardLineChart component or skeleton */}
diff --git a/src/services/api/dashboard.ts b/src/services/api/dashboard.ts
index 5cfc9b8f..ff2d9fcd 100644
--- a/src/services/api/dashboard.ts
+++ b/src/services/api/dashboard.ts
@@ -1,7 +1,6 @@
 import { BaseApiService } from '@/services/api/base';
 import { BaseApiResponse } from '@/types/api/api-general';
-import { Dashboard } from '@/types/api/dashboard/dashboard';
-import { httpClientFetcher } from '@/services/http/client';
+import { Dashboard, DashboardFilter } from '@/types/api/dashboard/dashboard';
 
 class DashboardService extends BaseApiService<Dashboard, unknown, unknown> {
   constructor(basePath: string) {
@@ -14,11 +13,26 @@ class DashboardService extends BaseApiService<Dashboard, unknown, unknown> {
    * @returns Promise with BaseApiResponse containing DashboardProduction
    */
   async getDashboardProductionFetcher(
-    endpoint: string
+    params: DashboardFilter
   ): Promise<BaseApiResponse<Dashboard> | undefined> {
-    return await httpClientFetcher<BaseApiResponse<Dashboard>>(
-      `${endpoint ? endpoint : this.basePath}`
-    );
+    return await this.customRequest<BaseApiResponse<Dashboard>>('', {
+      method: 'GET',
+      params: {
+        start_date: params.start_date || undefined,
+        end_date: params.end_date || undefined,
+        analysis_mode: params.analysis_mode || undefined,
+        location_ids: params.location_ids.length
+          ? params.location_ids.toString()
+          : undefined,
+        flock_ids: params.flock_ids.length
+          ? params.flock_ids.toString()
+          : undefined,
+        kandang_ids: params.kandang_ids.length
+          ? params.kandang_ids.toString()
+          : undefined,
+        comparison_type: params.comparison_type || undefined,
+      },
+    });
   }
 }