# HANDOFF — Urbino Manager · átadási csomag

**Címzett.** Senior Angular fejlesztő + Claude Code.
**Forrás.** Urbino Manager UI-csapat (2026.05.27).
**Cél.** A 12-screen-es Urbino Manager pilot-felület portolásához szükséges teljes tudás-csomag — **ami nincs benne a `uploads/urbino-docs/` specben**.

---

## 1. Áttekintés

### Mit kapsz

A pilotra előkészített Urbino Manager felület 4 átfedő rétegben érkezik:

1. **Funkcionális spec** — `uploads/urbino-docs/` mappa (a fejlesztő-projektbe behúzva). 1 domain-modell + 1 közös-minta-doksi + 6 admin-feature-spec + 1 döntés-napló. **Ezt teljes hűséggel követjük.**
2. **Working Angular infrastruktúra** — a meglévő `project_backend_client_angular` repó `core/` rétege. Authentikáció, Table, ValidationForm, Lookup, Layout, Form-base. **Ezekre építünk, nem cseréljük.**
3. **UI-csapat React-mock + döntés-napló** — `manager-system/` (ebben a projektben). A vizuális tervek, az UX-döntések, és a spec-mock közti gap dokumentációja.
4. **Spec-visszacsatolás** — `SPEC-FEEDBACK-FOR-SPEC-TEAM.md`. **A spec-csapat válaszát várja** — Iter 7-után PR-szerűen vezetik át a `uploads/urbino-docs/`-on.

### Mit NEM kapsz tőlünk

- **Angular kódot.** Az UI-csapat React-mockokat szállít vizuális referenciaként. A portolás a fejlesztő-csapat feladata, a Claude Code segítségével.
- **Új DTO-szerződéseket.** Azokat a `00_domain_model.md` rögzíti; a `SPEC-FEEDBACK-FOR-SPEC-TEAM.md` javasolt módosításokat tartalmaz, amelyeket a spec-csapat hagy jóvá.
- **Új backend-API-t.** Az OpenAPI-spec és a `project_backend` rögzíti.

### Az illeszkedés vázlata

```
uploads/urbino-docs/         ← MIT építünk?       (feature-spec)
                ↓
manager-system/              ← HOGY néz ki vizuálisan? + döntés-napló
                ↓
project_backend_client_angular/core/   ← MIVEL építjük?  (Angular-minták)
                ↓
features/<új-feature>/       ← AZ ÚJ KÓD       (Claude Code generálja)
```

Az UI-csapat React-mock-ja **NEM** szállít új Angular-mintát. A meglévő `core/` rétegre képezzük le. **Az 5. szekció ad cross-mapping-táblát**.

---

## 2. Olvasási sorrend a fejlesztőnek

Az alábbi sorrendet javasoljuk az átadás befogadásához. A `uploads/urbino-docs/` az fejlesztő-projekten belül érhető el.

| # | Fájl | Mit ad? | Idő |
|---|---|---|---|
| 1 | `HANDOFF.md` | **Ez a dokumentum.** Áttekintés, döntés-állapot, cross-mapping. | 30 perc |
| 2 | `SPEC-FEEDBACK-FOR-SPEC-TEAM.md` | A spec-csapatnak küldött 40 SF-tétel. **A pilot-átadás előtt válaszra vár.** | 45 perc |
| 3 | `manager-system/DECISIONS.md` | 20 D-X döntés-napló (D-1..D-20). Az UI-csapat UX-választásainak indoklása. | 30 perc |
| 4 | `manager-system/ORGANISMS.md` | 42 organism API-katalógusa + Tier-besorolás. | 30 perc |
| 5 | `manager-system/SITEMAP.md` | A 12 admin-screen vs. 42 organism használat-mátrixa. | 10 perc |
| 6 | `manager-system/SCREEN-CONVENTIONS.md` | A 11-dimenziós screen-mock-szabvány. | 15 perc |
| 7 | `manager-system/preview/screens/` | A 28 React-mock — vizuális hivatkozás. **Böngészés, nem teljes átolvasás.** | 1-2 óra |

**Σ ~3-4 óra a teljes átadás befogadása.**

A 4 spec-fedés-leltár (`SPEC-COVERAGE-A1A2A3.md`, `-A4A5.md`, `-A6A7A8A9.md`, `-A10A11A12.md`) **opcionálisan** olvasható — feature-szintű deep-dive-nál (~ 4-6 óra).

A részletes UX-döntés-előzmény (16 [★] kérdés-térkép) a `HANDOFF-PREP.md`-ben — **csak ha vissza akarjuk vezetni**, miért így döntöttünk.

---

## 3. A 16 [★]-döntés véglegesített állapota

Az UI-csapat a fejlesztő-átadás-stratégiát 16 kérdés-csillaggal rögzítette; a teljes részletet a `HANDOFF-PREP.md` tartalmazza. Itt csak az **eredő döntés** mutatóként:

| Q | Tárgy | Döntés |
|---|---|---|
| Q1 | Organism-réteg szállítási formátuma | **(b)** React-mock + Angular-starter referencia (starter elhagyva — Iter 7-ben felülbírálva, csak React-mock + HANDOFF.md) |
| Q2 | PrimeNG-komponens mapping per-organism | **42-soros tábla változatlan** átemelve (l. 5. szekció + ORGANISMS.md) |
| Q3 | `_styles.css` portolása | **(c) Hybrid** — globális Tier-0/1 organism CSS + per-component Tier-3/4 |
| Q4 | Mock-data átadása | **(c)** Backend-stub Angular-MockInterceptor — **felülbírálva** Iter 7-ben: a `seed-data-balatonalmadi-pilot.json` szállítja a tenant-DB seed-jét |
| Q5 | DS-kapcsolódás (design-system → Angular) | **(a)** Read-only fixture-másolat a pilotra |
| Q6 | Routing + Angular-projekt-struktúra | **18-soros route-térkép** — l. `HANDOFF-PREP.md` |
| Q7 | Inline-organism-pótlások jegyzéke | **(a) 3-soros AUDIT-2 §3.3 tábla** változatlan (l. 6. szekció) |
| Q8 | Tesztelési stratégia | **(a)+(c)** Unit + Smoke a pilotra; **(b)** E2E Phase 2 |
| Q9 | Spec-források átadása | **(a)** A `uploads/urbino-docs/` átmásolva — **TÖRTÉNT** |
| Q10 | A SettingsSubNav jövője | **(a)** Portolni minimális komponensként, NEM használva — D-14 |
| Q11 | A 13 P0 KRITIKUS pilot-blokkoló | **(c) Hibrid** — Iter 4b szöveg-fix (SF-59) + starter A1-en SF-7 (Iter 7-ben elhagyva) + a többi 11 HANDOFF-note (l. 4. szekció) |
| Q12 | SF-92 A12 LinkValidator-badge | **(c) Törlés** — már mock-szinten elvégezve |
| Q13 | SPEC-FEEDBACK visszacsatolási formátum | **(a)+(i)** Önálló MD a Phase 3 ELŐTT — **SPEC-FEEDBACK-FOR-SPEC-TEAM.md** elkészült |
| Q14 | `accepted-pending-mock-update` mock-tidy | **(a)** 22 SF mock-fix elvégezve (Iter 4a) |
| Q15 | Mock-data konszolidáció a starter-hez | **(c) Hibrid** — **felülbírálva** Iter 7-ben: a `seed-data-balatonalmadi-pilot.json` egy fájl szállítja |
| Q16 | Új D-X kandidátusok rögzítése | **(a)** Phase 3 előtt — D-18..D-20 rögzítve |

---

## 4. P0 fix-tételek a portoláskor (15 tétel)

A pilot-felület **15 ponton** igényel a portoláskor figyelmet — vagy mert a screen-mockon nincs megjelenítve (`confirmed` státuszú spec-szöveg, csak Angular-szinten implementálandó), vagy mert spec-csapat-válaszra vár (`under-review`).

### 4.1 Spec-szerinti, vizuális mock nélküli implementáció (10 tétel)

A spec már most egyértelműen rögzíti; az Angular-portoláskor kötelező. **Forrás: `SPEC-FEEDBACK-FOR-SPEC-TEAM.md` Section 1 — `confirmed` státuszok.**

| SF | Hely | Mit kell az Angular-szinten implementálni |
|---|---|---|
| SF-12 | A1 ActivityTimeline | DTO stable-ID-szerződés (NEM denormalizált magyar szöveg). Kliens-oldali i18n + cross-lookup. **A React-mock most már demonstrálja** (Iter 7 előtti) — l. `manager-system/organisms/activity-timeline.jsx`. |
| SF-62 | A10 hír-szerkesztő | `News.pushOnPublish: boolean` mező. ContentEditor kapjon `kind="news"`-feltételes checkbox-ot. Spec: `60_tartalom.md` §2.1 + §4.2.4 + §4.2.5. **A React-mock demonstrálja.** |
| SF-63 | Tartalom-ág × 3 | `PublishStateChip` 3-állapotos (Archived modifier slate-tónussal). **A React-mock demonstrálja** A10/A11-en TabFilter-bővítéssel; A12-n FilterPillBar `showArchived` toggle-pill mintán. |
| SF-64 | Tartalom-ág × 3 | Kebab-akció-cella a 3 lista DataTable-jén + Publikálás-dropdown a ContentEditor publish-bar-ján. **NEM a React-mockon** (mock-szintű demonstráció elvetve — l. SF-64 update). Spec: `60_tartalom.md` §4.2.1/4.2.2/4.2.6. |
| SF-79 | A11 esemény-szerkesztő | `Event.latitude`/`longitude` szám-input-páros + "Megnyitás térképen" link. Tartomány-validáció spec-szerint. **A React-mock demonstrálja.** |
| SF-86 | A12 cityinfo-szerkesztő | `CityInfo.description` = plain text 500 (NEM RichTextEditor 10000). `ContentEditor` `kind="cityinfo"`-feltételes `<textarea>`. **A React-mock demonstrálja** (Iter 6d-ben átalakítva). |
| SF-87 | A12 cityinfo-szerkesztő | `CityInfo.iconRef` IconPicker mező. **A React-mock demonstrálja** 16-glyph-rácsmal. |
| SF-88 | A12 cityinfo-szerkesztő | `CityInfo.groupLabel` autocomplete-input + `GET /v1/city-info-groups` lookup-végpont. **A React-mock demonstrálja** popoverrel. |
| SF-89 | A12 cityinfo-lista | `PublishStateChip` per-row + `contentStatus`-szűrő (`showArchived`-toggle-pill mintán). **A React-mock demonstrálja.** |
| SF-7 | A1 adatlap | Új 5. state minta "Duplikátum nézet" — `originalTicketId` kitöltött. Redukált csak-olvasható layout: NINCS TriageBar / ActionBar / SimilarTicketsBox. **A React-mockon nincs** — a fejlesztő a `10_bejelentes_lista_es_adatlap.md` §4.3 SD-29 alapján implementálja. |

### 4.2 Spec-szelídítések (`accepted` — `SPEC-FEEDBACK-FOR-SPEC-TEAM.md` Section 2 + 3 — a spec-csapat válasza után)

A spec-csapat válasza után a `uploads/urbino-docs/` módosul. A fejlesztő-portolás után **érdemes ellenőrizni**, hogy a végleges spec már beillesztette az UI-csapat által javasolt szövegcseréket / mezőbővítéseket. A tételek pl.:

- SF-43 `Group.description` mező felvétele (`00_domain_model.md` §2.2 + `30_beallitasok.md` §3.2)
- SF-44 A7 lista `Létrehozta` oszlop (`30_beallitasok.md` §4.3.1)
- SF-71 A10 lista `Szerző` oszlop alapból-látható (`60_tartalom.md` §4.2.1)
- SF-75 A10 publish-no-cover warning ConfirmDialog (`60_tartalom.md` §4.2.5)
- SF-82, SF-83, SF-84, SF-93 A11/A12 `cellType` szerződések
- SF-49 A8 `UserInvitation.status` differenciálás — `Expired/Pending` mini-tag
- ... (l. SPEC-FEEDBACK Section 2/3 teljes listáját)

### 4.3 `under-review` tételek (4 db)

A management technikai kérdésnek minősítette, fejlesztő-/spec-csapat döntésére. **A pilot-átadás előtt eldöntendő:**

- **SF-2** — `TicketListDto.assigneeType` enum-mező a list-DTO-n
- **SF-16** — `SimilarTicketDto.attachmentCount` mező
- **SF-17** — `notes[].authorRole` detail-DTO bővítés
- **SF-52** — `User.lastActiveAt: DateTimeOffset?` mező

### 4.4 `deferred` (Phase 2 backlog) — 1 db

- **SF-61** — `Tenant.logoUploadedAt/By` audit-mezok. A logó-feature a pilotra még nem jelenik meg; Phase 2-ben (több város, több tenant) szükséges.

---

## 5. Cross-mapping — React-mock organism → `core/`-minta

A 42 organism-ből **a nagy többség (~32) a meglévő `core/`-réteg eszközeit fogyasztja**. A táblázat az ORGANISMS.md Tier-besorolása szerint rendezve.

### Tier 0 — minden screen kötelező

| React-mock organism | Hol használt | `core/`-minta a portoláskor | Megjegyzés |
|---|---|---|---|
| `AppShell` (LeftNav + TopBar) | mind | `core/layout/main/MainLayout` | A `MainLayout` wrappereli az auth-route-okat; tenant-context + szerepkör-ellenőrzés. A `LeftNav`-tartalom a `features/`-routes alapján adott. |
| `LeftNav` | beágyazott | `MainLayout` belső, vagy új `app-left-nav` standalone | Branding-block + a `features/` link-jei. `active`-state a router-tól. |
| `TopBar` | beágyazott | `MainLayout` belső | `NavStore` adja a breadcrumb-ot + a page title-t. |
| `PageHeader` | mind | Per-screen reusable component | `NavStore.title()` + `actions` slot. Egyszerű komponens, nincs `core/`-előzménye — szabványosítandó. |
| `EmptyState` | mind | Per-screen reusable component | Kis komponens, `kind` enummal. |

### Tier 1 — cross-cutting

| React-mock organism | Hol használt | `core/`-minta | Megjegyzés |
|---|---|---|---|
| `ConfirmDialog` | A1 Rejection/Reopen, A3 Merge, A8 Disable, ... | PrimeNG `p-confirmDialog` + `ConfirmationService` | DS-tokenekre szabva. Kind-variánsok (`info/danger/warning`). |
| `SettingsSection` | A6, A7, A8, A9 | Per-screen `<section>` + `<core-card>` | Szekció-cím + leírás + content + footer-action. Triviális. |
| `SettingsSubNav` | NEM használt (D-14) | Standalone-komponens, **portolva, NEM importálva** | l. Q10. Phase 2-ben visszahozható. |
| `UserChip` | A1, A4, A7, A8, lista-soron sokat | Per-screen `<core-user-chip>` | Avatar + név + role-suffix. PrimeNG `p-avatar` + custom-styling. |

### Tier 2 — lista-screen család

| React-mock organism | Hol használt | `core/`-minta | Megjegyzés |
|---|---|---|---|
| **`DataTable`** | A1, A5, A6, A7, A8, A10, A11 | **`[tableState]` directive + `TableStateConfig` + `<core-table>`** | A pilot **legfontosabb átképezése.** A `TableStateConfig.columns` egy-egy az UI-mockok `columns`-mintájával. Az URL-query-param-encoding, pagination, sort, filters — a directive megoldja. |
| **`FilterPillBar`** | A1, A5, A7, A8, A10, A11, A12 | `TableStateConfig.filters` + `core/filters/<filter-config>` | Search-mező + pillek megfelelői a `FilterConfig`-on. |
| `TabFilter` | A1, A5, A8, A10, A11 | PrimeNG `p-tabView` vagy custom + `TableStateConfig`-állapot-átkapcsolás | A tabok a `TableStateConfig.filters`-szel együtt változnak (új-tab → új-filter-szett). |

### Tier 3 — ág-specifikus, többször

| React-mock organism | Hol használt | `core/`-minta | Megjegyzés |
|---|---|---|---|
| `StatusTrack` / `StatusTrackBranched` | A1 adatlap | Új komponens, **DS-tokeneket** fogyaszt | 4-state stepper a status-paletta-tokenekkel. |
| `KpiCard` | A4 dashboard | Új komponens, `<core-card>`-alapú | Tabular-nums + lefúrás-href. D-16: `delta` deprecated. |
| `WeeklyReportCard` | A4, A5 | Új komponens, `<core-card>`-alapú | Dátumtartomány + status-chip + letöltés-link. |
| `RecipientList` | A5 (readOnly), A9 (editable) | Inline-szerkesztés mintán `[validationForm]` + `<form-field>` | Lista-szintű add/remove/toggle/edit. |
| `PhotoGallery` | A1 adatlap, A2 fotó-csatolás | **`<app-gallery>`** (`core/components/gallery/`) + `GalleryType.Tenant` | A meglévő read-only mód. BaseFormComponent-hez kötve a `loaded()` signal-en. |
| `PhotoUploader` | A2, A10, A11 | **`<app-gallery>`** edit-mode-ban | Ugyanaz a komponens, read-only=false. |
| `ContentEditor` | A10, A11, A12 | Per-feature `BaseFormComponent`-leszármazott + slot-pattern | `kind`-feltételes mezőkkel. A `extraFields` slot Angular-szinten egy `<ng-content select="...">`. |
| `RichTextEditor` | A10, A11 ContentEditor-on belül | **PrimeNG `p-editor`** (Quill, FK-1 spec-rögzített) | Konfiguráció: `formats: ['bold', 'italic', 'list', 'bullet', 'link']`. |
| `CoverImageUploader` | A10, A11 ContentEditor-on belül | **`<app-gallery>`** mintán adaptálva, single-image-módra | Vagy egy új komponens, ha a `<app-gallery>` nem konfigurálható single-image-re. |
| `PublishStateChip` | A10, A11, A12 | Új komponens (~15 sor) | 3-állapotos, slate/blue/green-tónus. |
| `DateTimeRangePicker` | A11 ContentEditor-extraField | PrimeNG `p-calendar` × 2 (start + end) | Csempézve magyar formátumra. |
| `LinkValidator` | A12 ContentEditor-extraField | Új komponens; debounced backend-validate-hívás | On-blur-validate + `state` propalapon. |
| `IconPicker` | A6 (kategória), A12 (cityinfo `iconRef`) | Új komponens — popover-rács predefined `iconCatalog`-szettből | A spec `60_tartalom.md` §2.7 max 50 glyph. |

### Tier 4 — screen-specifikus

| React-mock organism | Screen | `core/`-minta | Megjegyzés |
|---|---|---|---|
| `TriageBar` | A1 adatlap | Per-screen `[validationForm]` + 4× `<form-field>` | Inline-szerkeszthető kategória/prioritás/határidő/felelős. `LookupLoaderService` a lookup-okhoz. |
| `TicketMetaBar` | A1 adatlap, A2 form-header | Per-screen `<core-card>`-leszármazott | Read-only meta. |
| `ActivityTimeline` | A1 adatlap | Új komponens, stable-ID szerződés (l. SF-12) | i18n-feloldás kliens-szinten. |
| `InternalNotesPanel` | A1 adatlap | `TicketNote`-form a `[validationForm]`-on + lista | Spec: `00_domain_model.md` §1.5. |
| `SimilarTicketsBox` | A1 adatlap | Per-screen komponens | A `20_duplikacio_es_osszevonas.md` §3. |
| `ActionBar` | A1 adatlap-alján | Per-screen `<core-button>`-cluster | Állapotgép-spec szerinti megengedett akciók. |
| `TicketCreateForm` | A2 | Standalone `BaseFormComponent`-leszármazott | A `LocationPicker`-rel + `<app-gallery>`-vel kombinálva. |
| `LocationPicker` | A2 (+ jövőbeli A11) | Új komponens + map-widget integráció (D-7) | A spec rögzíti a követelményeket. |
| `MapWidget` | LocationPicker + A1 adatlap-térkép | Új komponens, Leaflet vagy MapLibre alapon | DS spec OSM-tile-okat ír. |
| `TeamPerformanceTable` | A4 | Per-screen `<core-table>` + custom-celle | `isTopPerformer` mező-bővítés (D-16). |
| `PdfPreview` | A5 adatlap | Új komponens — `<iframe>` natív PDF-megjelenítéshez | SF-29 spec szerint: a böngésző PDF-megjelenítője, NEM custom HTML stub. |
| `CategoryTreeEditor` | A6 | Per-screen komponens, inline-edit (D-8) | Kétszintű fa; drag-grip a kategória-belül. |
| `GroupMemberList` | A7 | `LookupLoaderService` a tagok-listához | `UserPicker`-rel kombinálva. |
| `UserPicker` | A7 | PrimeNG `p-autoComplete` + `LookupLoaderService` | TenantUser-keresés. |
| `UserInviteDialog` | A8 | PrimeNG `p-dialog` + `[validationForm]` | Spec: `20_felhasznalokezeles.md`. |
| `RoleEditor` | A8 adatlap | `[validationForm]` + multi-select | A `K-024` szerepkör-kifosztás. |
| `LogoUploader` | A9 | **`<app-gallery>`** single-image-módra, vagy új komponens | Az SF-61 alapján a Phase 2-re halasztott. Pilot-on a logó vizuálisan nem jelenik meg. |
| `TenantInfoForm` | A9 | `BaseFormComponent`-leszármazott | Tenant-alapadatok. |
| `MergeConfirmDialog` | A3 | `ConfirmDialog` specifikus body | Two-ticket-summary. |
| `RejectionDialog` | A1 | `ConfirmDialog` specifikus body | Indok-dropdown + szabad szöveg. |
| `ReopenDialog` | A1 | `ConfirmDialog` specifikus body | Kötelező indok. |

### Cross-cutting CSS-szint (D-19, D-20)

| Class | Hol | Megjegyzés |
|---|---|---|
| `.u-self-chip` | A8 (saját-user "Te" jelölés); jövőben A7, A11 | `manager-system/organisms/_styles.css`-ben kanonikus, blue-50/200/700 tónus. |
| `.mgr-a11-time-cell--today` | A11 lista TimeCell `today`-állapot | `var(--u-blue-700)` szöveg-szín (D-20: blue, NEM amber). |

---

## 6. Ismert inline-pótlások jegyzéke

3 helyen a React-mock inline-implementációt szállít az organism helyett. **A portoláskor a kanonikus organism-API-t használd, NEM a mock-inline-t**:

| Screen | Inline | Kanonikus organism | Portolási megjegyzés |
|---|---|---|---|
| `a5-riportok-adatlap.html` `RecipientsCard` | sor ~390-415 | `WeeklyReportCard` + `RecipientList` (readOnly=true) | A kanonikus organism-eket portold; a list-mock-rendererelő helyett a `RecipientList` (readOnly=true) instance-t használd. |
| `a7-csoportok-adatlap.html` `MemberRow` + `.a7d-picker` | sor ~370-395 + ~485+ | `GroupMemberList` (edit-mode-ban beágyazva `UserPicker`) | API: `members[]` + `editMode` + `candidates[]` + `onRemove(id)` + `onAdd(id)` |
| `a8-felhasznalok-lista.html` `InviteCta` button | sor ~265-266 | `UserInviteDialog` (CTA → modal-flow) | A button megnyitja a dialog-overlay-t; a `UserInviteDialog` organism a `ConfirmDialog`-mintán. |

(Az `AUDIT-2.md` §3.3 részletez.)

---

## 7. Spec-hivatkozási konvenció + tenant-kontextus + i18n

### Spec-hivatkozás kódkommentben

Minden Angular-komponensben jelöld a forrás-spec szakaszát:

```ts
// Spec: 10_bejelentes_lista_es_adatlap.md §4.3 SD-29 (StateDuplicate minta)
// Forrás: manager-system/preview/screens/a1-bejelentes-adatlap.html
// D-X: manager-system/DECISIONS.md D-7 (Manual-eredet PhoneBanner)
```

### Tenant-kontextus

- A `Tenant` HTTP-header automatikusan beállítva — a meglévő `core/auth` + `TenantAccessService` kezeli.
- Tenant-scoped szerepkör: `tenant_manager_balatonalmadi` (pilot). Pl. a `LeftNav` "Beállítások" tételét csak `hasAnyRole(['tenant_manager_' + tenantCode])` látja.
- A `tenantCode = 'balatonalmadi'` literal-érték a `seed-data-balatonalmadi-pilot.json` `tenant.code`-jával.

### i18n — `hu.json`

- Az `ngx-translate` rendszerből kapcsolja a magyar szövegeket.
- A `manager-system/` React-mockok literal-szövegei a `i18n-keys-mgr.json`-be konszolidálva.
- A `translationPrefix` a `TableStateConfig`-en az oszlop-fejléceket automatikusan generálja (pl. `ticket.list.column.title`).

---

## 8. Onboarding-checklist a Claude Code-nak

A fejlesztő-átadás után az első 5 óra:

### 0–30 perc · Olvasás

- ✓ `HANDOFF.md` (ez a dokumentum)
- ✓ `SPEC-FEEDBACK-FOR-SPEC-TEAM.md` — a 40 SF-tétel áttekintése, `under-review` 4 db kiemelten

### 30–60 perc · Repó-szintű felmérés

- ✓ `cd project_backend_client_angular && npm install`
- ✓ `npm run apigen` — OpenAPI-kliens generálása (backend kell ezalatt fusson :5000-en)
- ✓ `npm start` — dev-szerver indítás :4200-en; bejelentkezés Zitadel-rel
- ✓ A meglévő `features/`-mappa böngészése; a `core/table/`, `core/validation/`, `core/components/base-form/`, `core/components/gallery/` áttekintése

### 60–90 perc · Mock-böngészés

- ✓ `manager-system/preview/screens/a1-bejelentes-adatlap.html` — A1 adatlap, 4 + 1 állapot. Az `ActivityTimeline` stable-ID-szerződés mintája itt él.
- ✓ `manager-system/preview/screens/a4-foldal.html` — A4 dashboard, `KpiCard` + `TeamPerformanceTable` + `WeeklyReportCard`.
- ✓ `manager-system/preview/screens/a10-hirek-szerkeszto.html` — A10 ContentEditor `kind="news"` 5 artboarddal, beleértve a SF-62 push-checkboxot és a SF-75 publish-warning ConfirmDialog-ot.

### 90–180 perc · Seed-data + i18n felvezetése

- ✓ `seed-data-balatonalmadi-pilot.json` — átolvasás. A `project_backend` tenant-DB seed-jébe konvertálható (vagy közvetlen migrációval, vagy admin-API-n keresztül).
- ✓ `i18n-keys-mgr.json` — beolvasztás a `src/i18n/hu.json`-be (új `manager`-szintű kulcsok).

### 180–300 perc · Első feature-portolás

- ✓ Javasolt: **A4 Főoldal (`/fooldal`)** — a Dashboard a legkisebb scope. 4 KPI-kártya + 1 csapat-tábla + 1 weekly-report-kártya. Backend-szempontból `GET /v1/dashboard` (R-3). A `features/fooldal/`-mappa létrehozása.
- ✓ A pattern: `BaseFormComponent` NEM kell (csak read-only); `<core-table>` a TeamPerformanceTable-höz; a 4 KPI custom-komponens.

### 300+ perc · A1 bejelentés-lista

- A leggazdagabb feature. `TableStateConfig` az 5 tab + filter-pill + count-badge. A lista-DTO mezőit a `10_bejelentes_lista_es_adatlap.md` §3.2.1 rögzíti.

---

## 9. Performance + Accessibility budget

### Performance

- **Page-size default** a TableStateConfig-en: **50 rekord/oldal** a Bejelentés-listán; **25 rekord/oldal** a kis tabokon (A5 Riport, A6 Kategóriák, A7 Csoportok, A8 Felhasználók). Pagination-mintán, NEM infinite-scroll (a pilot scope-ja egy-tenantos, kevés-rekordú).
- **Lazy-loading**:
  - `<app-gallery>` képei lazy-load-dal (a `core` már ezt kezeli).
  - `p-editor` (RichTextEditor) a ContentEditor feature-on belül lazy-load (`@defer` block vagy router-lazy).
- **Image-format**: A `coverImageRef` képek S3-on (a `project_backend` tárolja). A pilot-on natív formátum (JPG/PNG/WEBP).
- **PDF**: A `WeeklyReport.pdfFileRef` natív iframe-en (SF-29 visszavágás). A custom HTML-stub elhagyva.

### Accessibility

- **`<form-field>`** komponens automatikusan `aria-describedby`-vel köti a hint + error szöveget. NEM kell külön kódolni.
- **`[validationForm]`** automatikusan `role="alert"`-tel jelez form-validációs hibát.
- **Status-chip**: a `aria-label` a magyar status-label (`"Folyamatban"`), NEM csak a kód (`folyamatban`).
- **Tab-key navigáció**: minden form a meglévő `core/`-mintákra épül — a tab-order spec-szerinti.
- **Színkontraszt**: a DS `--u-fg-1` / `--u-fg-2` / `--u-fg-3` mind WCAG AA-szintű kontrasztot ad. Custom-szín-választás kerülendő.

### Browser-support

- **Pilot**: Chrome, Edge, Firefox, Safari (legutóbbi 2 verzió). IE-támogatás NINCS (a `project_backend_client_angular` Angular 21 + ES2022).
- **Mobile**: A manager-felület **desktop-first**. A pilot scope **min. 1280px szélesség**. Alatta a UX zavaró; a mobile-optimalizáció a Phase 2.
- **Tablet**: a 1024-1280px-en a `LeftNav` collapsable (64px-ig csukható). A meglévő `core/layout`-mintában már megvan.

---

## 10. Hivatkozott források

A projekt struktúrája (UI-csapat-deliverable):

```
/                                            ← Urbino Manager projekt-gyökér
  HANDOFF.md                                 ← Ez a dokumentum
  HANDOFF-PREP.md                            ← 16 [★]-döntés részletes naplója
  SPEC-FEEDBACK-FOR-SPEC-TEAM.md             ← 40 SF-tétel a spec-csapatnak
  SPEC-FEEDBACK.md                           ← Belső munkadokumentum (forrás)
  SPEC-COVERAGE-A1A2A3.md                    ← Spec-fedés-leltár, Bejelentés-ág
  SPEC-COVERAGE-A4A5.md                      ← Spec-fedés-leltár, Riport-ág
  SPEC-COVERAGE-A6A7A8A9.md                  ← Spec-fedés-leltár, Beállítás-ág
  SPEC-COVERAGE-A10A11A12.md                 ← Spec-fedés-leltár, Tartalom-ág
  AUDIT.md                                   ← 6. lépés audit (alap-szintű)
  AUDIT-2.md                                 ← 8. lépés audit (screen-mock-csomag)
  REVIEW.md                                  ← Átadás előtti review
  SCREEN-CONVENTIONS.md                      ← 11-dimenziós screen-mock szabvány
  seed-data-balatonalmadi-pilot.json         ← Tenant-DB seed-data csomag
  i18n-keys-mgr.json                         ← `ngx-translate` kulcsok
  manager-system/
    README.md                                ← Belépési útmutató
    DECISIONS.md                             ← D-1..D-20 UX-döntés-napló
    ORGANISMS.md                             ← 42 organism API + Tier
    SITEMAP.md                               ← Használat-mátrix
    preview/
      screens/                               ← 28 React-mock screen + 16 állapot
      organisms-index.html                   ← Organism-katalógus
    organisms/                               ← 42 organism JSX-fájl
      _styles.css                            ← Konszolidált organism-CSS
      [...minden organism per-jsx]
    data/                                    ← (URL-mock-adatok organism-feature-ekhez)
```

A spec-csomag (fejlesztő-projektbe behúzva — `uploads/urbino-docs/`):

```
uploads/urbino-docs/
  CLAUDE.md                                  ← A spec-projekt önleíró
  00_terminologia.md
  00_domain_model.md                         ← Entitások + relációk
  01_kozos_mintak.md                         ← Manager-felület közös minták
  02_globalis_allapotgep.md                  ← Ticket-állapotgép
  kanonikus_donek.md                         ← K-X döntés-napló
  99_donesnaplo.md                           ← Spec-csapat döntés-napló
  20_admin_felulet/
    00_admin_attekintes.md
    10_bejelentes_lista_es_adatlap.md
    20_felhasznalokezeles.md
    20_duplikacio_es_osszevonas.md
    30_beallitasok.md
    40_riport.md
    60_tartalom.md
  10_polgari_felulet/
    [...]
```

A meglévő Angular-infrastruktúra (fejlesztő-projektben):

```
project_backend_client_angular/
  CLAUDE.md                                  ← Angular-minták önleírása (l. uploads/project_backend_client_angular.md)
  src/app/
    core/
      auth/                                  ← OAuth2 + Zitadel + szerepkörök
      table/                                  ← [tableState] + TableStateConfig + <core-table>
      validation/                              ← [validationForm] + <form-field> + ValidationInterceptor
      auth/                                   ← authGuard, hasRole, hasAnyRole
      lookup/                                  ← LookupLoaderService + LookupMapperService
      state/nav.store.ts                      ← NavStore (signals)
      layout/main/                            ← MainLayout
      components/base-form/                   ← BaseFormComponent
      components/gallery/                     ← <app-gallery>
    features/
      [feature-modulok lazy-loaddal]
    api/                                     ← OpenAPI-generated (npm run apigen)
    i18n/hu.json                              ← ngx-translate forrás
```

---

## Záró megjegyzés

Az átadás **2026.05.27-i állapotában** lezárul. A 12-screen-es Urbino Manager pilot-felület **portolásra kész**, két függő pontja maradt:

1. **Spec-csapat válaszai a 40 SF-tételre** — a `SPEC-FEEDBACK-FOR-SPEC-TEAM.md` szerint. Ideálisan ~10-15 üzleti napon belül; a pilot-portolás elindítható ezalatt, mert a `confirmed` és `accepted` tételek már egyértelmű utat adnak.
2. **A 4 `under-review` technikai kérdés** (SF-2, SF-16, SF-17, SF-52) — fejlesztő-csapat technikai döntésére. A pilot-portolás során eldönthető, a HANDOFF.md ezt nem blokkolja.

Az UI-csapat a Phase 2-ben (2027.Q1+, több város / több tenant) újra-aktiválható kérdésekre — addig a deliverable-csomag teljes.

*— Urbino Manager UI-csapat · 2026.05.27*