# Frontend Architektúra 2.0 & Dinamikus Megjelenítési Rendszer
## Megvalósíthatósági Elemzés

**Dátum:** 2026-06-08
**Készítette:** Rendszer-Architect
**Mérföldkő:** #26 - Frontend Architektúra 2.0 & Dinamikus Megjelenítési Rendszer

---

## 📊 Készültségi Összesítő

| Kártya | Cím | Készültség | Függőség | Fázis |
|--------|-----|-----------|---------|-------|
| #228 | JSONB `visual_settings` | **0%** | - | 1. Backend |
| #229 | RBAC/ABAC Engedélyezés | **40%** | #228 (opc.) | 1. Backend |
| #230 | Dinamikus/Statikus Fordítás | **80%** | - | 3. i18n |
| #231 | Layout komponensek | **60%** | #232 | 2. Frontend |
| #232 | Vue Router Nested Routing | **50%** | #231 | 2. Frontend |
| #233 | i18n audit | **30%** | #230, #232 | 3. i18n |
| #234 | Tailwind Témaváltó | **0%** | #228, #229 | 3. Téma |
| #235 | Expansion Card | **0%** | #232 | 4. UI Kit |
| #236 | Vészjelző Rendszer | **10%** | #232 | 4. UI Kit |

---

## 1. FÁZIS: Adatbázis és Backend Alapozás

### 🔴 #228 - JSONB `visual_settings` (0% kész)

**Már létezik:**
- Nincs `visual_settings` mező sem a `User` modellen, sem az `Organization` modellen
- Az `Organization.notification_settings` (`JSON`) és `Organization.external_integration_config` (`JSON`) mintaként szolgálnak a JSONB használathoz
- A `User.custom_permissions` (`JSON`) szintén minta a JSON mezőkhöz

**Hiányzik:**
- `visual_settings` JSONB mező a `User` táblában (pl.: `theme_mode`, `primary_color`, `animations_enabled`, `compact_mode`)
- `visual_settings` JSONB mező az `Organization` táblában (pl.: `wall_logo_url`, `brand_color`, `custom_css_overrides`)
- Backend API végpont: `PATCH /users/me/visual-settings`, `PATCH /organizations/{id}/visual-settings`
- A `UserProfile` interface-ben nincs `visual_settings` mező
- Az `OrganizationItem` interface-ben nincs `visual_settings` mező

---

### 🟡 #229 - RBAC/ABAC Engedélyezés (40% kész)

**Már létezik:**
- `UserRole` enum: `superadmin`, `admin`, `user`, `fleet_manager`, `sales`, `guest`
- `OrgUserRole` enum: `owner`, `admin`, `manager`, `driver`, `viewer`
- `User.subscription_plan`: `server_default="FREE"`
- `Organization.subscription_plan`: létező mező
- `User.custom_permissions`: JSON mező (kiterjeszthető ABAC-hoz)
- `UserProfile`: `role`, `subscription_plan`, `scope_level` mezők léteznek
- `OrganizationItem`: `subscription_plan` mező létezik

**Hiányzik:**
- `allow_custom_skin` és `allow_advanced_animations` feature flag-ok a subscription_plan JSON-ben
- Backend feature flag check utility/service
- Frontend `hasFeature(featureName: string): boolean` metódus
- Subscription plan definíciók (FREE=max 3 vehicle, BASIC=10, PREMIUM=unlimited)

---

## 2. FÁZIS: Frontend Struktúra & Layout Szétválasztás

### 🟡 #231 - Layout komponensek (60% kész)

**Már létezik:**
- `ConsumerLayout.vue`: **195 sor**, teljes layout headerrel, footerral, dekorációs elemekkel, quick actions grid-del
- `CorporateLayout.vue`: **98 sor**, céges sidebar, quick stats placeholder-ekkel
- `AdminLayout.vue`: **195 sor**, admin sötét sidebar
- Mindhárom layout `<slot />`-ot használ a tartalom beillesztésére

**Hiányzik:**
- **KRITIKUS**: `<slot />` → `<router-view />` csere mindhárom layout-ban
- `ConsumerLayout.vue` átnevezése `PrivateLayout.vue`-ra
- `CorporateLayout.vue` átnevezése `OrganizationLayout.vue`-ra
- "Privát felület" gomb az `OrganizationLayout.vue`-ban (auth store `switchOrganization(null)` hívás)
- "Céges felület" gomb a `PrivateLayout.vue`-ban (első business org-ra váltás)
- Layout transition animációk (`<Transition>` wrapper)

---

### 🟡 #232 - Vue Router átírás Nested Routing (50% kész)

**Már létezik:**
- `router/index.ts`: **83 sor**, globális `beforeEach` guard, auth ellenőrzés, landing redirect
- Route-ok: `/`, `/dashboard`, `/complete-kyc`, `/profile`, `/verify`, `/reset-password`, `/company/onboard`, `/company/garage`
- `beforeEach` guard: kezeli a `requiresAuth` meta-t, token ellenőrzést

**Hiányzik:**
- **Nincs nested routing** - minden route gyökér szinten
- Nincs layout wrapper pattern
- `/company/garage` route-nak nincs `/:id` paramétere
- Route meta kiterjesztése: `meta: { layout: 'private' | 'organization' | 'admin', requiresOrg: boolean }`

**Cél nested struktúra:**
```typescript
{
  path: '/',
  component: PrivateLayout,
  children: [
    { path: '', name: 'Landing', component: LandingView },
    { path: 'dashboard', name: 'Dashboard', component: DashboardView, meta: { requiresAuth: true } },
    { path: 'profile', name: 'Profile', component: ProfileView, meta: { requiresAuth: true } },
  ]
},
{
  path: '/company/:id',
  component: OrganizationLayout,
  children: [
    { path: 'dashboard', name: 'OrgDashboard', component: OrgDashboardView, meta: { requiresAuth: true, requiresOrg: true } },
    { path: 'garage', name: 'OrgGarage', component: CompanyGarageView, meta: { requiresAuth: true, requiresOrg: true } },
  ]
}
```

---

## 3. FÁZIS: Többnyelvűség (i18n) & Vizuális Témaváltó

### 🟢 #230 - Dinamikus és Statikus Fordítási Rendszer (80% kész)

**Már létezik:**
- **Backend**: `Translation` modell - **TELJESEN KÉSZ** (`system.translations` tábla)
- **Frontend**: `vue-i18n` beüzemelve `legacy: false` módban, `detectLocale()` függvénnyel
- 6 nyelvi fájl: `hu.ts`, `en.ts`, `de.ts`, `ro.ts`, `cz.ts`, `sk.ts`
- `translationService.ts`: `fetchTranslations()`, `fetchAllTranslations()`, `updateTranslation()`
- `appModeStore.ts`: `setLanguage(lang)`, `loadTranslations(lang)`, `getTranslation(key, defaultValue)`
- `LanguageSwitcher.vue`: létező komponens

**Hiányzik:**
- Backend API végpontok ellenőrzése (létezik-e `GET /api/v1/translations`?)
- Cache stratégia a dinamikus fordításokhoz (localStorage + verziószám)

---

### 🟠 #233 - i18n audit és szövegek kiszervezése (30% kész)

**Már létezik:**
- 6 db nyelvi fájl a `frontend/src/i18n/` mappában
- `hu.ts` kulcsstruktúra: `menu.*`, `header.*`, `dashboard.*`, `zen.*`, `auth.*`
- `DashboardHeader.vue` részleges i18n használat (`{{ t('menu.features') }}`)
- Backend JSON locale fájlok: `backend/static/locales/hu.json`

**Hiányzik - Hardcoded szövegek:**

1. **`DashboardView.vue`**: `SZERVIZNAPTÁR`, `SERVICE FINDER`, `Irányítópultod és járműveid áttekintése`
2. **`ConsumerLayout.vue`**: `Vehicle Registration`, `Service Booking`, `Cost Tracking`, `Tracking`, `Documents` (6 db), `© 2024 Your Company. All rights reserved.`
3. **`CorporateLayout.vue`**: `Organization`, `Overview`, `Vehicles`, `Drivers`, `Maintenance`, `Reports` (6 db sidebar), `42 vehicles`, `7 pending`, `€12,450`
4. **`CompanyGarageView.vue`**: `Céges garázs`

**Hiányzó i18n kulcsok:**
- `garage.private.title`, `garage.company.title`
- `buttons.next`, `buttons.save`, `buttons.cancel`
- `errors.*` (validációs hibák)
- `organization.*` (szervezeti nézetek)
- `layout.*` (layout elemek)
- `quickActions.*` (gyors akciók)

---

### 🔴 #234 - Tailwind CSS Változók és Témakezelő (0% kész)

**Már létezik:**
- `tailwind.config.js`: **38 sor**, egyedi színrendszer (sf-wall, sf-green, sf-blue, sf-accent, sf-dark stb.)
- `main.css`: **117 sor**, `btn-premium`, `hotspot-pulse`, `hotspot-ring` animációk

**Hiányzik:**
- **CSS Custom Properties** a `tailwind.config.js`-ben - nincs `var(--theme-*)` referencia
- `AppThemeStore` Pinia store - nem létezik
- Témaváltó logika: `light`, `dark`, `corporate` módok
- `:root` CSS változók (`--theme-bg`, `--theme-primary`, `--theme-text`, `--theme-accent`, `--theme-glass`)
- Sötét mód CSS (`dark:` osztályok hiányoznak)
- `applyTheme(settings)` függvény

---

## 4. FÁZIS: Animált UI Készlet

### 🔴 #235 - Expansion Card komponens (0% kész)

**Már létezik:**
- Nincs dedikált Expansion/ExpandableCard komponens
- A `DashboardView.vue` jármű kártyái group hover effekteket használnak

**Hiányzik:**
- Teljes `ExpansionCard.vue` komponens (Vue 3 `<script setup lang="ts">`)
- Props: `title`, `subtitle`, `icon`, `expanded` (v-model), `variant` ('default' | 'premium' | 'glass')
- Animációk: `@keyframes expandIn` / `expandOut`
- Slots: `#header`, `#default`, `#actions`

---

### 🟠 #236 - Kontextuális Vészjelző Rendszer (10% kész)

**Már létezik:**
- `hotspot-pulse` és `hotspot-ring` animációk a `main.css`-ben
- `ConsumerLayout.vue` scoped CSS pulse animáció
- Base alert stílus a `btn-premium` osztályban (glassmorphism)

**Hiányzik:**
- `ContextAlert.vue` komponens - nem létezik
- Props: `type` ('info' | 'warning' | 'error' | 'success'), `message`, `autoClose`, `dismissible`, `action`
- Alert store (`useAlertStore` Pinia store)
- Animációk: belépés (`slideInDown`), kilépés (`fadeOutUp`)
- Global alert renderelés (App.vue)
- Z-index kezelés

---

## 🔗 Ajánlott Implementációs Sorrend

```
Fázis 1 (Backend alapozás):
  #228 (JSONB) ──► #229 (RBAC)

Fázis 2 (Frontend struktúra):
  #231 (Layout-ok) ──► #232 (Router)

Fázis 3 (i18n + Téma):
  #230 (Fordítás) ──► #233 (i18n audit)
  #234 (Témaváltó) - független a #228/#229-től, de azok adják az adatforrást

Fázis 4 (UI Kit):
  #235 (Expansion Card) - független
  #236 (Alert System) - független
```

---

## ⚠️ Breaking Change Kockázatok

| Változtatás | Érintett komponensek | Kockázat |
|------------|---------------------|---------|
| `<slot />` → `<router-view />` | Minden view | 🔴 Magas |
| Layout átnevezés | Importok minden fájlban | 🟡 Közepes |
| CSS variable bevezetés | Minden komponens színe | 🔴 Magas |
| Router nested átírás | beforeEach guard, view path-ok | 🔴 Magas |
| i18n kulcs átnevezés | Minden `$t()` hívás | 🟡 Közepes |