66 lines
2.6 KiB
TypeScript
66 lines
2.6 KiB
TypeScript
import { NavLink, Routes, Route, Navigate, useLocation } from 'react-router-dom';
|
|
import { Users, Settings2, LayoutDashboard, ShieldCheck } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
import IAMPage from './IAMPage';
|
|
import ConfigPage from './ConfigPage';
|
|
import AdminDashboardPage from './AdminDashboardPage';
|
|
|
|
const tabs = [
|
|
{ label: 'IAM Management', path: '/admin/iam', icon: Users },
|
|
{ label: 'Configuration', path: '/admin/config', icon: Settings2 },
|
|
{ label: 'Management Dashboard', path: '/admin/dashboard', icon: LayoutDashboard },
|
|
];
|
|
|
|
export default function AdminPortal() {
|
|
const location = useLocation();
|
|
|
|
return (
|
|
<div className="flex flex-col h-full animate-fade-in">
|
|
{/* Portal header with tab navigation */}
|
|
<div className="shrink-0 border-b bg-card overflow-hidden">
|
|
<div className="px-3 md:px-6 h-14 md:h-16 flex items-center gap-2 md:gap-4">
|
|
<div className="flex items-center gap-2 shrink-0">
|
|
<div className="p-1.5 rounded-md bg-red-500/10">
|
|
<ShieldCheck className="h-5 w-5 text-red-400" />
|
|
</div>
|
|
<h1 className="font-heading text-base md:text-2xl font-bold tracking-tight">Admin</h1>
|
|
</div>
|
|
|
|
{/* Horizontal tab navigation */}
|
|
<nav className="flex items-center justify-evenly flex-1 h-full min-w-0 overflow-x-auto">
|
|
{tabs.map(({ label, path, icon: Icon }) => {
|
|
const isActive = location.pathname.startsWith(path);
|
|
return (
|
|
<NavLink
|
|
key={path}
|
|
to={path}
|
|
title={label}
|
|
className={cn(
|
|
'flex items-center justify-center gap-1.5 px-2.5 md:px-4 h-full text-sm font-medium transition-colors duration-150 border-b-2 -mb-px whitespace-nowrap',
|
|
isActive
|
|
? 'text-accent border-accent'
|
|
: 'text-muted-foreground hover:text-foreground border-transparent'
|
|
)}
|
|
>
|
|
<Icon className="h-4 w-4 shrink-0" />
|
|
<span className="hidden sm:inline">{label}</span>
|
|
</NavLink>
|
|
);
|
|
})}
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Page content */}
|
|
<div className="flex-1 overflow-y-auto">
|
|
<Routes>
|
|
<Route index element={<Navigate to="iam" replace />} />
|
|
<Route path="iam" element={<IAMPage />} />
|
|
<Route path="config" element={<ConfigPage />} />
|
|
<Route path="dashboard" element={<AdminDashboardPage />} />
|
|
</Routes>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|