kincses/service-finder

Fork 0

Files

Roo 90e3173fbc frontend 2026-06-10 bontva a 2 felület

2026-06-10 08:06:07 +00:00

5.5 KiB

Raw Permalink Blame History

📐 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

<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`

<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

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

8. Módosítási sorrend

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

⏸️ Jóváhagyási pont

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

5.5 KiB Raw Permalink Blame History Unescape Escape