fix: better ui (#45)

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

components/organisms/manager/ReviewsTab.tsx

@@ -90,6 +90,44 @@ export default function ReviewsTab() {
   const avgRating =
     reviews.reduce((sum, r) => sum + r.rating, 0) / reviews.length;
 
+  const CustomerName = ({ customerId }: { customerId: 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/customer/${customerId}`);
+
+          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 (customerId) {
+        getName();
+      }
+    }, [customerId]); // Chạy lại nếu customerId thay đổi
+
+    if (loading)
+      return <span className="animate-pulse text-gray-400">...</span>;
+
+    return <span>{name || "N/A"}</span>;
+  };
+
   return (
     <div className="space-y-4">
       {/* Summary header */}
@@ -124,7 +162,7 @@ export default function ReviewsTab() {
                   <i className="fa-solid fa-user text-xs text-(--color-primary)"></i>
                 </div>
                 <span className="text-sm font-medium text-(--color-text-secondary)">
-                  {review.reviewerId}
+                  <CustomerName customerId={review.reviewerId!} />
                 </span>
               </div>
               <div className="flex shrink-0 flex-col items-end gap-1">