From 5431cf599a7327c8513415d2bb928cd689a35b24 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rk=20Sikl=C3=B3di?= Date: Thu, 12 Nov 2026 01:01:42 +0100 Subject: [PATCH 1/4] =?UTF-8?q?docs:=20terv=20=E2=80=94=20leveg=C5=91sebb,?= =?UTF-8?q?=20=C3=A1tl=C3=A1that=C3=B3bb=20fel=C3=BClet=20(TICKET-45?= =?UTF-8?q?=E2=80=9348)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 5.5 --- docs/plans/2026-11-11-levegosebb-ui.md | 84 ++++++++++++++++++++++++++ 1 file changed, 84 insertions(+) create mode 100644 docs/plans/2026-11-11-levegosebb-ui.md diff --git a/docs/plans/2026-11-11-levegosebb-ui.md b/docs/plans/2026-11-11-levegosebb-ui.md new file mode 100644 index 0000000..b5e57f9 --- /dev/null +++ b/docs/plans/2026-11-11-levegosebb-ui.md @@ -0,0 +1,84 @@ +# Terv — 2026-11-11 — Levegősebb, átláthatóbb felület + +Állapot: Jóváhagyva (2026-11-12), folyamatban + +Kérés (Márk): „szeretném egy kicsit szellősebbre, jobban átláthatóbbá tenni az egész UI-t”. + +## Helyzetkép (demo, 1440 px és 390 px, mock adatokkal) + +- **Minden oldal tetején ugyanaz a státuszsor** (QR Csatorna, Online, hang, Tablet Aláíró) egy külön gombsorban. Ez egy teljes sor zaj a Vendégek, Bérletek, Pénzügy oldalon is, mobilon két sort foglal. +- **Recepció:** az oldalfejlécben 5 gomb, alatta a státuszsor, 4 stat-kártya, ünnepi sáv, majd 3 kártya egymás alatt. A Vonalkódos beléptetésben háromsoros magyarázó szöveg és 7 „Gyors tesztkód” gomb van. A Vendégkereső minden sorában 4 gomb (Köredzés, Kezelés -1, Adatlap, QR), ettől a lista nagyon zsúfolt. +- **Vendégek:** a „Bérlet” oszlop keskeny, 3–4 sorba törik, ettől a sormagasságok egyenetlenek; a név alatti megjegyzés hosszú szürke szöveg. +- **Bérletek és termékek:** a két táblázat alatt ugyanabban a kártyában az „új” űrlap; az árak törnek („22 000 / Ft”). +- **Vendég adatlap:** 9 fül, alatta 4 oszlopos űrlap sűrűn; a mentés gomb és a feljegyzések nincsenek elválasztva. +- **Alapméretek:** táblacella 13 px és `py-2.5`, kártya `p-4`, blokkok között 16 px, `PageHeader` alatt 20 px. A UI-specifikáció (`reformstudio-ui-skill` 1.) jelenleg kifejezetten „sűrű admin felületet” ír elő; ezt is át kell írni, különben a következő munkák visszasűrítik. + +## Irány + +„Nyugodt, levegős admin felület”: ugyanaz a dizájnnyelv (színek, szegélyek, lekerekítés, komponensek), de **nagyobb térközök, kevesebb egyszerre látható gomb, egyértelmű hierarchia** — oldalanként egy fő művelet, a ritkábbak menübe vagy modálba kerülnek. A működés (mutációk, szkenner, socket, mock-motor) nem változik. + +## Jegyek + +| Jira | Cím | Típus | Méret | Függ | +| --- | --- | --- | --- | --- | +| TICKET-45 | Levegősebb alapméretek + státuszsor a fejlécbe + UI-specifikáció frissítése | IMPROVEMENT | M | – | +| TICKET-46 | Recepciós pult rendezése | IMPROVEMENT | M | TICKET-45 | +| TICKET-47 | Vendéglista és vendég adatlap rendezése | IMPROVEMENT | M | TICKET-45 | +| TICKET-48 | Bérletek és termékek, Pénzügy rendezése | IMPROVEMENT | S–M | TICKET-45 | + +### TICKET-45 — Alapok (minden oldalra egyszerre hat) +1. **Térközök és betűk a `shared/ui` alapelemeiben:** + - `PageContainer`: asztali `px-8 pt-8` (most 24 px), mobil `px-4 pt-5`. + - `PageHeader`: alatta `mb-8` (most 20 px); leírás 14 px. + - Blokkok közötti rés az oldalakon: `gap-6` (most `gap-4`), mobilon `gap-4`. + - `Card`: fejléc `px-5 py-4`, törzs `p-5` (mobil `p-4`), lábléc `px-5 py-4`. + - `Table`: cella 14 px, `px-4 py-3`; fejléc `px-4 py-2.5`; számoszlopok `whitespace-nowrap`. + - `StatCard`: `px-5 py-4`, a címke és az érték között több hely. + - Űrlap: mezők között 16 px, címke és mező között 6 px. +2. **Státuszsor a fejlécbe:** a QR Csatorna / Online / hang / Tablet Aláíró sor kikerül az oldalak tetejéről, és a felső fejléc jobb oldalára kerül kompakt jelzőként (állapotpötty + rövid felirat, kattintásra ugyanaz a művelet, mint most). Mobilon csak a pöttyök látszanak, a feliratok egy kis legördülőben. +3. **UI-specifikáció:** `reformstudio-ui-skill` 1. („sűrű” → „nyugodt, levegős”), 3.6 Térközök, 3.7 Betűk, 4. fejléc, `references/tokens.md`, `references/components.md` az új értékekkel. + +### TICKET-46 — Recepciós pult +- Oldalfejléc: egy elsődleges gomb (**Új vendég**), a Beléptetés / Alkalom levonása / Új bérlet / Befizetés egy kisebb műveletsorban vagy „Műveletek” menüben (lásd kérdés 2). +- Vonalkódos beléptetés: a magyarázó szöveg egy rövid sorra rövidül (a többi `?` súgóba), a **Gyors tesztkódok csak Demó módban** látszanak. +- Vendégkereső sorai: **egy** gomb látszik (Köredzés), a Kezelés -1 / Adatlap / QR a sor „⋯” menüjébe kerül; a név a sorra kattintva is megnyitja az adatlapot. +- Elrendezés: bal oszlop beléptetés + utolsó vendég + kereső, jobb oszlop kassza + mai érkezések, a stat-kártyák és az ünnepi sáv fölöttük — nagyobb résekkel, hogy a szem a beléptetés mezőn kezdjen. + +### TICKET-47 — Vendégek és adatlap +- Vendéglista: a Bérlet oszlop szélesebb, legfeljebb 2 sor (bérlet neve + „Havi tagság: X Ft/hó”), a megjegyzés 1 sorra vágva (teljes szöveg `title`-ben); egyenletes sormagasság. +- Szűrő-szegmens és kereső külön sorban mobilon, asztalin egy sorban több hellyel. +- Adatlap: az Áttekintés űrlapja szakaszokra bontva („Személyes adatok”, „Elérhetőség”, „Megjegyzés”), 4 helyett 2–3 oszlop, a mentés gomb a szakasz alján; a Belső feljegyzések külön kártyában. + +### TICKET-48 — Bérletek és termékek, Pénzügy +- A két „Új bérletsablon” / „Új szolgáltatás” űrlap a kártyából **modálba** kerül, a kártya fejlécében „+ Új bérletsablon” / „+ Új szolgáltatás” gombbal. A táblázatok így tiszta listák. +- Árak és időtartamok nem törnek; a „Csak nőknek” jelvény a név mellé kerül. +- Pénzügy: a késési jelvények és táblák az új alapméretekkel; a kategória-összesítő egy sorban. + +## Worker bontás +- **Worker A** (első, egyedül): TICKET-45 — ág: `TICKET-45`, érintett: `apps/web/src/shared/ui/*`, `widgets/app-shell/ui/AppHeader.tsx`, `pages/reception/ui/desk/ReceptionToolbar.tsx`, `pages/reception/ui/ReceptionPage.tsx`, `.claude/skills/reformstudio-ui-skill/*`. +- **Worker B, C, D** (A után, párhuzamosan, mind A ágáról indul): + - B: `pages/reception/ui/desk/*`, `ReceptionPage.tsx` (csak a pult része) + - C: `pages/reception/ui/guests/*`, `widgets/guest-profile/*` + - D: `pages/reception/ui/passes/*`, `pages/reception/ui/finance/*` + - Ütközés: csak a `entities/release-note/model/releaseNotes.ts` (mindenki a tömb elejére ír) — összevonáskor rendezem. + +## Elfogadási feltételek +- Egyik oldal tetején sincs külön státuszsor; a fejlécben a jelzők működnek (QR csatorna, kijelzők, hang, tablet). +- Recepció: oldalfejlécben egy elsődleges gomb; a Vendégkereső soraiban egy látható gomb + menü; tesztkódok csak Demó módban. +- Vendéglistában egyetlen sor sem magasabb 2 szövegsornál; árak nem törnek. +- Bérletek és termékek: az új tétel modálban vehető fel, mentés után a lista frissül. +- Az alapméretek a skill 3.6 / 3.7 új értékeit követik; a skill szövege is levegős irányt ír. +- Minden működés változatlan (E2E zöld); skill 10.4: világos és sötét téma, 375 / 1024 / 1440 / 2560 px. +- CI (gate + E2E) zöld; a merge után kézi böngészős teszt a demón, képernyőképekkel. + +## Újdonságok bejegyzések +- TICKET-45 → `IMPROVEMENT` — „Levegősebb felület: nagyobb térközök, a kapcsolatjelzők a fejlécbe költöztek”. +- TICKET-46 → `IMPROVEMENT` — „Átláthatóbb recepciós pult”. +- TICKET-47 → `IMPROVEMENT` — „Átláthatóbb vendéglista és adatlap”. +- TICKET-48 → `IMPROVEMENT` — „Bérletek és szolgáltatások felvétele külön ablakban”. + +## Döntések (Márk, 2026-11-12: „mehet”, a javaslatok szerint) +1. Mérsékelten levegős: a fenti értékek (kb. +25–50% térköz, 14 px táblaszöveg). +2. A Recepció 4 ritkább gombja kisebb gombsorban látható marad (nem menü). +3. A Gyors tesztkódok csak Demó módban látszanak. +4. A Vendégmonitor, a bejelentkezés és a tablet kimarad ebből a körből. From 46bcba2d0e6e6d1221fdae8960f2edd1b7f6c84e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rk=20Sikl=C3=B3di?= Date: Thu, 12 Nov 2026 01:11:19 +0100 Subject: [PATCH 2/4] =?UTF-8?q?feat(web):=20TICKET-45=20leveg=C5=91sebb=20?= =?UTF-8?q?alapm=C3=A9retek,=20st=C3=A1tuszjelz=C5=91k=20a=20fejl=C3=A9cbe?= =?UTF-8?q?n?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - shared/ui: PageContainer px-8 pt-8 (mobil px-4 pt-5), PageHeader mb-8 és 14 px leírás, Card fejléc/lábléc px-5 py-4 és törzs p-5 (mobilon px-4 / p-4), Table 14 px és px-4 py-3 cella, StatCard px-5 py-4, ResponsiveTable / DataList igazítva, számoszlopok nem törnek - oldalak: blokkok között gap-4 md:gap-6, űrlapmezők között 16 px - a recepció kapcsolatjelzői (QR csatorna, Online / Offline, hang, Tablet) a fejlécbe kerültek: AppHeaderStatus (widgets/app-shell, portál) + ReceptionHeaderStatus; 1280 px alatt pöttyök és legördülő - az offline várólista sávja külön OfflineQueueNotice - reformstudio-ui-skill: levegős irány, 3.6 / 3.7 / 4.3 / 4.4 és a references - Újdonságok bejegyzés Co-Authored-By: Claude Opus 5.5 --- .claude/skills/reformstudio-ui-skill/SKILL.md | 110 +++++++----- .../references/components.md | 60 +++++-- .../references/responsive.md | 11 +- .../references/tokens.md | 16 ++ .cursor/rules/ui-design.mdc | 3 +- .../release-note/model/releaseNotes.ts | 15 ++ .../record-payment/ui/RecordPaymentModal.tsx | 2 +- .../pages/demo-sandbox/ui/DemoSandboxPage.tsx | 8 +- .../src/pages/reception/ui/ReceptionPage.tsx | 25 +-- .../src/pages/reception/ui/WhatsNewPanel.tsx | 2 +- .../reception/ui/desk/OfflineQueueNotice.tsx | 34 ++++ .../reception/ui/desk/ReceptionDeskTab.tsx | 20 +-- .../ui/desk/ReceptionHeaderStatus.tsx | 164 ++++++++++++++++++ .../reception/ui/desk/ReceptionToolbar.tsx | 133 -------------- .../pages/reception/ui/finance/FinanceTab.tsx | 4 +- .../pages/reception/ui/passes/PassesTab.tsx | 6 +- apps/web/src/shared/ui/card.tsx | 11 +- apps/web/src/shared/ui/data-list.tsx | 6 +- apps/web/src/shared/ui/label.tsx | 3 +- apps/web/src/shared/ui/page.tsx | 11 +- apps/web/src/shared/ui/responsive-table.tsx | 13 +- apps/web/src/shared/ui/stat-card.tsx | 10 +- apps/web/src/shared/ui/table.tsx | 10 +- apps/web/src/widgets/app-shell/index.ts | 1 + .../app-shell/model/headerStatusTarget.ts | 4 + .../src/widgets/app-shell/ui/AppHeader.tsx | 9 +- .../widgets/app-shell/ui/AppHeaderStatus.tsx | 14 ++ .../web/src/widgets/app-shell/ui/AppShell.tsx | 27 +-- .../widgets/guest-profile/ui/GuestModal.tsx | 12 +- 29 files changed, 470 insertions(+), 274 deletions(-) create mode 100644 apps/web/src/pages/reception/ui/desk/OfflineQueueNotice.tsx create mode 100644 apps/web/src/pages/reception/ui/desk/ReceptionHeaderStatus.tsx delete mode 100644 apps/web/src/pages/reception/ui/desk/ReceptionToolbar.tsx create mode 100644 apps/web/src/widgets/app-shell/model/headerStatusTarget.ts create mode 100644 apps/web/src/widgets/app-shell/ui/AppHeaderStatus.tsx diff --git a/.claude/skills/reformstudio-ui-skill/SKILL.md b/.claude/skills/reformstudio-ui-skill/SKILL.md index 6e24dfe..d995a99 100644 --- a/.claude/skills/reformstudio-ui-skill/SKILL.md +++ b/.claude/skills/reformstudio-ui-skill/SKILL.md @@ -19,9 +19,16 @@ A felhasználóval magyarul beszélj. A felületi szöveg magyar, a meglévő ha ## 1. Az irány egy mondatban -Hagyományos, nyugodt, sűrű admin felület: fehér/szürke felületek, vékony 1 px-es +Hagyományos, nyugodt, levegős admin felület: fehér/szürke felületek, vékony 1 px-es szegélyek, 6 px-es lekerekítés, táblázatok és űrlapmezők, **egy** kiemelő szín. +**Levegős, nem sűrű:** bőkezű térközök (3.6), 14 px-es táblaszöveg (3.7), egyértelmű +hierarchia. Oldalanként (nézetrészenként) **egy** fő művelet; a ritkábban használt +műveletek menübe (`DropdownMenu`, a sor „⋯” gombja) vagy modálba kerülnek, nem egy +hosszú gombsorba. A magyarázó szöveg egy rövid sor, a többi súgóba (`Tooltip`) való. +Ne sűríts vissza: kisebb rés, kisebb betű vagy több egyszerre látható gomb csak a +ticket kifejezett kérésére. + **Tilos:** színátmenet, üvegeffekt (`backdrop-blur`), dekoratív kör vagy blob, emoji a felületen, pasztell kártyahalmaz, túlméretezett lekerekítés (`rounded-2xl` és fölötte), túlméretezett árnyék, csillogó „AI” ikonok (`Sparkles`), animált @@ -154,14 +161,17 @@ oldalsáv kártya `rounded-[14px]`-e az egyetlen kivétel (1.). | Hol | Érték | | --- | --- | -| Oldal belső margója | asztali `px-6 py-6` (24 px), mobil `px-3 py-4` (12/16 px) | -| Blokkok közötti rés (rácsok) | `gap-4` (16 px), mobilon a stat-kártyák között `gap-2.5` (10 px) | -| Kártya fejléc | `px-4 py-3` | -| Kártya törzs | `p-4` (mobilon `p-3.5`) | -| Táblacella | `px-3 py-2.5` (12 × 10 px), fejléccella `px-3 py-2` | +| Oldal belső margója | asztali `px-8 pt-8` (32 px), mobil `px-4 pt-5` (16/20 px), alul 72 px | +| Blokkok közötti rés (rácsok, kártyák egymás alatt) | `gap-6` / `space-y-6` (24 px), mobilon `gap-4` (16 px): `gap-4 md:gap-6` | +| Stat-kártyák között | `gap-6` (24 px), mobilon `gap-3` (12 px) | +| Kártya fejléc és lábléc | `px-5 py-4` (mobilon `px-4 py-4`) | +| Kártya törzs | `p-5` (mobilon `p-4`) | +| Stat-kártya | `px-5 py-4` (mobilon `px-4 py-3.5`), címke és érték között `mt-1.5` | +| Táblacella | `px-4 py-3` (16 × 12 px), fejléccella `px-4 py-2.5` | +| Táblázat mobilon (kártyasor) | soronként `px-4 py-3.5`, a párok között `gap-1.5` | | Gombok egymás mellett | `gap-2` (8 px) | -| Űrlapmezők egymás alatt | `mb-3.5` (14 px) mezőnként, címke és mező között `gap-1.5` | -| PageHeader alatt | `mb-5` (20 px) | +| Űrlapmezők egymás alatt | `space-y-4` / `gap-4` (16 px), címke és mező között `gap-1.5` (6 px) | +| PageHeader alatt | `mb-8` (32 px), mobilon `mb-6` (24 px) | | Menüpontok között | `space-y-0.5` (2 px), szakaszok között `mt-3` | ### 3.7 Betűk @@ -176,13 +186,13 @@ oldalsáv kártya `rounded-[14px]`-e az egyetlen kivétel (1.). | --- | --- | --- | --- | | Alap szöveg | 14 px / 1.45 (`text-sm`) | 400 | `foreground` | | `h1` oldalcím | 20 px (`text-xl`) | 600 | `foreground` | -| Oldal leírása a `h1` alatt | 13 px | 400 | `muted-foreground` | +| Oldal leírása a `h1` alatt | 14 px (`text-sm`) | 400 | `muted-foreground` | | `h2` kártyacím | 14 px | 600 | `foreground` | | `h3` alblokk, beállítássor címe | 13 px | 600 | `foreground` | | Kis címke (stat, mező felett, `lbl`) | 12 px (`text-xs`) | 600 | `muted-foreground` | | Szakaszcím az oldalsávban | 12 px (`text-xs`) | 500 | `sidebar-muted` | | Táblafejléc | 12 px | 600 | `muted-foreground` | -| Táblacella | 13 px | 400 | `foreground` | +| Táblacella (asztali és mobil kártyasor) | 14 px (`text-sm`) | 400 | `foreground` | | Stat érték | 24 px (mobil 20 px) | 600 | `foreground` | | Gombfelirat | 13 px (`sm`: 12 px) | 600 | variáns szerint | | Jelvény | 12 px | 500 | állapot szerint | @@ -248,7 +258,7 @@ Vendégmonitor (`/monitor`) és a bejelentkezés **nem** kapja meg a keretet. ``` 8/12 px a fejléc háttere a kártya alatt fal a falig fut ┌──────────────┐┌───────────────────────────────────────────────────────┐ -│ RS / név [▯]││ Fejléc (56 px) ☰ ReformStudio Sync / Recepció dátum ☀│ +│ RS / név [▯]││ Fejléc (56 px) ☰ RS Sync / Recepció ● jelzők dátum ☀│ ├──────────────┤├───────────────────────────────────────────────────────┤ │ Napi működés ││ ┌───────────── max. 1400 px, középen ─────────────┐ │ │ Recepció ││ │ PageHeader: h1 + leírás [műveletek] │ │ @@ -353,18 +363,33 @@ verzió rövid alakja („v0.3”) látszik. - Bal oldal: mobilon a menü gomb (`Menu` ikon, `aria-label="Menü megnyitása"`), utána `Breadcrumb`: „ReformStudio Sync” / **oldal neve** (13 px; az utolsó elem 600 `foreground`, `aria-current="page"`). Mobilon csak az oldal neve. -- Jobb oldal: dátum és idő 12 px `muted-foreground` („november 10., kedd, 22:55”, - mobilon rejtve), téma gomb (`Button variant="secondary" size="icon"`, `Moon` / - `Sun`, `aria-pressed`). +- Jobb oldal: az oldal állapotjelzői (lent), dátum és idő 12 px `muted-foreground` + („november 10., kedd, 22:55”, mobilon rejtve), téma gomb (`Button + variant="secondary" size="icon"`, `Moon` / `Sun`, `aria-pressed`). +- **Állapotjelzők** (a dátum előtt): az oldal az `AppHeaderStatus`-szal + (`@/widgets/app-shell`, portál a fejléc helyére) teszi ide a saját kapcsolatjelzőit; + a logika az oldalon marad. A recepció fülein (`ReceptionHeaderStatus`): **QR + csatorna** (pötty: `success` aktív / `muted-foreground` szünetel, `aria-pressed`, + kattintásra szünetel / indul), **Online (N kijelző)** / **Offline puffer (N)** + (pötty `success` / `warning`, kattintásra az offline mód szimulálása), **Hangjelzés** + (`Volume2` / `VolumeX`, `aria-pressed`), **Tablet** (`FileSignature`, link a + `/tablet`-re, `aria-label="Tablet Aláíró"`). 1280 px-től `secondary` `sm` gombok + egy sorban (`gap-2`), pötty (8 px kör) + rövid felirat; alatta egyetlen `secondary` + `sm` gomb csak a pöttyökkel és a hang ikonnal (`aria-label` „Kapcsolatok: …” az + állapotokkal), amely `DropdownMenu`-t nyit: „Kapcsolatok” címke, a három kapcsoló + `DropdownMenuCheckboxItem`-ként, elválasztó, „Tablet Aláíró” link. Az oldalak + tetején nincs külön státuszsor; a várakozó offline beolvasások sávja („Szinkronizálás + most”) csak akkor jelenik meg a tartalomban, ha van mit szinkronizálni. - A fejlécben nincs kereső, nincs értesítési harang, nincs második avatar. ### 4.4 Oldaltartalom -- `PageContainer`: `mx-auto w-full max-w-[1400px] px-6 py-6` (mobil `px-3 py-4`), - alul 72 px hely. -- `PageHeader`: bal oldalt `h1` és alatta egy mondatos leírás, jobb oldalt a - műveletek (`gap-2`), alsó igazítással. Alatta 20 px. Mobilon a műveletek a cím - alá kerülnek, teljes szélességben. +- `PageContainer`: `mx-auto w-full max-w-[1400px] px-8 pt-8` (mobil `px-4 pt-5`), + alul 72 px hely. A fejléc belseje ugyanígy `px-4 md:px-8`, egy vonalban a tartalommal. +- `PageHeader`: bal oldalt `h1` és alatta egy mondatos leírás (14 px), jobb oldalt a + műveletek (`gap-2`), alsó igazítással. Alatta 32 px (mobilon 24 px). Mobilon a + műveletek a cím alá kerülnek, teljes szélességben. +- A blokkok (kártyák, rácsok) között 24 px (`gap-4 md:gap-6`, `space-y-4 md:space-y-6`). - Oldalanként legfeljebb egy `primary` gomb a `PageHeader`-ben. ## 5. Komponensek @@ -410,7 +435,8 @@ létre. Nyers `