From 0b52fff5f5fb74c909032e1e9aeb5be9ced4866f Mon Sep 17 00:00:00 2001 From: rstubryan Date: Wed, 8 Apr 2026 09:54:40 +0700 Subject: [PATCH 1/3] 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( 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 = {}; - - 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 ( -
- -
- ); - } - return ( <>
@@ -327,9 +289,15 @@ const DashboardProduction = () => { {/* Dashboard Stats */}
- + {isLoadingDashboardProductionData ? ( +
+ +
+ ) : ( + + )}
{/* 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 { constructor(basePath: string) { @@ -14,11 +13,26 @@ class DashboardService extends BaseApiService { * @returns Promise with BaseApiResponse containing DashboardProduction */ async getDashboardProductionFetcher( - endpoint: string + params: DashboardFilter ): Promise | undefined> { - return await httpClientFetcher>( - `${endpoint ? endpoint : this.basePath}` - ); + return await this.customRequest>('', { + 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, + }, + }); } } From b402a0670696c55331f39ce7765dc60e3983c7f0 Mon Sep 17 00:00:00 2001 From: rstubryan Date: Wed, 8 Apr 2026 10:15:33 +0700 Subject: [PATCH 2/3] feat(FE-moment-default-range): Set default date range to current month in Dashboard component --- .../components/pages/dashboard/Dashboard.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/figma-make/components/pages/dashboard/Dashboard.tsx b/src/figma-make/components/pages/dashboard/Dashboard.tsx index f3e4b6d0..ae0d8f22 100644 --- a/src/figma-make/components/pages/dashboard/Dashboard.tsx +++ b/src/figma-make/components/pages/dashboard/Dashboard.tsx @@ -1,6 +1,7 @@ 'use client'; import { useState } from 'react'; +import moment from 'moment'; import { Card, CardContent, @@ -59,10 +60,17 @@ const CATEGORY_LABELS: { [key: string]: string } = { produksi_close: 'Produksi Close', }; +const getThisMonthRange = () => ({ + dateFrom: moment().startOf('month').format('YYYY-MM-DD'), + dateTo: moment().format('YYYY-MM-DD'), +}); + export function Dashboard() { + const defaultDateRange = getThisMonthRange(); + // Filters - const [dateFrom, setDateFrom] = useState(''); - const [dateTo, setDateTo] = useState(''); + const [dateFrom, setDateFrom] = useState(defaultDateRange.dateFrom); + const [dateTo, setDateTo] = useState(defaultDateRange.dateTo); const [kandangFilter, setKandangFilter] = useState('ALL'); const [categoryFilter, setCategoryFilter] = useState('ALL'); From 68b25332b19eb218ecf01f10793500645ef59056 Mon Sep 17 00:00:00 2001 From: rstubryan Date: Wed, 8 Apr 2026 11:29:51 +0700 Subject: [PATCH 3/3] refactor(FE-set-to-end): Fix date range to include the end of the month --- src/figma-make/components/pages/dashboard/Dashboard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/figma-make/components/pages/dashboard/Dashboard.tsx b/src/figma-make/components/pages/dashboard/Dashboard.tsx index ae0d8f22..36b04cf6 100644 --- a/src/figma-make/components/pages/dashboard/Dashboard.tsx +++ b/src/figma-make/components/pages/dashboard/Dashboard.tsx @@ -62,7 +62,7 @@ const CATEGORY_LABELS: { [key: string]: string } = { const getThisMonthRange = () => ({ dateFrom: moment().startOf('month').format('YYYY-MM-DD'), - dateTo: moment().format('YYYY-MM-DD'), + dateTo: moment().endOf('month').format('YYYY-MM-DD'), }); export function Dashboard() {