65 lines
2.5 KiB
TypeScript
65 lines
2.5 KiB
TypeScript
import { NavLink, Route, Routes } from "react-router-dom";
|
||
import { LayoutDashboard, FilePlus2, Settings as SettingsIcon, Landmark } from "lucide-react";
|
||
import Dashboard from "./pages/Dashboard";
|
||
import NewClosing from "./pages/NewClosing";
|
||
import Closing from "./pages/Closing";
|
||
import Settings from "./pages/Settings";
|
||
|
||
function SideLink({ to, icon: Icon, children, end }: {
|
||
to: string; icon: typeof LayoutDashboard; children: string; end?: boolean;
|
||
}) {
|
||
return (
|
||
<NavLink
|
||
to={to}
|
||
end={end}
|
||
className={({ isActive }) =>
|
||
`flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-colors ${
|
||
isActive
|
||
? "bg-primary-soft text-primary"
|
||
: "text-subink hover:bg-neutralbg hover:text-ink"
|
||
}`
|
||
}
|
||
>
|
||
<Icon size={18} />
|
||
{children}
|
||
</NavLink>
|
||
);
|
||
}
|
||
|
||
export default function App() {
|
||
return (
|
||
<div className="h-full bg-canvas p-3 sm:p-4">
|
||
<div className="flex h-full min-h-0 bg-panel rounded-3xl shadow-pop overflow-hidden border border-line">
|
||
<aside className="w-60 shrink-0 bg-sidebar flex flex-col border-r border-line">
|
||
<div className="px-5 py-5 flex items-center gap-2.5">
|
||
<span className="inline-flex items-center justify-center w-8 h-8 rounded-xl bg-primary text-white">
|
||
<Landmark size={17} />
|
||
</span>
|
||
<div>
|
||
<div className="text-sm font-semibold leading-tight text-ink">Amazon A/R Aging</div>
|
||
<div className="text-[11px] text-muted">Month-End Closing</div>
|
||
</div>
|
||
</div>
|
||
<nav className="px-3 py-2 space-y-1 flex-1">
|
||
<SideLink to="/" icon={LayoutDashboard} end>Dashboard</SideLink>
|
||
<SideLink to="/new" icon={FilePlus2}>New Closing</SideLink>
|
||
<SideLink to="/settings" icon={SettingsIcon}>Settings</SideLink>
|
||
</nav>
|
||
<div className="m-3 p-3.5 rounded-2xl bg-canvas/70 text-[11px] text-muted leading-relaxed">
|
||
Amazon‑only · processed locally on your server · no third‑party egress.
|
||
</div>
|
||
</aside>
|
||
|
||
<main className="flex-1 min-w-0 overflow-y-auto">
|
||
<Routes>
|
||
<Route path="/" element={<Dashboard />} />
|
||
<Route path="/new" element={<NewClosing />} />
|
||
<Route path="/closing/:id/*" element={<Closing />} />
|
||
<Route path="/settings" element={<Settings />} />
|
||
</Routes>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|