Merge branch 'development' of gitlab.com:mbugroup/lti-web-client into dev/restu

package-lock.json

@@ -26,9 +26,9 @@
         "next": "15.5.9",
         "next-themes": "^0.4.6",
         "radix-ui": "^1.4.3",
-        "react": "19.1.0",
+        "react": "^19.1.2",
         "react-day-picker": "^9.11.1",
-        "react-dom": "19.1.0",
+        "react-dom": "^19.1.2",
         "react-dropzone": "^14.3.8",
         "react-hook-form": "^7.70.0",
         "react-hot-toast": "^2.6.0",
@@ -8174,12 +8174,12 @@
       }
     },
     "node_modules/jspdf-autotable": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/jspdf-autotable/-/jspdf-autotable-5.0.2.tgz",
-      "integrity": "sha512-YNKeB7qmx3pxOLcNeoqAv3qTS7KuvVwkFe5AduCawpop3NOkBUtqDToxNc225MlNecxT4kP2Zy3z/y/yvGdXUQ==",
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/jspdf-autotable/-/jspdf-autotable-5.0.7.tgz",
+      "integrity": "sha512-2wr7H6liNDBYNwt25hMQwXkEWFOEopgKIvR1Eukuw6Zmprm/ZcnmLTQEjW7Xx3FCbD3v7pflLcnMAv/h1jFDQw==",
       "license": "MIT",
       "peerDependencies": {
-        "jspdf": "^2 || ^3"
+        "jspdf": "^2 || ^3 || ^4"
       }
     },
     "node_modules/jsx-ast-utils": {
@@ -9376,9 +9376,9 @@
       }
     },
     "node_modules/react": {
-      "version": "19.1.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
-      "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
+      "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
       "license": "MIT",
       "peer": true,
       "engines": {
@@ -9407,16 +9407,16 @@
       }
     },
     "node_modules/react-dom": {
-      "version": "19.1.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
-      "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
+      "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "scheduler": "^0.26.0"
+        "scheduler": "^0.27.0"
       },
       "peerDependencies": {
-        "react": "^19.1.0"
+        "react": "^19.2.3"
       }
     },
     "node_modules/react-dropzone": {
@@ -9916,9 +9916,9 @@
       }
     },
     "node_modules/scheduler": {
-      "version": "0.26.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
-      "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
       "license": "MIT"
     },
     "node_modules/semver": {

package.json

@@ -29,9 +29,9 @@
     "next": "15.5.9",
     "next-themes": "^0.4.6",
     "radix-ui": "^1.4.3",
-    "react": "19.1.0",
+    "react": "^19.1.2",
     "react-day-picker": "^9.11.1",
-    "react-dom": "19.1.0",
+    "react-dom": "^19.1.2",
     "react-dropzone": "^14.3.8",
     "react-hook-form": "^7.70.0",
     "react-hot-toast": "^2.6.0",

src/figma-make/components/base/multi-select.tsx

@@ -58,7 +58,7 @@ export function MultiSelect({
   };
 
   return (
-    <Popover open={open} onOpenChange={setOpen}>
+    <Popover open={open} onOpenChange={setOpen} modal>
       <PopoverTrigger asChild>
         <Button
           variant='outline'
@@ -115,8 +115,8 @@ export function MultiSelect({
             onValueChange={onSearchChange}
           />
           <CommandEmpty>No item found.</CommandEmpty>
-          <CommandList>
-            <CommandGroup className='max-h-64 overflow-auto'>
+          <CommandList className='max-h-[300px] overflow-y-auto'>
+            <CommandGroup className='overflow-visible'>
               {options.map((option) => (
                 <CommandItem
                   key={option.value}

src/figma-make/components/base/select.tsx

@@ -61,7 +61,7 @@ function SelectContent({
       <SelectPrimitive.Content
         data-slot='select-content'
         className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-[300px] min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
           position === 'popper' &&
             'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
           className

src/figma-make/components/pages/daily-checklist/DailyChecklistContent.tsx

@@ -7,7 +7,6 @@ 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';
 import { Input } from '@/figma-make/components/base/input';
-import { Textarea } from '@/figma-make/components/base/textarea';
 import { Badge } from '@/figma-make/components/base/badge';
 import {
   Select,
@@ -26,7 +25,20 @@ import {
 } from '@/figma-make/components/base/dialog';
 import { DatePicker } from '@/figma-make/components/base/date-picker';
 import { toast } from 'sonner';
-import { supabase, isSupabaseConfigured } from '@/figma-make/lib/supabase';
+import { useSelect } from '@/components/input/SelectInput';
+import { KandangApi } from '@/services/api/master-data';
+import { DailyChecklistApi } from '@/services/api/daily-checklist/daily-checklist';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import useSWR from 'swr';
+import { BaseApiResponse } from '@/types/api/api-general';
+import { AxiosError } from 'axios';
+import { httpClientFetcher, SWRHttpKey } from '@/services/http/client';
+import { PhaseApi } from '@/services/api/daily-checklist/phase';
+import { EmployeeApi } from '@/services/api/daily-checklist/employee';
+import { Employee } from '@/types/api/daily-checklist/employee';
+import { PhaseActivityApi } from '@/services/api/daily-checklist/phase-activity';
+import { PhaseActivity } from '@/types/api/daily-checklist/phase-activity';
+import DebouncedTextArea from '@/components/input/DebouncedTextArea';
 
 // Static categories
 const CATEGORIES = [
@@ -38,59 +50,68 @@ const CATEGORIES = [
 
 const TIME_TYPE_ORDER = ['umum', 'pagi', 'siang', 'sore', 'malam'];
 const TIME_TYPE_LABELS: { [key: string]: string } = {
-  umum: 'Umum',
-  pagi: 'Pagi',
-  siang: 'Siang',
-  sore: 'Sore',
-  malam: 'Malam',
+  Umum: 'Umum',
+  Pagi: 'Pagi',
+  Siang: 'Siang',
+  Sore: 'Sore',
+  Malam: 'Malam',
 };
 
-interface Kandang {
-  id: string;
-  name: string;
-}
-
 interface Phase {
   id: string;
   name: 'string';
   category: string;
 }
 
-interface Activity {
-  id: string;
-  phase_id: string;
-  name: string;
-  description?: string;
-  time_type: string;
-}
-
-interface Employee {
-  id: string;
-  name: string;
-  kandang_id: string;
-}
-
-interface TaskAssignment {
-  task_id: string;
-  employee_id: string;
-  checked: boolean;
-  note: string | null;
-}
-
 export function DailyChecklistContent() {
+  const [kandangId, setKandangId] = useState('');
+
+  const { options: kandangOptions, isLoadingOptions: isLoadingKandangs } =
+    useSelect(KandangApi.basePath, 'id', 'name', 'search', {
+      page: '1',
+      limit: '100',
+    });
+
+  const {
+    data: phases,
+    isLoading: isLoadingPhases,
+    mutate: refreshPhases,
+  } = useSWR<
+    BaseApiResponse<Phase[] | undefined>,
+    AxiosError<BaseApiResponse>,
+    SWRHttpKey
+  >(`${PhaseApi.basePath}?page=1&limit=100`, httpClientFetcher, {
+    keepPreviousData: true,
+  });
+
+  const {
+    data: employeesRes,
+    isLoading: isLoadingEmployees,
+    mutate: refreshEmployees,
+  } = useSWR(
+    `${EmployeeApi.basePath}?page=1&limit=500&kandang_id=${kandangId}&is_active=true`,
+    EmployeeApi.getAllFetcher,
+    {
+      keepPreviousData: true,
+    }
+  );
+
+  const allPhases = isResponseSuccess(phases) ? phases.data || [] : [];
+  const employees = isResponseSuccess(employeesRes)
+    ? employeesRes.data || []
+    : [];
+
   const [date, setDate] = useState(() => {
     const today = new Date();
     return today.toISOString().split('T')[0];
   });
-  const [kandangId, setKandangId] = useState('');
+
   const [selectedCategory, setSelectedCategory] = useState('');
   const [selectedPhaseIds, setSelectedPhaseIds] = useState<string[]>([]);
-  const [checklistName, setChecklistName] = useState('');
 
-  const [kandangList, setKandangList] = useState<Kandang[]>([]);
-  const [allPhases, setAllPhases] = useState<Phase[]>([]);
-  const [employees, setEmployees] = useState<Employee[]>([]);
-  const [selectedEmployees, setSelectedEmployees] = useState<Employee[]>([]);
+  const [selectedEmployees, setSelectedEmployees] = useState<
+    { id: number; name: string }[]
+  >([]);
 
   const [dailyChecklistId, setDailyChecklistId] = useState<string | null>(null);
   const [checklistStatus, setChecklistStatus] = useState<string>('DRAFT');
@@ -98,7 +119,7 @@ export function DailyChecklistContent() {
 
   // Activities grouped by phase
   const [activitiesByPhase, setActivitiesByPhase] = useState<{
-    [phaseId: string]: Activity[];
+    [phaseId: string]: PhaseActivity[];
   }>({});
 
   // Task IDs mapped by phase_activity_id for quick lookup
@@ -116,7 +137,7 @@ export function DailyChecklistContent() {
   const [showAbkModal, setShowAbkModal] = useState(false);
   const [showPhaseModal, setShowPhaseModal] = useState(false);
   const [tempSelectedEmployees, setTempSelectedEmployees] = useState<
-    Employee[]
+    { id: number; name: string }[]
   >([]);
   const [tempSelectedPhaseIds, setTempSelectedPhaseIds] = useState<string[]>(
     []
@@ -126,7 +147,6 @@ export function DailyChecklistContent() {
 
   const [loading, setLoading] = useState(false);
   const [initialLoading, setInitialLoading] = useState(true);
-  const [datePickerOpen, setDatePickerOpen] = useState(false);
 
   // Format date for display
   const formatDateForDisplay = (dateStr: string) => {
@@ -143,23 +163,13 @@ export function DailyChecklistContent() {
 
   // Fetch master data on mount
   useEffect(() => {
-    if (!isSupabaseConfigured()) {
-      console.warn(
-        'Supabase not configured. Please add environment variables.'
-      );
-      setInitialLoading(false);
-      return;
-    }
-
-    fetchKandang();
-    fetchAllPhases();
     setInitialLoading(false);
   }, []);
 
   // Check for existing checklist when unique key changes
   useEffect(() => {
     const checkAndLoadChecklist = async () => {
-      if (!date || !kandangId || !selectedCategory || !isSupabaseConfigured()) {
+      if (!date || !kandangId || !selectedCategory) {
         setDailyChecklistId(null);
         setChecklistStatus('DRAFT');
         setIsEditMode(false);
@@ -171,55 +181,47 @@ export function DailyChecklistContent() {
       }
 
       try {
-        // UPSERT to get or create checklist (UNIQUE KEY: date, kandang_id, category)
-        const { data: checklist, error } = await supabase
-          .from('daily_checklists')
-          .upsert(
-            {
-              date,
-              kandang_id: kandangId,
-              category: selectedCategory,
-              status: 'DRAFT',
-              updated_at: new Date().toISOString(),
-            },
-            {
-              onConflict: 'date,kandang_id,category',
-              ignoreDuplicates: false,
-            }
-          )
-          .select()
-          .single();
+        const checklist = await DailyChecklistApi.create({
+          date,
+          kandang_id: Number(kandangId),
+          category: selectedCategory,
+          status: 'DRAFT',
+        });
 
-        if (error) {
-          console.error('Error upserting checklist:', error);
+        if (isResponseError(checklist)) {
+          console.error('Error upserting checklist:', checklist.message);
           toast.error('Gagal memuat checklist');
           return;
         }
 
-        setDailyChecklistId(checklist.id);
-        setChecklistStatus(checklist.status);
+        setDailyChecklistId(String(checklist?.data?.id));
+        setChecklistStatus(String(checklist?.data?.status));
 
-        // Load existing phases for this checklist
-        const { data: existingPhases, error: phaseError } = await supabase
-          .from('daily_checklist_phases')
-          .select('phase_id')
-          .eq('checklist_id', checklist.id); // ✅ Uses checklist_id
+        const existingPhases = await DailyChecklistApi.getOneDailyChecklist(
+          String(checklist?.data.id)
+        );
 
-        if (phaseError) {
-          console.error('Error loading phases:', phaseError);
-        } else if (existingPhases && existingPhases.length > 0) {
+        if (isResponseError(existingPhases)) {
+          console.error('Error loading phases:', existingPhases.message);
+        } else if (
+          existingPhases &&
+          existingPhases.data &&
+          existingPhases.data.phases.length > 0
+        ) {
           // Existing checklist - EDIT MODE
           setIsEditMode(true);
-          const phaseIds = existingPhases.map((p) => p.phase_id);
+          const phaseIds = existingPhases.data.phases.map((p) =>
+            String(p.phase_id)
+          );
           setSelectedPhaseIds(phaseIds);
 
-          if (checklist.status === 'DRAFT') {
+          if (checklist?.data?.status === 'DRAFT') {
             toast.info('Checklist ditemukan - Mode Edit (Draft)', {
               description:
                 'Anda dapat menambah atau mengubah data checklist ini',
             });
           } else {
-            toast.warning(`Checklist sudah ${checklist.status}`, {
+            toast.warning(`Checklist sudah ${checklist?.data?.status}`, {
               description: 'Checklist tidak dapat diedit',
             });
           }
@@ -239,32 +241,27 @@ export function DailyChecklistContent() {
   // Load activities and tasks when phases change
   useEffect(() => {
     const loadActivitiesAndTasks = async () => {
-      if (
-        !dailyChecklistId ||
-        selectedPhaseIds.length === 0 ||
-        !isSupabaseConfigured()
-      ) {
+      if (!dailyChecklistId || selectedPhaseIds.length === 0) {
         setActivitiesByPhase({});
         setTaskIdsByPhaseActivityId({});
         return;
       }
 
       try {
-        // Fetch activities for selected phases
-        const { data: activities, error: actError } = await supabase
-          .from('phase_activities')
-          .select('id, phase_id, name, description, time_type')
-          .in('phase_id', selectedPhaseIds)
-          .order('id', { ascending: true }); // ✅ Urutan berdasarkan ID (yang paling awal diinput di atas)
+        const activitiesRes = await PhaseActivityApi.getAll({
+          phase_ids: selectedPhaseIds.join(','),
+        });
 
-        if (actError) {
-          console.error('Error loading activities:', actError);
+        if (isResponseError(activitiesRes)) {
+          console.error('Error loading activities:', activitiesRes.message);
           toast.error('Gagal memuat aktivitas');
           return;
         }
 
+        const activities = activitiesRes?.data || [];
+
         // Group activities by phase
-        const grouped: { [phaseId: string]: Activity[] } = {};
+        const grouped: { [phaseId: string]: PhaseActivity[] } = {};
         (activities || []).forEach((act) => {
           if (!grouped[act.phase_id]) {
             grouped[act.phase_id] = [];
@@ -283,28 +280,30 @@ export function DailyChecklistContent() {
         }));
 
         if (taskUpserts.length > 0) {
-          const { data: tasks, error: taskError } = await supabase
-            .from('daily_checklist_activity_tasks')
-            .upsert(taskUpserts, {
-              onConflict: 'checklist_id,phase_activity_id',
-              ignoreDuplicates: false,
-            })
-            .select('id, phase_activity_id');
+          const existingDailyChecklist =
+            await DailyChecklistApi.getOneDailyChecklist(
+              String(dailyChecklistId)
+            );
 
-          if (taskError) {
-            console.error('Error upserting tasks:', taskError);
+          if (isResponseError(existingDailyChecklist)) {
+            console.error(
+              'Error loading assignments:',
+              existingDailyChecklist.message
+            );
             return;
           }
 
           // Build task ID lookup
           const taskMap: { [phaseActivityId: string]: string } = {};
-          (tasks || []).forEach((task) => {
-            taskMap[task.phase_activity_id] = task.id;
+          (existingDailyChecklist?.data?.tasks || []).forEach((task) => {
+            taskMap[String(task.phase_activity_id)] = String(task.id);
           });
           setTaskIdsByPhaseActivityId(taskMap);
 
           // Load existing assignments for these tasks
-          await loadAssignments(tasks.map((t) => t.id));
+          await loadAssignments(
+            existingDailyChecklist?.data?.tasks?.map((t) => String(t.id)) || []
+          );
         }
       } catch (error) {
         console.error('Error loading activities and tasks:', error);
@@ -316,29 +315,28 @@ export function DailyChecklistContent() {
 
   // Load employees when kandang changes
   useEffect(() => {
-    if (kandangId && isSupabaseConfigured()) {
-      fetchEmployees(kandangId);
+    if (kandangId) {
       // ✅ Clear selected employees ketika kandang berubah (reset ABK assignment)
       setSelectedEmployees([]);
       setAssignments({});
     } else {
-      setEmployees([]);
       setSelectedEmployees([]);
       setAssignments({});
     }
   }, [kandangId]);
 
   const loadAssignments = async (taskIds: string[]) => {
-    if (taskIds.length === 0 || !isSupabaseConfigured()) return;
+    if (taskIds.length === 0) return;
 
     try {
-      const { data, error } = await supabase
-        .from('daily_checklist_activity_task_assignments')
-        .select('task_id, employee_id, checked, note')
-        .in('task_id', taskIds);
+      const existingDailyChecklist =
+        await DailyChecklistApi.getOneDailyChecklist(String(dailyChecklistId));
 
-      if (error) {
-        console.error('Error loading assignments:', error);
+      if (isResponseError(existingDailyChecklist)) {
+        console.error(
+          'Error loading assignments:',
+          existingDailyChecklist.message
+        );
         return;
       }
 
@@ -349,30 +347,43 @@ export function DailyChecklistContent() {
         };
       } = {};
 
-      (data || []).forEach((assignment) => {
-        if (!assignmentMap[assignment.task_id]) {
-          assignmentMap[assignment.task_id] = {};
+      (existingDailyChecklist?.data.tasks || []).forEach(
+        (dailyChecklistTask) => {
+          if (!assignmentMap[dailyChecklistTask.id]) {
+            assignmentMap[dailyChecklistTask.id] = {};
+          }
+
+          dailyChecklistTask.assignments.forEach((assignment) => {
+            if (!assignmentMap[dailyChecklistTask.id]) {
+              assignmentMap[dailyChecklistTask.id] = {};
+            }
+            assignmentMap[dailyChecklistTask.id][assignment.employee.id] = {
+              checked: assignment.checked,
+              note: assignment.note || '',
+            };
+          });
         }
-        assignmentMap[assignment.task_id][assignment.employee_id] = {
-          checked: assignment.checked,
-          note: assignment.note || '',
-        };
-      });
+      );
 
       setAssignments(assignmentMap);
 
       // Load employees from assignments
       const employeeIds = Array.from(
-        new Set((data || []).map((a) => a.employee_id))
+        new Set(
+          (existingDailyChecklist?.data.assigned_employees || []).map(
+            (a) => a.id
+          )
+        )
       );
-      if (employeeIds.length > 0) {
-        const { data: empData, error: empError } = await supabase
-          .from('employees')
-          .select('id, name, kandang_id')
-          .in('id', employeeIds);
 
-        if (!empError && empData) {
-          setSelectedEmployees(empData);
+      if (employeeIds.length > 0) {
+        const existingDailyChecklist =
+          await DailyChecklistApi.getOneDailyChecklist(
+            String(dailyChecklistId)
+          );
+
+        if (isResponseSuccess(existingDailyChecklist)) {
+          setSelectedEmployees(existingDailyChecklist.data.assigned_employees);
         }
       }
     } catch (error) {
@@ -380,68 +391,6 @@ export function DailyChecklistContent() {
     }
   };
 
-  const fetchKandang = async () => {
-    if (!isSupabaseConfigured()) return;
-
-    try {
-      const { data, error } = await supabase
-        .from('kandang')
-        .select('id, name')
-        .order('name', { ascending: true });
-
-      if (error) {
-        console.error('Error fetching kandang:', error);
-        return;
-      }
-
-      setKandangList(data || []);
-    } catch (error) {
-      console.error('Error fetching kandang:', error);
-    }
-  };
-
-  const fetchAllPhases = async () => {
-    if (!isSupabaseConfigured()) return;
-
-    try {
-      const { data, error } = await supabase
-        .from('phases')
-        .select('id, name, category')
-        .order('id', { ascending: true }); // ✅ Urutan berdasarkan ID (yang paling awal diinput di atas)
-
-      if (error) {
-        console.error('Error fetching phases:', error);
-        return;
-      }
-
-      setAllPhases(data || []);
-    } catch (error) {
-      console.error('Error fetching phases:', error);
-    }
-  };
-
-  const fetchEmployees = async (kandangId: string) => {
-    if (!isSupabaseConfigured()) return;
-
-    try {
-      const { data, error } = await supabase
-        .from('employees')
-        .select('id, name, kandang_id')
-        .eq('kandang_id', kandangId)
-        .eq('is_active', true)
-        .order('name', { ascending: true });
-
-      if (error) {
-        console.error('Error fetching employees:', error);
-        return;
-      }
-
-      setEmployees(data || []);
-    } catch (error) {
-      console.error('Error fetching employees:', error);
-    }
-  };
-
   // Phase selection modal
   const handleAddPhase = () => {
     if (!selectedCategory) {
@@ -464,31 +413,25 @@ export function DailyChecklistContent() {
   };
 
   const applyPhaseSelection = async () => {
-    if (!dailyChecklistId || !isSupabaseConfigured()) {
+    if (!dailyChecklistId) {
       toast.error('Checklist belum tersedia');
       return;
     }
 
     try {
-      // Delete existing phase links
-      await supabase
-        .from('daily_checklist_phases')
-        .delete()
-        .eq('checklist_id', dailyChecklistId);
-
       // Insert new phase links
       if (tempSelectedPhaseIds.length > 0) {
-        const phaseLinks = tempSelectedPhaseIds.map((phaseId) => ({
-          checklist_id: dailyChecklistId,
-          phase_id: phaseId,
-        }));
+        const setDailyChecklistPhaseRes =
+          await DailyChecklistApi.setDailyChecklistPhase(
+            dailyChecklistId,
+            tempSelectedPhaseIds
+          );
 
-        const { error } = await supabase
-          .from('daily_checklist_phases')
-          .insert(phaseLinks);
-
-        if (error) {
-          console.error('Error saving phases:', error);
+        if (isResponseError(setDailyChecklistPhaseRes)) {
+          console.error(
+            'Error saving phases:',
+            setDailyChecklistPhaseRes.message
+          );
           toast.error('Gagal menyimpan fase');
           return;
         }
@@ -545,18 +488,23 @@ export function DailyChecklistContent() {
       (emp) => !tempSelectedEmployees.find((temp) => temp.id === emp.id)
     );
 
-    if (removedEmployees.length > 0 && isSupabaseConfigured()) {
-      const taskIds = Object.values(taskIdsByPhaseActivityId);
-      if (taskIds.length > 0) {
-        await supabase
-          .from('daily_checklist_activity_task_assignments')
-          .delete()
-          .in('task_id', taskIds)
-          .in(
-            'employee_id',
-            removedEmployees.map((e) => e.id)
+    if (removedEmployees.length > 0) {
+      removedEmployees.forEach(async (removedEmp) => {
+        const removeEmployeeAssignmentRes =
+          await DailyChecklistApi.removeEmployeeAssignment(
+            dailyChecklistId,
+            String(removedEmp.id)
           );
-      }
+
+        if (isResponseError(removeEmployeeAssignmentRes)) {
+          console.error(
+            'Error removing employee assignment:',
+            removeEmployeeAssignmentRes.message
+          );
+          toast.error('Gagal menghapus tugas');
+          return;
+        }
+      });
 
       // Remove from state
       const newAssignments = { ...assignments };
@@ -573,7 +521,7 @@ export function DailyChecklistContent() {
       (temp) => !selectedEmployees.find((emp) => emp.id === temp.id)
     );
 
-    if (addedEmployees.length > 0 && isSupabaseConfigured()) {
+    if (addedEmployees.length > 0) {
       const taskIds = Object.values(taskIdsByPhaseActivityId);
       const newAssignments: {
         task_id: string;
@@ -586,20 +534,23 @@ export function DailyChecklistContent() {
         addedEmployees.forEach((emp) => {
           newAssignments.push({
             task_id: taskId,
-            employee_id: emp.id,
+            employee_id: String(emp.id),
             checked: false,
             note: null,
           });
         });
       });
 
-      if (newAssignments.length > 0) {
-        await supabase
-          .from('daily_checklist_activity_task_assignments')
-          .upsert(newAssignments, {
-            onConflict: 'task_id,employee_id',
-            ignoreDuplicates: false,
-          });
+      const assignEmployeeRes =
+        await DailyChecklistApi.setDailyChecklistEmployees(
+          dailyChecklistId,
+          addedEmployees.map((emp) => String(emp.id))
+        );
+
+      if (isResponseError(assignEmployeeRes)) {
+        console.error('Error assigning employees:', assignEmployeeRes.message);
+        toast.error('Gagal mengassign ABK: ' + assignEmployeeRes.message);
+        return;
       }
     }
 
@@ -610,16 +561,15 @@ export function DailyChecklistContent() {
   };
 
   const handleRemoveAbk = async (employeeId: string) => {
-    if (!isSupabaseConfigured()) return;
+    const deleteEmployeeRes = await DailyChecklistApi.removeEmployeeAssignment(
+      String(dailyChecklistId),
+      String(employeeId)
+    );
 
-    // Delete assignments for this employee
-    const taskIds = Object.values(taskIdsByPhaseActivityId);
-    if (taskIds.length > 0) {
-      await supabase
-        .from('daily_checklist_activity_task_assignments')
-        .delete()
-        .in('task_id', taskIds)
-        .eq('employee_id', employeeId);
+    if (isResponseError(deleteEmployeeRes)) {
+      console.error('Error deleting employee:', deleteEmployeeRes.message);
+      toast.error('Gagal menghapus ABK: ' + deleteEmployeeRes.message);
+      return;
     }
 
     // Remove from state
@@ -629,7 +579,9 @@ export function DailyChecklistContent() {
     });
     setAssignments(newAssignments);
 
-    setSelectedEmployees(selectedEmployees.filter((e) => e.id !== employeeId));
+    setSelectedEmployees(
+      selectedEmployees.filter((e) => String(e.id) !== employeeId)
+    );
   };
 
   const handleCheckboxChange = async (
@@ -645,7 +597,6 @@ export function DailyChecklistContent() {
       checked,
       taskId,
       hasTaskId: !!taskId,
-      isSupabaseConfigured: isSupabaseConfigured(),
       checklistStatus,
       isEditable,
     });
@@ -657,12 +608,6 @@ export function DailyChecklistContent() {
       return;
     }
 
-    if (!isSupabaseConfigured()) {
-      console.error('[CHECKBOX] Supabase not configured');
-      toast.error('Database tidak terkonfigurasi');
-      return;
-    }
-
     if (!isEditable) {
       console.warn(
         '[CHECKBOX] Checklist is not editable, status:',
@@ -692,24 +637,23 @@ export function DailyChecklistContent() {
 
     // Update database
     const payload = {
-      task_id: taskId,
-      employee_id: employeeId,
+      task_id: Number(taskId),
+      employee_id: Number(employeeId),
       checked,
       note: assignments[taskId]?.[employeeId]?.note || null,
     };
 
     console.log('[CHECKBOX] Saving to database:', payload);
 
-    const { error } = await supabase
-      .from('daily_checklist_activity_task_assignments')
-      .upsert(payload, {
-        onConflict: 'task_id,employee_id',
-        ignoreDuplicates: false,
-      });
+    const checkOrUncheckAssignmentRes =
+      await DailyChecklistApi.checkOrUncheckAssignment(payload);
 
-    if (error) {
-      console.error('[CHECKBOX] Database error:', error);
-      toast.error('Gagal menyimpan: ' + error.message);
+    if (isResponseError(checkOrUncheckAssignmentRes)) {
+      console.error(
+        '[CHECKBOX] Database error:',
+        checkOrUncheckAssignmentRes.message
+      );
+      toast.error('Gagal menyimpan: ' + checkOrUncheckAssignmentRes.message);
 
       // Revert state on error
       setAssignments((prev) => ({
@@ -734,26 +678,25 @@ export function DailyChecklistContent() {
     note: string
   ) => {
     const taskId = taskIdsByPhaseActivityId[activityId];
-    if (!taskId || !isSupabaseConfigured()) return;
+    if (!taskId) return;
 
     // Update database
-    const { error } = await supabase
-      .from('daily_checklist_activity_task_assignments')
-      .upsert(
-        {
-          task_id: taskId,
-          employee_id: employeeId,
-          checked: assignments[taskId]?.[employeeId]?.checked || false,
-          note: note || null,
-        },
-        {
-          onConflict: 'task_id,employee_id',
-          ignoreDuplicates: false,
-        }
-      );
+    const payload = {
+      task_id: Number(taskId),
+      employee_id: Number(employeeId),
+      checked: assignments[taskId]?.[employeeId]?.checked || false,
+      note: note || null,
+    };
 
-    if (error) {
-      console.error('Error updating note:', error);
+    const checkOrUncheckAssignmentRes =
+      await DailyChecklistApi.checkOrUncheckAssignment(payload);
+
+    if (isResponseError(checkOrUncheckAssignmentRes)) {
+      console.error(
+        '[CHECKBOX] Database error:',
+        checkOrUncheckAssignmentRes.message
+      );
+      toast.error('Gagal menyimpan: ' + checkOrUncheckAssignmentRes.message);
       return;
     }
 
@@ -771,7 +714,7 @@ export function DailyChecklistContent() {
   };
 
   const handleSubmit = async () => {
-    if (!dailyChecklistId || !isSupabaseConfigured()) return;
+    if (!dailyChecklistId) return;
 
     if (selectedEmployees.length === 0) {
       toast.error('Pilih minimal 1 ABK');
@@ -786,17 +729,10 @@ export function DailyChecklistContent() {
     setLoading(true);
 
     try {
-      // Update status to SUBMITTED
-      const { error } = await supabase
-        .from('daily_checklists')
-        .update({
-          status: 'SUBMITTED',
-          updated_at: new Date().toISOString(),
-        })
-        .eq('id', dailyChecklistId);
+      const submitRes = await DailyChecklistApi.submit(dailyChecklistId);
 
-      if (error) {
-        console.error('Error submitting:', error);
+      if (isResponseError(submitRes)) {
+        console.error('Error submitting:', submitRes.message);
         toast.error('Gagal submit checklist');
         return;
       }
@@ -841,13 +777,13 @@ export function DailyChecklistContent() {
       [phaseId: string]: {
         phase: Phase;
         timeGroups: {
-          [timeType: string]: Activity[];
+          [timeType: string]: PhaseActivity[];
         };
       };
     } = {};
 
     const selectedPhasesData = allPhases.filter((p) =>
-      selectedPhaseIds.includes(p.id)
+      selectedPhaseIds.includes(String(p.id))
     );
 
     selectedPhasesData.forEach((phase) => {
@@ -900,7 +836,7 @@ export function DailyChecklistContent() {
   }
 
   return (
-    <div className='min-h-screen bg-[#F9FAFB]'>
+    <div className='min-h-screen'>
       <div className='p-6'>
         {/* Page Title */}
         <div className='mb-6'>
@@ -967,9 +903,12 @@ export function DailyChecklistContent() {
                     <SelectValue placeholder='Pilih kandang' />
                   </SelectTrigger>
                   <SelectContent>
-                    {kandangList.map((kandang) => (
-                      <SelectItem key={kandang.id} value={kandang.id}>
-                        {kandang.name}
+                    {kandangOptions.map((kandang) => (
+                      <SelectItem
+                        key={kandang.value}
+                        value={String(kandang.value)}
+                      >
+                        {kandang.label}
                       </SelectItem>
                     ))}
                   </SelectContent>
@@ -1022,7 +961,7 @@ export function DailyChecklistContent() {
                 {selectedPhaseIds.length > 0 ? (
                   <div className='flex flex-wrap gap-2'>
                     {allPhases
-                      .filter((p) => selectedPhaseIds.includes(p.id))
+                      .filter((p) => selectedPhaseIds.includes(String(p.id)))
                       .map((phase) => (
                         <Badge
                           key={phase.id}
@@ -1069,7 +1008,7 @@ export function DailyChecklistContent() {
                         {emp.name}
                         {isEditable && (
                           <button
-                            onClick={() => handleRemoveAbk(emp.id)}
+                            onClick={() => handleRemoveAbk(String(emp.id))}
                             className='ml-2 hover:text-gray-900'
                           >
                             <X className='w-3 h-3' />
@@ -1226,8 +1165,8 @@ export function DailyChecklistContent() {
                                           }
                                           onChange={(e) =>
                                             handleCheckboxChange(
-                                              activity.id,
-                                              emp.id,
+                                              String(activity.id),
+                                              String(emp.id),
                                               e.target.checked
                                             )
                                           }
@@ -1237,7 +1176,11 @@ export function DailyChecklistContent() {
                                       </td>
                                     ))}
                                     <td className='py-3 px-4'>
-                                      <Textarea
+                                      <DebouncedTextArea
+                                        delay={500}
+                                        name='notes'
+                                        rows={1}
+                                        placeholder='Catatan (opsional)'
                                         value={
                                           taskId && selectedEmployees.length > 0
                                             ? assignments[taskId]?.[
@@ -1248,16 +1191,13 @@ export function DailyChecklistContent() {
                                         onChange={(e) => {
                                           if (selectedEmployees.length > 0) {
                                             handleNoteChange(
-                                              activity.id,
-                                              selectedEmployees[0].id,
+                                              String(activity.id),
+                                              String(selectedEmployees[0].id),
                                               e.target.value
                                             );
                                           }
                                         }}
-                                        placeholder='Catatan (opsional)'
                                         disabled={!isEditable}
-                                        className='text-sm min-h-[36px] resize-none'
-                                        rows={1}
                                       />
                                     </td>
                                   </tr>
@@ -1401,7 +1341,9 @@ export function DailyChecklistContent() {
             {filteredPhases.length > 0 ? (
               <div className='space-y-1.5'>
                 {filteredPhases.map((phase) => {
-                  const isChecked = tempSelectedPhaseIds.includes(phase.id);
+                  const isChecked = tempSelectedPhaseIds.includes(
+                    String(phase.id)
+                  );
 
                   return (
                     <label
@@ -1415,7 +1357,7 @@ export function DailyChecklistContent() {
                       <input
                         type='checkbox'
                         checked={isChecked}
-                        onChange={() => toggleTempPhase(phase.id)}
+                        onChange={() => toggleTempPhase(String(phase.id))}
                         className='checkbox-clean mt-0.5'
                       />
                       <div className='flex-1 min-w-0'>
@@ -1507,9 +1449,22 @@ export function DailyChecklistContent() {
                   const isChecked = tempSelectedEmployees.find(
                     (e) => e.id === emp.id
                   );
-                  const kandang = kandangList.find(
-                    (k) => k.id === emp.kandang_id
-                  );
+                  // const kandang = kandangOptions.find((k) => {
+                  //   const formattedKandangIds = emp.kandangs.map((empKandang) =>
+                  //     String(empKandang.id)
+                  //   );
+                  //   return formattedKandangIds.includes(String(k.value));
+                  // });
+
+                  const kandang = emp.kandangs
+                    .map((empKandang) => {
+                      if (String(empKandang.id) === kandangId) {
+                        return `<b>${empKandang.name}</b>`;
+                      }
+
+                      return empKandang.name;
+                    })
+                    .join(', ');
 
                   return (
                     <label
@@ -1532,7 +1487,9 @@ export function DailyChecklistContent() {
                         </p>
                         {kandang && (
                           <p className='text-xs text-gray-500 mt-0.5'>
-                            {kandang.name}
+                            <span
+                              dangerouslySetInnerHTML={{ __html: kandang }}
+                            />
                           </p>
                         )}
                       </div>

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

@@ -1,11 +1,10 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { Eye, CheckCircle, XCircle, Search, Trash2 } from 'lucide-react';
 import { Card, CardContent } from '@/figma-make/components/base/card';
 import { Button } from '@/figma-make/components/base/button';
 import { Badge } from '@/figma-make/components/base/badge';
-import { Input } from '@/figma-make/components/base/input';
 import { Label } from '@/figma-make/components/base/label';
 import { Textarea } from '@/figma-make/components/base/textarea';
 import { DateRangePicker } from '@/figma-make/components/base/date-range-picker';
@@ -25,40 +24,24 @@ import {
   DialogFooter,
 } from '@/figma-make/components/base/dialog';
 import { toast } from 'sonner';
-import { supabase, isSupabaseConfigured } from '@/figma-make/lib/supabase';
 import { useRouter } from 'next/navigation';
-
-interface ChecklistItem {
-  checklist_id: string;
-  date: string;
-  kandang_name: string;
-  kandang_id: string; // ✅ Add kandang_id
-  category: string;
-  status: string;
-  progress_percent: number;
-  total_phases: number;
-  total_activities: number;
-  updated_at: string;
-}
+import useSWR from 'swr';
+import { DailyChecklistApi } from '@/services/api/daily-checklist/daily-checklist';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import Table from '@/components/Table';
+import { DailyChecklist } from '@/types/api/daily-checklist/daily-checklist';
+import { cn } from '@/lib/helper';
+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';
 
 interface Kandang {
   id: string;
   name: string;
 }
 
-interface ChecklistQueryResult {
-  id: string;
-  date: string;
-  kandang_id: string;
-  category: string;
-  status: string;
-  updated_at: string;
-  kandang: {
-    id: string;
-    name: string;
-  } | null;
-}
-
 const STATUS_OPTIONS = [
   { value: 'ALL', label: 'Semua Status' },
   { value: 'DRAFT', label: 'Draft' },
@@ -76,244 +59,80 @@ const CATEGORY_LABELS: { [key: string]: string } = {
 
 export function ListDailyChecklistContent() {
   const router = useRouter();
-  const [checklistList, setChecklistList] = useState<ChecklistItem[]>([]);
-  const [filteredList, setFilteredList] = useState<ChecklistItem[]>([]);
-  const [loading, setLoading] = useState(true);
 
-  // Master data
-  const [kandangList, setKandangList] = useState<Kandang[]>([]);
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: {
+      date_from: '',
+      date_to: '',
+      search: '',
+      kandang_id: '',
+      status: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      search: 'search',
+      kandang_id: 'kandang_id',
+      status: 'status',
+      date_from: 'date_from',
+      date_to: 'date_to',
+    },
+  });
 
-  // Filters
-  const [statusFilter, setStatusFilter] = useState('ALL');
-  const [kandangFilter, setKandangFilter] = useState('ALL');
-  const [searchText, setSearchText] = useState('');
-  const [dateFrom, setDateFrom] = useState('');
-  const [dateTo, setDateTo] = useState('');
+  const {
+    data: checklistListRes,
+    isLoading: isLoadingChecklistList,
+    mutate: refreshChecklistList,
+  } = useSWR(
+    `${DailyChecklistApi.basePath}${getTableFilterQueryString()}`,
+    DailyChecklistApi.getAllFetcher,
+    {
+      keepPreviousData: true,
+    }
+  );
+
+  const { options: kandangOptions, isLoadingOptions: isLoadingKandangs } =
+    useSelect(KandangApi.basePath, 'id', 'name', 'search', {
+      page: '1',
+      limit: '100',
+    });
+
+  const checklistList = isResponseSuccess(checklistListRes)
+    ? checklistListRes.data || []
+    : [];
 
   // Modals
   const [showApproveModal, setShowApproveModal] = useState(false);
   const [showRejectModal, setShowRejectModal] = useState(false);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
-  const [selectedItem, setSelectedItem] = useState<ChecklistItem | null>(null);
+  const [selectedItem, setSelectedItem] = useState<DailyChecklist | null>(null);
   const [rejectReason, setRejectReason] = useState('');
   const [actionLoading, setActionLoading] = useState(false);
 
-  useEffect(() => {
-    fetchKandangList();
-    fetchChecklistList();
-  }, []);
-
-  useEffect(() => {
-    applyFilters();
-  }, [
-    checklistList,
-    statusFilter,
-    kandangFilter,
-    searchText,
-    dateFrom,
-    dateTo,
-  ]);
-
-  const fetchKandangList = async () => {
-    if (!isSupabaseConfigured()) return;
-
-    try {
-      const { data, error } = await supabase
-        .from('kandang')
-        .select('id, name')
-        .order('name', { ascending: true });
-
-      if (error) {
-        console.error('Error fetching kandang:', error);
-        return;
-      }
-
-      setKandangList(data || []);
-    } catch (error) {
-      console.error('Error fetching kandang:', error);
-    }
-  };
-
-  const fetchChecklistList = async () => {
-    if (!isSupabaseConfigured()) {
-      console.warn('Supabase not configured');
-      setLoading(false);
-      return;
-    }
-
-    try {
-      setLoading(true);
-
-      // ✅ Fetch checklists with joins to get complete data
-      const { data: checklists, error } = await supabase
-        .from('daily_checklists')
-        .select(
-          `
-          id,
-          date,
-          kandang_id,
-          category,
-          status,
-          updated_at,
-          kandang:kandang_id (
-            id,
-            name
-          )
-        `
-        )
-        .order('date', { ascending: false })
-        .order('updated_at', { ascending: false });
-
-      if (error) {
-        console.error('Error fetching checklist list:', error);
-        toast.error('Gagal memuat data checklist');
-        return;
-      }
-
-      // ✅ For each checklist, fetch phases, activities, and assignments count
-      const enrichedData: ChecklistItem[] = await Promise.all(
-        ((checklists as unknown as ChecklistQueryResult[]) || [])
-          .filter((checklist) => checklist.id) // ✅ Skip checklists with null ID
-          .map(async (checklist) => {
-            // Count phases
-            const { count: phaseCount } = await supabase
-              .from('daily_checklist_phases')
-              .select('*', { count: 'exact', head: true })
-              .eq('checklist_id', checklist.id);
-
-            // Count activities (tasks)
-            const { count: activityCount } = await supabase
-              .from('daily_checklist_activity_tasks')
-              .select('*', { count: 'exact', head: true })
-              .eq('checklist_id', checklist.id);
-
-            // ✅ NEW LOGIC: Calculate progress based on phase coverage
-            // Step 1: Get total phases in master data for this category
-            const { count: totalPhasesInMaster } = await supabase
-              .from('phases')
-              .select('*', { count: 'exact', head: true })
-              .eq('category_id', checklist.category);
-
-            // Step 2: Get phases that have at least 1 CHECKED assignment
-            // First, get all tasks for this checklist
-            const { data: tasks } = await supabase
-              .from('daily_checklist_activity_tasks')
-              .select('id, phase_id')
-              .eq('checklist_id', checklist.id);
-
-            const taskIds = (tasks || []).map((t) => t.id);
-            const uniquePhasesWithChecked = new Set<string>();
-
-            if (taskIds.length > 0) {
-              // Get assignments that are CHECKED
-              const { data: checkedAssignments } = await supabase
-                .from('daily_checklist_activity_task_assignments')
-                .select('task_id')
-                .in('task_id', taskIds)
-                .eq('checked', true); // ✅ Only get checked assignments
-
-              if (checkedAssignments && checkedAssignments.length > 0) {
-                // Map task_ids back to phase_ids
-                const checkedTaskIds = new Set(
-                  checkedAssignments.map((a) => a.task_id)
-                );
-                tasks?.forEach((task) => {
-                  if (checkedTaskIds.has(task.id)) {
-                    uniquePhasesWithChecked.add(task.phase_id);
-                  }
-                });
-              }
-            }
-
-            const phasesWithCheckedCount = uniquePhasesWithChecked.size;
-
-            // Step 3: Calculate progress
-            const progressPercent =
-              totalPhasesInMaster && totalPhasesInMaster > 0
-                ? Math.round(
-                    (phasesWithCheckedCount / totalPhasesInMaster) * 100
-                  )
-                : 0;
-
-            return {
-              checklist_id: checklist.id,
-              date: checklist.date,
-              kandang_name: checklist.kandang?.name || '-',
-              kandang_id: checklist.kandang_id,
-              category: checklist.category,
-              status: checklist.status,
-              progress_percent: progressPercent,
-              total_phases: phaseCount || 0,
-              total_activities: activityCount || 0,
-              updated_at: checklist.updated_at,
-            };
-          })
-      );
-
-      setChecklistList(enrichedData);
-    } catch (error) {
-      console.error('Error fetching checklist list:', error);
-      toast.error('Terjadi kesalahan');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const applyFilters = () => {
-    let filtered = [...checklistList];
-
-    // Filter by status
-    if (statusFilter && statusFilter !== 'ALL') {
-      filtered = filtered.filter((item) => item.status === statusFilter);
-    }
-
-    // ✅ Filter by kandang - use kandang_id directly from item
-    if (kandangFilter && kandangFilter !== 'ALL') {
-      filtered = filtered.filter((item) => item.kandang_id === kandangFilter);
-    }
-
-    // Filter by search text (kandang_name or category)
-    if (searchText) {
-      const searchLower = searchText.toLowerCase();
-      filtered = filtered.filter(
-        (item) =>
-          item.kandang_name.toLowerCase().includes(searchLower) ||
-          item.category.toLowerCase().includes(searchLower) ||
-          (CATEGORY_LABELS[item.category] || '')
-            .toLowerCase()
-            .includes(searchLower)
-      );
-    }
-
-    // Filter by date range
-    if (dateFrom) {
-      filtered = filtered.filter((item) => item.date >= dateFrom);
-    }
-    if (dateTo) {
-      filtered = filtered.filter((item) => item.date <= dateTo);
-    }
-
-    setFilteredList(filtered);
-  };
-
-  const handleDetail = (item: ChecklistItem) => {
+  const handleDetail = (item: DailyChecklist) => {
     router.push(
-      `/daily-checklist/list-daily-checklist/detail?checklistId=${item.checklist_id}`
+      `/daily-checklist/list-daily-checklist/detail?checklistId=${item.id}`
     );
   };
 
-  const handleApprove = (item: ChecklistItem) => {
+  const handleApprove = (item: DailyChecklist) => {
     setSelectedItem(item);
     setShowApproveModal(true);
   };
 
-  const handleReject = (item: ChecklistItem) => {
+  const handleReject = (item: DailyChecklist) => {
     setSelectedItem(item);
     setRejectReason('');
     setShowRejectModal(true);
   };
 
-  const handleDelete = (item: ChecklistItem) => {
+  const handleDelete = (item: DailyChecklist) => {
     // ✅ VALIDATION: Only DRAFT can be deleted
     if (item.status !== 'DRAFT') {
       toast.error('Hanya checklist dengan status DRAFT yang bisa dihapus', {
@@ -327,29 +146,24 @@ export function ListDailyChecklistContent() {
   };
 
   const confirmApprove = async () => {
-    if (!selectedItem || !isSupabaseConfigured()) return;
+    if (!selectedItem) return;
 
     try {
       setActionLoading(true);
 
-      const { error } = await supabase
-        .from('daily_checklists')
-        .update({
-          status: 'APPROVED',
-          updated_at: new Date().toISOString(),
-        })
-        .eq('id', selectedItem.checklist_id);
+      const approveRes = await DailyChecklistApi.approve(
+        String(selectedItem.id)
+      );
 
-      if (error) {
-        console.error('Error approving checklist:', error);
-        toast.error('Gagal approve checklist');
+      if (isResponseError(approveRes)) {
+        toast.error('Gagal approve checklist: ' + approveRes.message);
         return;
       }
 
+      refreshChecklistList();
       toast.success('Checklist berhasil di-approve');
       setShowApproveModal(false);
       setSelectedItem(null);
-      await fetchChecklistList();
     } catch (error) {
       console.error('Error approving checklist:', error);
       toast.error('Terjadi kesalahan');
@@ -359,7 +173,7 @@ export function ListDailyChecklistContent() {
   };
 
   const confirmReject = async () => {
-    if (!selectedItem || !isSupabaseConfigured()) return;
+    if (!selectedItem) return;
 
     if (!rejectReason.trim()) {
       toast.error('Alasan reject harus diisi');
@@ -369,26 +183,21 @@ export function ListDailyChecklistContent() {
     try {
       setActionLoading(true);
 
-      const { error } = await supabase
-        .from('daily_checklists')
-        .update({
-          status: 'REJECTED',
-          reject_reason: rejectReason,
-          updated_at: new Date().toISOString(),
-        })
-        .eq('id', selectedItem.checklist_id);
+      const rejectRes = await DailyChecklistApi.reject(
+        String(selectedItem.id),
+        rejectReason
+      );
 
-      if (error) {
-        console.error('Error rejecting checklist:', error);
-        toast.error('Gagal reject checklist');
+      if (isResponseError(rejectRes)) {
+        toast.error('Gagal reject checklist: ' + rejectRes.message);
         return;
       }
 
+      refreshChecklistList();
       toast.success('Checklist berhasil di-reject');
       setShowRejectModal(false);
       setSelectedItem(null);
       setRejectReason('');
-      await fetchChecklistList();
     } catch (error) {
       console.error('Error rejecting checklist:', error);
       toast.error('Terjadi kesalahan');
@@ -398,26 +207,22 @@ export function ListDailyChecklistContent() {
   };
 
   const confirmDelete = async () => {
-    if (!selectedItem || !isSupabaseConfigured()) return;
+    if (!selectedItem) return;
 
     try {
       setActionLoading(true);
 
-      const { error } = await supabase
-        .from('daily_checklists')
-        .delete()
-        .eq('id', selectedItem.checklist_id);
+      const deleteRes = await DailyChecklistApi.delete(selectedItem.id);
 
-      if (error) {
-        console.error('Error deleting checklist:', error);
-        toast.error('Gagal hapus checklist');
+      if (isResponseError(deleteRes)) {
+        toast.error('Gagal hapus checklist: ' + deleteRes.message);
         return;
       }
 
+      refreshChecklistList();
       toast.success('Checklist berhasil dihapus');
       setShowDeleteModal(false);
       setSelectedItem(null);
-      await fetchChecklistList();
     } catch (error) {
       console.error('Error deleting checklist:', error);
       toast.error('Terjadi kesalahan');
@@ -496,6 +301,117 @@ export function ListDailyChecklistContent() {
     });
   };
 
+  const checklistListColumns: ColumnDef<DailyChecklist>[] = [
+    {
+      accessorKey: 'date',
+      header: 'Tanggal',
+      enableSorting: false,
+      cell: ({ row }) => formatDate(row.original.date),
+    },
+    {
+      accessorKey: 'kandang',
+      header: 'Kandang',
+      enableSorting: false,
+      cell: ({ row }) => row.original.kandang.name,
+    },
+    {
+      accessorKey: 'category',
+      header: 'Kategori',
+      enableSorting: false,
+      cell: ({ row }) =>
+        CATEGORY_LABELS[row.original.category] || row.original.category,
+    },
+    {
+      accessorKey: 'status',
+      header: 'Status',
+      enableSorting: false,
+      cell: ({ row }) => getStatusBadge(row.original.status),
+    },
+    {
+      accessorKey: 'total_phase',
+      header: 'Total Phase',
+      enableSorting: false,
+    },
+    {
+      accessorKey: 'total_activity',
+      header: 'Total Aktivitas',
+      enableSorting: false,
+    },
+    {
+      accessorKey: 'progress',
+      header: 'Progress',
+      enableSorting: false,
+      cell: ({ row }) => (
+        <div className='flex items-center justify-center gap-2'>
+          <div className='w-24 bg-gray-200 rounded-full h-2'>
+            <div
+              className='bg-[#0069e0] h-2 rounded-full transition-all'
+              style={{ width: `${row.original.progress}%` }}
+            />
+          </div>
+          <span className='text-sm text-gray-700 font-medium'>
+            {row.original.progress}%
+          </span>
+        </div>
+      ),
+    },
+    {
+      accessorKey: 'updated_at',
+      header: 'Update At',
+      enableSorting: false,
+      cell: ({ row }) => formatDateTime(row.original.updated_at),
+    },
+    {
+      id: 'action',
+      header: 'Aksi',
+      accessorKey: 'action',
+      enableSorting: false,
+      cell: ({ row }) => (
+        <div className='flex items-center justify-center gap-2'>
+          <Button
+            size='sm'
+            variant='outline'
+            onClick={() => handleDetail(row.original)}
+            className='border-gray-200 text-gray-700 hover:bg-gray-50'
+          >
+            <Eye className='w-4 h-4 mr-1' />
+            Detail
+          </Button>
+          {row.original.status === 'SUBMITTED' && (
+            <>
+              <Button
+                size='sm'
+                onClick={() => handleApprove(row.original)}
+                className='bg-green-600 hover:bg-green-700 text-white'
+              >
+                <CheckCircle className='w-4 h-4 mr-1' />
+                Approve
+              </Button>
+              <Button
+                size='sm'
+                variant='destructive'
+                onClick={() => handleReject(row.original)}
+                className='bg-red-600 hover:bg-red-700 text-white'
+              >
+                <XCircle className='w-4 h-4 mr-1' />
+                Reject
+              </Button>
+            </>
+          )}
+          <Button
+            size='sm'
+            variant='destructive'
+            onClick={() => handleDelete(row.original)}
+            className='bg-red-600 hover:bg-red-700 text-white'
+          >
+            <Trash2 className='w-4 h-4 mr-1' />
+            Hapus
+          </Button>
+        </div>
+      ),
+    },
+  ];
+
   return (
     <div className='min-h-screen'>
       <div className='p-6'>
@@ -518,11 +434,11 @@ export function ListDailyChecklistContent() {
                 <Label>Periode Tanggal</Label>
                 <div className='mt-1.5'>
                   <DateRangePicker
-                    dateFrom={dateFrom}
-                    dateTo={dateTo}
+                    dateFrom={tableFilterState.date_from}
+                    dateTo={tableFilterState.date_to}
                     onDateChange={(from, to) => {
-                      setDateFrom(from);
-                      setDateTo(to);
+                      updateFilter('date_from', from);
+                      updateFilter('date_to', to);
                     }}
                   />
                 </div>
@@ -532,8 +448,10 @@ export function ListDailyChecklistContent() {
                 <Label htmlFor='kandang-filter'>Kandang</Label>
                 <div className='mt-1.5'>
                   <Select
-                    value={kandangFilter}
-                    onValueChange={setKandangFilter}
+                    value={tableFilterState.kandang_id}
+                    onValueChange={(value) => {
+                      updateFilter('kandang_id', value === 'ALL' ? '' : value);
+                    }}
                   >
                     <SelectTrigger
                       id='kandang-filter'
@@ -543,9 +461,12 @@ export function ListDailyChecklistContent() {
                     </SelectTrigger>
                     <SelectContent>
                       <SelectItem value='ALL'>Semua Kandang</SelectItem>
-                      {kandangList.map((kandang) => (
-                        <SelectItem key={kandang.id} value={kandang.id}>
-                          {kandang.name}
+                      {kandangOptions.map((kandang) => (
+                        <SelectItem
+                          key={kandang.value}
+                          value={String(kandang.value)}
+                        >
+                          {kandang.label}
                         </SelectItem>
                       ))}
                     </SelectContent>
@@ -556,7 +477,12 @@ export function ListDailyChecklistContent() {
               <div>
                 <Label htmlFor='status-filter'>Status</Label>
                 <div className='mt-1.5'>
-                  <Select value={statusFilter} onValueChange={setStatusFilter}>
+                  <Select
+                    value={tableFilterState.status}
+                    onValueChange={(value) => {
+                      updateFilter('status', value === 'ALL' ? '' : value);
+                    }}
+                  >
                     <SelectTrigger
                       id='status-filter'
                       className='border-gray-200'
@@ -577,159 +503,57 @@ export function ListDailyChecklistContent() {
               <div>
                 <Label htmlFor='search-text'>Cari</Label>
                 <div className='relative mt-1.5'>
-                  <Input
-                    id='search-text'
-                    type='text'
-                    placeholder='Kandang / Kategori...'
-                    value={searchText}
-                    onChange={(e) => setSearchText(e.target.value)}
-                    className='border-gray-200 pl-9'
+                  <DebouncedTextInput
+                    name='search'
+                    placeholder='Kandang / Kategori'
+                    value={tableFilterState.search}
+                    onChange={(e) => updateFilter('search', e.target.value)}
+                    className={{
+                      wrapper: 'w-full border-gray-200',
+                      inputWrapper: 'px-3 py-2 h-fit rounded-md',
+                      input: 'text-sm',
+                    }}
+                    startAdornment={
+                      <Search className='text-gray-400 w-4 h-4' />
+                    }
                   />
-                  <Search className='absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400' />
                 </div>
               </div>
             </div>
 
             {/* Table Section */}
-            {loading ? (
-              <div className='text-center py-12 text-gray-500'>
-                Memuat data...
-              </div>
-            ) : filteredList.length > 0 ? (
-              <div className='overflow-x-auto'>
-                <table className='w-full border border-gray-200 rounded-lg'>
-                  <thead>
-                    <tr className='bg-gray-50 border-b border-gray-200'>
-                      <th className='text-left py-3 px-4 text-sm font-semibold text-gray-700'>
-                        Tanggal
-                      </th>
-                      <th className='text-left py-3 px-4 text-sm font-semibold text-gray-700'>
-                        Kandang
-                      </th>
-                      <th className='text-left py-3 px-4 text-sm font-semibold text-gray-700'>
-                        Kategori
-                      </th>
-                      <th className='text-left py-3 px-4 text-sm font-semibold text-gray-700'>
-                        Status
-                      </th>
-                      <th className='text-center py-3 px-4 text-sm font-semibold text-gray-700'>
-                        Total Phase
-                      </th>
-                      <th className='text-center py-3 px-4 text-sm font-semibold text-gray-700'>
-                        Total Aktivitas
-                      </th>
-                      <th className='text-center py-3 px-4 text-sm font-semibold text-gray-700'>
-                        Progress
-                      </th>
-                      <th className='text-left py-3 px-4 text-sm font-semibold text-gray-700'>
-                        Updated At
-                      </th>
-                      <th className='text-center py-3 px-4 text-sm font-semibold text-gray-700'>
-                        Aksi
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {filteredList.map((item, index) => (
-                      <tr
-                        key={`${item.checklist_id}-${index}`}
-                        className={
-                          index % 2 === 0 ? 'bg-white' : 'bg-gray-50/50'
-                        }
-                      >
-                        <td className='py-3 px-4 text-sm text-gray-900'>
-                          {formatDate(item.date)}
-                        </td>
-                        <td className='py-3 px-4 text-sm text-gray-900'>
-                          {item.kandang_name}
-                        </td>
-                        <td className='py-3 px-4 text-sm text-gray-900'>
-                          {CATEGORY_LABELS[item.category] || item.category}
-                        </td>
-                        <td className='py-3 px-4'>
-                          {getStatusBadge(item.status)}
-                        </td>
-                        <td className='py-3 px-4 text-center text-sm text-gray-900'>
-                          {item.total_phases}
-                        </td>
-                        <td className='py-3 px-4 text-center text-sm text-gray-900'>
-                          {item.total_activities}
-                        </td>
-                        <td className='py-3 px-4 text-center'>
-                          <div className='flex items-center justify-center gap-2'>
-                            <div className='w-24 bg-gray-200 rounded-full h-2'>
-                              <div
-                                className='bg-[#0069e0] h-2 rounded-full transition-all'
-                                style={{ width: `${item.progress_percent}%` }}
-                              />
-                            </div>
-                            <span className='text-sm text-gray-700 font-medium'>
-                              {item.progress_percent}%
-                            </span>
-                          </div>
-                        </td>
-                        <td className='py-3 px-4 text-sm text-gray-600'>
-                          {formatDateTime(item.updated_at)}
-                        </td>
-                        <td className='py-3 px-4'>
-                          <div className='flex items-center justify-center gap-2'>
-                            <Button
-                              size='sm'
-                              variant='outline'
-                              onClick={() => handleDetail(item)}
-                              className='border-gray-200 text-gray-700 hover:bg-gray-50'
-                            >
-                              <Eye className='w-4 h-4 mr-1' />
-                              Detail
-                            </Button>
-                            {item.status === 'SUBMITTED' && (
-                              <>
-                                <Button
-                                  size='sm'
-                                  onClick={() => handleApprove(item)}
-                                  className='bg-green-600 hover:bg-green-700 text-white'
-                                >
-                                  <CheckCircle className='w-4 h-4 mr-1' />
-                                  Approve
-                                </Button>
-                                <Button
-                                  size='sm'
-                                  variant='destructive'
-                                  onClick={() => handleReject(item)}
-                                  className='bg-red-600 hover:bg-red-700 text-white'
-                                >
-                                  <XCircle className='w-4 h-4 mr-1' />
-                                  Reject
-                                </Button>
-                              </>
-                            )}
-                            <Button
-                              size='sm'
-                              variant='destructive'
-                              onClick={() => handleDelete(item)}
-                              className='bg-red-600 hover:bg-red-700 text-white'
-                            >
-                              <Trash2 className='w-4 h-4 mr-1' />
-                              Hapus
-                            </Button>
-                          </div>
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-            ) : (
-              <div className='text-center py-12 text-gray-500'>
-                {searchText ||
-                dateFrom ||
-                dateTo ||
-                statusFilter !== 'ALL' ||
-                kandangFilter !== 'ALL'
-                  ? 'Tidak ada data yang sesuai dengan filter'
-                  : 'Belum ada data checklist'}
-              </div>
-            )}
+            <Table<DailyChecklist>
+              data={checklistList}
+              columns={checklistListColumns}
+              pageSize={tableFilterState.pageSize}
+              onPageSizeChange={setPageSize}
+              rowOptions={[10, 20, 50, 100]}
+              page={
+                isResponseSuccess(checklistListRes)
+                  ? checklistListRes?.meta?.page
+                  : 0
+              }
+              totalItems={
+                isResponseSuccess(checklistListRes)
+                  ? checklistListRes?.meta?.total_results
+                  : 0
+              }
+              onPageChange={setPage}
+              isLoading={isLoadingChecklistList}
+              className={{
+                containerClassName: cn({
+                  'w-full mb-20':
+                    isResponseSuccess(checklistListRes) &&
+                    checklistListRes?.data?.length === 0,
+                }),
+                tableWrapperClassName:
+                  'overflow-x-auto border border-solid border-base-content/10 rounded-none',
+                headerRowClassName: 'bg-gray-50/50',
+                headerColumnClassName:
+                  'text-left py-3.5 px-6 text-sm font-semibold text-gray-700',
+                paginationClassName: 'px-4',
+              }}
+            />
           </CardContent>
         </Card>
       </div>
@@ -755,7 +579,7 @@ export function ListDailyChecklistContent() {
               <div className='flex justify-between text-sm'>
                 <span className='text-gray-600'>Kandang:</span>
                 <span className='font-medium text-gray-900'>
-                  {selectedItem.kandang_name}
+                  {selectedItem.kandang.name}
                 </span>
               </div>
               <div className='flex justify-between text-sm'>
@@ -768,7 +592,7 @@ export function ListDailyChecklistContent() {
               <div className='flex justify-between text-sm'>
                 <span className='text-gray-600'>Progress:</span>
                 <span className='font-medium text-gray-900'>
-                  {selectedItem.progress_percent}%
+                  {selectedItem.progress}%
                 </span>
               </div>
             </div>
@@ -815,7 +639,7 @@ export function ListDailyChecklistContent() {
               <div className='flex justify-between text-sm'>
                 <span className='text-gray-600'>Kandang:</span>
                 <span className='font-medium text-gray-900'>
-                  {selectedItem.kandang_name}
+                  {selectedItem.kandang.name}
                 </span>
               </div>
               <div className='flex justify-between text-sm'>
@@ -888,7 +712,7 @@ export function ListDailyChecklistContent() {
                 <div className='flex justify-between text-sm'>
                   <span className='text-gray-600'>Kandang:</span>
                   <span className='font-medium text-gray-900'>
-                    {selectedItem.kandang_name}
+                    {selectedItem.kandang.name}
                   </span>
                 </div>
                 <div className='flex justify-between text-sm'>

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

@@ -17,8 +17,9 @@ import {
   DialogFooter,
 } from '@/figma-make/components/base/dialog';
 import { toast } from 'sonner';
-import { supabase, isSupabaseConfigured } from '@/figma-make/lib/supabase';
 import { useRouter, useSearchParams } from 'next/navigation';
+import { DailyChecklistApi } from '@/services/api/daily-checklist/daily-checklist';
+import { isResponseError } from '@/lib/api-helper';
 
 interface ChecklistDetailRow {
   checklist_id: string;
@@ -85,23 +86,6 @@ interface ChecklistData {
   };
 }
 
-interface TaskQueryResult {
-  id: number;
-  phase_id: string;
-  phase_activity_id: string;
-  time_type: string;
-  notes: string | null;
-  phases: {
-    id: number;
-    name: string;
-  } | null;
-  phase_activities: {
-    id: number;
-    name: string;
-    description: string | null;
-  } | null;
-}
-
 interface AssignmentQueryResult {
   task_id: number;
   employee_id: string;
@@ -120,13 +104,13 @@ const CATEGORY_LABELS: { [key: string]: string } = {
   produksi_close: 'Produksi Close',
 };
 
-const TIME_TYPE_ORDER = ['umum', 'pagi', 'siang', 'sore', 'malam'];
+const TIME_TYPE_ORDER = ['Umum', 'Pagi', 'Siang', 'Sore', 'Malam'];
 const TIME_TYPE_LABELS: { [key: string]: string } = {
-  umum: 'Umum',
-  pagi: 'Pagi',
-  siang: 'Siang',
-  sore: 'Sore',
-  malam: 'Malam',
+  Umum: 'Umum',
+  Pagi: 'Pagi',
+  Siang: 'Siang',
+  Sore: 'Sore',
+  Malam: 'Malam',
 };
 
 export function DetailDailyChecklistContent() {
@@ -155,8 +139,8 @@ export function DetailDailyChecklistContent() {
   }, [checklistId]);
 
   const fetchChecklistDetail = async () => {
-    if (!isSupabaseConfigured() || !checklistId) {
-      console.warn('Supabase not configured or checklistId missing');
+    if (!checklistId) {
+      console.warn('checklistId missing');
       setLoading(false);
       return;
     }
@@ -164,69 +148,34 @@ export function DetailDailyChecklistContent() {
     try {
       setLoading(true);
 
-      // ✅ Fetch checklist header with kandang name
-      const { data: checklistData, error: checklistError } = await supabase
-        .from('daily_checklists')
-        .select(
-          `
-          id,
-          date,
-          kandang_id,
-          category,
-          status,
-          reject_reason,
-          kandang:kandang_id (
-            id,
-            name
-          )
-        `
-        )
-        .eq('id', checklistId)
-        .single();
+      const checklistDataRes =
+        await DailyChecklistApi.getOneDailyChecklist(checklistId);
 
-      if (checklistError || !checklistData) {
-        console.error('Error fetching checklist:', checklistError);
+      if (isResponseError(checklistDataRes)) {
+        console.error('Error fetching checklist:', checklistDataRes.message);
         toast.error('Data checklist tidak ditemukan');
         router.push('/daily-checklist/list-daily-checklist');
         return;
       }
 
-      // ✅ Fetch all tasks with their phase_activity details
-      const { data: tasks, error: tasksError } = await supabase
-        .from('daily_checklist_activity_tasks')
-        .select(
-          `
-          id,
-          phase_id,
-          phase_activity_id,
-          time_type,
-          notes,
-          phases:phase_id (
-            id,
-            name
-          ),
-          phase_activities:phase_activity_id (
-            id,
-            name,
-            description
-          )
-        `
-        )
-        .eq('checklist_id', checklistId);
+      const rawDetailChecklist = checklistDataRes?.data;
 
-      if (tasksError) {
-        console.error('Error fetching tasks:', tasksError);
-        toast.error('Gagal memuat detail checklist');
-        router.push('/daily-checklist/list-daily-checklist');
-        return;
-      }
+      const checklistData = {
+        id: rawDetailChecklist?.id,
+        date: rawDetailChecklist?.date,
+        kandang_id: rawDetailChecklist?.kandang.id,
+        category: rawDetailChecklist?.category,
+        status: rawDetailChecklist?.status,
+        reject_reason: rawDetailChecklist?.reject_reason,
+        kandang: rawDetailChecklist?.kandang,
+      };
 
-      const castedTasks = (tasks as unknown as TaskQueryResult[]) || [];
+      const tasks = rawDetailChecklist?.tasks;
 
       const castedChecklistData =
         checklistData as unknown as ChecklistData | null;
 
-      if (!castedTasks || castedTasks.length === 0) {
+      if (!tasks || tasks.length === 0) {
         toast.info('Checklist belum memiliki aktivitas');
         setHeader({
           date: castedChecklistData?.date || '-',
@@ -242,36 +191,32 @@ export function DetailDailyChecklistContent() {
         return;
       }
 
-      // ✅ Fetch all assignments for these tasks
-      const taskIds = castedTasks.map((t) => t.id);
-      const { data: assignments, error: assignmentsError } = await supabase
-        .from('daily_checklist_activity_task_assignments')
-        .select(
-          `
-          task_id,
-          employee_id,
-          checked,
-          note,
-          employees:employee_id (
-            id,
-            name
-          )
-        `
-        )
-        .in('task_id', taskIds);
+      const assignments: {
+        task_id: number;
+        checked: boolean;
+        note: string | null;
+        employee: {
+          id: number;
+          name: string;
+        };
+      }[] = [];
 
-      if (assignmentsError) {
-        console.error('Error fetching assignments:', assignmentsError);
-      }
-
-      const castedAssignments =
-        (assignments as unknown as AssignmentQueryResult[]) || [];
+      tasks.forEach((task) => {
+        task.assignments.forEach((assignment) => {
+          assignments.push({
+            task_id: task.id,
+            checked: assignment.checked,
+            note: assignment.note,
+            employee: assignment.employee,
+          });
+        });
+      });
 
       // ✅ Build detail rows from tasks and assignments
       const detailRows: ChecklistDetailRow[] = [];
 
-      castedTasks.forEach((task) => {
-        const taskAssignments = (castedAssignments || []).filter(
+      tasks.forEach((task) => {
+        const taskAssignments = assignments.filter(
           (a) => a.task_id === task.id
         );
 
@@ -283,14 +228,14 @@ export function DetailDailyChecklistContent() {
             category: castedChecklistData?.category || '-',
             status: castedChecklistData?.status || '-',
             reject_reason: castedChecklistData?.reject_reason || '-',
-            phase_id: task.phase_id,
-            phase_name: task.phases?.name || '-',
-            activity_id: task.phase_activity_id,
-            activity_name: task.phase_activities?.name || '-',
-            activity_description: task.phase_activities?.description || null,
+            phase_id: String(task.phase_id),
+            phase_name: task.phase?.name || '-',
+            activity_id: String(task.phase_activity_id),
+            activity_name: task.phase_activity?.name || '-',
+            activity_description: task.phase_activity?.description || null,
             time_type: task.time_type,
-            employee_id: assignment.employee_id,
-            employee_name: assignment.employees?.name || '-',
+            employee_id: String(assignment.employee.id),
+            employee_name: assignment.employee?.name || '-',
             checked: assignment.checked,
             note: assignment.note,
           });
@@ -306,8 +251,8 @@ export function DetailDailyChecklistContent() {
           status: castedChecklistData?.status || '-',
           reject_reason: castedChecklistData?.reject_reason || '-',
           progress_percent: 0,
-          total_phases: new Set(castedTasks.map((t) => t.phase_id)).size,
-          total_activities: castedTasks.length,
+          total_phases: new Set(tasks.map((t) => t.phase_id)).size,
+          total_activities: tasks.length,
         });
         setLoading(false);
         return;
@@ -471,22 +416,15 @@ export function DetailDailyChecklistContent() {
   };
 
   const confirmApprove = async () => {
-    if (!checklistId || !isSupabaseConfigured()) return;
+    if (!checklistId) return;
 
     try {
       setActionLoading(true);
 
-      const { error } = await supabase
-        .from('daily_checklists')
-        .update({
-          status: 'APPROVED',
-          updated_at: new Date().toISOString(),
-        })
-        .eq('id', checklistId);
+      const approveRes = await DailyChecklistApi.approve(String(checklistId));
 
-      if (error) {
-        console.error('Error approving checklist:', error);
-        toast.error('Gagal approve checklist');
+      if (isResponseError(approveRes)) {
+        toast.error('Gagal approve checklist: ' + approveRes.message);
         return;
       }
 
@@ -502,7 +440,7 @@ export function DetailDailyChecklistContent() {
   };
 
   const confirmReject = async () => {
-    if (!checklistId || !isSupabaseConfigured()) return;
+    if (!checklistId) return;
 
     if (!rejectReason.trim()) {
       toast.error('Alasan reject harus diisi');
@@ -512,18 +450,13 @@ export function DetailDailyChecklistContent() {
     try {
       setActionLoading(true);
 
-      const { error } = await supabase
-        .from('daily_checklists')
-        .update({
-          status: 'REJECTED',
-          reject_reason: rejectReason,
-          updated_at: new Date().toISOString(),
-        })
-        .eq('id', checklistId);
+      const rejectRes = await DailyChecklistApi.reject(
+        String(checklistId),
+        rejectReason
+      );
 
-      if (error) {
-        console.error('Error rejecting checklist:', error);
-        toast.error('Gagal reject checklist');
+      if (isResponseError(rejectRes)) {
+        toast.error('Gagal reject checklist: ' + rejectRes.message);
         return;
       }
 

src/figma-make/components/pages/master-data/activity/MasterAktivitasContent.tsx

@@ -47,6 +47,7 @@ import { httpClientFetcher, SWRHttpKey } from '@/services/http/client';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { PhaseActivityApi } from '@/services/api/daily-checklist/phase-activity';
 import { PhaseActivity } from '@/types/api/daily-checklist/phase-activity';
+import { Phase } from '@/types/api/daily-checklist/phase';
 
 // Static categories - tidak bisa CRUD
 const CATEGORIES = [
@@ -64,13 +65,6 @@ const TIME_TYPES = [
   { value: 'Malam', label: 'Malam' },
 ];
 
-interface Phase {
-  id: string;
-  name: string;
-  category: string;
-  activityCount?: number;
-}
-
 export function MasterAktivitasContent() {
   const [selectedCategory, setSelectedCategory] = useState<string>('');
   const [selectedPhase, setSelectedPhase] = useState<Phase | null>(null);
@@ -103,7 +97,7 @@ export function MasterAktivitasContent() {
     SWRHttpKey
   >(
     selectedPhase?.id
-      ? `${PhaseActivityApi.basePath}?page=1&limit=100&phase_id=${selectedPhase.id}`
+      ? `${PhaseActivityApi.basePath}?page=1&limit=100&phase_ids=${selectedPhase.id}`
       : '',
     httpClientFetcher,
     {
@@ -171,7 +165,7 @@ export function MasterAktivitasContent() {
   const handleEditPhase = (phase: Phase) => {
     setPhaseModalMode('edit');
     setPhaseForm({
-      id: phase.id,
+      id: String(phase.id),
       name: phase.name,
     });
     setShowPhaseModal(true);
@@ -265,7 +259,7 @@ export function MasterAktivitasContent() {
       setPhaseToDelete(null);
 
       // Clear selection if deleted phase was selected
-      if (selectedPhase?.id === phaseToDelete) {
+      if (selectedPhase?.id === Number(phaseToDelete)) {
         setSelectedPhase(null);
       }
     } catch (error) {
@@ -543,7 +537,7 @@ export function MasterAktivitasContent() {
                               {phase.name}
                             </p>
                             <p className='text-xs text-gray-500 mt-1'>
-                              {phase.activityCount || 0} aktivitas
+                              {phase.activity_count || 0} aktivitas
                             </p>
                           </div>
                           <DropdownMenu>
@@ -567,7 +561,9 @@ export function MasterAktivitasContent() {
                                 Edit
                               </DropdownMenuItem>
                               <DropdownMenuItem
-                                onClick={() => handleDeletePhaseClick(phase.id)}
+                                onClick={() =>
+                                  handleDeletePhaseClick(String(phase.id))
+                                }
                                 className='text-red-600'
                               >
                                 <Trash2 className='mr-2 h-4 w-4' />

src/services/api/daily-checklist/daily-checklist.ts

@@ -0,0 +1,200 @@
+import axios from 'axios';
+
+import { BaseApiService } from '@/services/api/base';
+import { httpClient } from '@/services/http/client';
+import { BaseApiResponse } from '@/types/api/api-general';
+import {
+  CreateDailyChecklistPayload,
+  DailyChecklist,
+  DetailDailyChecklist,
+} from '@/types/api/daily-checklist/daily-checklist';
+
+export class DailyChecklistApiService extends BaseApiService<
+  DailyChecklist,
+  CreateDailyChecklistPayload,
+  unknown
+> {
+  constructor(basePath: string = '/daily-checklists') {
+    super(basePath);
+  }
+
+  async getOneDailyChecklist(id: string) {
+    try {
+      const getOneDailyChecklistPath = `${this.basePath}/relation/${id}`;
+      const getOneDailyChecklistRes = await httpClient<
+        BaseApiResponse<DetailDailyChecklist>
+      >(getOneDailyChecklistPath);
+
+      return getOneDailyChecklistRes;
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<DetailDailyChecklist>>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
+    }
+  }
+
+  async setDailyChecklistPhase(id: string, phaseIds: string[]) {
+    try {
+      const setDailyChecklistPhasePath = `${this.basePath}/phase/${id}`;
+      const setDailyChecklistPhaseRes = await httpClient<BaseApiResponse>(
+        setDailyChecklistPhasePath,
+        {
+          method: 'POST',
+          body: { phase_ids: phaseIds.join(',') },
+        }
+      );
+
+      return setDailyChecklistPhaseRes;
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
+    }
+  }
+
+  async removeEmployeeAssignment(id: string, employeeId: string) {
+    try {
+      const removeEmployeeAssignmentPath = `${this.basePath}/${id}/assignments/${employeeId}`;
+      const removeEmployeeAssignmentRes = await httpClient<BaseApiResponse>(
+        removeEmployeeAssignmentPath,
+        {
+          method: 'DELETE',
+        }
+      );
+
+      return removeEmployeeAssignmentRes;
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
+    }
+  }
+
+  async setDailyChecklistEmployees(checklistId: string, employeeIds: string[]) {
+    try {
+      const setDailyChecklistPhasePath = `${this.basePath}/assignment/${checklistId}`;
+      const setDailyChecklistPhaseRes = await httpClient<BaseApiResponse>(
+        setDailyChecklistPhasePath,
+        {
+          method: 'POST',
+          body: { employee_ids: employeeIds.join(',') },
+        }
+      );
+
+      return setDailyChecklistPhaseRes;
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
+    }
+  }
+
+  async getTasksByChecklistId(id: string) {
+    try {
+      const getTasksByChecklistIdPath = `${this.basePath}/tasks?checklist_id=${id}&page=1&limit=100`;
+      const getTasksByChecklistIdRes = await httpClient<BaseApiResponse>(
+        getTasksByChecklistIdPath
+      );
+
+      return getTasksByChecklistIdRes;
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
+    }
+  }
+
+  async checkOrUncheckAssignment(payload: {
+    task_id: number;
+    employee_id: number;
+    checked: boolean;
+    note: string | null;
+  }) {
+    try {
+      const checkOrUncheckAssignmentPath = `${this.basePath}/assignment`;
+      const checkOrUncheckAssignmentRes = await httpClient<BaseApiResponse>(
+        checkOrUncheckAssignmentPath,
+        {
+          method: 'POST',
+          body: payload,
+        }
+      );
+
+      return checkOrUncheckAssignmentRes;
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
+    }
+  }
+
+  async submit(id: string) {
+    try {
+      const submitPath = `${this.basePath}/${id}`;
+      const submitRes = await httpClient<BaseApiResponse>(submitPath, {
+        method: 'PATCH',
+        body: {
+          status: 'SUBMITTED',
+          reject_reason: '',
+        },
+      });
+
+      return submitRes;
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
+    }
+  }
+
+  async approve(id: string) {
+    try {
+      const approvePath = `${this.basePath}/${id}`;
+      const approveRes = await httpClient<BaseApiResponse>(approvePath, {
+        method: 'PATCH',
+        body: {
+          status: 'APPROVED',
+          reject_reason: '',
+        },
+      });
+
+      return approveRes;
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
+    }
+  }
+
+  async reject(id: string, rejectReason: string) {
+    try {
+      const rejectPath = `${this.basePath}/${id}`;
+      const rejectRes = await httpClient<BaseApiResponse>(rejectPath, {
+        method: 'PATCH',
+        body: {
+          status: 'REJECTED',
+          reject_reason: rejectReason,
+        },
+      });
+
+      return rejectRes;
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
+    }
+  }
+}
+
+export const DailyChecklistApi = new DailyChecklistApiService(
+  '/daily-checklists'
+);

src/types/api/daily-checklist/daily-checklist.d.ts

@@ -0,0 +1,56 @@
+import { BaseMetadata } from '@/types/api/api-general';
+import { BaseKandang } from '@/types/api/master-data/kandang';
+import { Phase } from '@/types/api/daily-checklist/phase';
+import { PhaseActivity } from '@/types/api/daily-checklist/phase-activity';
+
+export type BaseDailyChecklist = {
+  id: number;
+  name: string;
+  status: string;
+  category: string;
+  date: string;
+  kandang: Pick<BaseKandang, 'id' | 'name' | 'status' | 'capacity'>;
+  total_phase: number;
+  total_activity: number;
+  progress: number;
+};
+
+export type DailyChecklist = BaseMetadata & BaseDailyChecklist;
+
+export type DetailDailyChecklist = BaseDailyChecklist & {
+  reject_reason: string | null;
+  phases: {
+    id: number;
+    phase_id: number;
+    phase: Phase;
+  }[];
+  tasks: {
+    id: number;
+    checklist_id: number;
+    phase_id: number;
+    phase_activity_id: number;
+    time_type: string;
+    notes: string | null;
+    phase: Phase;
+    phase_activity: PhaseActivity;
+    assignments: {
+      employee: {
+        id: number;
+        name: string;
+      };
+      checked: boolean;
+      note: string | null;
+    }[];
+  }[];
+  assigned_employees: {
+    id: number;
+    name: string;
+  }[];
+};
+
+export type CreateDailyChecklistPayload = {
+  date: string;
+  kandang_id: number;
+  category: string;
+  status: string;
+};

src/types/api/daily-checklist/phase.d.ts

@@ -5,6 +5,7 @@ export type BasePhase = {
   name: string;
   is_active: boolean;
   category: string;
+  activity_count: number;
 };
 
 export type Phase = BaseMetadata & BasePhase;