some fixes and refactors

frontend/app/components/Header.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useAuth } from "../auth-context";
+import { sharedStyles } from "../styles/shared";
+
+type PageId = "counter" | "sum" | "profile" | "audit";
+
+interface HeaderProps {
+  currentPage: PageId;
+}
+
+interface NavItem {
+  id: PageId;
+  label: string;
+  href: string;
+  regularOnly?: boolean;
+}
+
+const NAV_ITEMS: NavItem[] = [
+  { id: "counter", label: "Counter", href: "/" },
+  { id: "sum", label: "Sum", href: "/sum" },
+  { id: "profile", label: "My Profile", href: "/profile", regularOnly: true },
+];
+
+export function Header({ currentPage }: HeaderProps) {
+  const { user, logout, hasRole } = useAuth();
+  const router = useRouter();
+  const isRegularUser = hasRole("regular");
+
+  const handleLogout = async () => {
+    await logout();
+    router.push("/login");
+  };
+
+  if (!user) return null;
+
+  // For audit page (admin), show only the current page label
+  if (currentPage === "audit") {
+    return (
+      <div style={sharedStyles.header}>
+        <div style={sharedStyles.nav}>
+          <span style={sharedStyles.navCurrent}>Audit</span>
+        </div>
+        <div style={sharedStyles.userInfo}>
+          <span style={sharedStyles.userEmail}>{user.email}</span>
+          <button onClick={handleLogout} style={sharedStyles.logoutBtn}>
+            Sign out
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  // For regular pages, build nav with links
+  const visibleItems = NAV_ITEMS.filter(
+    (item) => !item.regularOnly || isRegularUser
+  );
+
+  return (
+    <div style={sharedStyles.header}>
+      <div style={sharedStyles.nav}>
+        {visibleItems.map((item, index) => (
+          <span key={item.id}>
+            {index > 0 && <span style={sharedStyles.navDivider}>•</span>}
+            {item.id === currentPage ? (
+              <span style={sharedStyles.navCurrent}>{item.label}</span>
+            ) : (
+              <a href={item.href} style={sharedStyles.navLink}>
+                {item.label}
+              </a>
+            )}
+          </span>
+        ))}
+      </div>
+      <div style={sharedStyles.userInfo}>
+        <span style={sharedStyles.userEmail}>{user.email}</span>
+        <button onClick={handleLogout} style={sharedStyles.logoutBtn}>
+          Sign out
+        </button>
+      </div>
+    </div>
+  );
+}
+