Patterns

Screen skeletons composed from components. Every screen renders through the App Shell (RULES §1). The cards are legacy mockups of the old export.

Screens 27

  • Aktivity / schůzky↗Dvoupanelová aktivita — vlevo timeline (schůzky, hovory, e-maily, poznámky; filtr dle typu), vpravo detail aktivity. Hlavička s outcome pills (výsledek, posun pipeline, navazující krok), pak řetězec A
  • Chybové stavy↗Pravidlo selhání načtení — DS.ErrorState: critical ikona u nadpisu (bez pozadí), jedna akce (Zkusit znovu). Sdílené komponenty řídí přes prop error + onRetry; QA flag ?skerr.
  • Company detail (CRM)↗Detail firmy v CRM — Attio-style record page přes App Shell, 1:1 vzor person: levý rail (identita · akce · firmografika · seznamy) + pravá oblast se záložkami (Souhrn · Firmografika · Lidé · Obchody ·
  • Company drawer↗Firmy table with the live company record drawer open — kontakt, lidé, bonita, růst, vlastnická struktura
  • Dashboard (CRM)↗Home v Attio stylu — greeting (--h1), velké AI pole (zachováno, přerámováno na CRM asistenta) + 2 vycentrované chipy, pak holé sekce Schůzky (datum · ‹ › · ⋮) a Úkoly (Zobrazit vše · +). Ploché řádky:
  • Deal detail (CRM)↗Detail obchodu (deal) — record page přes App Shell, vzor Company/Person detail: střízlivý top strip (identita · hodnota · akce, bez pilulek dle AD redukce), levý rail „Detail obchodu
  • Deal drawer (úkoly)↗Pipeline board s otevřeným RecordDrawerem na dealu — detail obchodu + sekce Úkoly (sdílená DS.TaskList: úkoly, podúkoly, řešitelé, termíny, progres)
  • Detail člena týmu (práce)↗Manažerský detail podřízeného — pracovní čas dne odvozený z aktivity (klikání): aktivní bloky vs přestávky (≥10 min bez akce = přerušení), relace práce od–do, denní/týdenní souhrn a feed akcí. Dostupn
  • Dialer↗Volací workspace — vlevo fronta k volání (kontakt, firma, telefon, segment, „Volat teď
  • Domů (dashboard)↗Home — greeting, AI segment composer, saved segments table, dataset gallery
  • Firmy (segment table)↗Saved company segment — the SAME shared SegmentTable as Lidé, fed company columns + data (square avatars, IČO/obrat/web)
  • Import dat (CSV)↗Průvodce importem vlastních dat (BYO) — krok Nahrát (volba Lidé/Firmy + dropzone, detekce oddělovače/kódování), Mapování sloupců CSV → pole CRM (auto-match, náhled), Kontrola (validace: chyby/duplicit
  • Kalendář↗Týmový kalendář schůzek a úkolů — měsíční mřížka (dnes zvýrazněno, události jako chipy obarvené podle osoby), vpravo přepínatelný seznam Kalendáře (můj + kolegové, barva + checkbox) pro překryv kalend
  • Lidé (segment table)↗Saved people segment on the shared SegmentTable — sticky header + frozen Jméno column, column kebab menu, row select, sticky CTA
  • Loading (skeleton)↗Pravidlo načítání — DS.Skeleton: každá plocha (board, tabulka, drawer, úkoly, karty) má skeleton se shodným layoutem (zero layout shift). Sdílené komponenty řídí loading přes prop.
  • Meeting detail (CRM)↗Detail schůzky v CRM přes App Shell: záhlaví s názvem a termínem, vlevo užší read-only sloupec s náležitostmi (účastníci · projekt · termín · typ) přes entity reference, vpravo záložky pro zpracování
  • Nastavení↗Nastavení dosažitelné z account menu — Profil · Tým (členové, role, pozvánky, whitelist domén) · Integrace (Google). Ploché řádky dle containment budget, DS field/avatar/pill/button, sentence-case.
  • Notifikace (zvonek)↗Trvalý inbox v horní liště — DS.NotifBell + DS.NotifPanel. Přiřazení, naplánované události, dokončené async akce, aktivita týmu, systém. Nepřečtené (badge/tečka), skupiny Nové/Dříve, Označit vše. Dopl
  • Notifikace a toasty↗Systém potvrzení akcí — DS.toast (success/info/warning/error/loading), bottom-center, undo/zobrazit/retry; anatomie, typy, živá ukázka a pravidla kdy/co. Autosave = tichý indikátor, ne toast.
  • Person detail — migrated (ukázka)↗Referenční migrace jednoho record detailu (osoba) na sdílený DS.RecordTabs. Levý identity rail + pravý sloupec poháněný modulem record-tabs.js — obrazovka jen deklaruje record = {ctx, tabs, data}, pan
  • Person detail (CRM)↗Detail osoby v CRM — Attio-style record page přes App Shell: levý rail (identita · akce · detail záznamu · seznamy) + pravá oblast se záložkami (Souhrn · Aktivita · E-maily). Mapováno 1:1 z reference,
  • Person drawer↗Lidé table with the universal RecordDrawer open on a person — parallel to the company drawer, one shared component
  • Pipeline (kanban)↗Sjednocená pipeline s přepínačem více pipeline — heading „Obecná pipeline ▾“ otevře výběr (ikona·název·počet, aktivní zaškrtnutá) + „Nová pipeline“. Bílé plátno + šedé lajny, sloučená lišta, DS avatar
  • Prázdné stavy↗Sada prázdných stavů podle DS — prázdná pipeline / sloupec (jen „+ Nový obchod“), detail obchodu bez úkolů, žádné výsledky filtru; ikony bez pozadí, přes sdílenou DS.EmptyState
  • Průvodce segmentem — Firmy↗Same builder engine as Lidé, fed the company config — all 12 filter tabs with full content (Sídlo · Firmografie · Obor · Bonita · Finance · Růst · Vlastníci · Rizika · Kontakt · Atributy · Tagy · Full
  • Průvodce segmentem — Lidé↗Build mode of the shared .sgb surface — all 10 filter tabs with full content (Lokalita · Demografie · Bonita · Práce · Investice · Majetek · Komunikace · Atributy · Tagy · Fulltext), address typeahead
  • Reporty↗Manažerské vyhodnocení týmu (hlavní pohled Tým) — týmová KPI, řaditelná srovnávací tabulka členů (obchody, hodnota, win rate, aktivity, spojené hovory, Ø odpracováno, úkoly hotovo/po termínu, trend) s

Shell

  • App shell (skeleton)↗THE unified skeleton — topbar (logo · Datamart/CRM switch · search · account) + left nav + central content + preview drawer. Shared by every screen via _ds/app-shell.js; edit once, applies everywhere.

Registration 8

  • Hotovo↗Přistání po onboardingu — potvrzení propojených zdrojů, vstup do CRM. (Skipnuté propojení se vrací jako banner v Lidé/Firmy + Nastavení.)
  • Mimo whitelist↗Stav — přístup gated povolenou doménou (admin). Doména mimo seznam → požádat správce o přístup, zpět na přihlášení.
  • Mobil↗Onboarding na telefonu (390 px) — dvousloupcová karta se sbalí do jednoho sloupce, dekorativní panel mizí, akce jsou palcové. Breakpointy 720 / 560.
  • Odemčení asistenta↗Veřejná jednoúčelová stránka /asistent/odemknout — uživatel na ni přijde z tlačítka v Telegramu a zadává heslo asistenta. Rodina au-* (žádný AppShell, žádná navigace, žádný recovery flow). Pět stavů:
  • Ověření kódem↗6místný OTP kód (ne magic link) — auto-submit, paste, změnit e-mail, resend s odpočtem. Stejné pro login i registraci.
  • Profil↗Minimální, volitelný krok — jméno (předvyplněné) + foto, e-mail read-only. Roli řídí administrátor. Lze přeskočit.
  • Propojení Google↗JÁDRO — samostatný OAuth (incremental). Per-zdroj E-maily/Kontakty/Komunikace/Dokumenty + „proč“ + trust (jen ty vidíš obsah, GDPR/ISO). Skippable.
  • Vstup↗Jedna brána pro login i registraci — Google identita nebo pracovní e-mail (→ OTP). Bez hesla, bez forku sign-up/log-in.