Urbino · Tervezési hub · 2026.05.27

Manager admin felület — rendszer-építés

Stabil belépési pont. Mutatja a teljes 9-lépéses tervet, a meghozott UX-döntéseket, és linkeli az egyes specimen- és screen-mock-fájlokat. 9. lépés lezárva (2026.05.27): átadási csomag elkészült — HANDOFF.md + seed-data JSON + i18n-keys JSON + SPEC-FEEDBACK a spec-csapatnak. A teljes vizuális átadás (40 SF + D-18..D-20 + 14 screen-mock-fix) átvezetve. Pilot-portolásra kész.

Pilot-átadásra kész — a 9-lépéses terv lezárult, a fejlesztő-csomag készen áll
A Phase 3 átadási csomag elkészült: HANDOFF.md (10-szekciós fejlesztő-doksi a cross-mapping-táblával) + seed-data-balatonalmadi-pilot.json (~270 rekord tenant-DB seed) + i18n-keys-mgr.json (351 ngx-translate kulcs) + SPEC-FEEDBACK-FOR-SPEC-TEAM.md (40 SF-tétel a spec-csapat válaszára várva). A teljes vizuális átadás 14 screen-mockon átvezetve. Függő pontok: spec-csapat válaszai a 40 SF-re (~10-15 munkanap) + 4 under-review technikai kérdés.
HANDOFF.md megnyitása →
A teljes terv lépésről lépésre
0. DS-patch — page-layout réteg. Tokenek + 4 page-template osztály + dokumentáció. Átadás-kész a ds-patch/-ban.
Kész
1. Tervezési fázis. SITEMAP + ORGANISMS — a 12 feature × 25 organism leltár, építési prioritással.
Kész
2. Tier-0 organism-ek. AppShell + LeftNav + TopBar, PageHeader, EmptyState. Specimen-canvas: tier-0.html →
Kész
3. Tier-1 organism-ek. UserChip, SettingsSection, SettingsSubNav, ConfirmDialog. Specimen-canvas: tier-1.html →
Kész
4. Tier-2 organism-ek (lista-screen család). DataTable, FilterPillBar, TabFilter. UX-explorer 14 döntéssel + Hi-Fi: explorer → tier-2.html →
Kész
5. Tier-3 organism-ek (ág-specifikus). 3 chúnk: riport-ág → tartalom UX → tartalom Hi-Fi → beállítás-ág →
Kész
6. Tier-3.5 — cross-cutting infrastruktúra. Toast · AppShell loading · User-menü · Notification-bell · Form-validation · Map widget. 6 preview-fájl: toast → loading → user-menü → notifications → validation UX → validation Hi-Fi → map UX → map Hi-Fi →
Kész
8. Screen-mock-ok. Mind a 12 admin screen (A1–A12) elkészült vékony composition-ként. 27 screen-fájl + 8 UX-explorer + 2 új cross-cutting döntés (D-13, DTP-A). Lásd a lenti Screen-mock-ok szekciót.
Kész
9. Átadási csomag. HANDOFF.md (10-szekció) + seed-data JSON (~270 rekord) + i18n-keys JSON (351 kulcs) + SPEC-FEEDBACK (40 SF a spec-csapatnak). A starter/-projekt elhagyva — a meglévő project_backend_client_angular infrastruktúra önmagában elegendő (Q1 felülbírálva 2026.05.27). HANDOFF.md → SPEC-FEEDBACK → seed-data JSON → i18n-keys JSON →
Kész
Tier-4 előrehaladás — iterációnként
Minden iteráció spec-családot fed; UX-explorer-first mintával (kivéve a triviális Hi-Fi-ket). A jelölések: Kész Tervezve
Iter Feature Organism-ek Státusz Döntés
Bejelentés-ág — A1 + A2 + A3 lefedve
1A1 adatlap fejTicketMetaBar · TriageBar (4 picker)KészD-4
2A1 adatlap bodyActivityTimeline · InternalNotesPanel · ActionBarKészD-5
3A3 duplikációSimilarTicketsBox · MergeDialog (ConfirmDialog-variant)KészD-6
4A2 új-bejelentésTicketCreateForm · LocationPicker · MapWidgetKészD-7
Beállítás-ág — A6 + A7 + A8 + A9 mind lefedve
5A6 kategóriákCategoryTreeEditor · IconPicker · CategoryImportDialogKészD-8
6A8 felhasználókUserInviteDialog · RoleEditor · UserDetailPageKészD-9
7A7 csoportokGroupMemberList · UserPicker · GroupDetailPageKészD-10
8A9 általánosTenantInfoForm · LogoUploader · RecipientListKészD-11
Riport-ág — A4 lefedve (A5 a screen-fázisra vár)
9A4 dashboardKpiCard · TeamPerformanceTable · DashboardPageKészD-12
A Tier-4 lezárult. A5 (riport-archívum lista + adatlap) a WeeklyReportCard + DataTable kompozíciója, a tartalom-ág (A10/A11/A12) a Tier-3 ContentEditor-re épül — mindhárom a 8. lépés screen-fázisában kapja meg a finomítást. A kihagyott organism-ek (RejectionDialog / ReopenDialog / MergeConfirmDialog → Tier-1 ConfirmDialog-variant · RichTextEditor / CoverImageUploader → Tier-3 ContentEditor-rész · PdfPreview → <iframe>) változatlanul nem épülnek külön.
Screen-mock-ok — a 12 admin screen (A1–A12)
Minden screen vékony composition: AppShell + PageHeader + organism-katalógus. A táblázat oszlopai: Hi-Fi screen-mock, UX-explorer (ahol kellett), és a screen-szintű döntések. Megjelölve a screen-fájl URL-útvonala is.
# Screen Linkek
Bejelentés-ág
A1Bejelentés-lista · /bejelentesekHi-Fi → UX →
A1mBejelentés-lista — mobileHi-Fi → UX →
A1Bejelentés-adatlap (A3 beágyazva) · /bejelentesek/details/<id>Hi-Fi → UX →
A2Új bejelentés · /bejelentesek/ujHi-Fi →
Riport-ág
A4Főoldal / Dashboard · /fooldalHi-Fi →
A5Heti PDF-riportok · /riportok + /riportok/details/<id>Lista Hi-Fi → Adatlap Hi-Fi → UX →
Beállítás-ág (LeftNav 4 leaf · S6.5 / D-13 Pattern N)
A6Kategóriák · /beallitasok/kategoriakHi-Fi →
A7Csoportok · /beallitasok/csoportokLista Hi-Fi → Adatlap Hi-Fi → UX →
A8Felhasználók · /beallitasok/felhasznalokLista Hi-Fi → Adatlap Hi-Fi → UX →
A9Általános · /beallitasok/altalanosHi-Fi →
Tartalom-ág (ContentEditor split-view)
A10Hírek · /hirek + /hirek/<id>Lista Hi-Fi → Szerkesztő Hi-Fi → UX →
A11Programok · /programok + /programok/<id>Lista Hi-Fi → Szerkesztő Hi-Fi →
A12Városi információk · /cityinfo + /cityinfo/<id>Lista Hi-Fi → Szerkesztő Hi-Fi →
Cross-cutting döntések
S6.5Beállítás-navigáció — D-13 Pattern N (SettingsSubNav elhagyva, LeftNav 4 leaf)UX explorer →
S13DateTimeRangePicker — Pattern A (két külön input)UX explorer →
8. lépés lezárult. 9 új organism a 8. lépés során: tab-filter, publish-state-chip, photo-gallery, photo-uploader, rich-text-editor, cover-image-uploader, content-editor, date-time-range-picker, link-validator. Organism-állomány 42 fájl-ra nőtt. A Dashboard (D-16) spec-szerinti újraépítésen ment át (delta + hét-váltó nyilak törölve, „Heti riport letöltése" CTA a fejlécben, Terepi csapat-teljesítmény tábla isTopPerformer jelöléssel). A 4 új cross-cutting döntés teljes leírása: DECISIONS.md D-14…D-17.
UX-döntések — teljes napló →
D-17
ContentEditor publish-bar gomb-sorrend
[Eldobás] bal-szélen (destruktív elválasztva) · spacer · [Vázlat-mentés][Publikálás] jobb-szélen (primer a sor végén). F-pattern olvasás-irány + Urbino tone-of-voice „dignified — never blame". Konzisztens a Tier-1 ConfirmDialog Mégse|Confirm mintájával.
2026.05.22
D-16
A4 Dashboard — spec-konform újraépítés (D-12 revízió)
Töröltük: KPI-delta („+5 múlt héthez képest"), hét-választó nyilak, inline WeeklyReportCard szekció. Megerősítettük: „Heti riport letöltése" CTA a fejlécben (spec 4.2), „Terepi csapat-teljesítmény" elnevezés, isTopPerformer jelölés a hét legjobb sora jobb-szélén (40_riport.md §3.2.2). A KpiCard `delta` prop deprecated.
2026.05.24
D-15
DateTimeRangePicker — két külön input (Pattern A)
S13 explorer 3 mintából A választott: Kezdés + Vége egymás mellett, natív datetime-local popoverrel. „Azonos napon" detektor + hint-sor (programok többsége egy napos). Külső lib nélkül; jövőben TipTap/ProseMirror-szerű váltás indokolt esetén.
2026.05.24
D-14
Settings-nav Pattern N — SettingsSubNav elhagyva
S6.5 explorer: a Beállítások 4 sub-screenje (Általános · Kategóriák · Csoportok · Felhasználók) **két helyen** jelent meg a navigációban (LeftNav 4 leaf + SettingsSubNav). Pattern N választva: 4 egyenrangú LeftNav-leaf, a SettingsSubNav törölve a screen-mockokról. A SettingsSubNav organism-fájl megőrizve a Tier-1 katalógusban (jövőbeli G-pattern-re visszatérés trivi). Spec-szelídítés: 30_beallitasok §4.1 visszacsatolandó.
2026.05.22
D-13
DataTable contract-bővítés (audit-meneti retrofit)
5 funkció bekerült a kanonikus data-table.jsx-be a Tier-2 inline-implementációból: sortable fejléc-cellák (T-4), controlled sort-state (sortKey/sortDir/onSortChange), onRowClick sor-navigáció (D-3), rowClassName per-row class hook (T-7 dim Lezárt), T-9 loading-overlay viselkedés (van adat → dim+spinner, nincs adat → skeleton). Új preview: tier-2-datatable-contract.html.
2026.05.22
D-12
A4 dashboard — KpiCard · TeamPerformanceTable · inline WeeklyReport-rész
UX-explorer elhagyva (spec szigorúan preskriptív) • KPI 4×1 grid 960px alatt 2×2 • egész kártya kattintható (Wow #2 lefúrás) • danger tone piros bal-border és érték • TPT saját grid-row (nem a generikus DataTable) • empty: „Még nincs aktív terepi dolgozó.”
2026.05.22
D-11
A9 általános — TenantInfoForm · LogoUploader · RecipientList
T-1A locked-mezok info-tooltippal (folyamatos vizuális rend) • L-1A drop-zone + tallózás link üres állapotnál • L-2A preview + Csere/Törlés gombok • R-1A amber-tinted informatív card …Saját e-mail” shortcut-tal (pilot-élmény). A RecipientList Tier-3-as inline-jból önálló organism-fájlra emelve.
2026.05.22
D-10
A7 csoportok — GroupMemberList · UserPicker · undo-toast
G-1A inline-szekciók (A8-konzisztens, spec-szelídítés) • G-2A row-lista avatar+név+szerepkör+remove • G-3A inline autocomplete „+ Hozzáadás” gombbal, diakritika-érzéketlen keresés • G-4A direkt remove + 5s undo-toast (a tag-eltávolítás reverzibilis aktus).
2026.05.22
D-9
A8 felhasználók — invite-dialog · role-editor · adatlap-szerkesztés · invariáns-előjelzés
UD-1A lineáris invite-form, role-szekció kiemelt · UD-2A role-rows 1 mondat magyarázattal · UD-3A inline-szekciónkénti szerkesztés (3 szekció: Alapadatok / Szerepkörök / Csoporttagság) · UD-4A disabled checkbox + tooltip az SD-38 invariánsokra (utolsó-manager, saját-kizárás). A RoleEditor.locks prop hordozza a lock-okot.
2026.05.22
D-8
A6 kategóriák — reorder · IconPicker · default-import · sor-akciók
C-1A drag-drop fogantyúval (szülő-hatókör SD-64) · C-2A inline icon-popover (kattintásra ~280px paletta, outside-click + Esc zár) · C-3B preview-kártyás default-import dialog (SD-62, K-008 — alkategória-chip-ek) · C-4A always-visible sor-akciók (toggle + ceruza + kebab).
2026.05.22
D-7
A2 új-bejelentés-form · LocationPicker
F-1A külön oldal (/bejelentesek/uj) · F-2A két submit-gomb (Mentés vázlatként / Mentés és kiosztás) · F-3A 1-oszlopos szekciók (A probléma / Helyszín / Bejelentő / Triage) · L-1A térkép-first · L-2C click + drag · L-3A auto reverse-geocode override-pattern-nel. A MapWidget kiemelve önálló organism-fájlba (Tier-3.5-ből).
2026.05.22
D-6
A3 duplikáció — SimilarTicketsBox · MergeDialog
SB-1A csendes empty · SB-2A bélyegkép balra 56×56 · SB-3A akciók mindig láthatók a sor jobbján (Összevonás + chevron) · SB-4A amber-tinted findings-fejléc + alert-ikon + count-badge. MD-1A kártya-radio (élő ügy / duplikátum, K-034 default a régebbi) · MD-2A primer kék confirm-gomb (összevonás nem destruktív aktus, K-037 tone-of-voice).
2026.05.22
D-5
A1 adatlap body — Timeline · Notes · ActionBar
AT-1C hibrid időbélyeg (relatív főszöveg + tooltip-en abszolút) · AT-2B event-type ikon halvány színes háttéren (DS status-token színek) · N-1B chat-szerű notes-panel (composer alul) · N-2A kronológiai rendezés (régi→új) · AB-1A sticky alsó akció-sáv (mobil-konzisztens SD-41) · AB-2A egy primer + secondary-k.
2026.05.21
D-4
A1 adatlap fej — TriageBar UX
T-1B label-value sáv (eyebrow + érték kétszintes cellákban) · T-2B always-visible chevron (szerkeszthetőség kódolva) · T-3B polgári javaslat pre-fill amber „javasolt" tag-gel · T-4B subtle „· kötelező" suffix az eyebrow-ban (Új ügyön Kategória + Felelős). SD-26 lock végállapotban (Megoldva / Elutasítva).
2026.05.21
D-3
DataTable sor-end: chevron-only, kebab nélkül
A spec "kebab: 'Megnyitás'" javaslatát elhagyjuk — egyetlen-elemű kebab anti-pattern, redundáns a row-click-tel. Modern szabvány: chevron-only (Linear, GitHub Issues). A rowActions prop API fenntartva jövőre.
2026.05.21
D-2
DataTable külön tierbe — átszámozás
A DataTable komplexitása miatt külön Tier-2-be kerül, mellé a FilterPillBar és a TabFilter (lista-screen család). A korábbi Tier-2 (ág-specifikus) lecsúsz Tier-3-ra, Tier-3 (screen-specifikus) Tier-4-re. A teljes terv 7 → 8 lépés.
2026.05.21
D-1
Page-CTA helye — PageHeader, nem TopBar
A screen-specifikus primer CTA (+Új bejelentés, +Új hír stb.) a PageHeader actions-slotjába kerül, nem a TopBarba. A TopBar action-slot üres marad (csak bell + search). Egyetlen konzisztens minta minden screenre. Indok: a Urbino tone-of-voice nem developer-velocity SaaS; a 3-kattintásos elérés elég.
2026.05.21
A három-rétegű architektúra
design-system/
Atom + molecule réteg
Két world közös vizuális szótára: button, card, chip, input, breadcrumb, tabs, dialog, tokenek. Read-only innen.
DS-projekt
manager-system/
Organism réteg
A manager-specifikus UX-blokkok — AppShell, StatusTrack, TriageBar, DataTable, …. Saját CSS; csak DS-tokeneket fogyaszt.
EZ A PROJEKT
app/
Screen-kompozíciók
A 12 admin screen vékony composition-ként az organism-katalógus fölött. Itt nincs UI-logika, csak content + slot.
EZ A PROJEKT
Fájl-szerkezet
ds-patch/ Átadás-kész patch a DS-projektnek (page-layout réteg). 5 fájl.
design-system/ DS lokális másolat, patch alkalmazva. Olvassuk, nem írjuk.
manager-system/README.md Architektúra + mi tartozik ide / nem.
manager-system/SITEMAP.md Feature × screen × organism használat-mátrix.
manager-system/ORGANISMS.md ~25 organism props-API + DS-deps + tier-besorolás.
manager-system/DECISIONS.md UX-döntés-napló (D-1, D-2, …).
manager-system/organisms/ 42 organism-fájl + _styles.css (~4936 sor, 51 logikai szekció, AUDIT.md P1 duplikáció-cleanup lefutott): app-shell · page-header · empty-state · icon · ettings-section · settings-sub-nav · user-chip · confirm-dialog · data-table · filter-pill-bar · ticket-meta-bar · triage-bar · activity-timeline · internal-notes-panel · action-bar · similar-tickets-box · map-widget · location-picker · ticket-create-form · category-tree-editor · icon-picker · category-import-dialog · role-editor · user-invite-dialog · user-picker · group-member-list · tenant-info-form · logo-uploader · recipient-list · kpi-card · team-performance-table · status-track · weekly-report-card.
manager-system/data/mock.js TENANT + CURRENT_USER + users + nav-count mock.
manager-system/preview/tier-0..3.5/*.html Tier-0..3.5 specimen-canvas-ek (17 fájl). Belépő: a fenti terv-lépésekből.
manager-system/preview/tier-4-*.html Tier-4 iterációk (17 fájl): 8 UX-explorer + 9 Hi-Fi. Belépő: a fenti előrehaladás-táblából.
manager-system/preview/tier-2-datatable-contract.html Kanonikus DataTable-contract demo a 8. lépés fejlesztőjének (audit-meneti plüsz).
AUDIT.md 2026.05.22 Tier-0..Tier-4 záró audit — 8 fejezet + prioritált cleanup-lista.
AUDIT-2.md 2026.05.24 — 8. lépés végi audit (Phase 1.2). AUDIT.md cleanup-tablatábla folytatása + 3 inline-organism-pótlás (A5/A7/A8) + 9 cleanup-task P0..P3 prioritással a 9. lépéshez.
SCREEN-CONVENTIONS.md 2026.05.24 — screen-mock konvenció-dokumentum (Phase 1.3). 11 dimenzión át rögzíti, hogyan épül a 28 screen-fájl: CSS link-sorrend, script-src-rend, screen-header pattern, page-class, mock-konvenció, naming, iconography. A 9. lépés Claude Code-átadásához alap-input.
HANDOFF-PREP.md 2026.05.24 — átadás-előkészítő kérdések (Phase 1.4 záró). 10 kérdés + javaslat: organism-szállítási forma, PrimeNG-mapping per organism, CSS-organisation, mock-data átadás, DS-kapcsolódás, routing, tesztstratégia. A Phase 3 HANDOFF.md ezekből emeli végleges szerződéssé a fejlesztő-csapat jóváhagyásával.
Az atom + molecule réteg a megosztott Urbino DS-ben él. Az organism-réteg a manager-projekt szuverén része. A screenek az organism-katalógusból komponálódnak.