From 17273c94791472b8a708c03ee3c934a18f2de910 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Sat, 15 Aug 2026 16:12:06 +0700
Subject: [PATCH] feat: enhance Employee data structure by adding resign_date
 and improving salary display in employee columns

---
 app/Services/Admin/HR/EmployeeService.php     |  2 +-
 .../js/pages/admin/hr/employee/columns.tsx    | 62 +++++++++++++++++++
 2 files changed, 63 insertions(+), 1 deletion(-)

diff --git a/app/Services/Admin/HR/EmployeeService.php b/app/Services/Admin/HR/EmployeeService.php
index 6c7a879..c66e426 100644
--- a/app/Services/Admin/HR/EmployeeService.php
+++ b/app/Services/Admin/HR/EmployeeService.php
@@ -22,7 +22,7 @@ public function paginated(int $perPage = 25, string $search = '', string $sort =
             ->where(fn ($q) => $q->whereHas('employee')->orWhereHas('roles', fn ($rq) => $rq->where('name', 'Owner')))
             ->with([
                 'userProfile' => fn ($q) => $q->select(['id', 'user_id', 'full_name', 'phone_number', 'gender']),
-                'employee' => fn ($q) => $q->select(['id', 'user_id', 'join_date', 'employment_status', 'base_salary']),
+                'employee' => fn ($q) => $q->select(['id', 'user_id', 'join_date', 'resign_date', 'employment_status', 'base_salary']),
                 'roles' => fn ($q) => $q->select(['id', 'name']),
                 'media',
             ])
diff --git a/resources/js/pages/admin/hr/employee/columns.tsx b/resources/js/pages/admin/hr/employee/columns.tsx
index b98a8f7..f1acad8 100644
--- a/resources/js/pages/admin/hr/employee/columns.tsx
+++ b/resources/js/pages/admin/hr/employee/columns.tsx
@@ -18,6 +18,7 @@ export type Employee = {
     } | null;
     employee: {
         join_date: string;
+        resign_date: string | null;
         employment_status: string;
         base_salary: number;
     } | null;
@@ -124,6 +125,67 @@ export function createEmployeeColumns(
                 );
             },
         },
+        {
+            accessorKey: 'employee.base_salary',
+            id: 'base_salary',
+            header: () => <span>Gaji</span>,
+            cell: ({ row }) => {
+                const employee = row.original;
+                const salary = employee.employee?.base_salary;
+
+                if (!salary) {
+                    return <span>-</span>;
+                }
+
+                return (
+                    <span className="font-medium">
+                        {formatCurrency(salary)}
+                    </span>
+                );
+            },
+        },
+        {
+            id: 'period',
+            header: () => <span>Masa Kerja</span>,
+            cell: ({ row }) => {
+                const employee = row.original;
+                const joinDate = employee.employee?.join_date;
+                const resignDate = employee.employee?.resign_date;
+
+                if (!joinDate) {
+                    return <span>-</span>;
+                }
+
+                const formattedJoin = new Date(joinDate).toLocaleDateString('id-ID', {
+                    day: 'numeric',
+                    month: 'short',
+                    year: 'numeric',
+                });
+
+                if (resignDate) {
+                    const formattedResign = new Date(resignDate).toLocaleDateString('id-ID', {
+                        day: 'numeric',
+                        month: 'short',
+                        year: 'numeric',
+                    });
+                    return (
+                        <div className="flex flex-col">
+                            <span className="text-xs text-muted-foreground">Masuk</span>
+                            <span>{formattedJoin}</span>
+                            <span className="text-xs text-muted-foreground">Keluar</span>
+                            <span>{formattedResign}</span>
+                        </div>
+                    );
+                }
+
+                return (
+                    <div className="flex flex-col">
+                        <span className="text-xs text-muted-foreground">Masuk</span>
+                        <span>{formattedJoin}</span>
+                    </div>
+                );
+            },
+        },
         ...(canViewAll
             ? [
                   {