update 15 mei

frontend/components/Header.tsx

@@ -1,37 +1,69 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { LogOut } from "lucide-react"; // Menggunakan ikon dari Lucide
+
 export default function Header() {
+  const router = useRouter();
+  const [user, setUser] = useState<any>(null);
+
+  // Ambil data user yang sedang login dari localStorage
+  useEffect(() => {
+    const userData = localStorage.getItem("user");
+    if (userData) {
+      setUser(JSON.parse(userData));
+    }
+  }, []);
+
+  // Fungsi untuk membersihkan sesi dan kembali ke login
+  const handleLogout = () => {
+    localStorage.removeItem("token");
+    localStorage.removeItem("user");
+    router.push("/login");
+  };
+
   return (
     <header className="sticky top-0 z-40 flex w-full bg-white drop-shadow-1 dark:bg-boxdark dark:drop-shadow-none">
-      <div className="flex grow items-center justify-between px-4 py-4 shadow-2 md:px-6 2xl:px-11">
+      {/* justify-end agar isinya merapat ke kanan */}
+      <div className="flex grow items-center justify-end px-4 py-4 shadow-2 md:px-6 2xl:px-11">
         
-        {/* Search Bar (Hiasan) */}
-        <div className="hidden sm:block">
-          <form action="#" method="POST">
-            <div className="relative">
-              <input
-                type="text"
-                placeholder="Type to search..."
-                className="w-full bg-transparent pl-9 pr-4 font-medium focus:outline-none xl:w-125"
-              />
-            </div>
-          </form>
-        </div>
-
         {/* User Area */}
         <div className="flex items-center gap-3 2xsm:gap-7">
           <div className="flex items-center gap-4">
+            
             <span className="hidden text-right lg:block">
-              <span className="block text-sm font-medium text-black ">
-                Valentino Heman
+              {/* Nama dinamis, jika kosong tampilkan 'Admin S-CLASS' */}
+              <span className="block text-sm font-bold text-black">
+                {user?.full_name || "Admin S-CLASS"}
+              </span>
+              {/* Role dinamis */}
+              <span className="block text-xs font-medium text-gray-500 capitalize">
+                {user?.role || "Administrator"}
               </span>
-              <span className="block text-xs font-medium">Mahasiswa</span>
             </span>
             
-            {/* Avatar Bulat */}
-            <div className="h-10 w-10 rounded-full bg-slate-300 overflow-hidden">
-               {/* Nanti bisa diisi Image */}
-               <div className="flex items-center justify-center h-full text-slate-600 font-bold">VH</div>
+            {/* Avatar Bulat Dinamis (Mengambil inisial nama depan) */}
+            <div className="h-10 w-10 rounded-full bg-blue-100 border border-blue-200 overflow-hidden flex items-center justify-center">
+              <span className="text-blue-600 font-bold text-lg">
+                {user?.full_name ? user.full_name.charAt(0).toUpperCase() : "A"}
+              </span>
             </div>
+
           </div>
+
+          {/* Garis Pembatas (Opsional untuk estetika) */}
+          <div className="h-8 w-px bg-gray-200"></div>
+
+          {/* Tombol Keluar */}
+          <button 
+            onClick={handleLogout}
+            className="flex items-center gap-2 text-sm font-medium text-red-500 hover:text-red-700 hover:bg-red-50 px-3 py-2 rounded-lg transition-colors"
+          >
+            <LogOut size={18} />
+            <span className="hidden sm:block">Keluar</span>
+          </button>
+
         </div>
       </div>
     </header>