71 lines
2.9 KiB
TypeScript
71 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { useRouter, usePathname } from 'next/navigation';
|
|
import Link from 'next/link';
|
|
|
|
const NAV = [
|
|
{ label: 'Dashboard', href: '/dashboard' },
|
|
{ label: 'Invoices', href: '/invoices' },
|
|
{ label: 'Payments', href: '/payments' },
|
|
{ label: 'Tickets', href: '/tickets' },
|
|
{ label: 'Profile', href: '/profile' },
|
|
];
|
|
|
|
export default function PortalLayout({ children }: { children: React.ReactNode }) {
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
const [client, setClient] = useState<any>(null);
|
|
|
|
useEffect(() => {
|
|
const token = localStorage.getItem('portalToken');
|
|
const clientData = localStorage.getItem('portalClient');
|
|
if (!token) { router.push('/login'); return; }
|
|
if (clientData) setClient(JSON.parse(clientData));
|
|
}, [router]);
|
|
|
|
function handleLogout() {
|
|
localStorage.removeItem('portalToken');
|
|
localStorage.removeItem('portalClient');
|
|
router.push('/login');
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-surface-50">
|
|
{/* Header */}
|
|
<header className="bg-white border-b border-surface-200">
|
|
<div className="max-w-5xl mx-auto px-4 sm:px-6">
|
|
<div className="flex items-center justify-between h-14">
|
|
<div className="flex items-center gap-2">
|
|
<svg width="24" height="24" viewBox="0 0 40 40" fill="none" className="text-brand-600">
|
|
<rect width="40" height="40" rx="10" fill="currentColor" fillOpacity="0.1" />
|
|
<path d="M12 20h16M20 12v16" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />
|
|
</svg>
|
|
<span className="text-base font-bold text-surface-900 tracking-tight">FiberOps</span>
|
|
<span className="text-xs bg-brand-50 text-brand-700 px-2 py-0.5 rounded-full font-medium ml-1">Portal</span>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
{client && <span className="text-sm text-surface-500 hidden sm:block">{client.firstName} {client.lastName}</span>}
|
|
<button onClick={handleLogout} className="text-sm text-surface-500 hover:text-surface-800 cursor-pointer transition-colors">Sign out</button>
|
|
</div>
|
|
</div>
|
|
{/* Nav tabs */}
|
|
<nav className="flex gap-1 -mb-px">
|
|
{NAV.map((item) => {
|
|
const isActive = pathname === item.href;
|
|
return (
|
|
<Link key={item.href} href={item.href}
|
|
className={`px-4 py-2.5 text-sm font-medium border-b-2 transition-colors ${
|
|
isActive ? 'border-brand-600 text-brand-700' : 'border-transparent text-surface-500 hover:text-surface-700 hover:border-surface-300'
|
|
}`}>{item.label}</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main className="max-w-5xl mx-auto px-4 sm:px-6 py-6">{children}</main>
|
|
</div>
|
|
);
|
|
}
|