service-finder/docs/p0_sf_card_svg_analysis_basecard_plan.md

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

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

<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	❌ (csak slot)	✅ slot	❌	Változó
FinancialCard	dashboard/FinancialCard.vue	✅ h-12 bg-slate-700	✅	✅ CTA gomb	h-[350px]
MyVehiclesCard	dashboard/MyVehiclesCard.vue	✅ h-12 bg-slate-700	✅	❌	h-[350px]
CostsActionsCard	dashboard/CostsActionsCard.vue	✅ h-12 bg-slate-700	✅	❌	h-[350px]
ServiceFinderCard	dashboard/ServiceFinderCard.vue	✅ h-12 bg-slate-700	✅	❌	h-[350px]
GamificationCard	dashboard/GamificationCard.vue	✅ h-12 bg-slate-700	✅	✅ CTA gomb	h-[350px]
ProfileTrustCard	dashboard/ProfileTrustCard.vue	✅ h-12 bg-slate-700	✅	✅ CTA gomb	h-[350px]
SubscriptionPlansView	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:

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

<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 jelenleg inline <div>-eket használ kártyaként:

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