UI/UX design reference (assets a mapování)

• HTML v docs/design/pages/**/code.html je vizuální reference, nikoli implementační zdroj.
• OPORA se implementuje v Next.js (App Router) + React + Tailwind v souladu s architekturou.
• Tento dokument mapuje designové assety na cílový route model definovaný v ../ui-flow.md (projekt jako hlavní pracovní entita, /app prefix).

• docs/design/README.md — pravidla použití a konvence
• docs/design/pages/ — referenční page layouty (HTML)

Repozitář obsahuje tyto page reference:

• docs/design/pages/opora_saas_page_(1)/code.html — OPORA - Calculation Engine
• Cílová route: /app/projects/[projectId]/edit (Project editor / “calculator mode”)
• docs/design/pages/opora_saas_page_(2)/code.html — OPORA - Brutalist-Industrial UI Kit
• Zamýšlené použití: reference komponent (tlačítka, tabulky, karty, typografie)
• Mapování na route: N/A (design system reference)
• docs/design/pages/opora_saas_page_(3)/code.html — OPORA - Owner Command Center
• Cílová route: /app/dashboard
• docs/design/pages/opora_saas_page_(4)/code.html — OPORA - Warehouse Inventory Control
• Cílová route: /app/warehouse/items/[itemId] (detail skladové položky)
• docs/design/pages/opora_saas_page_(5)/code.html — OPORA Logistics Command
• Cílová route: budoucí modul (logistika/dispatch planning)
• Doporučená placeholder route (pokud bude adoptováno): /app/logistics (není součástí kanonické mapy, pokud ji vědomě nepřidáte)
• docs/design/pages/opora_saas_page_(6)/code.html — OPORA - Mobile Field App
• Zamýšlený cíl: budoucí mobile experience (field operations)
• Mapování: mimo scope aktuální webové /app/* struktury (evidovat jako roadmapu)
• docs/design/pages/opora_saas_page_(7)/code.html — OPORA - Warehouse Module Dashboard
• Cílová route: /app/warehouse (pracovní přehled zásob)
• docs/design/pages/opora_saas_page_(8)/code.html — OPORA - Industrial Scaffolding Systems
• Cílová route: / (marketing landing)
• docs/design/pages/opora_saas_page_(9)/code.html — OPORA Admin Dashboard
• Cílová route: /app/settings (admin-oriented settings) a/nebo /app/settings/members
• Pozn.: RBAC model OPORA určí, které role admin views uvidí
• docs/design/pages/opora_saas_page_(10)/code.html — OPORA - Project Management Overview
• Cílová route: /app/projects (Projects list)
• Pozn.: používá se i jako strukturální reference pro /app/projects/[projectId]/results (tabulární sekce, husté datové bloky)

Hlavní pracovní entitou OPORA je Projekt. Aktuální workspace nabízí Přehled / Návrh / Výsledky / Dokumenty / Provoz:

• Vytvořit/otevřít Projekt → Návrh (/edit) → Výsledky (/results) → Dokumenty (/documents); provozní důkazy a uvolnění mají samostatnou route /operations. Dostupnost akcí řídí oprávnění a příslušné serverové podmínky.
• Údaje zakázky mají podstránku /details pod Přehledem. Pět záložek není automatickým schválením jednotlivých kroků.

Design stránky slouží jako reference pro:

• Landing a marketing (opora_saas_page_(8))
• Dashboard/overview (opora_saas_page_(3))
• Seznam projektů (opora_saas_page_(10))
• Editor projektu (“calculator mode”) (opora_saas_page_(1))
• Výsledky projektu (/app/projects/[projectId]/results) — kompozice odvozená z (10) (data-heavy sections) + (1) (výpočetní kontext)
• Sklad/inventory (opora_saas_page_(4) / (7))
• Settings/admin (opora_saas_page_(9))

• Projects list:
• Design reference: docs/design/pages/opora_saas_page_(10)/code.html
• Route: /app/projects
• Project editor:
• Design reference: docs/design/pages/opora_saas_page_(1)/code.html
• Route: /app/projects/[projectId]/edit
• Project results:
• Design reference: zatím bez dedikovaného single-page assetu
• Route: /app/projects/[projectId]/results
• Implementační pravidlo: použít datovou hustotu a tabulární patterny z (10) + workflow kontinuitu z (1); necopy-pastovat HTML

Detailní UX pravidla pro Projects sekci jsou v ../03-application/projects-ui-flow.md.

Následující popis zachycuje aktuální projektové obrazovky. Vizuální požadavky a pravidla review určuje editorový standard; tento popis není důkazem splnění všech jeho akceptačních kritérií.

Adoptované interpretační pravidlo:

• /app/projects
• není dashboard
• funguje jako pracovní inbox
• horní generické metriky nejsou povinné; priorita je saved views, filtry a seznam
• /app/projects/[projectId]
• jeden doporučený další krok, zbývající úkoly a stručné údaje zakázky
• bez sekčního railu; zákaznické údaje a nabídka se upravují na /details
• /app/projects/[projectId]/edit
• výchozí vložená Konstrukce; Podmínky obsahují formulář a Kontroly otevírají panel
• fullscreen Builderu je volitelný; přepnutí Konstrukce a Podmínek zachovává dokument a historii
• Podmínky mají od 1080 px pracovní šířky 248px rail a horní ovládání; na užší ploše dock Sekce / Kontroly / Uložit / hlavní akce
• sekce používají žlutou Ke kontrole, modrou Rozpracováno, červenou K opravě a zelenou Hotovo
• hlavní Uložit a spočítat vyžaduje platné vstupy, příslušné kontroly a uložení odpovídajícího návrhu
• sekundární Potvrdit kontrolu části je dostupné v hlavičce sekce, také na /details; všechna potvrzení jsou potřebná pro přechod do přípravy montáže, nikoli pro samotný výpočet
• detailní pravidla jsou v project-editor-design-standard.md
• /app/projects/[projectId]/results
• celá šířka bez railu pro Souhrn / Kusovník / Kontroly
• datové moduly mohou být hustší než okolní navigace
• /app/projects/[projectId]/documents
• samostatné dokumenty, exporty a historie; oddělené vytvoření konceptu a schválení/vydání
• /app/projects/[projectId]/operations
• od 1080 px pracovní šířky 248px rail; na užší nebo nízké ploše kompaktní navigace

Implementační zdroje: [ProjectWorkspaceNav](../../../apps/web/components/projects/ProjectWorkspaceNav.tsx), [ProjectEditorScreen](../../../apps/web/components/projects/editor/ProjectEditorScreen.tsx) a [ProjectWorkspaceShell](../../../apps/web/components/projects/ProjectWorkspaceShell.tsx).

Z toho plyne:

• designové assety v docs/design/pages/**/code.html se používají jako kompoziční reference
• finální výraz route se řídí governance pravidly pro browse mode, tool mode, results read shell a technical data modules
• při návrhu další pracovní route se nejdřív použijí přenositelné principy z project-editor-design-standard.md; HTML asset se používá až jako kompoziční inspirace

Po posledním passu je důležité číst design reference i přes optiku sdílených primitiv:

• Button = méně shouting, normal-case, jemnější tracking
• Badge = tišší status chip, ne dekorativní label cloud
• Card = lehčí titulky a menší dashboardová váha
• Table = kompaktní header a hustší datový rytmus

Prakticky:

• pokud starší design asset ukazuje tvrdší nebo hlučnější variantu, neznamená to automaticky, že ji má implementace kopírovat
• implementace se má držet aktuální systémové baseline v apps/web/components/ui/*

Některé assety reprezentují budoucí moduly (logistika, mobile). Mají být chápány jako:

• roadmap reference, ne závazek
• samostatné ADR, pokud se stanou produktově-definujícími funkcemi