# Döntés-napló — manager-system A projekt során meghozott UX-döntések, amik a specifikációban nincsenek benne, vagy egyértelmű choice-pontok. Időrendben. > **Forma.** Minden bejegyzés: `D-` · dátum · cím · kérdés · > opciók · döntés · indoklás. Ne írj át régi bejegyzést; ha egy döntést > megfordítunk, új D- nyit, és a régiben "Felülírva: D-" jelölés. --- ## D-1 · 2026.05.21 · Page-CTA helye — PageHeader, nem TopBar **Kérdés.** Hová tegyük a screen-specifikus primer CTA-kat *(pl. `+Új bejelentés` a Bejelentés-listán, `+Új hír` a Hírek-screen-en)*? Két helyre lehetne logikusan: *(a)* TopBar jobboldali action-slot, *(b)* PageHeader actions. **Opciók.** - **A — Page-CTA a PageHeaderben** *(választott)*. A TopBar action-slot üres marad (csak bell + search). Minden screen-specifikus akció a cím mellett, jobbra. - **B — Globális quick-action a TopBarban**. `+Új bejelentés` konstansul a TopBarban minden screen-en, a többi CTA a PageHeaderben. - C — Mindkettő, page-szintű döntésenként. *(elvetett, redundáns)* **Döntés.** **A verzió.** **Indoklás.** - A spec a TopBart nem rendelkezi mint akció-tartót *(`docs/spacing.md` §4 "Top bar (sticky, 56px tall) — owned by AppShell molecule")*; a TopBarba CTA-t tenni spec-en kívüli találgatás lenne. - A Urbino tone-of-voice szerint a felület közhivatali, nem GitHub-style developer-velocity. Egy vezető/diszpécser napi 10-30 bejelentést kezel, ehhez a 3-kattintásos elérés *(LeftNav → Bejelentések → +Új bejelentés)* bőven elég. - Egyetlen, konzisztens minta a fejlesztőknek könnyebben karbantartható. ## D-2 · 2026.05.21 · DataTable kiemelése külön tier-be — átszámozás **Kérdés.** A DataTable a Tier-1-ben (cross-cutting organism-ek) jelentősen komplexebb a többinél (UserChip, SettingsSection, SettingsSubNav, ConfirmDialog) — többszöröse a felület, és a finomítások (sort, sűrűség, sor-állapotok, bulk-action, oszlop-konfiguráció) több iterációt érdemelnek. A jelenlegi Tier-1 review-kor padding-problémák is felmerültek a DataTable körül. **Opciók.** - **A — DataTable a Tier-1-ben marad**. Iteráljunk benne. Kontra: a DataTable finomítása blokkolja a többi Tier-1 organism véglegesítését. - **B — DataTable új, saját tierbe** *(választott)*. A FilterPillBar és a TabFilter is mellé kerül (ugyanaz a screen-család). A korábbi Tier-2 (ág-specifikus) lecsúszik Tier-3-ra, a korábbi Tier-3 (screen-specifikus) Tier-4-re. **Döntés.** **B verzió.** **Új tier-térkép.** | Tier | Organism-ek | |---|---| | 0 | AppShell · PageHeader · EmptyState | | 1 | UserChip · SettingsSection · SettingsSubNav · ConfirmDialog | | 2 *(új)* | DataTable · FilterPillBar · TabFilter | | 3 *(volt 2)* | StatusTrack · KpiCard · ContentEditor · WeeklyReportCard · RecipientList · PhotoUploader/Gallery · PublishStateChip | | 4 *(volt 3)* | TriageBar · TicketMetaBar · PhotoGallery · ActivityTimeline · InternalNotesPanel · SimilarTicketsBox · ActionBar · TicketCreateForm · TeamPerformanceTable · PdfPreview · CategoryTreeEditor · IconPicker · GroupMemberList · UserPicker · UserInviteDialog · RoleEditor · LogoUploader · TenantInfoForm · RichTextEditor · CoverImageUploader · DateTimeRangePicker · LinkValidator · ReorderableList · MergeConfirmDialog · RejectionDialog · ReopenDialog | **Hatás.** - `tier-1.html`: a DataTable + FilterPillBar artboardok és a Bejelentés-lista in-context demó **eltávolítva**. A tier-1 mostantól: UserChip · SettingsSection · SettingsSubNav · ConfirmDialog + a Beállítások-in-context demo. - `tier-2.html`: új fájl. DataTable + FilterPillBar + TabFilter, padding- finomításokkal, és a Bejelentés-lista in-context ide kerül. - `ORGANISMS.md`: tier-besorolás frissítve. - `SITEMAP.md`: tier-szám-hivatkozások frissítve. - `Urbino Manager.html` (hub): 7-lépéses terv frissítve — most már 8 lépés (a korábbi 3 Tier helyett 4). --- ## D-3 · 2026.05.21 · DataTable sor-end: chevron-only, kebab nélkül **Kérdés.** A `10_bejelentes_lista_es_adatlap.md` 4.2 a sor-end-en kebab menüt említ "Megnyitás (ugyanaz explicit)" tartalommal. Mivel a row-click is `→ adatlap`, ez funkcionálisan duplikálja önmagát. Mi legyen a sor végén? **Opciók.** - **A — Csak chevron, kebab nélkül** *(választott)*. A sor klikkelhető *(→ adatlap)*, a sor végén egyszerű `›` chevron jelzi az interaktivitást. A "másolás link", "új lapon megnyitás" a böngésző Ctrl/Cmd-Click + jobb-klikk natív minta. - B — Megnyitás-only kebab *(spec szövegéből)*. Vizuális zaj, redundáns. - C — 3-elemű kebab *(Megnyitás · Új lapon · Link másolás)*. Csak akkor ér, ha a navigációs akciók valódi értéket adnak. A pilot scope-ban marginális. - D — Hover-revealed action-icons *(Hozzám rendelés ⚡ stb.)*. Jövőbeli iteráció, state-conditional, a `DataTable` `rowActions` propos felülete fenntartható. **Döntés.** **A verzió.** **Indoklás.** - Egyetlen-elemű kebab anti-pattern: vizuális zaj, redundáns. - A modern szabvány (Linear, Notion, GitHub Issues) chevron-only sor-end-et használ. - A navigációs akciók (új lapon, link másolás) böngésző-natív mintákon elérhetők. - A `Hozzám rendelés` quick-action valódi értéket adhat *(diszpécser-flow gyorsítása)*, de funkcionálisan státusz-művelet, nem navigáció — későbbi iterációra halasztva. **Hatás.** - `DataTable` organism: `rowActions` prop API-ja fenntartott jövőre; default nem rendel semmit a sor-end-re a chevron mellé. - `tier-2.html` és minden lista-screen-mock: chevron-only sor-end. - Visszajelzés a spec felé: a `10_bejelentes_lista_es_adatlap.md` 4.2 "kebab: 'Megnyitás'" megfogalmazás **chevron-onlyra** finomítható *(spec-szelídítés)*. --- ## D-4 · 2026.05.21 · TriageBar layout, trigger, polgári javaslat, kötelező-jelzés **Kontextus.** A Tier-4 Bejelentés-ág első iterációja — az A1 adatlap-fej központi `TriageBar` organism-jét építjük. A spec (`10` 4.3) az inline-szerkesztés négy mezejét írja le (Kategória · Prioritás · Határidő · Felelős), de a vizuális megvalósítás kérdéses négy ponton: layout, az inline-szerkeszthetőség jelzése, a polgári javaslat (`citizenSuggestedCategoryLabel`) prezentálása, és az `assign`-feltételek előjelzése. UX-explorer 4 kérdéssel, 13 opcióval. **T-1 · Layout-pattern.** - Opciók: A pill-sor / **B label-value (eyebrow + érték, két soros cella)** / C tabular (4 sor egymás alatt). - **Döntés: B.** Vízszintes sáv egyenlő szélességű cellákkal, mindegyikben kis eyebrow felül + érték alul; cellák között hairline-divider. *Tool-szerű, adatlap-fejhez illik.* Skálázódik hosszabb értékekre (csoport+szerepkör, kategória-fa-út). **T-2 · Click-to-edit trigger.** - Opciók: A csak hoveren megjelenő affordance / **B mindig látható chevron** / C ceruza-ikon. - **Döntés: B.** Minden mező végén halvány chevron — a szerkeszthetőség *nyugalmi állapotban is kódolt*. A chevron pontosabb jel a dropdown-/picker- jellegre, mint a ceruza (az inkább textarea-mintát ígér). **T-3 · Polgári javaslat — `citizenSuggestedCategory` megjelenítése.** - Opciók: A hint-szöveg a mező alatt / **B pre-fill amber „javasolt" tag-gel** / C külön banner a sáv felett. - **Döntés: B.** A polgár javaslata előtöltve, az érték halványabb tónusú (még nem megerősített), mellette amber „javasolt" tag. Klikkre vagy megerősítés (tag eltűnik, érték sötétebb), vagy felülírás. Egy klikk a triage-gyorshoz; a sáv ritmusa változatlan; a riport-input (`citizenSuggestedCategoryId ≠ categoryId` eltérés-mérés, spec 10 5.3) természetes melléktermék. **T-4 · Kötelező-mező előjelzés.** - Opciók: A halvány piros mező + tooltip / **B subtle „· kötelező" eyebrow + disabled gomb-tooltip** / C banner-summary a sáv alatt / D nem jelez. - **Döntés: B.** Az eyebrow-ba kerül diszkrét „· kötelező" suffix a két kötelező mezőn (Új ügyön Kategória + Felelős); az „Triage kész" gomb disabled, hoveren tooltip listázza, mi hiányzik. A spec elvét tükrözi: „a kliens előjelezheti — kényelmi réteg, nem a validáció helyettesítője" (10 4.3). A szerver így is `422 fieldErrors`-szal felel, ha valami kicsúszik. **Hatás.** - `manager-system/organisms/triage-bar.jsx` — új organism. Props: `status`, `category`, `citizenSuggestedCategory`, `priority`, `dueDate`, `assignee`, `savingField`, `openField`, `onOpen`. SD-26-szerinti `--locked` modifier. - `manager-system/organisms/ticket-meta-bar.jsx` — új organism. Cím + status-chip + meta-sor (`displayId` mono-azonosítóval, ikonos helyszín/bejelentő/időpont). - `_styles.css` — új `.mgr-triage-bar*` + `.mgr-ticket-meta-bar*` + `.mgr-rejection-banner*` szekciók. - `preview/tier-4-bejelentes-adatlap-fej.html` — 8 állapot Hi-Fi. ## D-5 · 2026.05.21 · ActivityTimeline + InternalNotesPanel + ActionBar (Iter 2) **Kontextus.** A Tier-4 Bejelentés-ág második iterációja — az A1 adatlap body 3 organism-je: a tevékenység-napló (sidebar), a belső jegyzet-panel (main col) és a sticky akció-sáv (alul). UX-light explorer 6 kérdéssel — kisebb tét, mint a TriageBar-nál, mert a specifikáció (1.4 + 1.5 + 4.3 + 4.6) erősen behatárolta a játékteret. **AT-1 · ActivityTimeline időbélyeg-formátum.** - Opciók: A abszolút / B relatív / **C hibrid (relatív + tooltip-en abszolút)**. - **Döntés: C.** Relatív főszöveg, dotted-underline jelzi az affordance-t, `title`-attribútum hordozza az abszolút értéket; ~7 nap után automatikusan átvált abszolútra. *Gyors átfutás + audit-pontosság.* Bevált pattern (GitHub, Linear). **AT-2 · ActivityTimeline esemény-vizualizáció.** - Opciók: A egységes dot + vonal / **B event-type ikon halvány színes háttéren** / C variánsos (átmenethez chip-pár). - **Döntés: B.** Lucide-ikonok típusonként, a DS status-token-színekhez igazított háttér: státusz-átmenet kék, elutasítás piros, visszanyitás amber, merge violet. A 7 eseménytípus egy pillantással szétválasztható. C variáns-keveredés miatt elvetve. **N-1 · InternalNotesPanel — add-mező pozíció.** - Opciók: A form felül / **B form alul (chat-szerű)**. - **Döntés: B.** A felhasználó először a kontextust látja, a saját jegyzet erre reagálva születik. *Beszélgetés-szerű* együttműködés (diszpécser↔vezető) természetesebb. **N-2 · InternalNotesPanel — rendezés.** - Opciók: **A régi → új (kronológiai)** / B új → régi (feed-stílus). - **Döntés: A.** Konzisztens N-1B chat-form-mal: a legfrissebb jegyzet közvetlenül a composer mellé kerül. A „mi a legfrissebb?" kérdést a scroll-pozíció + relatív időbélyeg megoldja. **AB-1 · ActionBar pozíció.** - Opciók: **A sticky a viewport alján** / B inline a content után. - **Döntés: A.** Konzisztens a mobil-szabállyal (SD-41), és hosszú adatlapon (sok fotó, hosszú timeline) is görgetés nélkül elérhető. 8% blur + 94% fehér háttér (DS „backdrop-filter" minta). A content kap bottom-paddinget a sticky-magassággal. **AB-2 · ActionBar primer-hierarchia.** - Opciók: **A egy primer + secondary-k** / B egyenrangú / C primer + danger. - **Döntés: A.** Minden állapotban egy primer-akció (Új→Kiosztás, Kiosztva→Megkezdés, Folyamatban→Lezárás), a többi (Elutasítás, Visszaállítás) ghost — *jelen van, de nem provokál akciót*. Lezárt állapotban a Visszanyitás secondary (ritka akció). C verzió a Urbino tone-of-voice „dignified — never blame" elvével szembe megy. **Hatás.** - `manager-system/organisms/activity-timeline.jsx` — új organism. Props: `events`, `systemEventActor`, `title`. Eseménytípus-szerinti CSS-modifier (`mgr-timeline__icon--`). - `manager-system/organisms/internal-notes-panel.jsx` — új organism. Props: `notes`, `readOnly`, `composerValue`, `onComposerChange`, `onSubmit`, `pending`, `currentUserInitials`, `title`. `readOnly` → composer rejtve (field_worker). - `manager-system/organisms/action-bar.jsx` — új organism. Props: `status`, `actions`, `hint`, `lockedNote`. A status-alapú default-szettet a `ActionBar_buildDefaultActions({status, missingFields})` helper adja; screen-fájl override-olhatja. ## D-6 · 2026.05.22 · SimilarTicketsBox + MergeDialog (Iter 3, A3 duplikáció) **Kontextus.** A Tier-4 Bejelentés-ág harmadik iterációja — az A3 duplikáció-szűrés. A spec (`20_duplikacio_es_osszevonas`) erősen behatárolja a játékteret: a doboz 4 állapotát (loading/empty/findings/error), a sorrendet (`distanceMeters` növekvő), a 3-4 max közvetlen találatot, és a megerősítő-dialog tartalmát (választógomb-pár, alapból régebbi, magyarázat). 6 UX-kérdéssel azokat a vizuális részleteket fedtük, amiket a spec nyitva hagyott. **SB-1 · Empty state.** - Opciók: **A csendes szöveg** / B pipa-ikon + szöveg / C doboz nincs. - **Döntés: A.** Egyetlen halvány szövegsor („Nincs hasonló nyitott bejelentés."). Jelzi, hogy a rendszer ellenőrzött, de figyelmet nem kér (K-033). Nem „silent failure" (C), és nem tévesen pozitív megerősítés (B). **SB-2 · Találat-sor — bélyegkép.** - Opciók: **A kép balra 56×56** / B csak szöveg / C kép jobbra mini. - **Döntés: A.** Dominánsan a sor bal oldalán; fotó-darabszám-badge jobb-alul. A diszpécser kattintás nélkül hasonlíthatja a két ügy fotóját (`20` 3.2). Egységes ritmus a többi adatlap-elem listáival (avatar-balra). **SB-3 · Akciók pozíció.** - Opciók: **A mindig látható jobb-end** / B hover-revealed / C alsó gomb-row. - **Döntés: A.** „Megnyitás" mint row-click + chevron-affordance (T-2B konzisztens), „Összevonás" mint mindig látható secondary gomb. Diszpécser az affordance-ot azonnal látja; a 30 mp triage-cél támogatott. **SB-4 · Fejléc figyelem-jel.** - Opciók: **A amber-tinted + ikon + count-badge** / B csak badge / C accent-border. - **Döntés: A.** Találatok esetén amber fejléc-háttér + alert-ikon + „N találat" badge + 3px bal accent-border. Amber „figyelmet kér, de nem riogat" — illik a tone-of-voice „never blame" elvéhez. Üres / loading állapotban a fejléc semleges. **MD-1 · Merge-dialog ügy-választó.** - Opciók: **A két kártya-radio** / B sor-radio / C A-vs-B split. - **Döntés: A.** Két kártya egymás mellett (1fr 1fr), mindegyiken role-tag („élő ügy → marad" / „duplikátum → lezárul"), displayId, status-chip, cím, beérkezés relatív+abszolút, felelős. Kijelölt kártya kék border + soft háttér + check. Vizuális összehasonlítás egy pillantással. A korábbi `MergeBody` (ConfirmDialog Tier-1-body-variant) átírva erre. **MD-2 · Confirm-gomb tónusa.** - Opciók: **A primer kék** / B danger piros / C warning amber. - **Döntés: A.** Konzisztens az állapotgép-akciók kék mintájával (Assign, Start, Resolve). Az összevonás nem destruktív aktus — az ügy megőrződik mint duplikátum-rekord; a kapcsolat strukturált (`originalTicketId`), az activity log mindkét oldalon naplózza. A „dignified — never blame" elv tükre. **Hatás.** - `manager-system/organisms/similar-tickets-box.jsx` — új organism. Props: `state` ('loading'|'empty'|'findings'|'error'), `items` (SimilarTicketDto[]), `maxVisible` (3 default), `onOpen`, `onMerge`, `onRetry`. - `manager-system/organisms/confirm-dialog.jsx` — `MergeBody` átírva kártya- radio-ra (MD-1A). Props: `ticketA`, `ticketB`, `defaultKeepId`. Belső state-tel kezeli a felcserélést; a parent a confirm-akcióban kapja vissza a `keepId`-t. ## D-7 · 2026.05.22 · TicketCreateForm + LocationPicker (Iter 4, A2) **Kontextus.** A Tier-4 Bejelentés-ág negyedik (és záró) iterációja — az A2 manuális bejelentés-nyitás (`/bejelentesek/uj`). A spec (`00_architektura_v4.md` 6.1, `02_globalis_allapotgep` 4.) a két create-utat rögzíti (`New` vagy azonnali `Assigned`), de a UX-keret nyitott. 6 UX-kérdéssel kezelük a form-elrendezést, a két create-mód közti választást, és a LocationPicker térkép/cím viszonyát. **F-1 · Hol jelenjen meg a form?** - Opciók: **A külön oldal** / B modal / C drawer. - **Döntés: A.** Saját URL `/bejelentesek/uj` — bookmarklhető, refresh-elhető, konzisztens a többi `/uj` flow-val (hír, program, cityinfo). A 8-10 mezős forma egy modal/drawer-ben szorítana; a térkép-blokk külön oldalon kényelmes. **F-2 · Create-mód.** - Opciók: **A két submit-gomb** / B tab-választó / C auto-detect. - **Döntés: A.** Egy form, két submit: „Mentés vázlatként" → `status=New`; „Mentés és kiosztás" → `status=Assigned`, csak ha a triage-mezők kitöltöttek. Explicit, transzparens, egy ágy a flow-nak. **F-3 · Mező-sorrend / csoportosítás.** - Opciók: **A 1-oszlopos szekciók** / B 2-oszlopos / C step-flow. - **Döntés: A.** Négy szekció egymás alatt: A probléma → Helyszín → Bejelentő → Triage. Természetes „mese-sorrend", konzisztens a telefonos felvétel- flow-val. Mobilbarát is. A térkép-blokk teljes szélességet kap. **L-1 · LocationPicker layout.** - Opciók: **A map-first** / B address-first / C side-by-side. - **Döntés: A.** Nagy térkép (~240px) felül, cím-mező + koord alatta. A polgári bejelentések gyakran topográfiai jellegűek („a buszmegálló mellett") — a térkép-vizualizáció jobban támogatja a diszpécsert, mint az utca/házszám-autocomplete. **L-2 · Pin-mozgatás módja.** - Opciók: A click / B drag / **C mindkettő** / D csak autocomplete. - **Döntés: C.** Leaflet-default mind a kettőre — click az első placeolásra, drag a finomhangolásra. Implementáció-költség azonos, ergonómia mindkettőé. **L-3 · Reverse geocoding időzítése.** - Opciók: **A automatikus** / B manuális gomb / C hybrid toggle. - **Döntés: A.** Pin minden mozgására debounced (~400ms) auto-geocode. Override-pattern: ha a felhasználó kézzel írt át, az override megmarad a következő pin-mozgásig. Külön toggle nem szükséges (a kézi-írás magától jelzi a szándékot). **Hatás.** - `manager-system/organisms/map-widget.jsx` — új organism. A Tier-3.5-ben inline lévő MapWidget kiemelve önálló fájlba a LocationPicker miatt. Props: `mode` ('view'|'picker'), `lat`, `lng`, `status`, `popupContent`, `zoom`, `containerClass`, `onLocationChange`. Két fogyasztó: SimilarTicketsBox (jövőben adatlap-térkép) és LocationPicker. - `manager-system/organisms/location-picker.jsx` — új organism. Props: `value` ({lat, lng, addressText}), `onChange`, `onGeocode` (mock vagy Nominatim), `allowGps`, `mapZoom`, `pinStatus`. Auto-geocode override- pattern-nel. - `manager-system/organisms/ticket-create-form.jsx` — új organism. 4 szekció (A probléma · Helyszín · Bejelentő · Triage), sticky ActionBar két submit-gombbal. Triage-szekció toggle-vel kibontható; ha kibontva, a TriageBar (Iter 1) read-only mock-ban renderel. Submit-szabályok: vázlat bármikor (cím kell), kiosztás csak teljes triage-vel. - `_styles.css` — új `.mgr-map*` (Tier-3.5-ből áthozva), `.mgr-loc-picker*`, `.mgr-tcf*` szekciók. - `preview/tier-4-uj-bejelentes.html` — 4 form-állapot Hi-Fi + 1 standalone LocationPicker (élő Leaflet + state-readout). **A Bejelentés-ág lezárása.** A Tier-4 Bejelentés-ág 4 iterációja (TicketMetaBar+TriageBar · Timeline+Notes+ActionBar · SimilarTicketsBox+ MergeDialog · TicketCreateForm+LocationPicker) az A1/A2/A3 feature-eket fedi. Következik a Beállítás-ág (CategoryTreeEditor + UserInviteDialog + RoleEditor + a 10-bundle). ## D-8 · 2026.05.22 · CategoryTreeEditor + IconPicker + ImportDialog (Iter 5, A6) **Kontextus.** A Tier-4 Beállítás-ág első iterációja — `/beallitasok/kategoriak` fő szerkesztője. A spec (`30_beallitasok` 4.2 + SD-62/63/64 + K-008/036) a feature gerincét eldönti: csoportosított fa-lista (gyökér mint fejléc, alkategóriák alatta), inline `name`-szerkesztés (K-026), `isActive` toggle azonnali, „Új gyökér" csak default-katalógusból (SD-62), törlés kebab-rejtett (deaktiválás elsődleges, SD-63), reorder szülő-hatókörben (SD-64). A spec által nyitva hagyott UX-kérdésekhez 4 explorer-kérdést indítottunk. **C-1 · Reorder UX.** - Opciók: **A drag-drop fogantyúval** / B ↑/↓ gombok / C "Sorrend mód" toggle. - **Döntés: A.** Bal-szélen ⋮⋮ grip-handle; csak a szülő hatókörén belül engedi (SD-64). 3-7 alkategóriás tipikus eseten gyors, ergonomikus. A modeswitch (C) felesleges overhead a Urbino pilot havi-rendszerű átrendezéséhez. **C-2 · IconPicker megjelenése.** - Opciók: **A inline popover** / B modal + kereső / C csak az új-alkategória-modal-form része. - **Döntés: A.** Az ikon-cella maga interaktív, kattintásra a sor alatt ~280px-es 6×N paletta nyílik. Outside-click + Escape zár. Konzisztens a K-026 inline-szerkesztés mintájával (`name`-mezővel). A pilot-szett ~20 ikonra modal-overhead aránytalan. **C-3 · Default-import dialog.** - Opciók: A egyszerű radio-list / **B preview-kártyák** / C stepper. - **Döntés: B.** Minden default-gyökér egy kártya, az alkategóriái chip-ekként előtte. A vezető pontosan látja, mit kap az import során (3.1.4 — minden leszármazott behozva). Egy kattintás a választás; a gomb- felirat is konkrét („Parkok és zöldterületek importálása") feedback-et ad. **C-4 · Sor-akciók vizibilitás.** - Opciók: **A mindig látható** / B hover-revealed / C csak kebab. - **Döntés: A.** Toggle + ceruza + kebab végig láthatóan. A toggle (isActive) fontos state-jelző, hovera-bujtatva elveszne. Konzisztens a manager-pattern-nel (TriageBar always-chevron, SimilarTicketsBox always-right). **Hatás.** - `manager-system/organisms/category-tree-editor.jsx` — új organism. Props: `categories` (flat list), `onUpdate`, `onCreate`, `onReorder`, `onDelete`, `onOpenImport`, `showInactive`, `onToggleShowInactive`. Inline `name`- szerkesztés Enter/Esc-kel; inline IconPicker minden ikon-cellán; csoportosított fa-szekciók gyökerenként; per-szekciós „Új alkategória" inline-add row. - `manager-system/organisms/icon-picker.jsx` — új organism. Props: `iconSet`, `selected`, `onSelect`, `onClose`, `style`, `title`. Outside-click + Escape kezelés. Default 20 emoji-stílusú placeholder ikon; valós deployment Lucide-ikonokra cserélheti. Plusz `window.iconGlyph(key)` helper az organism-ek közös ikon-feloldására. - `manager-system/organisms/category-import-dialog.jsx` — új organism. Props: `open`, `availableRoots`, `onConfirm`, `onCancel`, `pending`. Preview-kártyák, konkrét gomb-felirat („Parkok és zöldterületek importálása"). Üres állapot („Minden default-gyökér már importálva van"). ## D-9 · 2026.05.22 · UserInviteDialog + RoleEditor + UserDetailPage (Iter 6, A8) **Kontextus.** A Tier-4 Beállítás-ág második iterációja — `/beallitasok/felhasznalok` adatlap + meghívó-flow. A spec (`20_felhasznalokezeles`) erősen behatárolja a feature gerincét: a `Tier-2` `DataTable` kínálja a listát, a `ConfirmDialog` mintára épül a meghívó-modal, a `[validationForm]`-minta adja a field-error- megjelenítést. UX-nyitott 4 ponton: invite-layout, role-editor megjelenése, adatlap szerkesztés-pattern, invariáns-előjelzés. **UD-1 · UserInviteDialog layout.** - Opciók: **A lineáris + role-szekció kiemelt** / B sima form dropdown-nal / C 2-step wizard. - **Döntés: A.** A három mező egymás alatt, a szerepkör-szekció halvány amber-tinted blokkban kiemelve. A spec szerinti "POST /v1/users/invite" workflow (User + UserTenantRole + UserInvitation egyben) egy modal-on belül. **UD-2 · RoleEditor megjelenése.** - Opciók: **A role-rows leírással** / B sima checkbox-cluster / C 2×2 kártya-rács. - **Döntés: A.** Minden szerepkör külön sor, 1 mondat magyarázattal. Új tenant- felvételkor a vezetőnek nem kell külön dokumentációba lapoznia. A négy `TenantRole` enum-érték a `05_jogosultsagok_v2.md` 1. szerint termékesített — fix sorrendben. **UD-3 · Adatlap-szerkesztés.** - Opciók: **A inline-szekciónkénti 'Szerkesztés'** / B modal-form / C edit-mode. - **Döntés: A.** Mind a 3 szekció (Alapadatok / Szerepkörök / Csoporttagság) saját „Szerkesztés" gombja. Konzisztens a TriageBar inline-mező-mintával (K-026). A „Csoporttagság" szekciónál a szerkesztés a Csoportok-oldalra utal, mert ott él a `Group.members` n-n kapcsolat (`30_beallitasok.md` 6.2). **UD-4 · Invariáns-előjelzés.** - Opciók: **A disabled checkbox + tooltip** / B inline-banner / C nem előjelez. - **Döntés: A.** Az SD-38 három invariánsa (≥1 szerep, utolsó-manager-tilos, saját-kizárás-tilos) a `RoleEditor.locks` propon át. A zárolt checkbox nem klikkelhető, „zárolt" tag jelzi, hovera tooltip magyaráz. Saját-deaktiválás: a gomb `disabled` + tooltip ugyanazon mintával. Spec elve: „a kliens előjelezheti — kényelmi réteg, nem a validáció helyettesítője" (a `Mentés` ettől függetlenül `422`-zik). **Hatás.** - `manager-system/organisms/role-editor.jsx` — új organism. Props: `value`, `onChange`, `locks` (per-role lock-objektum reason-message-szel), `readOnly` (adatlap chip-megjelenítéshez). 4 szerepkör magyarázattal a `ROLE_INFO` konstansból. - `manager-system/organisms/user-invite-dialog.jsx` — új organism. Props: `open`, `value` ({displayName, email, roles}), `onChange`, `onConfirm`, `onCancel`, `pending`, `fieldErrors`, `inPlace`. Hárommezős lineáris form, beágyazott RoleEditor-rel. ConfirmDialog-mintára épülve, `u-dialog--md` méret. - A `UserDetailPage` composition (preview-HTML-en belül) a 3 szekciót inline-szerkeszthetőként rendereli, fiók-akció-soron a state-szerinti gombokkal (Meghívó újraküldése / Deaktiválás / Reaktiválás), saját-utolsó- manager `disabled` + tooltip pattern-nel. ## D-10 · 2026.05.22 · GroupMemberList + UserPicker + GroupDetailPage (Iter 7, A7) **Kontextus.** A Tier-4 Beállítás-ág harmadik iterációja — `/beallitasok/csoportok` adatlap. A spec (`30_beallitasok` 4.3) a feature gerincét rögzíti: standard `TableStateConfig` a listán, `Group ↔ TenantUser` n-n kapcsolat `[ManyToManyConnection]`-nel, multiselect chip-szerű választó autocomplete-tel, csak `Active` `TenantUser` választható, delete-guard. UX-nyitott 4 ponton: edit-pattern, tag-megjelenítés, picker-interakció, remove-confirm. **G-1 · Csoport-adatlap szerkesztés-pattern.** - Opciók: **A inline-szekciók (A8-konzisztens)** / B modal-edit (spec-literal). - **Döntés: A.** A spec 4.3.2 modal-formát javasol, de a D-9 (A8 felhasználó- adatlap) inline-szekciónkénti szerkesztést kapott — a Beállítás-ág konzisztenciája fontosabb, mint a spec-literál pontosság. Két szekció: Alapadatok (név + audit) és Tagok. Külön „Szerkesztés" gomb mindkettőn. Spec-szelídítés a 4.3.2-höz: a modal-form ugyanaz, csak inline-szekcióban élesedik. **G-2 · GroupMemberList tag-megjelenítés.** - Opciók: **A row-lista** / B chip-felhő / C 2-oszlopos rács. - **Döntés: A.** Soronkénti row-lista: avatar + név + szerepkör + remove-X (edit-mode-ban). A szerepkör (mit csinál a tag más kontextusban) informatív többlet. Konzisztens a manager-pattern-nel (A8 user-lista, A1 timeline). **G-3 · UserPicker — tag-hozzáadás interakciója.** - Opciók: **A inline autocomplete** / B modal-választó-dialog / C multi-select chip-input. - **Döntés: A.** A szerkesztő-üzemben autocomplete-input a tag-lista alatt; gépelésre dropdown nyílik soronkénti „+ Hozzáadás" gombbal. Diakritika- érzéketlen contains-keresés (név + szerepkör). A spec szerinti „Active TenantUser" szűrés explicit hint-ben (a meghívottak nem választhatók). A picker önálló organism — máshol is fogyasztható. **G-4 · Remove-member megerősítés.** - Opciók: **A direkt remove + undo-toast** / B ConfirmDialog. - **Döntés: A.** A tag-eltávolítás reverzibilis aktus (a `Ticket.assignedGroupId` változatlan). X-klikkre azonnali remove, 5s-os toast „Visszavonás" linkkel. Csak destruktív akciókra (user-törlés, bejelentés-elutasítás) érdemes ConfirmDialog. Konzisztens a Toast-mintával (Tier-3.5). **Hatás.** - `manager-system/organisms/user-picker.jsx` — új organism. Props: `users`, `selectedIds`, `onAdd`, `placeholder`, `allowedStatuses`, `query`, `onQueryChange`, `emptyHint`. Diakritika-érzéketlen kereső, autocomplete- dropdown, soronkénti „+ Hozzáadás". Pilot deployment a `GET /v1/lookup/ tenant-users` lookup-end-pointot fogyaszthatja. - `manager-system/organisms/group-member-list.jsx` — új organism. Props: `members`, `editMode`, `candidates`, `onRemove`, `onAdd`. Edit-mode-ban remove-X soronként + beágyazott UserPicker. Read-mode olvasható row-lista. Üres állapot saját placeholder-rel. - A `GroupDetailPage` composition (preview-HTML-en belül) az A8 user-detail mintát követi (`.mgr-user-detail*` újrahasználva), a csoport-specifikus avatar (`.mgr-group-detail__avatar` violet-tonon). Interaktív S01 artboard demónálja az élő szerkesztés + undo-toast flow-t. ## D-11 · 2026.05.22 · TenantInfoForm + LogoUploader + RecipientList (Iter 8, A9) **Kontextus.** A Tier-4 Beállítás-ág negyedik (és záró) iterációja — `/beallitasok/altalanos` mind a három szekciója. Spec: `30_beallitasok` 3.3 + 4.4 (három logikai szekció: tenant-settings, logó, riport-címzettek). A `RecipientList` korábban Tier-3-ban inline definíció volt; Iter 8-ban kiemelve önálló organism-fájlba. **T-1 · Locked-mezők kezelése.** - Opciók: **A locked input + info-tooltip** / B read-only InfoRow / C külön „Rendszer-adatok" szekció. - **Döntés: A.** A `code`, `displayPrefix`, `timeZone` ugyanabban a layout-pozícióban marad, mint a szerkeszthető mezők — háttér halvány + lock-tag a label mellett + magyarázó hint (urbino_admin hatáskör). Folyamatos vizuális rend, jól strukturált egységként mutatja a Tenant-szekciót. **L-1 · LogoUploader üres állapot.** - Opciók: **A drop-zone + tallózás link** / B csak gomb. - **Döntés: A.** Nagy invitáló drop-zone terület, klikk = file-picker, „tallózz" link mint vizuális megerősítés. Drag-drop + click ugyanazt a `POST .../logo` multipart végpontot fogyasztja. Format és méret-hint előre szóló. **L-2 · LogoUploader feltöltött állapot.** - Opciók: **A preview + 'Csere' / 'Törlés' gombok** / B drag-on-top. - **Döntés: A.** Logó-thumbnail + meta (fájlnév, feltöltési idő, méret) + explicit gombok. „Csere" újra file-picker; „Törlés" piros ghost gomb (`DELETE .../logo`). Felfedezhető — a vezető nem kell tudja, hogy ráhúzhat. **R-1 · Recipient empty state.** - Opciók: **A informatív card + 'Saját e-mail' shortcut** / B sima EmptyState. - **Döntés: A.** Amber-tinted card (mint SimilarTicketsBox findings-fejléc, D-6/SB-4A) magyarázattal + két shortcut: „Saját e-mailem felvétele" (1 klikk, pre-fill) és „Új címzett". A spec szerint a vezető nem kerül be automatikusan a listára — a UI ezt szabványos pilot-élménnyé teszi. **Hatás.** - `manager-system/organisms/tenant-info-form.jsx` — új organism. Props: `value`, `onChange`, `editing`, `fieldErrors`. 7 mező 3 locked + 4 szerkeszthető. Spec szerinti hint-szövegek a contact-mezőkön (pl. „a polgári app Ügyfélszolgálat szekciójában jelenik meg"). - `manager-system/organisms/logo-uploader.jsx` — új organism. Props: `logoUrl`, `logoMeta`, `fallbackText`, `onUpload`, `onDelete`, `pending`, `uploadError`, `readOnly`. Két fő állapot (üres = dropzone, kitöltött = preview); a host adja a multipart-feltöltés tényleges flow-ját. Drop + click + file-input mindhárom inputon működik. Fallback gradient (initials) ha az URL nem renderelhető (`__fallback__`). - `manager-system/organisms/recipient-list.jsx` — új organism. A tier-3-recipient.html inline definíciója kiemelve. Props: `recipients`, `editingId`, `readOnly`, `onAdd`, `onEdit`, `onRemove`, `onToggleActive`, `onEditSave`, `onEditCancel`, `emptyComponent` (a host R-1A informatív-card-ot átadhat). A switch-toggle / inline-edit / remove pattern változatlan. - `_styles.css` — új `.mgr-rec*` (Tier-3-ból áthozva), `.mgr-tif*`, `.mgr-logo*` szekciók. - `preview/tier-4-altalanos.html` — 5 artboard (1 interaktív + 4 statikus állapot). ## D-12 · 2026.05.22 · KpiCard + TeamPerformanceTable + DashboardPage (Iter 9, A4) **Kontextus.** A Tier-4 Riport-ág első iterációja, és egyúttal a Tier-4 záró iterációja. A spec (`40_riport` 3.2 + 4.1) szigorúan prescriptív: 3 blokk (4 KPI-kártya + csapat-tábla + heti riport letöltő), chartok nincsenek (40 3.2), Wow #2 lefúrás — minden szám link a /bejelentesek listára előszűrve (40 3.3). UX-explorer **elhagyva**: a spec a vizuális döntéseket lényegében előírja. **Bake-in döntések.** - KPI 4×1 grid (`grid-template-columns: repeat(4, 1fr)`), 960px alatt 2×2 (CSS media-query, mobil-bevarrt szabály). - A KPI-kártya egész kattintható (`` vagy `