feat(validation): complete validation editor and master data modules

validation-suite/frontend/atlas/components/app-shell.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import {
+  Building2,
+  ClipboardCheck,
+  FileArchive,
+  Gauge,
+  LayoutDashboard,
+  LogOut,
+  MapPin,
+  Stethoscope,
+  UserRound
+} from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useAuth } from "@/components/auth";
+
+const navigation = [
+  { href: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
+  { href: "/customers", label: "Kunden", icon: Building2 },
+  { href: "/locations", label: "Standorte", icon: MapPin },
+  { href: "/contacts", label: "Ansprechpartner", icon: UserRound },
+  { href: "/devices", label: "Geraete", icon: Stethoscope },
+  { href: "/equipment", label: "Pruefmittel", icon: Gauge },
+  { href: "/validations", label: "Validierungen", icon: ClipboardCheck },
+  { href: "/documents", label: "Dokumente", icon: FileArchive }
+];
+
+export function AppShell({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  const auth = useAuth();
+
+  return (
+    <div className="min-h-screen bg-background text-text">
+      <aside className="fixed inset-y-0 left-0 z-30 hidden w-72 border-r border-border bg-surface px-5 py-6 lg:block">
+        <div className="mb-8">
+          <div className="text-xl font-semibold text-primary-dark">Validation Suite</div>
+          <div className="mt-1 text-sm text-text-light">Atlas Workspace</div>
+        </div>
+        <nav className="space-y-1">
+          {navigation.map((item, index) => {
+            const Icon = item.icon;
+            const active = pathname === item.href || pathname.startsWith(`${item.href}/`);
+            return (
+              <Link
+                key={`${item.label}-${index}`}
+                href={item.href}
+                className={`flex h-11 items-center gap-3 rounded-lg px-3 text-sm font-medium transition ${
+                  active ? "bg-accent/35 text-primary-dark" : "text-text-light hover:bg-background hover:text-text"
+                }`}
+              >
+                <Icon className="h-4 w-4" />
+                <span>{item.label}</span>
+              </Link>
+            );
+          })}
+        </nav>
+        <button
+          type="button"
+          onClick={auth.logout}
+          className="absolute bottom-6 left-5 right-5 flex h-11 items-center justify-center gap-2 rounded-lg bg-primary px-4 text-sm font-semibold text-white shadow-soft"
+        >
+          <LogOut className="h-4 w-4" />
+          Logout
+        </button>
+      </aside>
+      <main className="lg:pl-72">
+        <div className="mx-auto min-h-screen max-w-7xl px-4 py-5 sm:px-6 lg:px-10 lg:py-8">{children}</div>
+      </main>
+    </div>
+  );
+}