| import React from "react"; | |
| import { | |
| Briefcase, | |
| PlusCircle, | |
| FileText, | |
| Files, | |
| Users, | |
| Sliders, | |
| Shield, | |
| CheckCircle, | |
| Calendar, | |
| Sparkles, | |
| Award, | |
| GitCompare, | |
| Download, | |
| History, | |
| Activity, | |
| Cpu, | |
| } from "lucide-react"; | |
| export type NavTabId = | |
| | "drives" | |
| | "create_drive" | |
| | "announcements" | |
| | "students" | |
| | "rule_editor" | |
| | "policies" | |
| | "policy_simulator" | |
| | "eligibility" | |
| | "schedule" | |
| | "what_if" | |
| | "results" | |
| | "dispute" | |
| | "export" | |
| | "audit" | |
| | "offline_audit"; | |
| interface NavigationProps { | |
| activeTab: NavTabId; | |
| onSelectTab: (tab: NavTabId) => void; | |
| userRole?: string; | |
| } | |
| interface NavGroup { | |
| name: string; | |
| tabs: Array<{ | |
| id: NavTabId; | |
| label: string; | |
| icon: React.ComponentType<{ className?: string }>; | |
| badge?: string; | |
| }>; | |
| } | |
| export const Navigation: React.FC<NavigationProps> = ({ | |
| activeTab, | |
| onSelectTab, | |
| userRole = "officer", | |
| }) => { | |
| const navGroups: NavGroup[] = [ | |
| { | |
| name: "Setup & Roster", | |
| tabs: [ | |
| { id: "drives", label: "Drives", icon: Briefcase }, | |
| { id: "create_drive", label: "New Drive", icon: PlusCircle, badge: "Create" }, | |
| { id: "announcements", label: "25 Announcements", icon: Files, badge: "25 Docs" }, | |
| { id: "students", label: "Students & Importer", icon: Users }, | |
| ], | |
| }, | |
| { | |
| name: "Rules & Policy", | |
| tabs: [ | |
| { id: "rule_editor", label: "Rule Editor", icon: Sliders }, | |
| { id: "policies", label: "Offer Policies", icon: Shield }, | |
| { id: "policy_simulator", label: "Policy Simulator", icon: Cpu, badge: "New" }, | |
| ], | |
| }, | |
| { | |
| name: "Execution", | |
| tabs: [ | |
| { id: "eligibility", label: "Eligibility Runs", icon: CheckCircle }, | |
| { id: "schedule", label: "Schedule Grid", icon: Calendar, badge: "0 Clashes" }, | |
| { id: "what_if", label: "What-If & Publish", icon: Sparkles }, | |
| { id: "results", label: "Result Entry", icon: Award }, | |
| ], | |
| }, | |
| { | |
| name: "Governance", | |
| tabs: [ | |
| { id: "dispute", label: "Dispute Explainer", icon: GitCompare }, | |
| { id: "export", label: "Company Export", icon: Download }, | |
| { id: "audit", label: "Event Replay", icon: History }, | |
| { id: "offline_audit", label: "Offline Audit", icon: Activity }, | |
| ], | |
| }, | |
| ]; | |
| return ( | |
| <nav className="bg-[#080e1c]/95 backdrop-blur-md border-b border-[#1b2b4d] sticky top-[73px] z-20 shadow-sm no-print"> | |
| <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2"> | |
| <div className="flex items-center gap-4 overflow-x-auto no-scrollbar py-0.5"> | |
| {navGroups.map((group, groupIdx) => ( | |
| <React.Fragment key={group.name}> | |
| {groupIdx > 0 && ( | |
| <div className="h-6 w-px bg-[#1b2b4d] shrink-0 mx-1" aria-hidden="true" /> | |
| )} | |
| <div className="flex items-center gap-1 shrink-0"> | |
| <span className="text-[10px] uppercase font-black tracking-wider text-slate-500 mr-1 hidden xl:inline"> | |
| {group.name} | |
| </span> | |
| {group.tabs.map((tab) => { | |
| const Icon = tab.icon; | |
| const isActive = activeTab === tab.id; | |
| return ( | |
| <button | |
| key={tab.id} | |
| type="button" | |
| onClick={() => onSelectTab(tab.id)} | |
| className={`flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-bold whitespace-nowrap transition-all duration-150 cursor-pointer ${ | |
| isActive | |
| ? "bg-gradient-to-r from-blue-700 via-teal-600 to-emerald-600 text-white shadow-md shadow-emerald-900/40 ring-1 ring-emerald-400/40 scale-[1.02]" | |
| : "text-slate-300 hover:text-white hover:bg-[#111d38]" | |
| }`} | |
| > | |
| <Icon className={`w-3.5 h-3.5 ${isActive ? "text-white" : "text-slate-400"}`} /> | |
| <span>{tab.label}</span> | |
| {tab.badge && ( | |
| <span | |
| className={`text-[9px] px-1.5 py-0.2 rounded-full font-black uppercase tracking-wider ${ | |
| isActive | |
| ? "bg-white/20 text-white" | |
| : tab.badge === "0 Clashes" | |
| ? "bg-emerald-950/80 text-emerald-300 border border-emerald-800/60" | |
| : tab.badge === "New" | |
| ? "bg-blue-950/80 text-blue-300 border border-blue-800/60" | |
| : "bg-[#111d38] text-slate-300 border border-[#1b2b4d]" | |
| }`} | |
| > | |
| {tab.badge} | |
| </span> | |
| )} | |
| </button> | |
| ); | |
| })} | |
| </div> | |
| </React.Fragment> | |
| ))} | |
| </div> | |
| </div> | |
| </nav> | |
| ); | |
| }; | |