Scaffolds the Next.js 16 / TypeScript strict / Tailwind v3 app per NEXTJS_REBUILD_SUPERPROMPT.md, and implements the Foundation slice from the Phase 1 plan: - Corrected Supabase schema (supabase/schema.sql): org units, employees, history, positions, hire drafts, saved reports, audit log, reorg scenarios, role-based profiles, salary-masking view, RLS policies, auto-derivation triggers, position-number generator. - Seed script (supabase/seed.ts): ~800 realistic Austrian employees across 9 divisions / 16 departments / 35 teams, history, 8 open positions, and hr_admin/manager test accounts. - Supabase clients (lib/supabase/*), design tokens (tailwind.config.ts), format/color helpers (lib/format.ts, lib/colors.ts). - Shared UI kit (components/ui): Avatar, StatusChip, Toast, Modal, SlideOver, SegmentedControl, Lookup. - Auth (login page, Server Actions) and proxy.ts (Next 16's replacement for middleware) guarding the authenticated route group. - Shell (Sidebar, Topbar, NewHireButton stub) and the Dashboard page, reading live data via employees_directory. Employees list/detail, hire wizard, action panels, org chart, positions, reports, and audit log are deferred to later phases per the plan.
45 lines
1.6 KiB
TypeScript
45 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { BarChart3, Building2, History, LayoutGrid, Network, Users } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
const NAV_ITEMS = [
|
|
{ href: "/", label: "Übersicht", icon: LayoutGrid },
|
|
{ href: "/employees", label: "Mitarbeiter:innen", icon: Users },
|
|
{ href: "/orgchart", label: "Organigramm", icon: Network },
|
|
{ href: "/positions", label: "Positionen & Bereiche", icon: Building2 },
|
|
{ href: "/reports", label: "Berichte", icon: BarChart3 },
|
|
{ href: "/audit", label: "Audit-Log", icon: History },
|
|
] as const;
|
|
|
|
export function Sidebar() {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<nav className="fixed left-0 top-0 flex h-full w-[236px] flex-col border-r border-border bg-white">
|
|
<div className="flex h-14 items-center border-b border-border px-5">
|
|
<span className="text-base font-extrabold text-brand-700">Alpenwerk HR</span>
|
|
</div>
|
|
<ul className="flex-1 space-y-1 px-3 py-4">
|
|
{NAV_ITEMS.map(({ href, label, icon: Icon }) => {
|
|
const active = href === "/" ? pathname === "/" : pathname.startsWith(href);
|
|
return (
|
|
<li key={href}>
|
|
<Link
|
|
href={href}
|
|
className={`flex items-center gap-3 rounded px-3 py-2 text-sm font-semibold transition-colors ${
|
|
active ? "bg-brand-100 text-brand-700" : "text-ink-body hover:bg-surface"
|
|
}`}
|
|
>
|
|
<Icon className="h-4 w-4 shrink-0" />
|
|
{label}
|
|
</Link>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</nav>
|
|
);
|
|
}
|