fix: final update (#44)

Co-authored-by: TakahashiNg <83152264+TakahashiNguyen@users.noreply.github.com>
Reviewed-on: #44

components/organisms/shift-schedule/ShiftDetailModal.tsx

@@ -3,7 +3,7 @@
 import { useAuth } from "@/lib/auth-context";
 import { DEPARTMENTS } from "@/lib/constants";
 import { useShift } from "@/lib/shift-context";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import type { ShiftDetailModalProps } from "./ShiftSchedule.types";
 
@@ -82,6 +82,44 @@ export default function ShiftDetailModal({
     absent: "bg-red-100 text-red-700",
   };
 
+  const StaffName = ({ staffId }: { staffId: string }) => {
+    const [name, setName] = useState("");
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+      // Hàm gọi API
+      const getName = async () => {
+        try {
+          setLoading(true);
+
+          const response = await fetch(`/api/staff/${staffId}`);
+
+          if (!response.ok) {
+            throw new Error("Mạng lỗi hoặc không tìm thấy nhân viên");
+          }
+
+          const data = await response.json();
+
+          setName(data["name"]);
+        } catch (error) {
+          console.error("Lỗi khi lấy tên:", error);
+          setName("Lỗi tải tên");
+        } finally {
+          setLoading(false);
+        }
+      };
+
+      if (staffId) {
+        getName();
+      }
+    }, [staffId]); // Chạy lại nếu staffId thay đổi
+
+    if (loading)
+      return <span className="animate-pulse text-gray-400">...</span>;
+
+    return <span>{name || "N/A"}</span>;
+  };
+
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
       {/* Backdrop */}
@@ -183,7 +221,7 @@ export default function ShiftDetailModal({
                         <i className="fa-solid fa-user text-[10px] text-(--color-primary)"></i>
                       </div>
                       <span className="text-foreground text-sm font-medium">
-                        {staff.staffId}
+                        <StaffName staffId={staff.staffId} />
                       </span>
                     </div>
                     {isManager && (