Back Office

Add-on (Apps) card

Back Office add-on (Apps) card (224×308 r8) — 1:1 with back-office-components-spec §2: AKİAB logo tile + settings button, name/description/price, CTA. 2 versions: Qoşul (#4FA6FF + plus) and Qoşuldu (#00C56A + check).

Calendar

Back Office calendar — 1:1 with back-office-components-spec §3: A DateFilterBar (segment control + date display, 6 states), B PresetSidebar, C CalendarGrid (no-selection / single 15 / range 7→22, Sep 2024 Sunday-start), D DateRangePicker organism with OK button.

Etiketlər modal

Back-office «Etiketlər» (bulk label) modal — DS-bound: Modal shell + Select (Hərəkət Növü) + MultiSelect (Input field + Tag pills + checkbox dropdown option with colour swatch) + Buttons. UX fix: MultiSelect dropdown is in-flow (expands the modal) so «Saxla» stays visible and saves in one click — no click-outside-to-close first.

Modifier set modal

Back-office «Yeni set yarat» (modifier set) modal — DS-bound, 5 structural variants: a) single-column, b) V1 wide (800px, fields side by side, stacked radio, 3-col Min|Maks|Göstərilmə), c) V2 numbered sections (460px), d) segmented controls (no dropdowns), e) two-column wide with header+center+footer dividers. All share §6 conditional logic + auto-set.

▤ View all 5 variants →

Sidebar

Back Office sidebar (200px, #1F274F, r14) — 1:1 with back-office-components-spec §1: header (clopos wordmark + collapse), branch selector + dropdown (open by default), 13 categories with Tabler icons + expandable children (Statistikalar open, Lövhə selected; Dashboard active), footer «Soul Kitchen Baku». Interactive: toggleBranch · pickBranch · toggleCat.

Table columns control

Back Office «Table columns control» — pill trigger düyməsi (36×36, radius-pill, #F2F4F7 → hover #E5E5EA → active #D1D1D6, table-columns icon #333) açılan panel (325px, r8, shadow 0 0 4px rgba(0,0,0,.1)) ilə: sürüklənə/işarələnə bilən sütun sıra siyahısı (drag handle 6-nöqtə #5F6774 · checkbox on dolu #2684FF / off outline #D1D1D6 · label 400/16px on #333 / off text-secondary, nowrap+ellipsis) və «Reset all changes» sətri (hamısı on olanda disabled #C4C4CC). HTML5 drag-drop ilə yenidən sıralama, checkbox toggle, reset. 8 default sütun (index 6 ən uzun label → padding-right:16px). Bütün dəyər/token/icon spec ilə birə-bir; yalnız design-system token-ləri.

Report Builder

Report Builder — tam interaktiv UI prototipi (yalnız frontend, mock data), istehsalat client-panel dizaynına 1:1 daxil edilib: real sidebar DOM + CSS bundle + Clopos (GoogleSans) fontlar snapshot-dan. 3 zona: sol panel — dataset switcher (Sales/Products) + axtarışlı Dimensions/Metrics siyahısı (click və drag&drop); mərkəz — canlı preview cədvəli (real client-side aggregation: group-by, sum/avg/min/max/count, filters, sort, totals footer); sağ — konfiqurasiya (column chips + inline agg dropdown, filters, group by, sort); tarix aralığı header-dəki pill-dən (presets). Save flow: modal (ad + share toggle), My Reports siyahısı (open/rename/duplicate/delete, state restore). İngilis dilində UI.

Products — Məhsullar

Back-office məhsullar siyahısı (Menyu → Məhsullar) — istehsalat client panel-dən 1:1 DOM snapshot. Axtar input, Yarat düyməsi, tip filtrləri, rs-table siyahı (111 məhsul), rs-pagination footer. CSS bundle + Clopos (GoogleSans) fontlar lokal, JS çıxarılıb.

Report — Məhsullar

Back-office hesabatlar səhifəsi (Statistikalar → Hesabatlar → Məhsullar) — 1:1 istehsalat client panel-i ilə. Sol tərəfdə tünd naviqasiya (#1f274f) 184px, filialı seçən picker, hər menyu üçün ikon; sağda başlıq + filtr paneli (venue, tarix aralığı, alt-hesabat tabları), böyük məhsul cədvəli və sayfalama.