From 0263db9faeffa39976c530e135ed2bc796370c7c Mon Sep 17 00:00:00 2001 From: ValdiANS Date: Mon, 9 Mar 2026 15:55:48 +0700 Subject: [PATCH 1/2] fix: use DailyChecklistKandangApi instead of KandangApi --- .../employee/MasterEmployeeContent.tsx | 46 ++++++++++++++----- 1 file changed, 34 insertions(+), 12 deletions(-) diff --git a/src/figma-make/components/pages/master-data/employee/MasterEmployeeContent.tsx b/src/figma-make/components/pages/master-data/employee/MasterEmployeeContent.tsx index 099aa32a..9944ed21 100644 --- a/src/figma-make/components/pages/master-data/employee/MasterEmployeeContent.tsx +++ b/src/figma-make/components/pages/master-data/employee/MasterEmployeeContent.tsx @@ -1,7 +1,14 @@ 'use client'; import { useState } from 'react'; -import { Plus, MoreVertical, Pencil, Trash2, Search } from 'lucide-react'; +import { + Plus, + MoreVertical, + Pencil, + Trash2, + Search, + Loader2, +} from 'lucide-react'; import { Card, CardContent } from '@/figma-make/components/base/card'; import { Button } from '@/figma-make/components/base/button'; import { Label } from '@/figma-make/components/base/label'; @@ -49,8 +56,8 @@ import { cn } from '@/lib/helper'; import { useTableFilter } from '@/services/hooks/useTableFilter'; import { ColumnDef } from '@tanstack/react-table'; import { useSelect } from '@/components/input/SelectInput'; -import { KandangApi } from '@/services/api/master-data'; import DebouncedTextInput from '@/components/input/DebouncedTextInput'; +import { DailyChecklistKandangApi } from '@/services/api/daily-checklist/kandang'; export function MasterEmployeeContent() { const { @@ -85,16 +92,20 @@ export function MasterEmployeeContent() { keepPreviousData: true, } ); - const { options: kandangOptions } = useSelect( - KandangApi.basePath, - 'id', - 'name', - 'search', - { - page: '1', - limit: '100', + const { + options: kandangOptions, + loadMore: loadMoreKandang, + isLoadingMore: isLoadingMoreKandang, + } = useSelect(DailyChecklistKandangApi.basePath, 'id', 'name'); + + const handleKandangScroll = (e: React.UIEvent) => { + const target = e.target as HTMLDivElement; + if (target.scrollHeight - target.scrollTop <= target.clientHeight + 10) { + if (!isLoadingMoreKandang) { + loadMoreKandang(); + } } - ); + }; const [showModal, setShowModal] = useState(false); const [showDeleteConfirm, setShowDeleteConfirm] = useState(false); @@ -351,7 +362,7 @@ export function MasterEmployeeContent() { - + Semua Kandang {kandangOptions.map((kandang) => ( ))} + {isLoadingMoreKandang && ( +
+ +
+ )} @@ -471,6 +487,12 @@ export function MasterEmployeeContent() { kandang_ids: selected.map((id) => Number(id)), }) } + onLoadMore={() => { + if (!isLoadingMoreKandang) { + loadMoreKandang(); + } + }} + isLoadingMore={isLoadingMoreKandang} placeholder='Pilih kandang' className='mt-1.5' /> From efcecf4f66844ccc6a0075f0c2ac5807989dab59 Mon Sep 17 00:00:00 2001 From: ValdiANS Date: Mon, 9 Mar 2026 17:14:35 +0700 Subject: [PATCH 2/2] fix: implement lazy loading in kandang select input --- .../components/pages/dashboard/Dashboard.tsx | 33 ++++++++++------ .../reports/DailyChecklistReportsContent.tsx | 39 ++++++++++++------- 2 files changed, 46 insertions(+), 26 deletions(-) diff --git a/src/figma-make/components/pages/dashboard/Dashboard.tsx b/src/figma-make/components/pages/dashboard/Dashboard.tsx index a924c2b3..f3e4b6d0 100644 --- a/src/figma-make/components/pages/dashboard/Dashboard.tsx +++ b/src/figma-make/components/pages/dashboard/Dashboard.tsx @@ -16,7 +16,7 @@ import { SelectValue, } from '@/figma-make/components/base/select'; import { Badge } from '@/figma-make/components/base/badge'; -import { Users, AlertCircle, Info } from 'lucide-react'; +import { Users, AlertCircle, Info, Loader2 } from 'lucide-react'; import { DateRangePicker } from '@/figma-make/components/base/date-range-picker'; import { BarChart, @@ -36,10 +36,10 @@ import { DailyChecklistSummary } from '@/types/api/daily-checklist/daily-checkli import { AxiosError } from 'axios'; import { httpClientFetcher, SWRHttpKey } from '@/services/http/client'; import { DailyChecklistApi } from '@/services/api/daily-checklist/daily-checklist'; -import { KandangApi } from '@/services/api/master-data'; import { useSelect } from '@/components/input/SelectInput'; import { isResponseError, isResponseSuccess } from '@/lib/api-helper'; import { formatDate } from '@/lib/helper'; +import { DailyChecklistKandangApi } from '@/services/api/daily-checklist/kandang'; const KANDANG_COLORS = [ '#0069e0', // Blue (primary) @@ -77,16 +77,20 @@ export function Dashboard() { httpClientFetcher ); - const { options: kandangOptions } = useSelect( - KandangApi.basePath, - 'id', - 'name', - 'search', - { - page: '1', - limit: '100', + const { + options: kandangOptions, + loadMore: loadMoreKandang, + isLoadingMore: isLoadingMoreKandang, + } = useSelect(DailyChecklistKandangApi.basePath, 'id', 'name'); + + const handleKandangScroll = (e: React.UIEvent) => { + const target = e.target as HTMLDivElement; + if (target.scrollHeight - target.scrollTop <= target.clientHeight + 10) { + if (!isLoadingMoreKandang) { + loadMoreKandang(); + } } - ); + }; const kandangColorMap: { [key: string]: string } = {}; (kandangOptions || []).forEach((k, index) => { @@ -164,7 +168,7 @@ export function Dashboard() { > - + Semua Kandang {kandangOptions.map((kandang) => ( ))} + {isLoadingMoreKandang && ( +
+ +
+ )} diff --git a/src/figma-make/components/pages/reports/DailyChecklistReportsContent.tsx b/src/figma-make/components/pages/reports/DailyChecklistReportsContent.tsx index 9c040e33..1f162c5c 100644 --- a/src/figma-make/components/pages/reports/DailyChecklistReportsContent.tsx +++ b/src/figma-make/components/pages/reports/DailyChecklistReportsContent.tsx @@ -11,7 +11,7 @@ import { SelectValue, } from '@/figma-make/components/base/select'; import { useSelect } from '@/components/input/SelectInput'; -import { AreaApi, KandangApi, LocationApi } from '@/services/api/master-data'; +import { AreaApi, LocationApi } from '@/services/api/master-data'; import useSWR from 'swr'; import { BaseApiResponse } from '@/types/api/api-general'; import { DailyChecklistReport } from '@/types/api/daily-checklist/daily-checklist'; @@ -26,7 +26,8 @@ import { ColumnDef } from '@tanstack/react-table'; import { PhaseApi } from '@/services/api/daily-checklist/phase'; import { EmployeeApi } from '@/services/api/daily-checklist/employee'; import { Button } from '@/figma-make/components/base/button'; -import { Download } from 'lucide-react'; +import { Download, Loader2 } from 'lucide-react'; +import { DailyChecklistKandangApi } from '@/services/api/daily-checklist/kandang'; const MONTH_OPTIONS = [ { value: '1', label: 'Januari' }, @@ -129,18 +130,23 @@ export function DailyChecklistReportsContent() { } ); - const { options: kandangOptions } = useSelect( - KandangApi.basePath, - 'id', - 'name', - 'search', - { - page: '1', - limit: '100', - area_id: tableFilterState.area_id, - location_id: tableFilterState.location_id, + const { + options: kandangOptions, + loadMore: loadMoreKandang, + isLoadingMore: isLoadingMoreKandang, + } = useSelect(DailyChecklistKandangApi.basePath, 'id', 'name', 'search', { + area_id: tableFilterState.area_id, + location_id: tableFilterState.location_id, + }); + + const handleKandangScroll = (e: React.UIEvent) => { + const target = e.target as HTMLDivElement; + if (target.scrollHeight - target.scrollTop <= target.clientHeight + 10) { + if (!isLoadingMoreKandang) { + loadMoreKandang(); + } } - ); + }; const { options: phaseOptions } = useSelect( PhaseApi.basePath, @@ -435,7 +441,7 @@ export function DailyChecklistReportsContent() { > - + Semua Kandang {kandangOptions.map((kandang) => ( ))} + {isLoadingMoreKandang && ( +
+ +
+ )}