Files
alpenwerk-hr/components/shell/Sidebar.tsx
Maximilian Stubhan ef9852b09c Phase 1: project foundation for Alpenwerk HR
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.
2026-07-13 21:44:28 +02:00

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>
);
}