fix: order select input options in ascending manner

src/figma-make/components/pages/dashboard/Dashboard.tsx

@@ -89,7 +89,10 @@ export function Dashboard() {
     options: kandangOptions,
     loadMore: loadMoreKandang,
     isLoadingMore: isLoadingMoreKandang,
-  } = useSelect(DailyChecklistKandangApi.basePath, 'id', 'name');
+  } = useSelect(DailyChecklistKandangApi.basePath, 'id', 'name', 'search', {
+    order_by: 'asc',
+    sort_by: 'name',
+  });
 
   const handleKandangScroll = (e: React.UIEvent<HTMLDivElement>) => {
     const target = e.target as HTMLDivElement;

src/figma-make/components/pages/list-daily-checklist/ListDailyChecklistContent.tsx

@@ -110,7 +110,10 @@ export function ListDailyChecklistContent() {
     options: kandangOptions,
     isLoadingMore: isLoadingMoreKandang,
     loadMore: loadMoreKandang,
-  } = useSelect(DailyChecklistKandangApi.basePath, 'id', 'name');
+  } = useSelect(DailyChecklistKandangApi.basePath, 'id', 'name', 'search', {
+    order_by: 'asc',
+    sort_by: 'name',
+  });
 
   const checklistList = isResponseSuccess(checklistListRes)
     ? checklistListRes.data || []

src/figma-make/components/pages/master-data/employee/MasterEmployeeContent.tsx

@@ -96,7 +96,10 @@ export function MasterEmployeeContent() {
     options: kandangOptions,
     loadMore: loadMoreKandang,
     isLoadingMore: isLoadingMoreKandang,
-  } = useSelect(DailyChecklistKandangApi.basePath, 'id', 'name');
+  } = useSelect(DailyChecklistKandangApi.basePath, 'id', 'name', 'search', {
+    order_by: 'asc',
+    sort_by: 'name',
+  });
 
   const handleKandangScroll = (e: React.UIEvent<HTMLDivElement>) => {
     const target = e.target as HTMLDivElement;

src/figma-make/components/pages/master-data/kandang/MasterKandangContent.tsx

@@ -368,7 +368,9 @@ export function MasterKandangContent() {
                     name='search'
                     placeholder='Cari kandang...'
                     value={tableFilterState.search}
-                    onChange={(e) => updateFilter('search', e.target.value)}
+                    onChange={(e) =>
+                      updateFilter('search', e.target.value, true)
+                    }
                     className={{
                       wrapper: 'w-full sm:w-[280px] border-gray-200',
                       inputWrapper: 'px-3 py-2 h-fit rounded-md',
@@ -383,7 +385,11 @@ export function MasterKandangContent() {
                 <Select
                   value={tableFilterState.location_id}
                   onValueChange={(value) =>
-                    updateFilter('location_id', value === 'all' ? '' : value)
+                    updateFilter(
+                      'location_id',
+                      value === 'all' ? '' : value,
+                      true
+                    )
                   }
                 >
                   <SelectTrigger className='w-[180px] border-gray-200'>

src/figma-make/components/pages/reports/DailyChecklistReportsContent.tsx

@@ -137,6 +137,8 @@ export function DailyChecklistReportsContent() {
   } = useSelect(DailyChecklistKandangApi.basePath, 'id', 'name', 'search', {
     area_id: tableFilterState.area_id,
     location_id: tableFilterState.location_id,
+    order_by: 'asc',
+    sort_by: 'name',
   });
 
   const handleKandangScroll = (e: React.UIEvent<HTMLDivElement>) => {
@@ -159,17 +161,24 @@ export function DailyChecklistReportsContent() {
     }
   );
 
-  const { options: employeeOptions } = useSelect(
+  const {
-    EmployeeApi.basePath,
+    options: employeeOptions,
-    'id',
+    loadMore: loadMoreEmployee,
-    'name',
+    isLoadingMore: isLoadingMoreEmployee,
-    'search',
+  } = useSelect(EmployeeApi.basePath, 'id', 'name', 'search', {
-    {
+    order_by: 'asc',
-      page: '1',
+    sort_by: 'name',
-      limit: '500',
+    kandang_id: tableFilterState.kandang_id,
-      kandang_id: tableFilterState.kandang_id,
+  });
+
+  const handleEmployeeScroll = (e: React.UIEvent<HTMLDivElement>) => {
+    const target = e.target as HTMLDivElement;
+    if (target.scrollHeight - target.scrollTop <= target.clientHeight + 10) {
+      if (!isLoadingMoreEmployee) {
+        loadMoreEmployee();
+      }
     }
-  );
+  };
 
   const currentMonthMaxDay = new Date(
     Number(tableFilterState.tahun),
@@ -493,7 +502,7 @@ export function DailyChecklistReportsContent() {
                   >
                     <SelectValue placeholder='Semua ABK' />
                   </SelectTrigger>
-                  <SelectContent>
+                  <SelectContent onScroll={handleEmployeeScroll}>
                     <SelectItem value='ALL'>Semua ABK</SelectItem>
                     {employeeOptions.map((employee) => (
                       <SelectItem
@@ -503,6 +512,11 @@ export function DailyChecklistReportsContent() {
                         {employee.label}
                       </SelectItem>
                     ))}
+                    {isLoadingMoreEmployee && (
+                      <div className='flex justify-center p-2'>
+                        <Loader2 className='h-4 w-4 animate-spin text-gray-500' />
+                      </div>
+                    )}
                   </SelectContent>
                 </Select>
               </div>