Cashier terminal — sales, tables, payment, archive. · 31 pages
Sifarişin idarə edilməsi — interaktiv komponent. Gözləyir (Pending) tabı: gələn sifarişlər (delivery / call center / kiosk / e-menu), sifarişə klik → pending modal, İmtina → səbəb modalı. Status tabları (Planlaşdırılmış/Hazırlanır/Hazır/Götürüldü/Tamamlandı/Ləğv edilib): OrderItem kartları, status düyməsi → növbəti status və ya FilterModal, karta klik → ReceiptModal (Çek arxivi). Terminal alpha kodu ilə birebir.
Payment screen — Make a payment modal: method selection, amount + inline RRN inputs driven by a shared numpad, split payments with per-payment refund / delete.
Blocks receipt creation when require_open_shift_for_receipt = true and no cash shift is open. System-modal «info» type: «Çek yaratmaq üçün növbə açın» + primary CTA «Növbə aç» (opens Open-Shift dialog). Prototype: blocked → shift opened (success) → unblocked.
Checkout redesign exploration — 4 interactive prototypes (spec baseline · progress · tiles · minimal). Responsive, reuses the pos-checkout-navbar component; full prototype interactivity (numpad, split methods, dynamic pagination, change, fiscal→tax modal).
Clopos Customers modal (1:1 from customer-modal-spec, detailed build) — fully interactive prototype, 1138×1007, radius 8px, 56px profile avatar, 16px right-block padding. Two view variants: v1 (a) segmented Info/Campaigns/History tabs · v2 (b-stacked) the same content with NO segmented control — all three sections stacked vertically on one scrolling page. Left list (search 56px + 8 customers + create). Right pane: View (sticky profile header + Apply + dots menu; KPI Cashback/Balance, metrics bar, info rows + My-customers toggle; 5 campaign cards stamp/bar/complete; Receipts table) · Create/Edit form (Main info / Address / Note cards; customer-group & gender dropdowns, country segment, Monday-first date-picker modal, attached + for extra phone/address rows, per-address note, edit ✎ + delete ✗ buttons) · Delete confirm (DS System modal S, #58567A) · Add-address overlay (search → map → confirm, per-address note). All colours/space/type bound to design tokens; ₼ glyph; English.
Terminal description modal (1:1 from description-modal-spec). Single-textarea note entry — NbNavShell header (#35325E, Receipt label) + textarea + Cancel/Save buttons. 3 states (empty placeholder / writing: blue border + focus ring + blinking caret / filled value) × 2 sizes (S 500 / M 600, content padding 12→16, textarea min-height 104→148). Save has leading check. Radius 8px, Inter, all colours/space/type bound to design tokens.
Researched modifier modal (Toast/Square patterns). d-grouped (recommended): modifier groups with Required/Optional badges + validation, single-choice (size/sauce), optional add-ons with qty, and No/Normal/Extra ingredient intensity; live total + Add disabled until required chosen. a/b/c are earlier directions (stepper bar · always-on numpad · live summary).
Two-step modifier modal (900×700), built 1:1 from the supplied Figma export. Step 1: SegmentedControl sandwich tabs + add (green) / remove (red) groups of 176×100 product cards (metal-grey fill, navy price ◹, coral limit ◺, selection circle / count / check). Step 2: Porsiya + chips, Aksiz kod, Say stepper + numpad. Left ingredient panel mirrors selections + Total bar.
Interactive prototypes of the modifier modal (900×700). a — WITH segment menu (Sandwich 1–4 tabs, multi-product). b — WITHOUT segment menu, single product. c — category tabs (Modifier / Tərkibdən çıxar), no left panel, light ingredient cards, right-side counter with numpad opening on tap + Cəm / Saxla footer.
Terminal numpad modal (1:1 from numpad-modal-spec). Generic numpad-input shell driving porsiya / guest count / receipt lookup / weight / discount. Header (#35325E, configurable title) + one of three display modes (A value + ₼ chip / B value-only / C search input) + 4×3 numpad (white keys on #F2F4F5 tray, 2px gaps, backspace) + action row (Cancel + configurable CTA: Add/Save/Return, disabled #C4C4CC → active #2684FF with check). Radius 8px, Inter, all colours/space/type bound to design tokens.
Terminal order-management card (1:1 from order-card-spec) — a Wolt delivery-receipt row (941×104). 4 variants: Close (white) · Open (amber #FFF8DF) · Open-decline (white) · Close-decline (amber). Left: Wolt icon box (#00C2E8 + verbatim wordmark) + Delivery / order code 9MGD1 (#2B7DD3) / scooter + courier. Customer (Azik.S + comment icon on open variants + masked card). Order #1234. Timer (clock icon on open variants; normal 12:00 #333 / decline 00:00 #FF564D). Right: price pill (10000.00 ₼ + chevron, #2684FF) + ETA + Ready button. Verbatim SVGs (Wolt, scooter, comment, timer, chevron). Radii 8px (Wolt box 6px); all colours/space/type bound to design tokens.
Clopos POS terminal Receipt/Seat screen (1:1 from Receipt-Seat-spec, 1024×768). Left rail 44 (back · icon groups · dots). Top bar 44: navy 'Masa 10' strip (edit · clock 22:12 · #3933/001 dropdown) + StatePOS strip (clock · green New order · menu · dev test · bell · green wifi). Receipt panel 400: Product/Seat/User segmented tabs (Seat active) · shared + seat headers (Seat 2 selected: blue left-border + tint) · product rows (qty chip · name · unit · total) · seat strip (ghost + · chair · seat chips) · totals (Cəm/Yekun 238.97 ₼) · Göndər (blue, badge 2) / Hesabı bağla (green). Products 580: CategoryBar (Home puzzle tab · search · Porsiya · settings · paused · table-list) + 3×184 category grid (Əsas yeməklər…Səhər yeməyi setləri) → product grid on click. Colours bound to POS tokens (navy=secondary-300/500/700 · blue=primary-500 · green=success-400 · grey-300); Inter; ₼ glyph.
Terminal receipt checklist (1:1 from receipt-checklist-spec). Two parts in a 420px card — line-item list (qty badge 28 r6 + name/promo/tax column + unit & total price columns; default / discount with struck old price + promo note / gift 'Free product') with dashed dividers, and a totals block (Subtotal · Discount · Tax · Service charge (0%) · Delivery fee · dashed divider · emphasized Total: in #2684FF). Old prices use real line-through; ₼ Manat glyph. Radii card 10 / qty badge 6; Inter; all colours/space/type bound to design tokens.
Terminal Select modal (1:1 from select-modal-spec) composed from the DS Select item (CheckItem). Two modes — Multi-select (checkbox) and Single-select (radio) — each with/without description, sizes S 500 / M 600. Navbar #35325E · search (Axtar) · item list (Select all + 7 categories, 24px controls, item border #E5E5EA→#2684FF when selected) · footer (Reset change + Apply/Save change ✓). Full state matrix: empty/partial/all → indeterminate header + Apply↔Save change. All colours/space/type bound to design tokens; spec SVG shapes verbatim; Inter · radius 8px.
Printable stations (Send to station) modal over the terminal — per station: header strip with comment, product rows (checkbox select, order-box 1→2→3 serving order, tag chips, row note, timer, remove). Set-start-timer sub-modal (minute presets) builds a Timer set section; footer Reset / Set timer (n) / Send (n). Success dialog.
Terminal settings card (1:1 from settings-card-spec). Two variants — V1 Expanded (device info + action row: toggle + Test et ×2 + chevron icon-btn + select input, plus tag-chips row) and V2 Compact (device info + upload/download round icon-buttons + toggle). Shared device-info block (ScDeviceIcon #2684FF + name + online/offline status dot + address). Atoms: ScToggle 42×24, ScStatusDot, ScIconBtn (square 40 / round 32), ScActionBtn, ScSelectInput, ScTagChip 22 r5. Radii card 10 / btn 8 / chip 5; Inter; all colours/space/type bound to design tokens.
Terminal support modal — “Texniki dəstək” (1:1 from support-modal-spec). Header (h62) + call container (#2684FF, support line 012 310 22 66 with phone glyph on a #46A1FF icon box) + QR container (#F8F8FC, scan-glyph “QR kod”, rounded QR card, “Bizə yazmaq üçün skan edin” caption) + system bar footer (version · Terminal · Venue pill). Two sizes S 600 / M 800. Phone/scan/close icons inline SVG verbatim (currentColor). Radius 8px, Inter, all colours/space/type bound to design tokens.
Terminal system modal (1:1 from system-modal-spec). 5 types — delete (danger), lock (warning), fiscal (warning, stacked buttons), success (single), info — × 2 sizes (S 500 / M 600). Shared NbNavShell header (#58567A) + icon box (type tint) + heading/body + Button-component footer (neutral / primary / danger / outline-danger). Verbatim glyphs (trash, padlock, warning, check, info). Radius 8px, Inter, all colours/space/type bound to design tokens.
Checkout / payment screen — left product panel + right numpad, methods, quick actions, pay buttons. 1:1 from Checkout-spec.