DevTools IDE — Архітектура та прогрес реалізації¶

Останнє оновлення: 2026-03-30

Мета¶

DevTools — вбудований IDE для швидкої розробки бізнес-модулів ESWF без необхідності вручну редагувати конфігураційні файли та писати шаблонний бойлерплейт-код.

Вкладки (4 режими)¶

1. Config Editor¶

Редактор конфігураційних файлів (essentials.ts, fleet.ts, crm.ts тощо).

Функції: - Перемикання між секціями (Essentials, Fleet, CRM, Logistic, ContainerHub) - Дерево вузлів: Section → Group → Subgroup → Item → Subtable - Пошук по дереву (фільтрація по коду/назві) - Редагування атрибутів: рядки, булеві, масиви, enum (Select) - Додавання вузлів: Add Group / Add Subgroup / Add Item / Add Subtable - Видалення вузлів (кнопка Delete з підтвердженням) - Переміщення вузлів (стрілки вверх/вниз в межах батьківського контейнера) - Live preview TypeScript-коду (правий підпанель, toggle) - Збереження: File System Access API або download fallback - Скасування змін (reset до оригіналу)

2. Constructor¶

Wizard для створення нових секцій з нуля.

Кроки: 1. Шаблон — Blank / Simple Catalog / Full DOP Module / CRM Module 2. Метадані секції — code, name, name_ua, icon, description 3. Items — додавання елементів (code, name, type, subtable toggle) 4. Preview — TypeScript код + кнопка "Відкрити в Config Editor"

3. Prompt Generator¶

Автоматична генерація вичерпних промтів для Claude на основі змін у конфігурації.

Алгоритм: 1. Порівняння localSections vs оригінальних sections 2. Виявлення: нові items, нові subtables, змінені items 3. Генерація для кожної зміни: - MASTERDATA: Django Model + Serializer + ViewSet + URL + Admin + EntityRegistry - TRANSACTIONDATA: TransactionModel + Lines + WriteSerializer + post_document action - Subtable: inline serializer + nested fields 4. Ручний вибір items (без змін) для генерації 5. Copy to clipboard одним кліком

4. Print Form Editor¶

Інструмент для роботи з шаблонами друкованих форм (Fortune Sheet JSON).

Функції: - Список всіх items з printTemplates по всіх секціях - Variable reference: {{field_name}} токени з backend schema - Редактор шляху/URL шаблону - Додавання PrintTemplate до item конфігу

Файлова структура¶

src/pages/
├── DevToolsPage.tsx              ← thin re-export
└── devtools/
    ├── types.ts                  ← NodeKind, TreeNode, Change, WizardState
    ├── utils.ts                  ← buildTree, generateTsSource, analyzeChanges,
    │                                generatePromptText, wizardToSection
    ├── TreePanel.tsx             ← дерево з пошуком
    ├── AttributePanels.tsx       ← панелі атрибутів
    ├── ConfigEditorTab.tsx       ← Tab 1
    ├── ConstructorTab.tsx        ← Tab 2
    ├── PromptGeneratorTab.tsx    ← Tab 3
    ├── PrintEditorTab.tsx        ← Tab 4
    └── DevToolsIDE.tsx           ← головний компонент

Архітектура стану¶

Весь стан зберігається у DevToolsIDE (root):

activeTab: DevTab
localSections: Section[] — mutable copy (shared across tabs)
dirty: Set<string> — modified section codes
originalSections: Section[] — frozen original (for diff)
selectedSectionCode: string — active section in Config Editor
expanded: Set<string> — tree expanded nodes
selectedId: string | null — selected tree node

Типи змін (Change) у Prompt Generator¶

type	Опис
new_item	Новий item у будь-якій subgroup
new_subtable	Нова subtable в існуючому item
modified_item	Змінені поля існуючого item
new_group	Нова group у секції

Шаблони Constructor¶

Template	Структура
blank	1 group → 1 subgroup → 1 MASTERDATA item
catalog	1 group → 1 subgroup → 3 MASTERDATA items
erp	Master Data (3 items) + Documents (1 TRANSACTIONDATA) + Registers (1 JOURNAL)
crm	Contacts group (Lead, Contact) + Deals group (Deal, Activity)

Статус реалізації¶

Компонент	Статус
docs/dop/features/devtools.md	done
types.ts	done
utils.ts	done
TreePanel.tsx	done
AttributePanels.tsx	done
ConfigEditorTab.tsx	done
ConstructorTab.tsx	done
PromptGeneratorTab.tsx	done
PrintEditorTab.tsx	done
DevToolsIDE.tsx	done
DevToolsPage.tsx (re-export)	done

Майбутні функції (Фаза 2)¶

Schema Validator — перевірка config проти types.ts (пусті code, дублікати)
Navigation Preview — мініатюра Sidebar з поточним конфігом
Backend Sync Checker — перевірка item.code в EntityRegistry через OPTIONS API
Role Matrix Editor — таблиця items x roles з checkboxes
Export ZIP — всі змінені .ts файли одним архівом
Diff View — side-by-side порівняння оригінал / змінено
Print Template Builder — Fortune Sheet JSON конструктор