fix: order select input options in ascending manner

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(
-    EmployeeApi.basePath,
-    'id',
-    'name',
-    'search',
-    {
-      page: '1',
-      limit: '500',
-      kandang_id: tableFilterState.kandang_id,
+  const {
+    options: employeeOptions,
+    loadMore: loadMoreEmployee,
+    isLoadingMore: isLoadingMoreEmployee,
+  } = useSelect(EmployeeApi.basePath, 'id', 'name', 'search', {
+    order_by: 'asc',
+    sort_by: 'name',
+    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>