File size: 5,892 Bytes
45005b3 788eab4 45005b3 788eab4 45005b3 788eab4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 | import React from "react";
import {
ShieldCheck,
HardDrive,
LogOut,
HelpCircle,
Activity,
Cpu,
} from "lucide-react";
import { useAuth } from "../../context/AuthContext";
import { auditTracker } from "../../api/client";
interface HeaderProps {
onOpenTour?: () => void;
onNavigateToAudit?: () => void;
}
export const Header: React.FC<HeaderProps> = ({ onOpenTour, onNavigateToAudit }) => {
const { user, logout } = useAuth();
const externalCalls = auditTracker.getExternalCount();
return (
<header className="bg-[#080e1c]/95 backdrop-blur-md border-b border-[#1b2b4d] sticky top-0 z-30 shadow-md no-print transition-all">
{/* Top Air-Gap & LAN Status Banner */}
<div className="bg-[#040810] text-slate-300 px-4 py-1.5 text-xs font-medium flex items-center justify-between border-b border-[#14223d]">
<div className="flex items-center gap-2.5">
<span className="flex h-2 w-2 relative">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
</span>
<div className="flex items-center gap-1.5 font-bold tracking-wide">
<HardDrive className="w-3.5 h-3.5 text-emerald-400" />
<span className="text-emerald-300 font-mono text-[11px]">
Offline mode: all data stays on this machine
</span>
</div>
<span className="text-slate-600 hidden md:inline">•</span>
<span className="text-slate-400 text-[11px] hidden md:inline">
Local SQLite WAL • Zero Outbound Telemetry • FERPA & DPDP Ready
</span>
</div>
<div className="flex items-center gap-3">
{/* Status Badge */}
<div className="flex items-center gap-1.5 px-2.5 py-0.5 rounded-lg bg-[#0e172a] text-slate-300 text-[11px] font-mono border border-[#1b2b4d]">
<span className="h-1.5 w-1.5 rounded-full bg-emerald-400"></span>
<span className="text-emerald-300 font-semibold">Online</span>
</div>
{/* Audit Pill */}
<button
type="button"
onClick={onNavigateToAudit}
className="flex items-center gap-1.5 bg-emerald-950/80 hover:bg-emerald-900/80 border border-emerald-800/60 px-2.5 py-0.5 rounded-lg text-[11px] font-semibold text-emerald-300 transition-colors cursor-pointer shadow-xs shadow-emerald-950/50"
title="Verify 100% offline network compliance"
>
<Activity className="w-3 h-3 text-emerald-400" />
<span>external calls: {externalCalls}</span>
<ShieldCheck className="w-3 h-3 text-emerald-400" />
</button>
</div>
</div>
{/* Main Header Bar */}
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
<div className="flex items-center gap-3.5">
<div className="w-10 h-10 rounded-2xl bg-gradient-to-tr from-blue-700 via-teal-600 to-emerald-500 flex items-center justify-center text-white font-black text-lg shadow-md shadow-emerald-500/20 ring-2 ring-emerald-500/20">
PE
</div>
<div>
<div className="flex items-center gap-2">
<span className="font-black text-white text-base tracking-tight">
PLACEMENT ENGINE
</span>
<span className="text-[10px] font-black tracking-wider px-2 py-0.5 bg-blue-950/80 text-blue-300 border border-blue-800/60 rounded-full">
ENTERPRISE
</span>
<span className="text-[10px] font-bold px-2 py-0.5 bg-emerald-950/80 text-emerald-300 border border-emerald-800/60 rounded-full hidden sm:inline-flex items-center gap-1">
<Cpu className="w-3 h-3 text-emerald-400" />
CP-SAT Verified
</span>
</div>
<p className="text-xs text-slate-400 font-medium hidden sm:block">
Institutional Placement Eligibility, Policy & Clash-Free Scheduling Engine
</p>
</div>
</div>
<div className="flex items-center gap-3">
{onOpenTour && user?.role === "officer" && (
<button
type="button"
onClick={onOpenTour}
className="flex items-center gap-1.5 text-xs font-bold text-slate-200 hover:text-emerald-300 bg-[#111d38] hover:bg-[#162447] px-3 py-1.5 rounded-xl transition-all border border-[#1b2b4d] hover:border-emerald-500/40 cursor-pointer shadow-xs"
>
<HelpCircle className="w-4 h-4 text-emerald-400" />
<span>Officer Guide</span>
</button>
)}
{user && (
<div className="flex items-center gap-3 pl-3 border-l border-[#1b2b4d]">
<div className="text-right">
<span className="text-xs font-bold text-slate-200 block capitalize">
{user.username}
</span>
<span className="text-[10px] font-bold text-emerald-300 bg-emerald-950/80 border border-emerald-800/60 px-1.5 py-0.2 rounded uppercase tracking-wider">
{user.role.replace("_", " ")}
</span>
</div>
<button
type="button"
onClick={logout}
className="p-2 text-slate-400 hover:text-rose-400 hover:bg-rose-950/40 rounded-xl transition-all cursor-pointer border border-transparent hover:border-rose-900/40"
title="Sign out of local session"
aria-label="Sign out"
>
<LogOut className="w-4 h-4" />
</button>
</div>
)}
</div>
</div>
</header>
);
};
|