Maron Design Systemv0.1

Živý style-guide

Stavebnice pro logistické nástroje Maronu — mobile-first, plně responzivní, token-driven. Motiv (světlý/tmavý) se přepíná nahoře; hustota je comfortable ve výchozím stavu, compact se nasazuje na konkrétní hustou tabulku. Vizuální směr: Signature. Statický náhled i tokeny: design-system-preview.html.

01Barvy

Brand — zelená (emerald)

50
100
200
300
400
500
600
700
800
900
950

Neutrály (slate)

0
50
100
200
300
400
500
600
700
800
900
950

Stavová paleta — soft & solid

successinfowarningdangercriticalneutral
successinfowarningdangercriticalneutral

02Logistický stavový systém

Vždy barva + ikona + text. Soft (odznak v tabulce) i solid (mapový marker).

PoptávkaNaplánovánoNakládkaNa cestěVčasOhroženoZpožděníDoručenoProblémZrušenoNeznámý stav
PoptávkaNaplánovánoNakládkaNa cestěVčasOhroženoZpožděníDoručenoProblémZrušenoNeznámý stav

03Ikony

Sada lucide-react (~1500 ikon, tree-shakable). Níže stavové ikony logistiky a kurátorský výběr pro dispečink; importuj kteroukoli podle názvu.

Stavové ikony (svázané se statusy)

Poptávka
Naplánováno
Nakládka
Na cestě
Včas
Ohroženo
Zpoždění
Doručeno
Problém
Zrušeno
Neznámý stav

Logistická sada

Truck
Package
PackageCheck
PackagePlus
Container
Warehouse
MapPin
Map
Route
Navigation
LocateFixed
Fuel
Wrench
Gauge
Weight
Ruler
Snowflake
TrafficCone
Construction
Clock
Timer
CalendarClock
CalendarDays
TriangleAlert
OctagonAlert
CircleCheck
BadgeCheck
Ban
WifiOff
Inbox
FileText
ClipboardList
BookOpen
Bell
Search
Filter
Settings
Phone
User
Users
Building2
Euro

04Typografie

Display · Přehled vozidel
H1 · Kniha jízd
H2 · Detail zakázky
H3 · Nakládka & vykládka
Body (16px) · Zásilka je na cestě do Mnichova, ETA 14:30.
Body-sm · Poslední poloha před 3 minutami.
Mono · SPZ 4P2 8391 · #ZAK-2026-0042 · 1 240 km

05Komponenty

Tlačítka

Formulář

Neplatný formát SPZ.

KPI karty

Vozidla na cestě
12
2 vs. včera
Včasnost
94,2 %
1,4 %
Ohrožené zakázky
3
termín < 2 h
Marže (měsíc)
18,6 %
0,8 %

Upozornění

Zpoždění 40 min
Zakázka #ZAK-0042 (Plzeň → Mnichov). Řešitelné, ETA 15:10.
Problém
Vozidlo 4P2 8391 hlásí poruchu, řidič mimo trasu.
Doručeno
#ZAK-0039 vyloženo v 12:04, CMR nahráno.

06Rozšířené komponenty

Tabs

Souhrn zakázky, stav, ETA.

Select · Segmented

Checkbox · Radio · Switch

Search · Tooltip · Dialog · Sheet

DataTable — řazení, sticky header, na mobilu → karty

Plzeň → Mnichov
#ZAK-0042 · P. Novák
Na cestě
48 500
Brno → Wien
#ZAK-0041 · J. Veselý
Zpoždění
32 100
Praha → Plzeň
#ZAK-0039 · M. Král
Doručeno
12 800
Ostrava → Praha
#ZAK-0038 · P. Novák
Ohroženo
27 400

DataTable — virtualizace (1 000 řádků), sticky sloupec, patička

ZakázkaTrasaŘidičStavCena
#ZAK-9000Plzeň → MnichovP. NovákNa cestě8 000
#ZAK-8999Brno → WienJ. VeselýZpoždění8 137
#ZAK-8998Praha → PlzeňM. KrálDoručeno8 274
#ZAK-8997Cheb → NorimberkL. HorákOhroženo8 411
#ZAK-8996Plzeň → MnichovR. ŠimekVčas8 548
#ZAK-8995Brno → WienP. NovákNa cestě8 685
#ZAK-8994Praha → PlzeňJ. VeselýZpoždění8 822
#ZAK-8993Cheb → NorimberkM. KrálDoručeno8 959
#ZAK-8992Plzeň → MnichovL. HorákOhroženo9 096
#ZAK-8991Brno → WienR. ŠimekVčas9 233
#ZAK-8990Praha → PlzeňP. NovákNa cestě9 370
#ZAK-8989Cheb → NorimberkJ. VeselýZpoždění9 507
#ZAK-8988Plzeň → MnichovM. KrálDoručeno9 644
#ZAK-8987Brno → WienL. HorákOhroženo9 781
#ZAK-8986Praha → PlzeňR. ŠimekVčas9 918
#ZAK-8985Cheb → NorimberkP. NovákNa cestě10 055
#ZAK-8984Plzeň → MnichovJ. VeselýZpoždění10 192
#ZAK-8983Brno → WienM. KrálDoručeno10 329
#ZAK-8982Praha → PlzeňL. HorákOhroženo10 466
#ZAK-8981Cheb → NorimberkR. ŠimekVčas10 603
#ZAK-8980Plzeň → MnichovP. NovákNa cestě10 740
#ZAK-8979Brno → WienJ. VeselýZpoždění10 877
#ZAK-8978Praha → PlzeňM. KrálDoručeno11 014
#ZAK-8977Cheb → NorimberkL. HorákOhroženo11 151
30 171 500 Kč

Jen viditelné řádky jsou v DOM (plynulé i u tisíců); první sloupec drží při horizontálním scrollu, patička sčítá napříč celou sadou.

Timeline

  1. 08:12
    Nakládka dokončena
    Plzeň, Zborovská 29
  2. 09:40
    Na cestě
    Průjezd Rozvadov
  3. 14:30
    Očekávaná vykládka
    Mnichov · ETA

EmptyState

Žádné poptávky

Nové poptávky z e-mailu se objeví tady.

Skeleton · Spinner

Načítání polohy…

07Overlaye, data a stavy

Combobox (s hledáním)

Toast / notifikace

Accordion

Avatar · Breadcrumbs

PN
PNJVMK+3

DescriptionList (detail zakázky)

Klient
Health Factory s.r.o.
Trasa
Plzeň → Mnichov
Řidič
Pavel Novák
Stav
Na cestě
Cena
48 500 Kč

ProgressBar

82%
94%
41%
12%

    08Menu, příkazy, kroky, datum

    DropdownMenu (akce řádku)

    Command palette (⌘K)

    Stepper (průběh)

    1. dokončeno: Poptávka
    2. aktuální krok: Naceněno
    3. nezahájeno: Naplánováno
    4. nezahájeno: Doručeno

    DatePicker (CZ)

    09Grafy (ECharts)

    ECharts kreslený přes náš theme-bridge — barvy z tokenů, přepni motiv nahoře a grafy se přebarví. Interaktivní a dotykové (najeď / klikni do legendy, tapni na mobilu).

    Co všechno ECharts umí (a jak se to používá): galerie příkladů · dokumentace (option API). Konkrétní typ grafu si vybereš odtud a hodíš jeho option do <Chart option={…} />.

    Rozpad zakázek (donut)

    Vytíženost / týden (sloupce)

    Marže — plán vs. realita (linie)

    10Servis: karta, board, konverzace

    PriorityDots

    Tři vodorovné tečky, bez textu. Neutrální (výchozí) a sémantická varianta.

    VysokáStředníNízkáNení servis
    VysokáStředníNízkáNení servis

    VehicleTag

    Název + SPZ, jistota párování ikonou. Bez vozidla je normální stav.

    Fiat Ducato L4H31PC 9904Renault Master9P6 5871Toyota L3H21PB 26929P3 0595
    Bez vozidla
    Fiat Ducato L4H29P7 2589

    ServiceEventCard

    Karta na boardu: kategorie, priorita, vozidlo a řidič na stejné úrovni, text, fotky, lidé, čas, řešitel.

    Náraz zezadu na D1 u Humpolce, čeká na policii

    Fiat Ducato L4H31PC 9904Martin Bill
    3

    Bliká mi kontrolka motoru a ztrácí to výkon

    Fiat Ducato L4H29P7 2589Alois Zachara
    čeká na díl
    JH

    Ulomil jsem si zrcátko o sloupek při couvání do rampy

    Fiat Ducato L4H31PD 0003Kamil Hořálek
    nová zpráva
    TN

    Odřený pravý bok od cizího vozu na parkovišti

    Monika Pechová
    2

    Připomínám že mám příští týden STK

    Toyota L3H21PB 2692Zadáno ručněZdeněk Bílek
    TN

    Board

    Přetáhni kartu myší nebo klávesnicí (mezerník zvedne, šipky přesunou). Na dotyku se nepřetahuje, stavy se mění z menu karty. Pod 768 px jeden sloupec a swipe.

    Nová

    3

    Náraz zezadu na D1 u Humpolce, čeká na policii

    Fiat Ducato L4H31PC 9904Martin Bill
    3

    Prasklé přední levé kolo, stojí za Brnem

    Renault Master9P6 5871Po jízdě (GPS)Magdalena Matoušková
    3

    Odřený pravý bok od cizího vozu na parkovišti

    Monika Pechová
    2

    V řešení

    2

    Bliká mi kontrolka motoru a ztrácí to výkon

    Fiat Ducato L4H29P7 2589Alois Zachara
    čeká na díl
    JH

    Připomínám že mám příští týden STK

    Toyota L3H21PB 2692Zadáno ručněZdeněk Bílek
    TN

    Vyřešeno

    1jen dnes

    Ulomil jsem si zrcátko o sloupek při couvání do rampy

    Fiat Ducato L4H31PD 0003Kamil Hořálek
    nová zpráva
    TN
    Starší v archivu

    Conversation

    Chatový styl: řidič vlevo, kancelář vpravo, oddělovače dnů (Praha), fotky s AI popisem, předěl po vyřešení. Klik na fotku otevře galerii.

    MM
    Magdalena Matouškovářidič
    Prasklo mi přední levý kolo, stojím na odstavném pruhu za Brnem
    Prasklá pneumatika, viditelně poškozená bočnice
    Vozidlo na odstavném pruhu, zapnuté výstražné blikače
    KZ
    Karina Zargarovakancelář
    Vidím to, volám servis. Zůstaň za svodidly.
    Asistence dorazí do 40 minut, SPZ 9P6 5871 jsem jim nahlásila.
    MM
    Magdalena Matouškovářidič
    Díky, už jsou tady 👍
    po vyřešení
    MM
    Magdalena Matouškovářidič
    Ještě jedna věc, ta rezerva co mi dali je hodně sjetá, ať to někdo zkontroluje

    Ukázková obrazovka v kontextu: /priklad-dispecink