140 lines
5.5 KiB
Markdown
140 lines
5.5 KiB
Markdown
# 📐 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!**
|