PobutProDesign System Showcase
Загальні компонентиБухгалтерія / ERPГрафіки та аналітикаМаркетплейсЛендінг

1. Документація кнопок та дій (<Button />, <ActionButtons />)

Скевоморфний мікро-об'єм, інтерактивна матриця станів, розмірна сітка ERP Density, паттерн табличних дій та підтримка кольорових 3D-іконок.

Каталог компонентів кнопок та системний Словник іконок ERPРежим 3D: Сучасні об'ємні кольорові іконки з глибоким контрастом (без розмитої тіні) на спокійних сірих тактильних кнопках.

Системний словник іконок ERP (Icon Registry · Dual-Mode Matrix)

Кожна піктограма системи зареєстрована у двох повноцінних варіантах: Вектор (Line) та Сучасні 3D-іконки (високий контраст, без тіней).

Single Source of Truth
📄 Документні операції
Записатиsave
Записати та закритиsave_close
Провести та закритиpost_close
Відкритиopen
Змінитиedit
Каталогfolder
📊 Табличні дії & Журнали
Створитиcreate
Скопіюватиcopy
Деталіdetails
Оновити / Перечитатиrefresh
Експорт в Excelexcel
Фільтриfilter
Пошукsearch
Ще / Діїmore
📑 Облік, Регістри & Звіти
Дт/Ктpostings
Друкprint
Календарcalendar
Калькуляторcalculator
🚦 Статуси, Підпис & Життєвий цикл
Провестиpost
Скасувати проведенняunpost
Видалитиdelete
Позначити на вилученняmark_delete
Підписати КЕПkey
В чернеткуdraft
Сторнуватиstorno
⚙️ Форми & Довідка
Налаштування формиsettings
Довідкаhelp

1. Глобальні дії форми та шапка документа (Document Header · MD)

Використовуються у верхній командній панелі документа (DocumentEditor) та модальних вікнах. Розмір size="md" (32–36px).

Розмір MD (h-32px)
100% Єдиний сірий колір:Всі кнопки з кольоровими іконками мають абсолютно ідентичний фізичний сріблястий градієнт (Slate Outline) без розбіжностей у відтінках.
Вторинні дії:«Друк», «Дт/Кт» та «Записати» виконані в тій самій спільній сірій палітрі без колірного шуму.
Контраст 3D-іконок:Сучасні кольорові 3D-іконки з глибоким контрастом виділяються на сріблястій підложці без потреби у різнокольорових кнопках.

2. Тулбари та екшен-бари над таблицями (Toolbar Actions · SM)

Стандартний масштаб для командних панелей журналів, списків та специфікацій. Розмір size="sm" (28px).

Розмір SM (h-28px)

3. Швидкі дії в рядку таблиці даних (Row Actions · XS)

Ультракомпактні кнопки size="xs" (24–26px). Не розпирають висоту облікового рядка таблиці.

Розмір XS (h-26px)
А. Прямі дії з підписом (Text + Icon):
Б. Квадратні кнопки-іконки (Icon-Only XS 26×26px) для компактних реєстрів:
В. Паттерн реального облікового рядка: 3 швидкі дії + «Ще» (Dropdown):
НомерДатаКонтрагент / ОпераціяСума, грнСтатусДії в рядку
ВН-00048123.09.2026ТОВ «Метро Кеш енд Кері» (Закупівля)42 850.00Проведено
АКТ-0012923.09.2026ФОП Грищенко В.І. (Послуги клінінгу)8 400.00Чернетка

4. Семантичні статусні та деструктивні дії (Workflow & Lifecycle)

Якщо в кнопці є кольорова іконка — кнопка сіра. Кнопки без іконок використовують пастельні семантичні заливки.

Семантичні акценти
УспіхФіксація (Soft Emerald)

Кнопка з іконкою має сіру підложку, а текстова кнопка — м'ятний смарагд #ECFDF5.

УвагаСкасування (Soft Amber)

Текстова кнопка виділена пастельним бурштином #FFFBEB.

ДеструктивВилучення (Soft / Solid Rose)

Головна незворотна дія «Видалити назавжди» має насичену червону заливку.

5. Готові кнопки-шорткати (<ActionButtons /> — Zero Boilerplate)Single Source of Truth

Централізовані компоненти з @residence/glass-ui. Розробник передає тільки onClick — колірна схема, варіант, назва та іконка сконфігуровані в бібліотеці.

2. Поля вводу та форми (3-колонкова архітектура: Текст · Числа · Контролі)

Всі типи полів

Фізична метафора «прорізу / тиснення в паперовому бланку» (Paper Cutout): чиста біла підложка, м'яка верхня тінь від кромки, нижня світлова фаска та тиснені валютні префікси.

1. Текстові та пошукові поля:Text & Search
2. Числові та валютні інпути:Number & Money
₴
Автопрефікс ₴, тисячі з пробілами, 2 знаки копійок
₴
Колонковий степер (+ зверху, − знизу), крок 50.00 ₴
порцій
Бічний степер: − ліворуч, + праворуч, число по центру
%
Без кнопок степера: чистий процентний ввід
$
кг
3. Спеціальні селектори та шкали:Controls & Scales
₴
₴
Подвійний інпут відбору: від 1 000 ₴ до 25 000 ₴
Перемикачі логіки обліку (Switch):
Враховувати ПДВ у сумі
Автоматичне проведення в Дт/Кт
Прапорці (Checkbox):
Метод списання запасів (Radio):
Графік роботи складу (WeekDays):

3. Мікро-гласс бейджі та статуси обліку (<Badge />)

Двоколірний пастельний градієнт, верхній блік та темний насичений текст. Радіус суворо rounded-[4px].

Спеціалізовані облікові пресети:
ПроведеноЧернеткаСкасованоТОВ «Ресторан Київ»ПДВ 20%ПДВ 7%ПДВ 0%Активний контрактHoReCa Core
Повна палітра бейджів:
slate (01)blue (02)emerald (03)amber (04)rose (05)violet (06)indigo (07)cyan (08)teal (09)fuchsia (10)

4. Металеві зведені картки KPI (<KpiCard />)

Срібний вертикальний градієнт, 3D мікро-гласс чіп іконки та строгий жирний санс-сериф без моноширинності.

Оборот за зміну
142 850₴
+14.2% до вчора
Собівартість (Food Cost)
38 420₴ (26.9%)
Норма < 30%
Середній чек закладу
485₴
+35 ₴ за тиждень
Залишок у касі та банку
210 500₴
Без заборгованості

5. Єдина 4-колонкова облікова таблиця параметрів та Thead

Спільна лінія розділювача між рядками, темний читабельний ключ та біле значення без зміщення висоти.

Вид операціїПокупка, комісія (на склад)КонтрагентТОВ «М'ясний Двір Україна» (ЄДРПОУ 38492011)
Договір№ П-2026/01 від 12.01.2026 (Основний)Рахунок розрахунків631 (Розрахунки з постачальниками)
Статус документаПроведеноВідповідальнийШевченко О. В. (Шеф-кухар)
№НоменклатураОд.КількістьЦіна (₴)Сума (₴)Дії
1
Філе лосося охолоджене
ТОВ-00124
кг15,50540,00 ₴8 370,00 ₴
2
Сир Пармезан 24 міс. витримки
ТОВ-00892
кг8,00780,00 ₴6 240,00 ₴
3
Оливкова олія Extra Virgin 5л
ТОВ-00341
шт4,001 250,00 ₴5 000,00 ₴
Всього за списком:19 610,00 ₴

6. Селектори, комбобокси та меню (<Select />, <Combobox />, <DropdownMenu />)

Два стилі тригерів (variant="sunken" для форм та variant="raised" для командних панелей), автопошук та клавіатурна навігація.

1. Combobox із пошуком та іконками:
Пошуковий список планів рахунків із субконто
2. Select (Sunken для форм):Втиснутий тригер із шевроном у стилі форм
3. Select (Raised 3D срібло для тулбарів):3D срібний тригер для кнопок «Ще», «Друк», «Дії»

7. Індикація стану, повідомлення та завантаження (<InlineMessage />, <Banner />)

Системні сповіщення, банери попереджень та тактильні спінери без зсуву розмітки (Zero Layout Shift).

Облікові попередження (InlineMessage):
Сформовано всі бухгалтерські та податкові рухи без розбіжностей.
За позицією «Сир Пармезан» фактичний залишок на складі менше страхового запасу (1.2 кг < 5.0 кг).
Рахунок кредиту 631 вимагає обов'язкового заповнення договору контрагента.
Індикатори прогресу та завантаження:
Виконання денного плану:
Обробка складських залишків:65%
Синхронізація з касовим терміналом POS...

8. Мікро-аналітика та тренди (<Sparkline />, <DonutChart />)

Вбудовані візуальні індикатори динаміки для рядків таблиць, звітів та фінансових карток.

Тренди продажів (Sparkline):
Виручка тижня:+18.4%
Food-cost динаміка:34.2%
Структура собівартості (DonutChart):
100Собівартість
  • М'ясо та птиця (45%)45
  • Сири та молоко (25%)25
  • Овочі та зелень (18%)18
  • Бакалія та спеції (12%)12

9. Шкали часу, графіки змін та аудит (<TimeBar />, <TimeDial />, <Timeline />)

Спеціалізовані компоненти обліку робочого часу персоналу, часових вікон дії знижок та хронологічного аудиту документів.

Добова шкала робочої зміни ресторану (TimeBar):
Зміна 1: 08:00 — 16:00Зміна 2: 16:00 — 23:00
Годинний циферблат графіків (TimeDial):
Часове вікно акції:
Щодня з 09:00 до 18:00
Знижка на бізнес-ланч -20%
Хронологічний аудит та історія рухів (Timeline):
  1. Документ проведено в обліку23.09.2026, 14:32 · Шевченко Т.Г.
    Сформовано проведення Дт 281 — Кт 631 на суму 19 610,00 ₴.
  2. Звірка ПДВ та податкового кредиту23.09.2026, 12:15 · Робот ЄРПН
    Зареєстровано вхідну податкову накладну № 10842 на суму ПДВ 3 268,33 ₴.
  3. Створення чорновика23.09.2026, 09:10 · Ковальчук В.М.
    Первинний імпорт накладної з EDI-сервісу «Вчасно».

10. Папки-вкладки, навігація та порожні стани (<FolderTabs />, <Stepper />, <EmptyState />)

Каталожні вкладки-ярлики картотеки з лічильниками, покрокові візарди та тактильні повідомлення про відсутність даних.

Ієрархічний шлях обліку (Breadcrumb):
Покроковий стан оформлення (Stepper):
Еталонні каталожні вкладки (FolderTabs):
Активна вкладка: lines. Вкладки підтримують лічильники у стилі мікро-гласс бейджів та синю тактильну лінію фокусу.
Стан відсутності даних (EmptyState):
Не знайдено проведених операцій

За вибраними критеріями пошуку та періоду документи відсутні. Спробуйте змінити фільтри або створити новий документ.

11. Дерево вкладених записів (<TreeView />)

Носії складу (палета → ящик → товар), комірки, групи довідника. Клавіатура: стрілки вгору/вниз — по рядках, вправо/вліво — розкрити/згорнути, Enter — обрати.

Розкрито все, обраний вузол (size md):
  • HU-PAL-0001Палета · комірка A-01-02Закрита
    • HU-BOX-0011Ящик · 12 шт
      • Філе лосося охолоджене15,5 кг
      • Сир Пармезан 24 міс.8 кг
    • HU-BOX-0012Ящик · порожнійПорожній
  • HU-PAL-0002Палета · комірка A-01-03Відкрита
Згорнуте, компактний (size sm) і порожнє дерево:
  • HU-PAL-0002Палета · комірка A-01-03Відкрита
Носій нічого не містить