Living style guide
Softpoint Design System
UI-ის ყველა element ერთ ადგილზე. Theme და Mode ცვლილება ზევით - ნახე როგორც გამოიყურება ყველაფერი ახალ შრიფტში.
Design philosophy
რას ვცდილობთ მივაღწიოთ Softpoint-ის UI-ის დიზაინისას. ეს არის "რატომ"-ის ფუძე ყველა სხვა გადაწყვეტილების ქვეშ.
One thing per page
არც ერთი ეკრანი არ არის "everything dashboard". თითოეული გვერდი ფოკუსირებულია ერთ შემადგენელ გადაწყვეტილებაზე: ვაგონის ძებნა, მინდობილობის გაცემა, ბალანსის შევსება. ყოველდღიურ რუტინაში ჩართული მომხმარებლისთვის ფოკუსირება ერთ საკითხზე ქმნის სიმარტივეს და უკეთეს UX-ს.
Wizards over multi-purpose forms
რთული ფლოუ: რეგისტრაცია, მინდობილობა, მომხმარებლების მოწვევა - დაყოფილია ნაბიჯებად ცალცალკე სექციებად. თითო ნაბიჯი წარმოადგენს ერთი პატარა გადაწყვეტილების მიღებისთვის საჭირო არეალს. Step indicator-ი აჩვენებს მდებარეობას პროცესში. უკან დაბრუნება ყოველთვის შესაძლებელია.
Inline help, not tooltips
ფორმა თვითონ ხსნის რას და რატომ ვითხოვთ — .field-help ტექსტი ველის ქვემოთ ან ფორმაზე. Tooltip-ები მალავენ ინფორმაციას, ცუდად მუშაობენ touch-ზე და accessibility გამოწვევაა - ამიტომაც, განმარტებები ეგრევე ჩანს (სამომავლოდ, მომხმარებლების ცოდნის ზრდასთან ერთად შეგვიძლია მოვიფიქროთ უფრო კომპაქტური ვარიანტებიც). ახლა კი ეს UI აგებულია პრინციპით "ცხადი = ლამაზი".
Business voice — სანდო და საქმიანი
B2B პროდუქტი - აქ მომხმარებელი თავის მოვალეობას ასრულებს სამსახურში. თქვენობით ვესაუბრებით. ვუხსნით რატომ ვითხოვთ რაიმეს - "ჩვენ ეს მონაცემი გვჭირდება, რომ X-ს გავაკეთოთ". ეს არც ფამილიარულია ("ჰაი! 👋 რაშუებიიი?"), და არც დისტანცირებულია ("Dear customer"). სანდოა და საქმიანი.
Built on the logo
მთელი ფერთა სისტემა ლოგოს პალიტრაზეა აწყობილი — ink navy (#0a0e2a) ტექსტისთვის და signal blue (#002bff), ლოგოს წერტილი, ერთადერთ accent-ად. მშვიდი, სანდო ვიზუალი: სიღრმე hairline border-ებიდან მოდის და არა მძიმე ჩრდილებიდან. ეს უნდა იყოს "სანდო და დაცული ადგილი, არა საავადმყოფო". ოთხი ალტერნატიული პალიტრაც გვაქვს შესარჩევად, და ვზრუნავთ მომხმარებლებზე, რომლებიც ღამით მუშაობენ — გვაქვს Dark Mode.
Plain HTML + CSS + minimal vanilla JS
Zero build step. გვერდი ერთ ფაილს უკავშირდება — styles.css (@import manifest: tokens + components). CDN dependency მხოლოდ შრიფტებია: FiraGO + JetBrains Mono (Fontsource), Noto Sans Georgian (Google Fonts). JS გამოიყენება მხოლოდ იქ, სადაც CSS ვერ აღწევს: tabs (settings), mobile menu sync (details ფიქსი), theme switcher (design system), loading state. ფრონტ-ის სტეკი ჯერ არ არჩეულა: ეს მოგვიანებით ცალკე ADR-ის გადაწყვეტილებაა - თუმცა ვფიქრობთ, რომ Server Side Rendering-ით წავიდეთ და ჩვენი vanilla JS, css, components გამოვიყენოთ.
Progressive disclosure
Default-ად ვუჩვენებთ მთავარს. დანარჩენი - collapsed details (<details>), danger zones, advanced options ცალკე გვერდებზე. როგორც დასაწყისში აღვნიშნეთ, ეკრანი არ ცდილობს ყველა საქმე ერთ ხედში მოაქციოს.
Accessible by default
Native HTML elements: <button>, <label for="">, <dialog>, <details>. Aria attributes იქ, სადაც სემანტიკა არ ფარავს. Keyboard navigation მუშაობს default-ად. Color contrast WCAG AA-ის ზევით ყველა text/bg წყვილში.
Brand
მთელი სისტემა ლოგოს პალიტრაზეა აწყობილი — ink navy (#0a0e2a) და signal blue (#002bff, წერტილი). ერთადერთი SVG სისტემაში ლოგოა (assets/logo.svg); პროდუქტის chrome-ში ბრენდის ნიშანი იგივე ლურჯი წერტილია.
On light · primary
On dark · knockout
signal blue წერტილი — „soft point" — ink navy wordmark-თან, პირდაპირ ლოგოდან.
გრადიენტები, ფოტო-hero და ტექსტურები არ გვაქვს — სექციების რიტმი off-white/თეთრის მონაცვლეობით და navy band-ებით კეთდება.
Themes
ოთხი ალტერნატიული პალიტრა. თითოეული მუშაობს Light + Dark mode-ში. Signal — ლოგოს ფერებზე აწყობილი — დღესდღეობით production-ზეა. დააჭირე ნებისმიერს — გადართავს და preview-ს გვიჩვენებს ცოცხლად.
Color tokens
ყველა ფერი გადის CSS custom property-ით. ცვლი theme-ს — ეს grid განახლდება ცოცხლად.
Warning განზრახ literal-ია (token არ აქვს) — ერთადერთი ქარვისფერი ტონი, რომელიც ყველა თემაში უცვლელი რჩება. იხ. .alert-warning / .pill-warning.
Typography
FiraGO ლათინიკისთვის (Fontsource CDN) + Noto Sans Georgian ქართულისთვის და ₾-ისთვის. JetBrains Mono — ნომრები, კოდები, tabular data. Weights: 400/500/600/700.
სარკინიგზო მონაცემები
გვერდის სათაური
სექციის სათაური
ქვესექცია
Page lead — ხშირად ქვესათაურის ქვემოთ.
ძირითადი ტექსტი. ყოველდღიური წერა, აბზაცი, ფორმის labels.
დამხმარე ტექსტი — ფორმის ველის ქვემოთ.
Eyebrow — uppercase letterspaced
405123456 · 23456789 · TaxNo · sk_live_…7b2a
აქ გრძელდება ლინკი ტექსტის შიგნით.
Iconography
არც icon font, არც icon set, არც emoji. ხატულები მცირე, განზრახ შერჩეული Unicode გლიფებია UI შრიფტში. სტატუსს ატარებენ ფერადი pill-ები და status dot-ები — და არა ხატულის ფორმები. ერთადერთი SVG ლოგოა. თუ გლიფი გაკლია — დასვი საკითხად, ნუ მოხატავ ახალს.
Spacing scale
4px-ის ბაზაზე. ფართო breathing room — სუფთა და გასაგები.
Border radius
Gentle radii — არასოდეს pill-ებს გარდა.
Shadows
Subtle only. Dropdown panels, hover lifts, modal-ები.
Layout containers
ოთხი intent-driven სიგანე — გვერდის ტიპი ირჩევს container-ს, არა პირიქით. ყველა იკუმშება mobile-ზე.
| Container | max-width | როდის |
|---|---|---|
| .container-form | 520px | focused single-action ფლოუ — login, password-set, მოწვევა |
| .wizard-content | 640px | multi-field signup ნაბიჯები — stepper + .grid-2 ველები |
| .container | 960px | default — ტექსტი + მცირე (≤6 სვეტი) ცხრილები, app-ის „main" |
| .container-data | 1200px | ფართო ცხრილები (≥7 სვეტი), ფილტრებიანი დაფები — tracking, balance, admin billing |
Layout & flow primitives
სტრუქტურული კლასები, რომლებითაც გვერდი იწყობა — spacing მხოლოდ აქ ცხოვრობს, inline style ატრიბუტი მკაცრად აკრძალულია (ADR-0009). ვერტიკალური რიტმი — .flow, ჰორიზონტალური დაჯგუფება — .cluster, ორსვეტიანი ფორმა — .grid-2.
ყველა გვერდი ერთი ჩარჩოთი იწყება — <main class="container view">. .view აძლევს main-ს ვერტიკალურ padding-ს (ზევით --space-7, ქვევით --space-9); .view-tall — ოდნავ მეტს ზევით (--space-8), როცა კონტენტს მეტი ჰაერი სჭირდება topnav-ის ქვეშ.
flow ფლობს რიტმს: შვილების საკუთარი vertical margin-ები ნულდება და მანძილი მხოლოდ owl selector-ით (* + *) ედება — შუალედები არასდროს ორმაგდება. სიმკვრივის ვარიანტები: .flow-tight (--space-3) · .flow-md (--space-4) · .flow (--space-5) · .flow-loose (--space-6).
ღილაკების, pill-ების, meta ტექსტის რიგები — ვიწროზე თავად გადაეწყობა (flex-wrap). gap ვარიანტები: .cluster-tight (--space-2) · .cluster (--space-3) · .cluster-md (--space-4) · .cluster-lg (--space-5).
label ველის სვეტს ამაღლებს — default center-align ღილაკს შუაში კიდებდა. .cluster-end (align-items: flex-end) ღილაკს input-ის ხაზზე სვამს. გამოიყენე ერთად: class="cluster cluster-end".
.spacer (flex: 1) ჯგუფებს კიდეებზე შლის — form-actions, toolbar, modal-foot. .contents კი wrapper-ს layout-დან აქრობს: inline <form> .topnav-nav-ში ან .modal-foot-ში ისე ჯდება, თითქოს შვილები პირდაპირ flex row-ში იყვნენ.
Buttons
Primary (dark) · Secondary (outline) · Ghost (transparent). ზომები: .btn-sm / default / .btn-lg / .btn-block.
შემცირებული padding (--space-1 / --space-3) — topnav-ის logout, pager-ის კონტროლები, ცხრილის რიგის მოქმედება.
Form elements
input მონაცემის ზომას მიჰყვება და არა სვეტს — 8-ნიშნა ვაგონის ნომერს 960px არ სჭირდება. cap ედება .field wrapper-ს; mobile-ზე უვნებელია (max-width მხოლოდ ზრდას ზღუდავს). ზომები: .field-w-xs 200px (თარიღი, თანხა) · .field-w-sm 320px (ვაგონის №, TaxNo) · .field-w-md 480px (ელფოსტა, სახელი).
Form validation
HTML5 validity API + ჩვენი ცოცხალი UI: წითელი border + ⚠ inline error ველის ქვემოთ + summary alert ფორმის ზევით (jump-link-ებით ცუდ ველებამდე). Form-ის opt-in: data-validate novalidate. Field-ის წესები — required, pattern, minlength/maxlength, min/max, type=email. Custom message: data-error-message.
- ვაგონის ნომერი — ვაგონის ნომერი უნდა იყოს ზუსტად 8 ციფრი
- ელფოსტა — შეიყვანეთ ვალიდური ელფოსტა (მაგ. name@company.ge)
- თანხა — მინიმუმ 50
Pills / badges
Status, role, category indicators. ყველა pill 999px radius-ით, თხელი.
Status dots
Inline indicators სათაურებში ან kv list-ის ღირებულებებში.
OK / დადასტურებული
Warning / ყურადღებას მოითხოვს
Bad / პრობლემა
Neutral / არ იციმდება
Alerts / banners
ხუთი ხასიათი (info / success / warning / danger / quiet) — page-level შეტყობინებები. Dismissible variant — × ღილაკით (click → ალერტი იშლება scripts/ui.js-ის დახმარებით).
Cards
სათაური
Card-ის შიგთავსი — ფორმა, ცხრილი, აღწერა.
Quiet card — ფონური ან secondary კონტენტისთვის.
საშიში მოქმედება
გაუქმება, წაშლა, შეჩერება.
Metric tiles
Dashboard-ის სტატისტიკა. Auto-fit grid, minmax(220px, 1fr).
Hero balance
Key/Value list
2-სვეტიანი dl. Mobile-ზე ერთ სვეტად დაიშლება.
- კომპანია
- შპს ექსპედიტორი ჯორჯია
- საიდენტიფიკაციო კოდი
- 405123456
- დირექტორი
- ნინო კვარაცხელია
- SDA სტატუსი
- აქტიური
Tables
.table-wrap-ში — overflow-x: auto (mobile-ზე ჰორიზონტალურად scroll-დება).
| სახელი | ტიპი | სტატუსი | რიცხვი | მოქმედება |
|---|---|---|---|---|
| პირველი | ერთი | აქტიური | 1,247.50 | რედაქტ. |
| მეორე | ორი | ლოდინი | 512.00 | რედაქტ. |
| მესამე | სამი | გათიშული | 0.00 | აქტივაცია |
Data-page patterns
ფართო (.container-data) გვერდების გამეორებადი ბლოკები — tracking, balance, admin billing: სათაური CTA-ებით, ფილტრის რიგი, ველების grid, შემაჯამებელი ფილები და server-driven ცხრილი.
Tracking
ვაგონების ტრეკინგი
მოძებნეთ ვაგონი ნომრით ან ატვირთეთ ნუსხა Excel-იდან.
desktop-ზე page-header-ის მარჯვენა ნახევარი მკვდარი სივრცე აღარ არის; 720px-ზე ქვემოთ ბლოკად დგება (title → actions).
ველები ქვედა კიდეზე სწორდებიან (align-items: flex-end). .filter-actions slot margin-left: auto-თი მარჯვნივ ეკვრის — wrap პროგნოზირებადი ხდება; 720px-ზე ქვემოთ actions full-width ხაზზე ჩამოდის. .filter-toggle — checkbox accent pill-ად.
gap ცვლის .field-ის საკუთარ margin-ს. growth-cap: 360px — auto-fit + 1fr დამალული (.is-hidden) ველების track-ებს შლიდა და ერთადერთი ხილული ველი full-width (~910px) იჭიმებოდა; cap ველს მონაცემის ზომასთან ახლოს აჩერებს.
growth-cap: minmax(160px, 240px) — ორფანი ფილა მეორე რიგში full-width აღარ იჭიმება. 480px-ზე ქვემოთ ისევ fill-რეჟიმი (minmax(140px, 1fr)) — definite max ვიწროზე სვეტების თვლას ამცირებდა და ერთი ვიწრო სვეტი რჩებოდა.
.toolbar-ში input/select-ს 240px cap ედება; .spacer CTA-ს მარჯვნივ სვამს. mobile-ზე სვეტად დგება და კონტროლები full-width ხდება.
| ვაგონი | სადგური | თანხა |
|---|---|---|
| 23456789 | ბათუმი | 12.50 |
| 23456790 | ფოთი | 8.00 |
th[data-sort] მიმართულების ინდიკატორს CSS-ით იღებს (↕ default, ↑ .is-sorted-asc, ↓ .is-sorted-desc); sort/paging/search ui.js-ის delegated handler-ებით სერვერს ეკითხება. ფართო ცხრილი mobile-ზე — .scroll-x wrapper + .table-wide (min-width: 840px, --text-xs).
Subnav (page tabs)
.subnav-თან წყვილში მუშაობს .tab-pane (active → display:block, fade-in). მაგ.: settings.html.
Segment toggle
Pill-style toggle — 2-3 ექსკლუზიური ვარიანტი. მაგ.: tracking-ის Basic/Advanced.
Chips, tags & choices
არჩევანის კომპაქტური ფორმები — checkbox ჩიპების ბადე, რბილი tag-ები და radio ვარიანტების ორი განლაგება: ვერტიკალური ბარათები (აღწერით) vs ჰორიზონტალური მოკლე რიგები.
growth-cap: 220px — 1fr-ით ჩიპები ფართო container-ში ~400px ფილებად იშლებოდა. მიუწვდომელი ვარიანტი — .choice-chip.is-disabled (dashed). მჭიდრო ორ-სამსვეტიანი სია — .chip-grid-wide (minmax(200px, 1fr)).
pill-ისგან განსხვავებით სტატუსს არ ატარებს — ნეიტრალური მონაცემის ეტიკეტია. დიდი ვარიანტი .tag-lg + .tag-value — იხ. Data-page patterns.
choice-list + choice-card
row-wrap + choice-row
წესი: აღწერას რომ ითხოვს არჩევანი → ვერტიკალური .choice-card ბარათები; მოკლე, თვითახსნადი ვარიანტები → ჰორიზონტალური .choice-row. კიდევ უფრო კომპაქტური — .choice-row-sm.
2-3 ურთიერთგამომრიცხავი view — radio-ს ალტერნატივა, როცა არჩევანი ეკრანს ცვლის და არა მონაცემს. დეტალები — Segment სექციაში; mobile-ზე full-width ხდება და ვარიანტები თანაბრად იყოფა.
Wizard navigation
Rich wizard nav — section title (current step-ის სრული სათაური) + counter (ვისად ხარ) ზევით, bar-segments per step თითო label-ით ქვემოთ (თითო ბიჯზე ვკლიკავთ), მიმდინარე ბიჯის subtitle (call-to-action) + save state ქვევით. ადრინდელი dots-only indicator (.steps) კვლავ მუშაობს, მაგრამ ახალი გვერდები ამას იყენებენ.
ადმინისტრატორის ინფორმაცია
რეგისტრაცია 3 / 5კოდის დადასტურება
შესვლა 2 / 2Topnav + banners
PDF preview placeholder
Document review-ის left column. რეალურ პროდუქტში — PDF.js ჩაჯდება.
198 KB · 2 გვერდი
Review grid layout
Two-column: preview ⟷ metadata. 900px-ზე ქვემოთ stack-დება.
მთავარი — preview
PDF, ცხრილი, რუკა — დიდი მთავარი ნაწილი.
Side panel
Metadata, actions, ჩამონათვალი.
Empty / pending result
შეიყვანეთ ვაგონის ნომერი ან კომპანიის კოდი.
Pagination
Spinners + button loading state
Inline spinner currentColor-ით სდევს ღილაკის / ალერტის ფერს. ღილაკზე დაჭერით — disabled state spinner ცენტრში, label იმალება. დააჭირე ქვემოთ ცოცხალი მაგალითი.
მოთხოვნა გადაიგზავნა — დადასტურების მოლოდინი
დააჭირე — ღილაკი 2 წამით გადაჭდება is-loading state-ში: pointer-events ბლოკდება, ლეიბლი იმალება, ცენტრში ბრუნავს spinner.
Skeleton loaders
ცარიელი placeholder pulse-ით — როცა მონაცემი ჯერ არ დატვირთულა. სიჩქარის ილუზია spinner-ზე უკეთესია, რადგან layout ფიქსირდება და content-ის ზომა მოდის ცხადი მაშინვე.
Progress bars
Determinate — ცნობილი პროცენტი (ფაილის ატვირთვა, batch-ის წინსვლა). Indeterminate — ცნობილი არა, მაგრამ რაღაც ხდება (server query).
ფაილის ატვირთვა — 6.5 MB / 10 MB · 65%
SDA შემოწმება მიმდინარეობს — სიგრძე უცნობია
✓ ატვირთვა დასრულდა — დაიგზავნა admin რეცენზიაზე
Modal dialogs
HTML5 native <dialog> — keyboard navigation, focus trap, ESC-ის ჩახურვა default-ად. Backdrop blur-ით. სამი ხასიათი: confirm (default), danger, warning. დააჭირე ღილაკებს — ცოცხალი demo.
ხელშეკრულების ცვლილება
Disclosure & notes
Progressive disclosure — მეორეხარისხოვანი კონტენტი native <details>-შია დაკეცილი, modal-ის გარეშე. გვერდით — ჩუმი note-ების ოჯახი და შედეგის ეკრანის ბეჯი.
დამატებითი პარამეტრები
მეორეხარისხოვანი ველები default-ად დაკეცილია — მთავარი ფლოუ სუფთა რჩება. [open]-ზე summary-ს --space-4 ედება ქვემოთ.
მინდობილობის დეტალები +
საშიში მოქმედებები
ანგარიშის დახურვა, მინდობილობის გაუქმება — გახსნამდე დამალულია, შემთხვევით ვერ მოხვდები.
.note — inline მინიშნება, subtle ფერით.
.note-footnote — ცენტრირებული დამარწმუნებელი ხაზი ფორმის ქვემოთ.
რეგისტრაცია დასრულდა
ანგარიში შეიქმნა — პირველი შესვლის ბმული ელფოსტაზეა.
App shell — sidebar + appbar (ADR-0018)
ერთი shell ყველა ავტორიზებული გვერდისთვის: მარცხნივ .sidenav,
ზემოთ .appbar (crumbs + უტილიტები), კონტენტი
.container-data-ზე. მობაილზე sidenav off-canvas drawer-ია
checkbox-hack-ით (JS არ სჭირდება). ცოცხალი specimen სამივე არქეტიპით —
spec-shell.html; კონტრაქტი —
docs/10-system-design/45-app-shell.md.
ტრეკინგი
· 6 ობიექტი მონიტორინგზეOperator workspace — დისლოკაციის კომპონენტები
კომპონენტები, რომლებიც დისლოკაციის მონიტორინგის ეკრანებს (#162–#169, map 4.8) სჭირდება. ყველა
components.css-შია (prototype → wwwroot sync). გამოძახება — იხ. § 39 „ეკრანები“.
კლიენტი: შპს „კომპანია A"
სამუშაო არე — ცხრილი, ფილტრები, ჯგუფური მოქმედებები.
- ბოლო სადგური
- ალმათი-1
- ბოლო ოპერაცია
- Прибытие
- ოპერაციის თარიღი
- 28.05.2026 12:15
- ტვირთი
- ხორბალი
.is-hidden.| ვაგონი | სტატუსი | შენიშვნა |
|---|---|---|
| 23456789 | სწორი | — |
| 23456790 | დუბლიკატი | უკვე არის კლიენტთან |
წერილი
ველები: მიმღები, თემა, პერიოდი…
Preview
როგორ მიიღებს კლიენტი.
ეკრანები — პროტოტიპის ფორმების კატალოგი
პროტოტიპის ყველა გვერდი, საიდან იხსნება და რომელ issue-ს / product map-ის პუნქტს ეკუთვნის. ახალი ეკრანი ემატება აქაც და README-შიც („როგორ აღვწერთ პროდუქტს“ — checklist: „ეკრანი პროტოტიპშია, ბმულით მენიუდან“).
| ეკრანი | ფაილი | საიდან იხსნება | Issue · map |
|---|---|---|---|
| აწყობა — workspace (ყოფილი „მონიტორინგი“) | dislocation-monitoring.html | topnav „დისლოკაცია“ | #162 #163 #165 #167 · 4.8.1/4.8.3/4.8.5 |
| კლიენტის ბარათი (დამატება / რედაქტირება) | dislocation-client.html | მონიტორინგის კლიენტების პანელი „+ კლიენტის დამატება“ · „კლიენტის რედაქტირება“ | #180 · 4.8.8 |
| ვაგონის / კონტეინერის დამატება (ხელით / Excel) | dislocation-monitoring.html | modal-ები: „+ ვაგონის დამატება“, „+ კონტეინერის დამატება“ | #164 · 4.8.2 |
| მონიტორინგი (ყოფილი „სრული ცხრილი“: ისტორია, 25 ველი) | dislocation-history.html | subnav · დეტალური პანელის „სრული ცხრილი →“ | #166 · 4.8.4 |
| შეტყობინებები (ელფოსტით გაგზავნა კლიენტს) + დაგეგმილი გაგზავნები | dislocation-email.html | subnav · modal-ის „სრული ფორმა →“ | #168 · 4.8.6 |
| შეცდომები და აუდიტი | dislocation-errors-audit.html | subnav | #169 · 4.8.7 |
| საიდან | მოქმედება | სად იხსნება | რა გადაეცემა | შედეგი / დაბრუნება |
|---|---|---|---|---|
| ნებისმიერი tenant გვერდი | topnav „დისლოკაცია“ | მონიტორინგი | — | — |
| მონიტორინგი | „+ კლიენტის დამატება“ / „კლიენტის რედაქტირება“ | კლიენტის ბარათი | — / არჩეული კლიენტი | „შენახვა“ → მონიტორინგი; კლიენტი ჩანს პანელში — მის შემქმნელს / მომსახურეს და კომპანიის ადმინს (BR-DM-33, 37) |
| მონიტორინგი | კლიენტის არჩევა (მარცხენა სია) | იგივე გვერდი — ვაგონების ცხრილი | კლიენტი | ცხრილში მხოლოდ ამ კლიენტის ვაგონებია (BR-DM-01/02) |
| მონიტორინგი | „+ ვაგონის დამატება“ | modal → „სრული ფორმა →“ ვაგონების დამატება (ხელით) | არჩეული კლიენტი | „დამატება“ / „გაუქმება“ → მონიტორინგი; ახალი ვაგონები ცხრილშია, აუდიტში ჩანაწერი |
| მონიტორინგი | „Excel-დან დამატება“ | modal → „სრული ფორმა →“ ვაგონების დამატება (Excel ტაბი) | არჩეული კლიენტი | preview → „N სწორის დამატება“ → მონიტორინგი |
| მონიტორინგი | „მონიტორინგის პერიოდი“ | modal | მონიშნული ვაგონები | შენახვა → იგივე ცხრილი, პერიოდი განახლებულია (BR-DM-08) |
| მონიტორინგი | „ჩართვა“ / „გამორთვა“ | იგივე გვერდი | მონიშნული ვაგონები | სტატუსი იცვლება; გამორთული ვაგონი აღარ იღებს ინფორმაციას და აღარ შედის დაგეგმილ გაგზავნაში (BR-DM-10, BR-DM-28) |
| მონიტორინგი | „↻ განახლება“ | იგივე გვერდი | კლიენტი / მონიშნული ვაგონები | შედეგი „განახლდა · არ შეცვლილა · შეცდომა“; შეცდომები ჩანს „შეცდომები და აუდიტი“-ში |
| მონიტორინგი | „⬇ Excel ექსპორტი“ | ფაილის ჩამოტვირთვა | გაფილტრული ან მონიშნული ვაგონები | — |
| მონიტორინგი | „✉ ელფოსტით გაგზავნა“ | modal → „სრული ფორმა →“ ელფოსტით გაგზავნა | კლიენტი + მონიშნული ვაგონები | „გაგზავნა“ → გაგზავნის ისტორია; „დაგეგმვა“ → სია „დაგეგმილი გაგზავნები“; ორივე აუდიტში |
| მონიტორინგი | ვაგონზე „ნახვა“ | დეტალური პანელი (ბოლო მდგომარეობა / ისტორია) → „მონიტორინგში ნახვა →“ | ვაგონი | სრული ცხრილი → „← დისლოკაციის მონიტორინგი“ |
| შეტყობინებები | მიმღები / „ბარათის რედაქტირება“ | იგივე გვერდი / კლიენტის ბარათი | კლიენტის ელფოსტები | მიმღები ბარათის ელფოსტებიდან ირჩევა (BR-DM-34); წერილის ენას ოპერატორი ირჩევს (BR-DM-35) |
| შეტყობინებები | დაგეგმილ გაგზავნაზე „შეჩერება / განახლება · შეცვლა · გაუქმება“ | იგივე გვერდი (შეცვლა → ფორმა ზემოთ) | დაგეგმვის პარამეტრები | სტატუსი იცვლება; ცვლილება მომდევნო გაგზავნიდან მოქმედებს; აუდიტი (BR-DM-27) |
| შეცდომები და აუდიტი | შეცდომაზე „ხელახლა ცდა“ | იგივე გვერდი | ვაგონი | წარმატებისას ინფორმაცია მონიტორინგში და სრულ ცხრილში ჩანს |
| ხუთივე ეკრანი | .subnav / „← დისლოკაციის მონიტორინგი“ | ნებისმიერი დისლოკაციის ეკრანი | არჩეული კლიენტი (პროტოტიპში ფიქსირებულია „კომპანია A“) | — |
მონაცემების ნაკადი: დარეგისტრირებული კლიენტი → დამატებული ვაგონი → მონიტორინგის ცხრილი → (ჩართული + მოქმედი პერიოდი) ინფორმაციის მიღება → დეტალი და სრული ცხრილი → ელფოსტა კლიენტს. მიღების შეცდომები და ყველა ცვლილება → „შეცდომები და აუდიტი“. პროტოტიპი სტატიკურია: მონაცემები გვერდებს შორის რეალურად არ გადაეცემა, ცხრილი აჩვენებს, რა უნდა გადაეცეს რეალურ აპში.
| ეკრანი | ფაილი | საიდან იხსნება |
|---|---|---|
| მთავარი | dashboard.html · -empty · -impersonating | topnav „მთავარი“ |
| მინდობილობები | delegations.html · -new · -new-v2 | topnav „მინდობილობები“ |
| დოკუმენტები | documents.html · -upload | მინდობილობები / პარამეტრები |
| ბალანსი | balance.html · -pay · -turnover | topnav „ბალანსი“ |
| მომხმარებლები · აუდიტი · პარამეტრები | users.html · users-invite · audit · settings | topnav · ⚙ |
| ჯგუფი | ფაილები |
|---|---|
| Public / Auth | index · signup · -2 · -3 · -4 · -5 · -sda-error · -duplicate · password-set · login · pending |
| Softpoint Admin | tenants · tenant-detail · documents · document-review · tariffs · tariff-new · tariff-edit |
| Specs | spec-shell (sidebar app shell, ADR-0018) |
სამუშაო გვერდის კომპონენტები და ვიზუალის წესები
კომპონენტები, რომლებიც 2026-10-03-ის გადაწყობამ შემოიტანა (PR #182, #183, #190 და შემდეგი). ყველა
components.css-შია (prototype → wwwroot sync). ეკრანები — § 39.
| წესი | ასე | არა ასე |
|---|---|---|
| ვაგონის მდებარეობა | .route — მარშრუტის ხაზი (ცხრილში), .route-stops (დეტალში) | მხოლოდ ტექსტი „ბოლო სადგური“ |
| ხატულა | <span data-ic="mail"> — ერთი SVG ნაკრები, currentColor | ემოჯი (✉ ⬇ 🕒) — ყველა სისტემაზე სხვანაირად ჩანს |
| ღილაკის დონე | .btn-primary (ერთი ზონაში) · .btn-secondary · .btn-ghost | შიშველი .btn — ჩარჩოს გარეშე ტექსტს ჰგავს |
| ღილაკის ფორმა | მომრგვალებული (pill) — --radius-btn; ხშირი მოქმედება წარწერის გარეშე: .btn-round + aria-label + data-tip | კუთხოვანი ღილაკი; ხატულა-ღილაკი განმარტების გარეშე |
| ცხრილი | ზებრა-სტრიქონები (ლუწი ოდნავ მუქი) + სვეტებს შორის წვრილი ხაზი; ბევრსვეტიანზე .table-snug | ერთფეროვანი თეთრი ცხრილი სვეტების გამყოფის გარეშე |
| გადამრთველი | .segment — მომრგვალებული ზოლი; არჩეული თეთრია, ლურჯი ტექსტით | არჩეული მთლიანად ლურჯი — მთავარ ღილაკს ეჯიბრება |
| სამუშაო ცხრილი | .table-grid — ფილტრი და პირობა (≈ = ≥ ≤ …–…) ცხრილის თავში, სვეტის ქვეშ; სვეტის გადატანა / დამაგრება; მომხმარებლის სვეტი (.is-custom) პირდაპირ უჯრაში ივსება. ნიმუში: dislocation-history.html | ფილტრის ველები ცალკე ზოლად ცხრილის ზემოთ |
| მოქმედების დადასტურება | data-toast="…" / spToast() | ფორმა ჩუმად იხურება |
| ცარიელი სია | .empty-state — რა მოხდა + ერთი ღილაკი | ცარიელი ცხრილი ან მხოლოდ ერთი ხაზი ტექსტი |
| გვერდის აღწერა | .info-tip სათაურთან (hover / focus) | .page-lead app-გვერდზე |
| სტატუსის ფილტრი | .stat ჩიპები მთვლელით | ცალკე select + ცალკე მთვლელი |
| ტექნიკური კოდები | მომხმარებლის ენით ტექსტი | „BR-DM-34“, „§13“ მომხმარებლის ტექსტში |
პროგრესი მხოლოდ კლასით ეთითება (inline style აკრძალულია). ხუთი საფეხური საკმარისია — ხაზი მიახლოებითია, ზუსტი მდებარეობა ქვედა ხაზზე წერია.
- ყორღა-კორგაПогрузка · 24.05 11:10
- ბაქო-სატვირთოПрибытие · 25.05 17:20
- თაშქენტი-ცენტრიОтправление · 27.05 09:40
- ალმათი-1დანიშნულება
| ვაგონი | კონტეინერი | მარშრუტი | მონიტორინგი |
|---|---|---|---|
| 12345678 | TGHU4800481 | თაშქენტი-ც.ალმათი-1 | აქტიური |
| 67890123 | MRKU9034126 | თაშქენტი-ც.ბიშკეკ-2 | გამორთული |
ამ ფილტრით ვაგონი ვერ მოიძებნა
შეცვალეთ საძიებო სიტყვა ან სტატუსი, ან გაასუფთავეთ ფილტრები.ვის
როდის
.form-bar მიმაგრებულია ფორმის ძირზე (sticky) — შეჯამება და მთავარი ღილაკი სქროლისას ხილული რჩება.
| № | თარიღი | ოპერაცია | გზის კოდი (.col-x — მხოლოდ „სრულ“ ხედში) |
|---|---|---|---|
| 1 | 28.05.2026 12:15 | Прибытие | 700 |