diff --git a/src/routes/backoffice/timesheets/+page.svelte b/src/routes/backoffice/timesheets/+page.svelte
index bc67bbb..56412ab 100644
--- a/src/routes/backoffice/timesheets/+page.svelte
+++ b/src/routes/backoffice/timesheets/+page.svelte
@@ -66,7 +66,7 @@
         datetime_out: string;
         total_work_hour: number;
         remarks: string;
-        approval: boolean;
+        approval: boolean | null; // Allow null for new entries
     };
 
     const categoryOfWork = [
@@ -181,20 +181,40 @@
             return;
         }
 
+        let reportedBy: { label: string; value: string }[] = [];
+        const { data: staffData, error: staffError } = await supabase
+            .from("vb_employee")
+            .select("id, employee_name");
+        if (staffError) {
+            console.error("Error fetching staff:", staffError);
+        } else if (staffData) {
+            reportedBy = staffData.map((s) => ({
+                label: s.employee_name,
+                value: s.id,
+            }));
+        }
+
         // Gabungkan data villa ke dalam setiap issue
         allRows = timesheet.map((issue: Timesheets) => {
             const villa = villas.find((v) => v.id === issue.villa_id);
+            // Map entered_by to staff_id
+            const staff = reportedBy.find((s) => s.value === issue.entered_by);
 
             return {
                 id: issue.id,
                 name: issue.work_description, // Map work_description to name
-                staff_id: issue.entered_by, // Map entered_by to staff_id
+                staff_id: staff?.label, // Map entered_by to staff_id
                 date_in: new Date(issue.datetime_in),
                 date_out: new Date(issue.datetime_out),
                 type_of_work: issue.type_of_work,
                 category_of_work: issue.category_of_work,
                 villa_name: villa ? villa.name : "Unknown Villa",
-                approval: issue.approval ? "APPROVED" : "PENDING", // or map as needed
+                approval:
+                    issue.approval == null
+                        ? "PENDING"
+                        : issue.approval
+                          ? "APPROVED"
+                          : "REJECTED", // or map as needed
                 approved_by: undefined, // Set as needed
                 approved_date: undefined, // Set as needed
                 total_hours_work:
@@ -298,7 +318,7 @@
                         new Date(formData.get("date_in") as string).getTime(),
                 ),
                 remarks: formData.get("remarks") as string,
-                approval: false, // Default to false for new entries
+                approval: null, // Default null
             };
 
             const { error } = await supabase
@@ -471,11 +491,21 @@
                                             on:click={() =>
                                                 updateApprovalStatus(
                                                     String(row.id),
-                                                    "APPROVED",
+                                                    "true",
                                                 )}
                                         >
                                             ✅ Approve
                                         </button>
+                                        <button
+                                            class="ml-2 inline-flex items-center gap-1 rounded bg-red-600 px-3 py-1.5 text-white text-xs font-medium hover:bg-red-700"
+                                            on:click={() =>
+                                                updateApprovalStatus(
+                                                    String(row.id),
+                                                    "false",
+                                                )}
+                                        >
+                                            ❌ Reject
+                                        </button>
                                     {/if}
                                 </td>
                             {:else if col.key === "approved_by"}
diff --git a/src/routes/timesheet/+page.svelte b/src/routes/timesheet/+page.svelte
index 73bf346..217cd88 100644
--- a/src/routes/timesheet/+page.svelte
+++ b/src/routes/timesheet/+page.svelte
@@ -19,7 +19,7 @@
     datetime_out: string;
     total_work_hour: number;
     remarks: string;
-    approval: boolean;
+    approval: boolean | null; // Allow null for new entries
   };
 
   type Villa = {
@@ -45,7 +45,7 @@
     datetime_out: "",
     total_work_hour: 0,
     remarks: "",
-    approval: false,
+    approval: null, // Default null
   };
 
   const typeOfWorkOptions: TimesheetForm["type_of_work"][] = [
@@ -129,7 +129,7 @@
         datetime_out: "",
         total_work_hour: 0,
         remarks: "",
-        approval: false,
+        approval: null,
       };
     }
   }