# Архитектура фронтенда

## Модули

- `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-режим использовали одну процессную модель.