fix: implement lazy loading in kandang select input

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<HTMLDivElement>) => {
+    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() {
                     >
                       <SelectValue placeholder='Semua Kandang' />
                     </SelectTrigger>
-                    <SelectContent>
+                    <SelectContent onScroll={handleKandangScroll}>
                       <SelectItem value='ALL'>Semua Kandang</SelectItem>
                       {kandangOptions.map((kandang) => (
                         <SelectItem
@@ -174,6 +178,11 @@ export function Dashboard() {
                           {kandang.label}
                         </SelectItem>
                       ))}
+                      {isLoadingMoreKandang && (
+                        <div className='flex justify-center p-2'>
+                          <Loader2 className='h-4 w-4 animate-spin text-gray-500' />
+                        </div>
+                      )}
                     </SelectContent>
                   </Select>
                 </div>