47 lines
4.6 KiB
Markdown
47 lines
4.6 KiB
Markdown
# Архитектура фронтенда
|
||
|
||
## Модули
|
||
|
||
- `src/context/AuthContext.jsx` — OTP-аутентификация через Supabase Auth и загрузка профиля пользователя с ролью.
|
||
- `src/context/ThemeContext.jsx` — управление светлой и тёмной темой через `data-theme`.
|
||
- `src/hooks/usePwaStatus.js` — клиентское состояние PWA: online/offline, install prompt, standalone и offline readiness.
|
||
- `src/hooks/useOrders.js` — локальный state заказов, истории, чатов, фильтров и действий.
|
||
- `src/services/orderService.js` — чистые функции бизнес-логики заказов, покрытые тестами.
|
||
- `src/services/supabase/orderRepository.js` — адаптер реальных чтений/записей заказов и чатов в Supabase.
|
||
- `src/layouts/AppShell.jsx` — общий shell с боковой навигацией, уведомлениями и переключением темы.
|
||
- `src/components/orders/*` — фильтры, список заказов, карточка заказа, история статусов и поиск по чату.
|
||
- `src/components/orders/OrderEditorPanel.jsx` — создание и редактирование заказа менеджером или администратором.
|
||
- `src/components/dashboard/ProductionQueuePanel.jsx` — отдельный блок производственной очереди.
|
||
- `src/components/admin/UserDirectoryPanel.jsx` — панель пользователей, ролей и последних входов.
|
||
- `src/components/logistics/BotControlPanel.jsx` — сценарии отправки в чатбот и переноса слотов доставки.
|
||
- `src/components/admin/AuditPanel.jsx` — журнал ошибок, исключений и обзор последних системных событий.
|
||
|
||
## Ролевой доступ
|
||
|
||
- Менеджер видит только свои заказы и может менять статусы на этапах подтверждения.
|
||
- Начальник производства переводит заказ через очередь и производство к готовности.
|
||
- Логист работает только со своими заказами, слотами и сообщениями чатбота.
|
||
- Водитель видит только назначенные ему доставки и может переводить их через статусы `Загружен`, `В пути`, `Доставлен`.
|
||
- Администратор видит весь массив заказов и системные логи.
|
||
|
||
## Ключевые экраны
|
||
|
||
- `/login` — email + OTP flow. При отсутствии `VITE_SUPABASE_*` включается demo-режим.
|
||
- `/dashboard` — role-based control center: KPI, фильтры, список заказов, детализация, боты, аудит.
|
||
- `public/manifest.webmanifest` + `public/service-worker.js` — installable PWA-оболочка и базовое кеширование shell для demo offline.
|
||
- `src/services/orderService.test.js` — smoke-проверки фильтрации, статусов, метрик и автодистрибуции.
|
||
|
||
## Дизайн-концепт
|
||
|
||
- Минималистичная сетка с крупными панелями, прозрачными поверхностями и мягкими границами.
|
||
- Светлая тема использует холодно-зелёный акцент на светлом фоне.
|
||
- Тёмная тема построена на глубоких графитовых поверхностях с ярким мятным accent.
|
||
- Мобильная версия складывает layout в вертикальный поток; боковая панель становится верхним блоком.
|
||
|
||
## Интеграционный слой
|
||
|
||
- `src/supabaseClient.js` создаёт клиент Supabase через env-переменные.
|
||
- `src/services/safeSupabaseCall.js` стандартизирует обработку ошибок.
|
||
- Данные UI уже разложены по сущностям, совпадающим с таблицами Supabase: `orders`, `order_history`, `chat_messages`, `delivery_slots`.
|
||
- В `orders` синхронизированы поля `status`, `delivery_agreement_status`, `assigned_driver_id`, чтобы backend и demo-режим использовали одну процессную модель.
|