# 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