Changes

2026-01-06 14:46:23 +00:00
parent bebc3a2029
commit 0104839c11
25 changed files with 2955 additions and 79 deletions
@@ -0,0 +1,127 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Menu, ChevronDown, LogOut, User, Shield, Building2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { SidebarTrigger } from "@/components/ui/sidebar";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+
+// Mock user data - will be replaced with real auth context
+const mockUser = {
+  name: "John Doe",
+  email: "john@example.com",
+  avatar: null,
+  initials: "JD",
+};
+
+// Mock organization data
+const mockOrgs = [
+  { id: "1", name: "Acme Corp", role: "admin" },
+  { id: "2", name: "Beta Inc", role: "member" },
+];
+
+export function TopBar() {
+  const navigate = useNavigate();
+  const [currentOrg, setCurrentOrg] = useState(mockOrgs[0]);
+
+  const handleLogout = () => {
+    // Will be replaced with actual logout logic
+    navigate("/login");
+  };
+
+  return (
+    <header className="h-14 border-b border-border bg-card flex items-center justify-between px-4 flex-shrink-0">
+      {/* Left side - Sidebar toggle */}
+      <div className="flex items-center gap-3">
+        <SidebarTrigger className="text-muted-foreground hover:text-foreground">
+          <Menu className="w-5 h-5" />
+        </SidebarTrigger>
+      </div>
+
+      {/* Right side - Org selector + User menu */}
+      <div className="flex items-center gap-3">
+        {/* Organization Selector */}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="flex items-center gap-2 h-9 px-3">
+              <div className="w-6 h-6 rounded bg-primary/10 flex items-center justify-center">
+                <Building2 className="w-3.5 h-3.5 text-primary" />
+              </div>
+              <span className="text-sm font-medium hidden sm:inline">{currentOrg.name}</span>
+              <ChevronDown className="w-4 h-4 text-muted-foreground" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-56">
+            <DropdownMenuLabel className="text-xs text-muted-foreground uppercase tracking-wider">
+              Switch Organization
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            {mockOrgs.map((org) => (
+              <DropdownMenuItem
+                key={org.id}
+                onClick={() => setCurrentOrg(org)}
+                className="flex items-center justify-between"
+              >
+                <div className="flex items-center gap-2">
+                  <Building2 className="w-4 h-4 text-muted-foreground" />
+                  <span>{org.name}</span>
+                </div>
+                {org.role === "admin" && (
+                  <span className="text-xs bg-accent/10 text-accent px-1.5 py-0.5 rounded">
+                    Admin
+                  </span>
+                )}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        {/* User Menu */}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="flex items-center gap-2 h-9 px-2">
+              <Avatar className="w-7 h-7">
+                <AvatarImage src={mockUser.avatar || undefined} />
+                <AvatarFallback className="bg-primary text-primary-foreground text-xs">
+                  {mockUser.initials}
+                </AvatarFallback>
+              </Avatar>
+              <ChevronDown className="w-4 h-4 text-muted-foreground hidden sm:block" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-56">
+            <DropdownMenuLabel>
+              <div className="flex flex-col">
+                <span className="font-medium">{mockUser.name}</span>
+                <span className="text-xs text-muted-foreground font-normal">
+                  {mockUser.email}
+                </span>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={() => navigate("/profile")}>
+              <User className="w-4 h-4 mr-2" />
+              Profile
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => navigate("/security")}>
+              <Shield className="w-4 h-4 mr-2" />
+              Security
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={handleLogout} className="text-destructive focus:text-destructive">
+              <LogOut className="w-4 h-4 mr-2" />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </header>
+  );
+}