82 lines
3.2 KiB
TypeScript
82 lines
3.2 KiB
TypeScript
|
import { NavLink, Outlet } from "react-router-dom";
|
||
|
|
|
||
|
|
import { useAuth } from "../auth/AuthProvider";
|
||
|
|
import { ThemeToggle } from "./ThemeToggle";
|
||
|
|
|
||
|
|
const links = [
|
||
|
|
{ to: "/", label: "Overview" },
|
||
|
|
{ to: "/settings/company", label: "Company Settings" },
|
||
|
|
{ to: "/crm/customers", label: "Customers" },
|
||
|
|
{ to: "/crm/vendors", label: "Vendors" },
|
||
|
|
{ to: "/planning/gantt", label: "Gantt" },
|
||
|
|
];
|
||
|
|
|
||
|
|
export function AppShell() {
|
||
|
|
const { user, logout } = useAuth();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen px-4 py-6 md:px-8">
|
||
|
|
<div className="mx-auto flex max-w-7xl gap-6">
|
||
|
|
<aside className="hidden w-72 shrink-0 flex-col rounded-[28px] border border-line/70 bg-surface/90 p-6 shadow-panel backdrop-blur md:flex">
|
||
|
|
<div>
|
||
|
|
<div className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">MRP Codex</div>
|
||
|
|
<h1 className="mt-3 text-2xl font-extrabold text-text">Manufacturing foundation</h1>
|
||
|
|
<p className="mt-2 text-sm text-muted">Single-tenant platform shell with branding, auth, file storage, and planning foundations.</p>
|
||
|
|
</div>
|
||
|
|
<nav className="mt-8 space-y-2">
|
||
|
|
{links.map((link) => (
|
||
|
|
<NavLink
|
||
|
|
key={link.to}
|
||
|
|
to={link.to}
|
||
|
|
className={({ isActive }) =>
|
||
|
|
`block rounded-2xl px-4 py-3 text-sm font-semibold transition ${
|
||
|
|
isActive ? "bg-brand text-white" : "text-text hover:bg-page"
|
||
|
|
}`
|
||
|
|
}
|
||
|
|
>
|
||
|
|
{link.label}
|
||
|
|
</NavLink>
|
||
|
|
))}
|
||
|
|
</nav>
|
||
|
|
<div className="mt-auto rounded-2xl border border-line/70 bg-page/70 p-4">
|
||
|
|
<p className="text-sm font-semibold text-text">{user?.firstName} {user?.lastName}</p>
|
||
|
|
<p className="text-xs text-muted">{user?.email}</p>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={logout}
|
||
|
|
className="mt-4 rounded-xl bg-text px-4 py-2 text-sm font-semibold text-page"
|
||
|
|
>
|
||
|
|
Sign out
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
<main className="min-w-0 flex-1">
|
||
|
|
<div className="mb-6 flex items-center justify-between rounded-[28px] border border-line/70 bg-surface/90 px-6 py-5 shadow-panel backdrop-blur">
|
||
|
|
<div>
|
||
|
|
<p className="text-xs font-semibold uppercase tracking-[0.22em] text-muted">Operations Command</p>
|
||
|
|
<h2 className="text-2xl font-bold text-text">Foundation Console</h2>
|
||
|
|
</div>
|
||
|
|
<ThemeToggle />
|
||
|
|
</div>
|
||
|
|
<nav className="mb-6 flex gap-3 overflow-x-auto rounded-[24px] border border-line/70 bg-surface/85 p-3 shadow-panel backdrop-blur md:hidden">
|
||
|
|
{links.map((link) => (
|
||
|
|
<NavLink
|
||
|
|
key={link.to}
|
||
|
|
to={link.to}
|
||
|
|
className={({ isActive }) =>
|
||
|
|
`whitespace-nowrap rounded-2xl px-4 py-2 text-sm font-semibold transition ${
|
||
|
|
isActive ? "bg-brand text-white" : "bg-page/70 text-text"
|
||
|
|
}`
|
||
|
|
}
|
||
|
|
>
|
||
|
|
{link.label}
|
||
|
|
</NavLink>
|
||
|
|
))}
|
||
|
|
</nav>
|
||
|
|
<Outlet />
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|