fix: use DailyChecklistKandangApi instead of KandangApi

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(
+  const {
-    KandangApi.basePath,
+    options: kandangOptions,
-    'id',
+    loadMore: loadMoreKandang,
-    'name',
+    isLoadingMore: isLoadingMoreKandang,
-    'search',
+  } = useSelect(DailyChecklistKandangApi.basePath, 'id', 'name');
-    {
+
-      page: '1',
+  const handleKandangScroll = (e: React.UIEvent<HTMLDivElement>) => {
-      limit: '100',
+    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() {
                   <SelectTrigger className='w-[180px] border-gray-200'>
                     <SelectValue placeholder='Semua Kandang' />
                   </SelectTrigger>
-                  <SelectContent>
+                  <SelectContent onScroll={handleKandangScroll}>
                     <SelectItem value='all'>Semua Kandang</SelectItem>
                     {kandangOptions.map((kandang) => (
                       <SelectItem
@@ -361,6 +372,11 @@ export function MasterEmployeeContent() {
                         {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>
 
@@ -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'
               />