# Térképes nézet — design-tokenek (handoff) **Feature:** Bejelentés-lista térképes nézet-kapcsolója (`/bejelentesek?view=map`) **Spec:** `uploads/urbino-docs/20_admin_felulet/30_terkep_nezet.md` **Mockup:** `manager-system/preview/screens/a1-bejelentes-lista-terkep.html` (canvas → „8 · Pin- és popup-tokenek") **Komponens:** `manager-system/organisms/ticket-map.jsx` (`window.PIN_SPEC` az egy forrás) **Lezárja:** NY-T-3 (a pontos pin-színkódok + a popup-kártya vizuál) > A térkép **lokalizációs eszköz, nem GIS**: csak pin, klaszter, előnézet-kártya, szűrés. > Réteg-kapcsoló / mérő- / rajz- / hőtérkép- / útvonal-eszköz **nincs** (K-009). --- ## 1. Pin = státusz A pin **CSAK színes jelölő** — kategória-ikon NEM kerül rá (az a popupban van). A hue a **meglévő státusz-badge-ből** jön (azonos hue, `--u-status-*`). A hangsúlyt nem a telítettség, hanem az **érték (sötétség) + méret + opacitás + halo** hordozza — így az „Új" a leghangsúlyosabb a pasztell OSM-alaplapon, az „Elutasítva" alapból rejtett. Forma: teardrop (`border-radius: 50% 50% 50% 0; transform: rotate(-45deg)`), fehér kontúr, tip = a geo-pont (`iconAnchor = [size/2, size]`). Ez a meglévő `map-widget` pin-formája. | Státusz (`enum`) | Címke | Pin-szín | Méret | Opacitás | Kontúr | Hangsúly | Forrás-token | |---|---|---|---|---|---|---|---| | `New` | Új | **`#334155`** (slate-700) | **34px** | 1.0 | 3px fehér + **halo** | **Leghangsúlyosabb** | `--u-status-uj-*` (slate) → mélyítve | | `Assigned` | Jóváhagyva | `#2E63EB` (blue-500) | 28px | 1.0 | 2px fehér | Másodlagos | `--u-status-jovahagyva-dot` | | `InProgress` | Folyamatban | `#D97706` (amber-500) | 28px | 1.0 | 2px fehér | Folyamat-szín | `--u-status-folyamatban-dot` | | `Resolved` | Megoldva | `#059669` (green-500) | 24px | **0.55** | 2px fehér | Halvány / visszafogott | `--u-status-megoldva-dot` | | `Rejected` | Elutasítva | **kontúr** `#DC2626` (red-500), fehér kitöltés | 22px | 0.9 | 2.5px piros | **Alapból rejtett** | `--u-status-elutasitva-dot` | **Halo (csak `New`):** `box-shadow: 0 3px 10px rgba(15,23,42,.45), 0 0 0 5px rgba(51,65,85,.14), 0 0 16px 3px rgba(51,65,85,.30)`. ### Az „Új = sötét graphite" döntés (figyelemfelhívás) A spec szerint a pin-hue a badge-ből jön **és** az „Új"-nak ki kell ugrania. Az „Új" badge azonban **semleges slate** — a szürke hue-val nem lehet „kiugrani". Feloldás: megtartjuk a slate hue-t, és a hangsúlyt **értékkel adjuk** — az „Új" a legsötétebb (slate-700), legnagyobb, halo-zott pin. Sötét, nagy, halo-zott jelölő a pasztell térképen a **legmagasabb kontrasztú** elem → kiugrik, miközben hű marad a badge-hez. Egyetlen token állítja (`PIN_SPEC.uj.fill`); ha a csapat inkább „riasztó" olvasatot akar, ez a token cserélhető — de a kék (Jóváhagyva) és a piros (Elutasítva) már foglalt. ### `Rejected` láthatóság Az `Rejected` alapból **nincs a térképen** — csak a **Mind** tabon, a státusz-fejléc-szűrőben explicit bekapcsolva (a lista `AC-A5` / `AC-M4` logikájával egyezően). A mockup ezt követi. --- ## 2. Klaszter — szám-jelvény Sűrű területen a pinek **státusz-semleges** szám-jelvénnyé olvadnak (kliens-oldali, TD-T3). A státusz-hue csatorna így a pineké marad; a klaszter csak **mennyiséget** kódol. - Forma: kör, fehér 3px gyűrű, mono szám, `box-shadow: 0 0 0 1px rgba(15,23,42,.22), 0 3px 10px rgba(15,23,42,.30)`. - Szín a darabszámmal: kicsi `--u-slate-700` · közepes `--u-slate-800` · nagy `--u-slate-900`. - Méret: a `leaflet.markercluster` `small/medium/large` lépcsője (≈34 / 40 / 48px). - Zoom/katt → szétnyit; egybeeső pontok **spiderfy** (`spiderfyOnMaxZoom: true`). --- ## 3. Előnézet-kártya (popup) Pin-kattintásra; a `.u-card` / `.u-chip` atomokra épül, a polgári lista-kártya vizuális nyelvén. | Token | Érték | |---|---| | Szélesség | **268px** (`minWidth = maxWidth = 268`) | | Fotó-bélyegkép | **116px** magas, teljes szélesség (üres → csíkozott placeholder + „fotó") | | Belső padding | `12px 14px 13px` | | Wrapper radius | **12px**, `overflow: hidden` | | Elevation | `--u-shadow-pop` | | Cím | 14px / 600 / `line-height 1.32` | | ALM-ID + idő | `--u-font-mono` 11px, `--u-fg-3` | | „Megnyitás" | 13px / 600, `--u-primary` → `/tickets/details/` | **Tartalom (spec 4.1):** `displayId` · `title` · kategória-badge (`categoryIconRef` + `categoryLabel`) · státusz-badge (`u-chip--status u-chip--`) · fotó-bélyegkép (első `ReportPhoto`) · `createdAt` (beérkezés) · „Megnyitás" link. i18n: `ticket.action.open`, `ticket.status.*`. Leaflet-chrome override: `.leaflet-popup-content { margin:0; width:268px }`, a wrapper `padding:0; border-radius:12px`, a close-gomb fehér a fotón. `autoPan` viszi be a képbe. --- ## 4. Nézet-kapcsoló, indikátor, kulcs **Lista / Térkép váltó** — szegmentált kontroll a tab-sáv jobb szélén; aktív = fehér felület + `--u-shadow-xs` (a `.u-tabs--pill` aktív nyelvén). `?view=map` a `[tableState]`-ben; a tabot + szűrőt **megőrzi** (K-042). Ikonok: lista-sorok / `map-pin`. **„N helyszín nélkül" indikátor** — pill a térkép bal-alsó sarkában (`--u-radius-pill`, `--u-shadow-md`), áthúzott `map-pin` ikon + `{count}`. Kattintás → **lista-nézet**, ugyanaz a tab + szűrő, `located=false` (i18n: `ticket.map.unlocated`). **Pin-kulcs** — read-only kártya jobb-fent (a teljes szűrés a meglévő `FilterPillBar` „Állapot" facetjén él, nem a térképen → nincs réteg-kapcsoló). Tartalmazza mind az 5 állapotot + a jegyzetet, hogy az „Elutasítva" csak explicit szűrővel látszik. --- ## 5. Állapotok (spec 4.5) + i18n | Állapot | Megjelenés | i18n-kulcs | |---|---|---| | Üres — nincs lokalizált ügy | alapközéppont + lágy overlay-üzenet; indikátor marad, ha `unlocatedCount > 0` | `ticket.map.empty` | | Betöltés | skeleton-felület + spinner („Térkép betöltése…") | — | | Hiba — pont-API | felső hibasáv + „Újrapróbálás" (az alaplap tölthet) | `ticket.map.error.points` | | Hiba — alaplap | csempe-szintű fallback, a pin-pozíciók megvannak | `ticket.map.error.tiles` | Új i18n a `ticket.view.list` = „Lista", `ticket.view.map` = „Térkép". A felület **tegez**. --- ## 6. Térkép-keret - **Leaflet + OSM** csempe (TD-T4, SD-77-konzisztens), `maxZoom: 19`. - **Középpont:** fit-bounds a lokalizált pinekre (`padding: [56,56], maxZoom: 17`); üres halmaznál hardcoded HU/town default (Balatonalmádi `47.0306, 18.0192`, TD-T7). - A térkép-konténer `radius 12`, `1px var(--u-border)`, `--u-surface-sunk` háttér. - Reszponzív: asztali alapeset, tableten is működik; a tab-sáv + váltó a lista mintáját követi.