# 📐 Logic Spec: Dashboard Header Restructure

## 1. Cél és Masterbook 2 illeszkedés

**Cél:** A privát garázs dashboard fejlécének (`DashboardHeader.vue`) átalakítása a felhasználó specifikációja szerint:
- **Bal:** 👋 Üdvözlés + keresztnév
- **Közép:** `{firstName}_garázsa` (i18n kulcsból)
- **Jobb:** Cégváltó dropdown → Nyelvváltó → Avatár menü (sorrendben)
- **Layout struktúra:** Marad a `PrivateLayout` + `DashboardHeader` felosztás

**Masterbook 2.0 illeszkedés:** A feladat illeszkedik az Epic 11 (Public Frontend) és a B2C dashboard UX specifikációjához.

---

## 2. Jelenlegi Problémák (`DashboardHeader.vue` - 685 sor)

| Probléma | Leírás |
|----------|--------|
| P1 - Túl komplex | 7 funkció egy komponensben (WelcomeCard, Logo, Funkciók menu, Center label, Org dropdown, LanguageSwitcher, Avatar) |
| P2 - Welcome Card | Lebegő elem, nem a header része - megtartható, de auditálni kell |
| P3 - Funkciók menu | Nem illik a header-be, 100+ sor Bento dropdown - **ELTÁVOLÍTANDÓ** |
| P4 - Logo + Brand | 2 sor + kép - **ELTÁVOLÍTANDÓ** a header-ből |
| P5 - Center label | Duplikált logika a jobb oldali org dropdown-nal |
| P6 - Jobb oldal sorrend | Jelenleg: Org dropdown → LanguageSwitcher → Avatar. **Megtartandó sorrendben** |

---

## 3. Új 3-Oszlopos Header Layout

```
┌─────────────────────────────────────────────────────────────────────────┐
│  [BAL]                     [KÖZÉP]                   [JOBB]             │
│  👋 Üdv, János!            János_garázsa             [🏢 Cégem ▼] [🌐] [👤] │
│                                                       ↓           ↓   ↓  │
│                                                Org Dropdown  Lang  Avatar│
│                                                (cég listával)   Switcher│
└─────────────────────────────────────────────────────────────────────────┘
```

### 3.1 Bal oldal: Welcome + keresztnév

```vue
<div class="flex items-center gap-2">
  <span class="text-lg">👋</span>
  <span class="text-sm font-medium text-white/80">
    {{ t('header.welcome') }}, <span class="font-semibold text-white">{{ displayName }}</span>!
  </span>
</div>
```

**`displayName` computed** - már létezik, elsődlegesen `props.firstName`, fallback email prefix.

### 3.2 Középső: `{firstName}_garázsa`

```vue
<div class="absolute left-1/2 -translate-x-1/2">
  <span class="text-sm font-semibold text-white/70 tracking-wide">
    {{ centerLabel }}
  </span>
</div>
```

**`centerLabel` computed logika:**
- Ha `isOnCompanyGarage` (szervezeti nézetben): `t('header.companyGarageLabel', { name: activeCompanyName })`
- Ha `isCorporateMode` (vállalati módban): `t('header.companyGarageLabel', { name: activeCompanyName })`
- Különben (személyes mód): `t('header.personalGarageLabel', { name: firstName })`

### 3.3 Jobb oldal (sorrendben: Cég → Nyelv → Avatár)

**Cég dropdown** - Meglévő funkció tisztítva:
- Megtartani: org-dropdown-container (dropdown cég listával)
- Eltávolítani: duplikált "Funkciók menüben lévő Organization Menu Item"
- Állapotok: nincs cég → "➕ Új cég" (navigáció `/company/onboard`); van cég → "🏢 Cégem" (dropdown); corporate mód → "👤 Személyes Garázs" (visszaváltás)

**Nyelvváltó** - Változatlan, 6 nyelv támogatása.

**Avatár menü** - Változatlan (Profile, Logout).

---

## 4. Eltávolítandó elemek

| Elem | Sorok | Hova kerül? |
|------|-------|-------------|
| Logo + Brand | 30-43 | ELTÁVOLÍTVA |
| Funkciók menu (Bento) | 46-154 | ELTÁVOLÍTVA, később `DashboardView.vue`-ba |
| Funkciók-belüli Org Menu Item | 119-135 | ELTÁVOLÍTVA (duplikáció) |

**Megtartva:** Floating Welcome Card (2-23. sorok) - vizuálisan elkülönül.

---

## 5. Érintett fájlok

| Fájl | Művelet | Mérték |
|------|---------|--------|
| `frontend/src/components/DashboardHeader.vue` | **ÁTÍRÁS** ~685 → ~300 sor | Nagy |
| `frontend/src/i18n/hu.ts` | Ellenőrzés (várhatóan nincs új kulcs) | Apró |
| `frontend/src/i18n/en.ts` | Ellenőrzés (várhatóan nincs új kulcs) | Apró |

**Nem érintett:** `PrivateLayout.vue`, `OrganizationLayout.vue`, `LanguageSwitcher.vue`, `auth.ts`

---

## 6. AuthStore használt értékei

| Érték | Típus |
|-------|-------|
| `authStore.user?.first_name` | `string \| undefined` |
| `authStore.user?.email` | `string \| undefined` |
| `authStore.myOrganizations` | `OrganizationItem[]` |
| `authStore.hasBusinessOrganization` | `boolean` (computed) |
| `authStore.isCorporateMode` | `boolean` (computed) |
| `authStore.businessOrganization` | `OrganizationItem \| undefined` (computed) |
| `authStore.switchOrganization(id \| null)` | `function` (async) |

---

## 7. Tesztelési terv

1. `vite build` hiba nélkül
2. Vizuális: Bal 👋 Welcome; Közép `{name}_garázsa`; Jobb: Cég → 🌐 → Avatár
3. Cég dropdown működik (list, select, back)
4. LanguageSwitcher működik (6 nyelv)
5. Avatár menü működik (Profile, Logout)

---

## 8. Módosítási sorrend

1. `DashboardHeader.vue` - Teljes átírás
2. `hu.ts` / `en.ts` - Ellenőrzés
3. `vite build` - Verifikáció

---

## ⏸️ Jóváhagyási pont

**Kérem a felhasználó jóváhagyását a fenti specifikációhoz!**