Phase 1 Complete by Claude Code

frontend/src/layout/Header.jsx

@@ -1 +1,28 @@
-// TODO: Header component
+import { useAuth } from "../auth/AuthContext";
+
+export default function Header() {
+  const { user, logout } = useAuth();
+
+  return (
+    <header className="bg-white border-b border-gray-200 px-6 py-3 flex items-center justify-between">
+      <h2 className="text-lg font-semibold text-gray-800">
+        BellSystems Admin Panel
+      </h2>
+
+      <div className="flex items-center gap-4">
+        <span className="text-sm text-gray-600">
+          {user?.name}
+          <span className="ml-2 px-2 py-0.5 bg-gray-100 text-gray-500 text-xs rounded-full">
+            {user?.role}
+          </span>
+        </span>
+        <button
+          onClick={logout}
+          className="text-sm text-red-600 hover:text-red-800 transition-colors"
+        >
+          Sign out
+        </button>
+      </div>
+    </header>
+  );
+}