From 5f7b4c6e1d7953e22db082eb0e2c50fc3211ed2b Mon Sep 17 00:00:00 2001
From: CCS Admin <martin.porwoll@complexcaresolutions.de>
Date: Thu, 26 Feb 2026 09:48:43 +0000
Subject: [PATCH] feat: add /account route, sidebar entry and header link

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/App.tsx                       |  2 ++
 frontend/src/components/layout/Header.tsx  | 12 ++++++++++--
 frontend/src/components/layout/Sidebar.tsx | 12 ++++++++++++
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 59a9483..447d404 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -13,6 +13,7 @@ import { ReportsPage } from '@/pages/ReportsPage'
 import { AdminUsersPage } from '@/pages/AdminUsersPage'
 import { AdminInvitationsPage } from '@/pages/AdminInvitationsPage'
 import { AdminAuditPage } from '@/pages/AdminAuditPage'
+import { AccountPage } from '@/pages/AccountPage'
 
 function App() {
   return (
@@ -29,6 +30,7 @@ function App() {
             <Route path="icd" element={<IcdPage />} />
             <Route path="coding" element={<ProtectedRoute requireAdmin><CodingPage /></ProtectedRoute>} />
             <Route path="reports" element={<ReportsPage />} />
+            <Route path="account" element={<AccountPage />} />
             <Route path="admin/users" element={<ProtectedRoute requireAdmin><AdminUsersPage /></ProtectedRoute>} />
             <Route path="admin/invitations" element={<ProtectedRoute requireAdmin><AdminInvitationsPage /></ProtectedRoute>} />
             <Route path="admin/audit" element={<ProtectedRoute requireAdmin><AdminAuditPage /></ProtectedRoute>} />
diff --git a/frontend/src/components/layout/Header.tsx b/frontend/src/components/layout/Header.tsx
index 05d8cb9..70eae2b 100644
--- a/frontend/src/components/layout/Header.tsx
+++ b/frontend/src/components/layout/Header.tsx
@@ -1,6 +1,7 @@
+import { useNavigate } from 'react-router-dom'
 import { useAuth } from '@/context/AuthContext'
 import { useNotifications } from '@/hooks/useNotifications'
-import { Avatar, AvatarFallback } from '@/components/ui/avatar'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import {
@@ -18,7 +19,7 @@ import {
 } from '@/components/ui/popover'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Separator } from '@/components/ui/separator'
-import { Bell, CheckCheck, LogOut, Menu, Moon, Sun } from 'lucide-react'
+import { Bell, CheckCheck, LogOut, Menu, Moon, Sun, UserCog } from 'lucide-react'
 import { useTheme } from '@/hooks/useTheme'
 
 interface HeaderProps {
@@ -26,6 +27,7 @@ interface HeaderProps {
 }
 
 export function Header({ onToggleSidebar }: HeaderProps) {
+  const navigate = useNavigate()
   const { user, logout } = useAuth()
   const { notifications, unreadCount, markAsRead, markAllAsRead } = useNotifications()
   const { theme, toggleTheme } = useTheme()
@@ -137,6 +139,7 @@ export function Header({ onToggleSidebar }: HeaderProps) {
         <DropdownMenuTrigger asChild>
           <Button variant="ghost" className="flex items-center gap-2 px-2">
             <Avatar size="sm">
+              {user?.avatar_url && <AvatarImage src={user.avatar_url} />}
               <AvatarFallback>{initials}</AvatarFallback>
             </Avatar>
             <span className="hidden text-sm font-medium md:inline-block">
@@ -155,6 +158,11 @@ export function Header({ onToggleSidebar }: HeaderProps) {
             </div>
           </DropdownMenuLabel>
           <DropdownMenuSeparator />
+          <DropdownMenuItem onClick={() => navigate('/account')} className="cursor-pointer">
+            <UserCog className="mr-2 h-4 w-4" />
+            Konto verwalten
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
           <DropdownMenuItem onClick={() => logout()} className="cursor-pointer">
             <LogOut className="mr-2 h-4 w-4" />
             Abmelden
diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
index 9a15b9e..9ce0172 100644
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -12,6 +12,7 @@ import {
   Users,
   Mail,
   History,
+  UserCog,
 } from 'lucide-react'
 
 interface NavItem {
@@ -31,6 +32,10 @@ const mainNavItems: NavItem[] = [
   { label: 'Berichte', to: '/reports', icon: FileBarChart },
 ]
 
+const accountNavItems: NavItem[] = [
+  { label: 'Kontoverwaltung', to: '/account', icon: UserCog },
+]
+
 const adminNavItems: NavItem[] = [
   { label: 'Benutzer', to: '/admin/users', icon: Users },
   { label: 'Einladungen', to: '/admin/invitations', icon: Mail },
@@ -81,6 +86,13 @@ export function Sidebar({ className }: { className?: string }) {
         ))}
       </nav>
 
+      <Separator />
+      <nav className="flex flex-col gap-1">
+        {accountNavItems.map((item) => (
+          <NavItemLink key={item.to} item={item} />
+        ))}
+      </nav>
+
       {isAdmin && (
         <>
           <Separator />