feat(users): add user administration and password management

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

@@ -8,11 +8,13 @@ import {
   LayoutDashboard,
   LogOut,
   MapPin,
+  Shield,
   Stethoscope,
   UserRound
 } from "lucide-react";
 import Link from "next/link";
-import { usePathname } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
+import { useEffect } from "react";
 import { useAuth } from "@/components/auth";
 import { BrandLogo } from "@/components/brand/brand-logo";
 
@@ -24,13 +26,21 @@ const navigation = [
   { href: "/devices", label: "Geraete", icon: Stethoscope },
   { href: "/equipment", label: "Pruefmittel", icon: Gauge },
   { href: "/validations", label: "Validierungen", icon: ClipboardCheck },
-  { href: "/documents", label: "Dokumente", icon: FileArchive }
+  { href: "/documents", label: "Dokumente", icon: FileArchive },
+  { href: "/users", label: "Benutzer", icon: Shield, adminOnly: true }
 ];
 
 export function AppShell({ children }: { children: React.ReactNode }) {
   const pathname = usePathname();
+  const router = useRouter();
   const auth = useAuth();
 
+  useEffect(() => {
+    if (auth.user?.must_change_password && pathname !== "/profile/security") {
+      router.push("/profile/security");
+    }
+  }, [auth.user?.must_change_password, pathname, router]);
+
   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">
@@ -40,6 +50,9 @@ export function AppShell({ children }: { children: React.ReactNode }) {
         <nav className="space-y-1">
           {navigation.map((item, index) => {
             const Icon = item.icon;
+            if ("adminOnly" in item && item.adminOnly && auth.user?.role !== "admin") {
+              return null;
+            }
             const active = pathname === item.href || pathname.startsWith(`${item.href}/`);
             return (
               <Link