240 lines
9.6 KiB
Markdown
240 lines
9.6 KiB
Markdown
# 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 |
|