Merge branch 'development' of gitlab.com:mbugroup/lti-web-client into hotfix/adjustment-recording-fifo-stock

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(
+  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 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>

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'
               />

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(
+  const {
-    KandangApi.basePath,
+    options: kandangOptions,
-    'id',
+    loadMore: loadMoreKandang,
-    'name',
+    isLoadingMore: isLoadingMoreKandang,
-    'search',
+  } = useSelect(DailyChecklistKandangApi.basePath, 'id', 'name', 'search', {
-    {
-      page: '1',
-      limit: '100',
     area_id: tableFilterState.area_id,
     location_id: tableFilterState.location_id,
+  });
+
+  const handleKandangScroll = (e: React.UIEvent<HTMLDivElement>) => {
+    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() {
                   >
                     <SelectValue placeholder='Semua Kandang' />
                   </SelectTrigger>
-                  <SelectContent>
+                  <SelectContent onScroll={handleKandangScroll}>
                     <SelectItem value='ALL'>Semua Kandang</SelectItem>
                     {kandangOptions.map((kandang) => (
                       <SelectItem
@@ -445,6 +451,11 @@ export function DailyChecklistReportsContent() {
                         {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>