kincses/service-finder
1
0
Fork 0
Code Issues 52 Pull Requests Packages Projects 2 Releases Wiki Activity

RABAC felépítése megtörtént ill hirdetési portál alapok lerakva

Browse Source
This commit is contained in:
Roo
2026-06-19 06:06:34 +00:00
parent fe3c32597d
commit 9ba2d9180d
30 changed files with 4336 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

259
docs/p0_sf_card_svg_analysis_basecard_plan.md Normal file
View File

@@ -0,0 +1,259 @@
# P0 Architecture Analysis — `sf_card.svg` → `BaseCard.vue`
**Dátum:** 2026-06-18
**Szerző:** Fast Coder (Core Developer)
**Státusz:** Elemzés kész — Jóváhagyásra vár
**Cél:** Az [`sf_card.svg`](Pictures/sf_card.svg) vizuális paramétereinek elemzése és az univerzális `BaseCard.vue` komponens megvalósítási tervének elkészítése.
---
## 1. SVG Vizuális Elemzés
### 1.1 Fájl Áttekintés
| Tulajdonság | Érték |
|-------------|-------|
| **Dokumentum típusa** | Inkscape SVG (v1.4.3) |
| **Méret** | 959 × 1322 px |
| **Rétegek** | 1 réteg (`g1` — "Image") |
| **Vektoros elemek** | 2 darab `<path>` elem |
| **Komplexitás** | Alacsony — tiszta geometriai formák, nincs gradient, nincs pattern |
### 1.2 Pontos Színkódok
| Elem | HEX | RGB | Leírás |
|------|-----|-----|--------|
| **Kártya teste (felső rész)** | `#306081` | `rgb(48, 96, 129)` | Sötét kékesszürke — a kártya alsó/fő panel színe |
| **Kártya teste (alsó rész)** | `#ffffff` | `rgb(255, 255, 255)` | Fehér — a kártya felső panel színe (a path-ok közötti üres terület) |
| **Háttér (pagecolor)** | `#ffffff` | `rgb(255, 255, 255)` | Inkscape vászon színe |
> **Megjegyzés:** Az SVG-ben nincs explicit gradient vagy árnyék. A kártya vizuálisan két színblokkból áll: egy sötétkék (`#306081`) alsó rész és egy fehér felső rész, amelyeket a két `<path>` elem határol.
### 1.3 Geometriai Elemzés
#### Path 1 — Alsó kártyarész (sötétkék panel)
```svg
<path style="fill:#306081"
d="m 168.62859,1261.8279 c -12.47141,-1.784 -25.24506,-11.5824 -31.03975,-23.81
L 134.5,1231.5 v -50.5204 -50.5205 l 3.35087,-6.8071
c 6.04108,-12.2723 16.85005,-21.1247 28.92039,-23.6854
3.12028,-0.662 110.34418,-0.912 315.22874,-0.7349
l 310.5,0.2683 5.78122,2.709
c 11.5255,5.4006 22.2104,18.6273 24.47002,30.291
0.56162,2.899 0.87028,24.5394 0.73454,51.5
-0.25606,50.8602 -0.20337,50.3688 -6.36068,59.3182
-6.1975,9.0077 -18.01232,16.8142 -27.55689,18.2078
-5.68739,0.8304 -615.17342,1.1267 -620.93962,0.3019 z" />
```
- **Pozíció:** A kártya alján helyezkedik el
- **Sarokkerekítés:** Enyhén lekerekített sarkok (bezier görbék)
- **Felső szegély:** Íves átmenet a fehér rész felé (enyhe "hullám")
#### Path 2 — Felső kártyarész (fehér panel)
```svg
<path style="fill:#ffffff"
d="M 2.25,185.33772 C 0.76962389,184.74037 0.38857818,47.208733 1.8590642,44.236431
2.3315495,43.281394 3.4982244,40.025 4.4516751,37
6.7993569,29.551542 13.230286,19.833498 19.405639,14.402448
25.056145,9.4329844 36.999577,3 40.57534,3
41.843984,3 43.160081,2.55 43.5,2
44.357522,0.61249997 915,0.61249997 915,2
c 0,0.55 1.05312,1 2.34028,1
4.22935,0 14.80939,6.1765597 21.67638,12.654527
7.89958,7.452064 13.30582,16.865801 14.84285,25.845473
1.00124,5.849387 1.33477,138.95439 0.35771,142.75
-0.42827,1.66372 -23.87631,1.74611 -475.58385,1.67105
C 217.31002,185.87763 2.9375,185.61513 2.25,185.33772 Z" />
```
- **Pozíció:** A kártya tetején helyezkedik el
- **Felső sarkok:** Enyhén lekerekítettek (bezier görbék)
- **Alsó szegély:** Íves átmenet a sötétkék rész felé
### 1.4 Következtetés az SVG-ről
Az SVG egy **klasszikus "kártya" formát** ábrázol, amely két színblokkból áll:
1. **Fehér felső rész** — a tartalom fő területe
2. **Sötétkék (`#306081`) alsó rész** — footer/akciósáv
A forma **nem tartalmaz** gradient-eket, árnyékokat, ikonokat vagy komplex vektorgrafikát. A kártya **100%-ban reprodukálható tiszta CSS-sel** (Tailwind osztályokkal), az SVG beágyazása nem szükséges.
---
## 2. Meglévő Komponensek Auditja
### 2.1 Felfedezett Kártya Komponensek
| Komponens | Fájl | Header | Body | Footer | Magasság |
|-----------|------|--------|------|--------|----------|
| **GlassCard** | [`ui/GlassCard.vue`](frontend/src/components/ui/GlassCard.vue) | ❌ (csak slot) | ✅ slot | ❌ | Változó |
| **FinancialCard** | [`dashboard/FinancialCard.vue`](frontend/src/components/dashboard/FinancialCard.vue) | ✅ `h-12 bg-slate-700` | ✅ | ✅ CTA gomb | `h-[350px]` |
| **MyVehiclesCard** | [`dashboard/MyVehiclesCard.vue`](frontend/src/components/dashboard/MyVehiclesCard.vue) | ✅ `h-12 bg-slate-700` | ✅ | ❌ | `h-[350px]` |
| **CostsActionsCard** | [`dashboard/CostsActionsCard.vue`](frontend/src/components/dashboard/CostsActionsCard.vue) | ✅ `h-12 bg-slate-700` | ✅ | ❌ | `h-[350px]` |
| **ServiceFinderCard** | [`dashboard/ServiceFinderCard.vue`](frontend/src/components/dashboard/ServiceFinderCard.vue) | ✅ `h-12 bg-slate-700` | ✅ | ❌ | `h-[350px]` |
| **GamificationCard** | [`dashboard/GamificationCard.vue`](frontend/src/components/dashboard/GamificationCard.vue) | ✅ `h-12 bg-slate-700` | ✅ | ✅ CTA gomb | `h-[350px]` |
| **ProfileTrustCard** | [`dashboard/ProfileTrustCard.vue`](frontend/src/components/dashboard/ProfileTrustCard.vue) | ✅ `h-12 bg-slate-700` | ✅ | ✅ CTA gomb | `h-[350px]` |
| **SubscriptionPlansView** | [`views/SubscriptionPlansView.vue`](frontend/src/views/SubscriptionPlansView.vue) | ❌ (inline div) | ✅ | ✅ gomb | Változó |
### 2.2 Duplikált Kód Minta
Minden dashboard kártya (6 db) **szinte azonos** külső struktúrát használ:
```html
<div class="bg-white/95 rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.12)]
overflow-hidden flex flex-col h-[350px] relative
cursor-pointer transition-all duration-300 ease-out
transform hover:-translate-y-3 hover:scale-[1.02] hover:shadow-2xl">
<!-- Top header bar -->
<div class="h-12 bg-slate-700 w-full shrink-0 flex items-center px-4">
<span class="text-white font-bold text-sm tracking-wide">ICON {{ t('title') }}</span>
</div>
<!-- Content -->
<div class="p-4 flex-1 flex flex-col text-slate-800 overflow-hidden">
<!-- ... egyedi tartalom ... -->
</div>
</div>
```
**Ez 6× duplikált kód.** A `BaseCard.vue` bevezetésével ez egyetlen komponensre redukálható.
### 2.3 GlassCard Elemzése
A [`GlassCard.vue`](frontend/src/components/ui/GlassCard.vue) egy üvegdesign (glassmorphism) kártya, amely:
- `backdrop-blur-xl` és `bg-white/[0.05]` átlátszóságot használ
- Két variánsa van: `standard` és `premium` (gradiens border)
- **Nincs** beépített header/footer slot-ja — csak egyetlen `<slot />`
- **Nem kompatibilis** a dashboard kártyák struktúrájával (azok tömör fehér hátteret használnak)
**Következtetés:** A `GlassCard` egy másik design rendszerhez készült (átlátszó/üveg). A dashboard kártyákhoz egy **új, dedikált `BaseCard`** komponens kell, amely a meglévő `bg-white/95` stílust használja.
---
## 3. BaseCard.vue — Megvalósítási Terv
### 3.1 Tervezési Döntések
| Kérdés | Döntés | Indoklás |
|--------|--------|----------|
| **SVG beágyazás?** | ❌ **Nem** | Az SVG csak 2 színblokk — 100%-ban CSS-sel reprodukálható |
| **Tailwind CSS?** | ✅ **Igen** | A meglévő kártyák is Tailwind-et használnak |
| **Slot struktúra?** | ✅ **3 slot** | `header`, `body` (default), `footer` |
| **Magasság?** | Prop: `height` | Alapértelmezett `h-[350px]`, de felülírható |
| **Hover effekt?** | Prop: `hoverable` | A dashboard kártyák hover animációt használnak |
| **Színrendszer?** | Prop: `headerColor` | Alapértelmezett `bg-slate-700`, de testreszabható |
### 3.2 Tervezett Komponens Struktúra
```vue
<template>
<div
class="bg-white/95 rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.12)]
overflow-hidden flex flex-col relative
transition-all duration-300 ease-out"
:class="[
heightClass,
hoverable ? 'cursor-pointer hover:-translate-y-3 hover:scale-[1.02] hover:shadow-2xl' : '',
clickable ? 'cursor-pointer' : '',
customClass,
]"
@click="$emit('click')"
>
<!-- ═══ HEADER SLOT ═══ -->
<div
v-if="$slots.header"
class="h-12 w-full shrink-0 flex items-center px-4"
:class="headerColorClass"
>
<slot name="header" />
</div>
<!-- ═══ BODY SLOT (default) ═══ -->
<div
class="flex-1 flex flex-col text-slate-800 overflow-hidden"
:class="bodyPaddingClass"
>
<slot />
</div>
<!-- ═══ FOOTER SLOT ═══ -->
<div v-if="$slots.footer" class="shrink-0 px-4 pb-4">
<slot name="footer" />
</div>
</div>
</template>
```
### 3.3 Props Tervezés
| Prop | Típus | Alapértelmezett | Leírás |
|------|-------|-----------------|--------|
| `hoverable` | `boolean` | `false` | Hover animáció (emelés + árnyék) |
| `clickable` | `boolean` | `false` | cursor-pointer (ha nincs hover) |
| `height` | `string` | `'h-[350px]'` | Kártya magasság (Tailwind class) |
| `headerColor` | `string` | `'bg-slate-700'` | Header háttérszín |
| `bodyPadding` | `'sm' \| 'md' \| 'lg' \| 'none'` | `'md'` | Body belső padding |
| `customClass` | `string` | `''` | Extra CSS osztályok |
### 3.4 Slots Tervezés
| Slot neve | Kötelező? | Használat |
|-----------|-----------|-----------|
| `header` | ❌ | Kártya fejléc (ikon + cím + badge-ek) |
| `default` (body) | ✅ | Fő tartalom |
| `footer` | ❌ | CTA gombok, akciósáv |
### 3.5 Migrációs Terv — Dashboard Kártyák
| Jelenlegi komponens | Header tartalom | Footer | Migráció |
|--------------------|-----------------|--------|----------|
| `FinancialCard.vue` | `💰 Wallet` | ✅ "Top Up" gomb | Header → slot, Footer → slot |
| `MyVehiclesCard.vue` | `🚗 My Vehicles` + count | ❌ | Header → slot |
| `CostsActionsCard.vue` | `💰 Costs` | ❌ | Header → slot |
| `ServiceFinderCard.vue` | `🔍 Service Finder` | ❌ | Header → slot |
| `GamificationCard.vue` | `🏆 Stats & Points` + "Live" badge | ✅ "Refresh" gomb | Header → slot, Footer → slot |
| `ProfileTrustCard.vue` | `🛡️ Profile` | ✅ "Profile →" gomb | Header → slot, Footer → slot |
### 3.6 SubscriptionPlansView Kártyák
A [`SubscriptionPlansView.vue`](frontend/src/views/SubscriptionPlansView.vue) jelenleg **inline** `<div>`-eket használ kártyaként:
```html
<div class="rounded-2xl border-2 border-slate-800 bg-white p-6 flex flex-col
shadow-lg hover:shadow-xl transition-all duration-200"
:class="{ 'ring-2 ring-emerald-500 border-emerald-500': ... }">
```
Ezek **nem** használják a dashboard kártyák header/footer struktúráját. A `BaseCard` itt is használható lenne, de alacsonyabb prioritású, mivel a subscription kártyák más layoutot igényelnek (nincs header sáv, helyette cím + ár + feature lista).
### 3.7 Létrehozandó Fájlok
| Fájl | Művelet | Leírás |
|------|---------|--------|
| [`frontend/src/components/ui/BaseCard.vue`](frontend/src/components/ui/) | **Új** | Univerzális kártya komponens 3 slot-tal |
| `frontend/src/components/dashboard/FinancialCard.vue` | **Refaktor** | BaseCard használata |
| `frontend/src/components/dashboard/MyVehiclesCard.vue` | **Refaktor** | BaseCard használata |
| `frontend/src/components/dashboard/CostsActionsCard.vue` | **Refaktor** | BaseCard használata |
| `frontend/src/components/dashboard/ServiceFinderCard.vue` | **Refaktor** | BaseCard használata |
| `frontend/src/components/dashboard/GamificationCard.vue` | **Refaktor** | BaseCard használata |
| `frontend/src/components/dashboard/ProfileTrustCard.vue` | **Refaktor** | BaseCard használata |
---
## 4. Összefoglalás
### Az SVG-ből kinyert vizuális paraméterek:
- **Fő szín:** `#306081` (sötét kékesszürke) — header/footer háttér
- **Másodlagos szín:** `#ffffff` (fehér) — body háttér
- **Sarokkerekítés:** `rounded-2xl` (~16px) — megfelel a meglévő dashboard kártyáknak
- **Forma:** Tiszta geometriai doboz, íves átmenettel a két szín között
### Javaslat:
1. **Hozzuk létre** a [`BaseCard.vue`](frontend/src/components/ui/BaseCard.vue) komponenst a fenti terv alapján
2. **Refaktoráljuk** a 6 dashboard kártyát a `BaseCard` használatára
3. **Ne ágyazzuk be** az SVG-t — a CSS/Tailwind megoldás elegendő és flexibilisebb
4. A `SubscriptionPlansView` kártyáit **később** lehet átállítani, mivel azok más struktúrát használnak
### Függőségek:
- **Bemenet:** Jóváhagyás a Tervezőtől a fenti tervre
- **Kimenet:** A dashboard kártyák egységes megjelenése, könnyebb karbantarthatóság