Remove username text from header profile icon

The user's name/email is no longer displayed next to the profile avatar
in the header. The avatar dropdown menu remains functional for accessing
user settings and logout.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

.beads/issues.jsonl

@@ -1,4 +1,6 @@
+{"id":"books-8ea","title":"fjern brugers navn fra højre hjørne ved profile ikonet","status":"in_progress","priority":2,"issue_type":"task","owner":"nhh@softwarehuset.com","created_at":"2026-01-30T14:20:16.406033+01:00","created_by":"Nicolaj Hartmann","updated_at":"2026-01-30T14:20:47.977337+01:00"}
 {"id":"books-bj6","title":"Test automatisk pickup","status":"closed","priority":2,"issue_type":"task","owner":"nhh@softwarehuset.com","created_at":"2026-01-30T14:04:40.572496+01:00","created_by":"Nicolaj Hartmann","updated_at":"2026-01-30T14:05:44.401903+01:00","closed_at":"2026-01-30T14:05:44.401903+01:00","close_reason":"completed"}
-{"id":"books-h6e","title":"fjern hurtig bogføring og den visning der høre dertil","status":"in_progress","priority":2,"issue_type":"task","owner":"nhh@softwarehuset.com","created_at":"2026-01-30T14:14:50.436314+01:00","created_by":"Nicolaj Hartmann","updated_at":"2026-01-30T14:15:06.776032+01:00"}
+{"id":"books-h6e","title":"fjern hurtig bogføring og den visning der høre dertil","status":"closed","priority":2,"issue_type":"task","owner":"nhh@softwarehuset.com","created_at":"2026-01-30T14:14:50.436314+01:00","created_by":"Nicolaj Hartmann","updated_at":"2026-01-30T14:18:09.911294+01:00","closed_at":"2026-01-30T14:18:09.911294+01:00","close_reason":"Closed"}
+{"id":"books-hzt","title":"fix bug med tilføj brugere står forkert med encoded tegn","status":"open","priority":2,"issue_type":"task","owner":"nhh@softwarehuset.com","created_at":"2026-01-30T14:21:34.556319+01:00","created_by":"Nicolaj Hartmann","updated_at":"2026-01-30T14:21:34.556319+01:00"}
 {"id":"books-sbm","title":"ændre navnet i venstre side til Books","status":"closed","priority":2,"issue_type":"task","owner":"nhh@softwarehuset.com","created_at":"2026-01-30T14:11:13.017202+01:00","created_by":"Nicolaj Hartmann","updated_at":"2026-01-30T14:12:14.16594+01:00","closed_at":"2026-01-30T14:12:14.16594+01:00","close_reason":"Closed"}
 {"id":"books-wqf","title":"Opret en logud knap i topbaren","status":"closed","priority":2,"issue_type":"task","owner":"nhh@softwarehuset.com","created_at":"2026-01-30T14:06:06.999508+01:00","created_by":"Nicolaj Hartmann","updated_at":"2026-01-30T14:10:52.860045+01:00","closed_at":"2026-01-30T14:10:52.860045+01:00","close_reason":"Closed"}

frontend/src/components/layout/Header.tsx

@@ -1,21 +1,38 @@
-import { Layout, Space, Button, Dropdown, Avatar, Typography, Divider } from 'antd';
+import { useState } from 'react';
+import { Layout, Space, Button, Dropdown, Avatar, Divider, Tooltip, Badge } from 'antd';
 import {
   UserOutlined,
   LogoutOutlined,
   SettingOutlined,
   BellOutlined,
   QuestionCircleOutlined,
+  TeamOutlined,
+  CrownOutlined,
+  MenuOutlined,
 } from '@ant-design/icons';
 import type { MenuProps } from 'antd';
+import { useNavigate } from 'react-router-dom';
 import CompanySwitcher from './CompanySwitcher';
 import FiscalYearSelector from './FiscalYearSelector';
+import UserAccessManager from '@/components/company/UserAccessManager';
 import { useAuthStore } from '@/stores/authStore';
+import { useCanAdmin, useActiveCompanyRole } from '@/stores/companyStore';
+import { useUIStore } from '@/stores/uiStore';
+import { semanticColors, spacing } from '@/styles/designTokens';
 
 const { Header: AntHeader } = Layout;
-const { Text } = Typography;
 
-export default function Header() {
+interface HeaderProps {
-  const { user, logout } = useAuthStore();
+  isMobile?: boolean;
+}
+
+export default function Header({ isMobile = false }: HeaderProps) {
+  const navigate = useNavigate();
+  const { logout } = useAuthStore();
+  const canAdmin = useCanAdmin();
+  const activeRole = useActiveCompanyRole();
+  const toggleMobileDrawer = useUIStore((state) => state.toggleMobileDrawer);
+  const [userAccessOpen, setUserAccessOpen] = useState(false);
 
   const userMenuItems: MenuProps['items'] = [
     {
@@ -28,8 +45,13 @@ export default function Header() {
       icon: <SettingOutlined />,
       label: 'Indstillinger',
     },
+    ...(canAdmin ? [{
+      key: 'manage-users',
+      icon: <TeamOutlined />,
+      label: 'Administrer brugere',
+    }] : []),
     {
-      type: 'divider',
+      type: 'divider' as const,
     },
     {
       key: 'logout',
@@ -45,10 +67,13 @@ export default function Header() {
         logout();
         break;
       case 'settings':
-        // Navigate to settings
+        navigate('/indstillinger');
         break;
       case 'profile':
-        // Navigate to profile
+        navigate('/profil');
+        break;
+      case 'manage-users':
+        setUserAccessOpen(true);
         break;
     }
   };
@@ -56,39 +81,75 @@ export default function Header() {
   return (
     <AntHeader
       style={{
-        padding: '0 24px',
+        padding: `0 ${spacing.xl}px`,
-        background: '#fff',
+        background: semanticColors.headerBg,
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
-        borderBottom: '1px solid #f0f0f0',
+        borderBottom: `1px solid ${semanticColors.borderLight}`,
         position: 'sticky',
         top: 0,
         zIndex: 10,
       }}
     >
-      {/* Left side - Company Switcher and Fiscal Year Selector */}
+      {/* Left side - Mobile menu + Company Switcher and Fiscal Year Selector */}
-      <Space split={<Divider type="vertical" style={{ height: 24, margin: '0 8px' }} />}>
+      <Space size={isMobile ? 'small' : 'middle'}>
-        <CompanySwitcher />
+        {/* Hamburger menu for mobile */}
-        <FiscalYearSelector />
+        {isMobile && (
+          <Button
+            type="text"
+            icon={<MenuOutlined />}
+            onClick={toggleMobileDrawer}
+            aria-label="Åbn navigation"
+            style={{ marginRight: spacing.xs }}
+          />
+        )}
+        <Space split={!isMobile ? <Divider type="vertical" style={{ height: 24, margin: '0 8px' }} /> : undefined}>
+          <CompanySwitcher compact={isMobile} />
+          {!isMobile && <FiscalYearSelector />}
+        </Space>
       </Space>
 
       {/* Right side - User actions */}
       <Space size="middle">
+        {/* Team/User Management - only for owners */}
+        {canAdmin && (
+          <Tooltip title="Administrer brugere">
+            <Button
+              type="text"
+              icon={<TeamOutlined />}
+              onClick={() => setUserAccessOpen(true)}
+              aria-label="Administrer brugere"
+            />
+          </Tooltip>
+        )}
+
         {/* Help */}
         <Button
           type="text"
           icon={<QuestionCircleOutlined />}
-          title="Hjaelp"
+          aria-label="Hjælp"
+          title="Hjælp"
         />
 
         {/* Notifications */}
         <Button
           type="text"
           icon={<BellOutlined />}
+          aria-label="Notifikationer"
           title="Notifikationer"
         />
 
+        {/* Logout */}
+        <Tooltip title="Log ud">
+          <Button
+            type="text"
+            icon={<LogoutOutlined />}
+            onClick={logout}
+            aria-label="Log ud"
+          />
+        </Tooltip>
+
         {/* User Menu */}
         <Dropdown
           menu={{
@@ -98,18 +159,30 @@ export default function Header() {
           placement="bottomRight"
           trigger={['click']}
         >
-          <Space style={{ cursor: 'pointer' }}>
+          <Badge
+            count={activeRole === 'owner' ? <CrownOutlined style={{ color: '#faad14', fontSize: 10 }} /> : 0}
+            offset={[-2, 2]}
+            style={{ cursor: 'pointer' }}
+            role="button"
+            aria-label="Brugermenu"
+            aria-haspopup="menu"
+            tabIndex={0}
+          >
             <Avatar
               size="small"
               icon={<UserOutlined />}
               style={{ backgroundColor: '#1677ff' }}
+              aria-hidden="true"
             />
-            <Text style={{ maxWidth: 120 }} ellipsis>
+          </Badge>
-              {user?.name || user?.email || 'Bruger'}
-            </Text>
-          </Space>
         </Dropdown>
       </Space>
+
+      {/* User Access Manager Modal */}
+      <UserAccessManager
+        open={userAccessOpen}
+        onClose={() => setUserAccessOpen(false)}
+      />
     </AntHeader>
   );
 }