# Page: Profile

# Page Spec: Profile (Settings)

## Route
`/profile`

## Architecture Status
**Core**

## Figma Reference
`profile.png`

## Visual Description from Figma

The profile/settings page is the user account management screen:

- **Top bar:** Left side has a back arrow (ArrowLeft, NOT chevron) in muted gray. "Profil" heading in bold **sans-serif** font (NOT serif). Right side is empty. Background is light gray (#EEEEEE).
- **User card:** White rounded card at top with:
  - Circular avatar with light green background (#0B6E35/10 = 10% opacity green)
  - Initials "AH" in dark green (#0B6E35) centered in the avatar circle
  - User name "Amir Hadžić" in bold black **LEFT-ALIGNED** (NOT centered) next to avatar
  - Email "amir@eksempel.no" in muted gray below name, **LEFT-ALIGNED** (NOT centered)
  - **LAYOUT:** Avatar and text are in horizontal flexbox (NOT centered vertical stack)
- **Menu card:** White rounded card containing 5 menu items:
  1. **"Mine kontoer"** — building/bank icon (outlined, dark gray) on left, chevron right on right side
  2. **"Varsler"** — bell icon (outlined, dark gray) on left, chevron right on right side
  3. **"Innstillinger"** — gear/cog icon (outlined, dark gray) on left, chevron right on right side
  4. **"Sikkerhet"** — shield icon (outlined, dark gray) on left, chevron right on right side
  5. **"Hjelp og støtte"** — question mark in circle icon (outlined, dark gray) on left, chevron right on right side
  - Each menu item has padding, separated by subtle divider lines
  - Icons are consistent size (approximately 20-24px)
  - Text is medium weight, dark black
  - Chevron right icons are muted gray
- **Logout button:** Separate white rounded button with:
  - "Logg ut" text in red (#EF4444)
  - Logout/exit icon (LogOut component) **inline with text** (NOT on left with text to right)
  - **2px solid red border** (border-2 border-[#EF4444])
  - White background, hover changes to light red (#FEF2F2)
- **Footer text:** **NOT IMPLEMENTED** (claimed in spec but missing from code)
- **Bottom navigation:** 5 tabs — Hjem (house outline), Send (paper plane outline), Skann (QR outline), Kort (card outline), Profil (active, green, filled person icon). All inactive tabs are gray.

Background is light gray (#EEEEEE). Spacing between cards is consistent.

## Page Layout

```
App page WITH bottom nav
├── Top Bar
│   ├── Left: Back arrow
│   ├── Center: "Profil" heading
│   └── Right: Empty
├── User Card (white rounded, centered content)
│   ├── Avatar circle (initials, green on light green bg)
│   ├── User full name (bold)
│   └── Email address (muted)
├── Menu Card (white rounded)
│   ├── "Mine kontoer" (bank icon + chevron)
│   ├── "Varsler" (bell icon + chevron)
│   ├── "Innstillinger" (gear icon + chevron)
│   ├── "Sikkerhet" (shield icon + chevron)
│   └── "Hjelp og støtte" (question icon + chevron)
├── Logout Button Card (white rounded, red text)
│   └── "Logg ut" (logout icon)
├── Footer Text
│   └── "Drop v0.1.0 · ALAI Holding AS"
└── Bottom Nav (Profil active)
```

## Components

### Top Bar
```tsx
<div className="flex items-center gap-3 px-6 pt-6">
  <Link href="/dashboard">
    <button className="rounded-lg p-2 hover:bg-white/80">
      <ArrowLeft className="h-5 w-5 text-[#6B7280]" />
    </button>
  </Link>
  <h1 className="text-xl font-bold text-[#1A1A1A]">Profil</h1>
</div>
```

### User Card
```tsx
<div className="rounded-2xl bg-white p-6 shadow-sm">
  <div className="flex items-center gap-4">
    <div className="h-14 w-14 rounded-full bg-[#0B6E35]/10 flex items-center justify-center text-xl font-bold text-[#0B6E35]">
      {user.firstName.charAt(0)}{user.lastName.charAt(0)}
    </div>
    <div>
      <p className="font-semibold text-lg text-[#1A1A1A]">{user.firstName} {user.lastName}</p>
      <p className="text-sm text-[#6B7280]">{user.email}</p>
    </div>
  </div>
</div>
```

### Menu Card
```tsx
<div className="rounded-2xl bg-white shadow-sm overflow-hidden">
  <MenuItem
    icon={<Building2 className="h-5 w-5" />}
    label="Mine kontoer"
    href="/accounts"
  />
  <Divider />
  <MenuItem
    icon={<Bell className="h-5 w-5" />}
    label="Varsler"
    href="/notifications"
  />
  <Divider />
  <MenuItem
    icon={<Settings className="h-5 w-5" />}
    label="Innstillinger"
    href="/settings"
  />
  <Divider />
  <MenuItem
    icon={<Shield className="h-5 w-5" />}
    label="Sikkerhet"
    href="/security"
  />
  <Divider />
  <MenuItem
    icon={<HelpCircle className="h-5 w-5" />}
    label="Hjelp og støtte"
    href="/support"
  />
</div>
```

### Menu Item Component
```tsx
<Link href={href} className="flex items-center justify-between px-5 py-4 hover:bg-[#F9FAFB] transition-colors">
  <div className="flex items-center gap-3">
    <div className="text-[#6B7280]">{icon}</div>
    <span className="text-[15px] font-medium text-[#1A1A1A]">{label}</span>
  </div>
  <ChevronRight className="h-5 w-5 text-[#9CA3AF]" />
</Link>
```

### Divider
```tsx
<div className="h-px bg-[#E5E7EB] mx-5" />
```

### Logout Button
```tsx
<button
  onClick={handleLogout}
  className="w-full rounded-2xl bg-white border border-[#E5E7EB] p-4 shadow-sm hover:bg-[#FEF2F2] transition-colors"
>
  <div className="flex items-center justify-center gap-2">
    <LogOut className="h-5 w-5 text-[#EF4444]" />
    <span className="text-[15px] font-semibold text-[#EF4444]">Logg ut</span>
  </div>
</button>
```

### Footer Text
```tsx
<p className="text-center text-xs text-[#9CA3AF]">
  Drop v0.1.0 · ALAI Holding AS
</p>
```

## Data Displayed
| Data | Source | API |
|------|--------|-----|
| User full name | JWT / user profile | GET `/api/account` |
| User email | User profile | GET `/api/account` |
| User initials | Derived from full name | Client-side |
| App version | Build metadata | Static |
| Company name | Static | Static |

## User Interactions
| Element | Action | Result |
|---------|--------|--------|
| Back arrow | Click | Navigate back to previous page |
| Avatar | Click | Optional: navigate to profile edit page |
| "Mine kontoer" | Click | Navigate to `/accounts` |
| "Varsler" | Click | Navigate to `/notifications` |
| "Innstillinger" | Click | Navigate to `/settings` (app preferences) |
| "Sikkerhet" | Click | Navigate to `/security` (PIN, biometrics, 2FA) |
| "Hjelp og støtte" | Click | Navigate to `/support` (FAQs, contact) |
| "Logg ut" button | Click | Clear JWT cookie, redirect to `/login` |
| Bottom nav tabs | Click | Navigate to respective page |

## Norwegian Labels
| Element | Norwegian Text |
|---------|---------------|
| Page title | Profil |
| Bank accounts menu | Mine kontoer |
| Notifications menu | Varsler |
| Settings menu | Innstillinger |
| Security menu | Sikkerhet |
| Help menu | Hjelp og støtte |
| Logout button | Logg ut |
| Footer | Drop v0.1.0 · ALAI Holding AS |

## Design Tokens
| Token | Value |
|-------|-------|
| Page bg | `#EEEEEE` |
| Card bg | `#FFFFFF` |
| Avatar bg | `#D1E9DC` (light green/mint) |
| Avatar text | `#0B6E35` |
| Primary | `#0B6E35` |
| Text primary | `#1A1A1A` |
| Text muted | `#6B7280` |
| Text light | `#9CA3AF` |
| Border | `#E5E7EB` |
| Danger | `#EF4444` |
| Danger hover bg | `#FEF2F2` |
| Hover bg | `#F9FAFB` |
| Brand font | `font-[family-name:var(--font-fraunces)]` |
| Card radius | `rounded-2xl` |
| Avatar radius | `rounded-full` |
| Avatar size | `h-20 w-20` |
| Menu item padding | `px-5 py-4` |
| Icon size | `h-5 w-5` |

## Bottom Navigation
**Yes** — "Profil" tab active (green, filled person icon). All other tabs inactive (gray, outline icons).