frontend 2026-06-10 bontva a 2 felület

2026-06-10 08:06:07 +00:00
parent b84b1bab41
commit 90e3173fbc
59 changed files with 8616 additions and 1412 deletions
--- a/plans/logic_spec_dashboard_header_restructure.md
+++ b/plans/logic_spec_dashboard_header_restructure.md
@@ -0,0 +1,139 @@
+# 📐 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!**