feat: integrate DailyChecklistContent component to API

2026-05-20 13:32:00 +00:00 · 2026-01-09 14:12:12 +07:00
parent b1715172db
commit f765895988
1 changed files with 272 additions and 315 deletions
@@ -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>