RMSer App

{/* Логотип */}

RMSer

{/* Выбор сервера */}

Период: —

{isLoading ? (

) : !invoices || invoices.length === 0 ? ( ) : ( <>

{Object.entries(groupedInvoices).map(([dateKey, items]) => (

{items.map((item) => { const isSynced = item.type === "SYNCED"; const displayDate = item.type === "DRAFT" ? item.created_at : item.date_incoming; return ( handleInvoiceClick(item)} >

{getStatusTag(item)}

{item.document_number || "Без номера"} {item.type === "SYNCED" && ( )} {item.is_app_created && ( 📱 )} {item.items_count} поз. {dayjs(displayDate).format("DD.MM.YYYY")} {item.incoming_number && ( Вх. № {item.incoming_number} )}

{item.store_name && ( {item.store_name} )} {item.total_sum.toLocaleString("ru-RU", { style: "currency", currency: "RUB", maximumFractionDigits: 0, })} {item.items_preview && (

{item.items_preview .split(", ") .slice(0, 3) .map((previewItem, idx) => (

{previewItem}

))}

)} ); })}

))}

{totalPages > 1 && ( На странице: ({ label: s.name, value: s.id, }))} /> } loading={groupsQuery.isLoading} />

Проводить накладные автоматически
Если выключено, накладные в iiko будут создаваться как "Непроведенные"

{currentUserRole === "OWNER" && ( Опасная зона deleteAllDraftsMutation.mutate()} okText="Удалить" cancelText="Отмена" okButtonProps={{ danger: true }} > )} ), }, ]; if (showTeamSettings) { tabsItems.push({ key: "team", label: "Команда", icon: , children: ( ), }); } if (currentUserRole === "OWNER") { tabsItems.push({ key: "photos", label: "Архив фото", icon: , children: , }); } return (

<SettingOutlined /> Настройки

Статистика накладных

); }; ``` # =================================================================== # Файл: src/shared/api/index.ts # =================================================================== ``` import axios from 'axios'; import { notification } from 'antd'; import { useAuthStore } from '../stores/authStore'; // Тип пользователя для сессионной авторизации export interface User { id: string; username: string; email?: string; role?: string; } import type { CatalogItem, CreateInvoiceRequest, MatchRequest, HealthResponse, InvoiceResponse, ProductMatch, Recommendation, UnmatchedItem, UserSettings, InvoiceStats, ProductGroup, Store, Supplier, DraftInvoice, DraftItem, UpdateDraftItemRequest, UpdateDraftRequest, CommitDraftRequest, ReorderDraftItemsRequest, ProductSearchResult, AddContainerRequest, AddContainerResponse, DictionariesResponse, UnifiedInvoice, ServerUser, UserRole, InvoiceDetails, GetPhotosResponse, ServerShort } from '../types'; // Интерфейс для ответа метода инициализации десктопной авторизации export interface InitDesktopAuthResponse { session_id: string; qr_url: string; } // Базовый URL export const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:8080/api'; // Хелпер для получения полного URL картинки (убирает /api если путь статики идет от корня, или добавляет как есть) // В данном ТЗ сказано просто склеивать. export const getStaticUrl = (path: string | null | undefined): string => { if (!path) return ''; if (path.startsWith('http')) return path; return `${API_BASE_URL}${path}`; }; // Телеграм объект const tg = window.Telegram?.WebApp; // Событие для глобальной обработки 401 export const UNAUTHORIZED_EVENT = 'rms_unauthorized'; // Событие для режима технического обслуживания (503) export const MAINTENANCE_EVENT = 'rms_maintenance'; export const apiClient = axios.create({ baseURL: API_BASE_URL, headers: { 'Content-Type': 'application/json', }, withCredentials: true, }); // --- Request Interceptor (Авторизация через initData или JWT) --- apiClient.interceptors.request.use((config) => { // Шаг 1: Whitelist - пропускаем запросы к инициализации десктопной авторизации if (config.url?.endsWith('/auth/init-desktop')) { return config; } // Шаг 2: Mobile Auth (Telegram Mini App) - проверяем Telegram initData ПЕРВЫМ (высший приоритет) const initData = tg?.initData; if (initData) { config.headers['Authorization'] = `Bearer ${initData}`; return config; } // Шаг 3: Desktop Auth - проверяем JWT токен из authStore const jwtToken = useAuthStore.getState().token; if (jwtToken) { config.headers['Authorization'] = `Bearer ${jwtToken}`; return config; } // Шаг 4: Block - если нет ни initData, ни JWT, отклоняем запрос console.error('Запрос заблокирован: отсутствуют данные авторизации.'); return Promise.reject(new Error('MISSING_AUTH')); }); // --- Response Interceptor (Обработка ошибок и уведомления) --- apiClient.interceptors.response.use( (response) => response, (error) => { if (error.response && error.response.status === 401) { // Глобальное уведомление об ошибке авторизации notification.error({ message: 'Ошибка авторизации', description: 'Ваша сессия в Telegram истекла или данные неверны. Попробуйте перезапустить бота.', placement: 'top', }); window.dispatchEvent(new Event(UNAUTHORIZED_EVENT)); } if (error.response && error.response.status === 503) { // Режим технического обслуживания window.dispatchEvent(new Event(MAINTENANCE_EVENT)); } // Если запрос был отменен нами (нет авторизации), не выводим стандартную ошибку API if (error.message === 'MISSING_AUTH') { return Promise.reject(error); } console.error('API Error:', error); return Promise.reject(error); } ); export const api = { checkHealth: async (): Promise => { const { data } = await apiClient.get('/health'); return data; }, getRecommendations: async (): Promise => { const { data } = await apiClient.get('/recommendations'); return data; }, getCatalogItems: async (): Promise => { const { data } = await apiClient.get('/ocr/catalog'); return data; }, searchProducts: async (query: string): Promise => { const { data } = await apiClient.get('/ocr/search', { params: { q: query } }); return data; }, createContainer: async (payload: AddContainerRequest): Promise => { const { data } = await apiClient.post('/drafts/container', payload); return data; }, getMatches: async (): Promise => { const { data } = await apiClient.get('/ocr/matches'); return data; }, getUnmatched: async (): Promise => { const { data } = await apiClient.get('/ocr/unmatched'); return data; }, createMatch: async (payload: MatchRequest): Promise<{ status: string }> => { const { data } = await apiClient.post<{ status: string }>('/ocr/match', payload); return data; }, deleteMatch: async (rawName: string): Promise<{ status: string }> => { const { data } = await apiClient.delete<{ status: string }>('/ocr/match', { params: { raw_name: rawName } }); return data; }, deleteUnmatched: async (rawName: string): Promise<{ status: string }> => { const { data } = await apiClient.delete<{ status: string }>('/ocr/unmatched', { params: { raw_name: rawName } }); return data; }, createInvoice: async (payload: CreateInvoiceRequest): Promise => { const { data } = await apiClient.post('/invoices/send', payload); return data; }, // --- НОВЫЙ МЕТОД: Получение всех справочников --- getDictionaries: async (): Promise => { const { data } = await apiClient.get('/dictionaries'); return data; }, // Старые методы оставляем для совместимости, но они могут вызывать getDictionaries внутри или deprecated endpoint getStores: async (): Promise => { // Можно использовать новый эндпоинт и возвращать часть данных const { data } = await apiClient.get('/dictionaries'); return data.stores; }, getSuppliers: async (): Promise => { // Реальный запрос вместо мока const { data } = await apiClient.get('/dictionaries'); return data.suppliers; }, // Обновленный метод получения списка накладных с фильтрацией getDrafts: async (from?: string, to?: string): Promise => { const { data } = await apiClient.get('/drafts', { params: { from, to } }); return data; }, getDraft: async (id: string): Promise => { const { data } = await apiClient.get(`/drafts/${id}`); return data; }, updateDraft: async (id: string, payload: UpdateDraftRequest): Promise => { const { data } = await apiClient.patch(`/drafts/${id}`, payload); return data; }, updateDraftItem: async (draftId: string, itemId: string, payload: UpdateDraftItemRequest): Promise => { const { data } = await apiClient.patch(`/drafts/${draftId}/items/${itemId}`, payload); return data; }, addDraftItem: async (draftId: string): Promise => { const { data } = await apiClient.post(`/drafts/${draftId}/items`, {}); return data; }, deleteDraftItem: async (draftId: string, itemId: string): Promise => { await apiClient.delete(`/drafts/${draftId}/items/${itemId}`); }, reorderDraftItems: async (draftId: string, payload: ReorderDraftItemsRequest): Promise => { await apiClient.post(`/drafts/${draftId}/reorder`, payload); }, commitDraft: async (draftId: string, payload: CommitDraftRequest): Promise<{ document_number: string }> => { const { data } = await apiClient.post<{ document_number: string }>(`/drafts/${draftId}/commit`, payload); return data; }, deleteDraft: async (id: string): Promise => { await apiClient.delete(`/drafts/${id}`); }, deleteAllDrafts: async (): Promise<{ count: number }> => { const { data } = await apiClient.delete<{ count: number }>('/drafts'); return data; }, // --- Настройки и Статистика --- getSettings: async (): Promise => { const { data } = await apiClient.get('/settings'); return data; }, updateSettings: async (payload: UserSettings): Promise => { const { data } = await apiClient.post('/settings', payload); return data; }, getStats: async (): Promise => { const { data } = await apiClient.get('/invoices/stats'); return data; }, getProductGroups: async (): Promise => { const { data } = await apiClient.get('/dictionaries/groups'); return data; }, // --- Управление командой --- getUsers: async (): Promise => { const { data } = await apiClient.get('/settings/users'); return data; }, updateUserRole: async (userId: string, newRole: UserRole): Promise<{ status: string }> => { const { data } = await apiClient.patch<{ status: string }>(`/settings/users/${userId}`, { new_role: newRole }); return data; }, removeUser: async (userId: string): Promise<{ status: string }> => { const { data } = await apiClient.delete<{ status: string }>(`/settings/users/${userId}`); return data; }, getInvoice: async (id: string): Promise => { const { data } = await apiClient.get(`/invoices/${id}`); return data; }, syncInvoices: async (): Promise => { await apiClient.post('/invoices/sync'); }, syncAll: async (force = true): Promise => { await apiClient.post('/sync/all', null, { params: { force } }); }, getPhotos: async (page = 1, limit = 20): Promise => { const { data } = await apiClient.get('/photos', { params: { page, limit } }); return data; }, deletePhoto: async (id: string, force = false): Promise => { await apiClient.delete(`/photos/${id}`, { params: { force } }); }, regenerateDraftFromPhoto: async (id: string): Promise => { await apiClient.post(`/photos/${id}/regenerate`); }, // --- Десктопная авторизация --- initDesktopAuth: async (): Promise => { const { data } = await apiClient.post('/auth/init-desktop'); return data; }, // Сессионная авторизация (Desktop через куки) createSession: async (): Promise => { await apiClient.post('/auth/session'); }, getMe: async (): Promise => { const { data } = await apiClient.get('/auth/me'); return data; }, logout: async (): Promise => { await apiClient.post('/auth/logout'); }, // --- Управление серверами --- getUserServers: async (): Promise => { const { data } = await apiClient.get('/user/servers'); return data; }, switchServer: async (serverId: string): Promise<{ status: string }> => { const { data } = await apiClient.post<{ status: string }>(`/user/servers/active`, { server_id: serverId }); return data; }, // --- Загрузка файлов для создания черновика --- uploadFile: async (file: File): Promise => { const formData = new FormData(); formData.append('file', file); const { data } = await apiClient.post('/drafts/upload', formData, { headers: { 'Content-Type': 'multipart/form-data', }, }); return data; }, }; ``` # =================================================================== # Файл: src/shared/features/invoices/CreateContainerModal.tsx # =================================================================== ``` import React, { useState } from "react"; import { Modal, Form, Input, InputNumber, Button, message } from "antd"; import { api } from "../../api"; import type { ProductContainer } from "../../types"; interface Props { visible: boolean; onCancel: () => void; productId: string; productBaseUnit: string; // Callback возвращает уже полный объект с ID от сервера onSuccess: (container: ProductContainer) => void; } export const CreateContainerModal: React.FC = ({ visible, onCancel, productId, productBaseUnit, onSuccess, }) => { const [loading, setLoading] = useState(false); const [form] = Form.useForm(); const handleOk = async () => { try { const values = await form.validateFields(); setLoading(true); // 1. Отправляем запрос на БЭКЕНД const res = await api.createContainer({ product_id: productId, name: values.name, count: values.count, }); message.success("Фасовка создана"); // 2. БЭКЕНД вернул ID. Теперь мы собираем объект для UI // Мы не придумываем ID сами, мы берем res.container_id const newContainer: ProductContainer = { id: res.container_id, // <--- ID от сервера name: values.name, count: values.count, }; // 3. Возвращаем полный объект родителю onSuccess(newContainer); form.resetFields(); } catch { message.error("Ошибка создания фасовки"); } finally { setLoading(false); } }; return ( Отмена , , ]} > ); }; ``` # =================================================================== # Файл: src/shared/features/invoices/DraftEditor.tsx # =================================================================== ``` import React, { useEffect, useMemo, useState, useRef } from "react"; import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"; import { Spin, Alert, Button, Form, Select, DatePicker, Input, Typography, message, Row, Col, Modal, Tag, Image, Checkbox, } from "antd"; import { // CheckOutlined, DeleteOutlined, ExclamationCircleFilled, StopOutlined, ArrowLeftOutlined, PlusOutlined, FileImageOutlined, FileExcelOutlined, SwapOutlined, } from "@ant-design/icons"; import dayjs from "dayjs"; import { api, getStaticUrl } from "../../api"; import { DraftItemRow } from "./DraftItemRow"; import ExcelPreviewModal from "../../ui/ExcelPreviewModal"; import { useActiveDraftStore } from "../../stores/activeDraftStore"; import type { DraftItem, UpdateDraftRequest, CommitDraftRequest, ReorderDraftItemsRequest, Store, Supplier, Recommendation, DictionariesResponse, } from "../../types"; import { DragDropContext, Droppable, type DropResult } from "@hello-pangea/dnd"; const { Text } = Typography; const { TextArea } = Input; const { confirm } = Modal; interface DraftEditorProps { draftId: string; onBack?: () => void; } export const DraftEditor: React.FC = ({ draftId, onBack, }) => { const queryClient = useQueryClient(); const [form] = Form.useForm(); // Zustand стор для локального управления элементами черновика const { items, isDirty, setItems, updateItem, deleteItem, addItem, reorderItems, resetDirty, markAsDirty, } = useActiveDraftStore(); // Отслеживаем текущий draftId для инициализации стора const currentDraftIdRef = useRef(null); const [isDragging, setIsDragging] = useState(false); const [isReordering, setIsReordering] = useState(false); const [isSaving, setIsSaving] = useState(false); // Состояние для просмотра фото чека const [previewVisible, setPreviewVisible] = useState(false); // Состояние для просмотра Excel файла const [excelPreviewVisible, setExcelPreviewVisible] = useState(false); // Состояние для чекбокса "Проведено" const [isProcessed, setIsProcessed] = useState(true); // По умолчанию true для MVP // --- ЗАПРОСЫ --- const dictQuery = useQuery({ queryKey: ["dictionaries"], queryFn: api.getDictionaries, staleTime: 1000 * 60 * 5, }); const recommendationsQuery = useQuery({ queryKey: ["recommendations"], queryFn: api.getRecommendations, }); const draftQuery = useQuery({ queryKey: ["draft", draftId], queryFn: () => api.getDraft(draftId), enabled: !!draftId, refetchInterval: (query) => { if (isDragging) return false; const status = query.state.data?.status; return status === "PROCESSING" ? 3000 : false; }, }); const draft = draftQuery.data; const stores = (dictQuery.data as DictionariesResponse | undefined)?.stores || []; const suppliers = (dictQuery.data as DictionariesResponse | undefined)?.suppliers || []; // Определение типа файла по расширению const isExcelFile = draft?.photo_url?.toLowerCase().match(/\.(xls|xlsx)$/); // --- МУТАЦИИ --- const addItemMutation = useMutation({ mutationFn: () => api.addDraftItem(draftId), onSuccess: (newItem) => { message.success("Строка добавлена"); // Добавляем новый элемент в стор addItem(newItem); }, onError: () => { message.error("Ошибка создания строки"); }, }); const commitMutation = useMutation({ mutationFn: (payload: CommitDraftRequest) => api.commitDraft(draftId, payload), onSuccess: (data: { document_number: string }) => { message.success(`Накладная ${data.document_number} создана!`); queryClient.invalidateQueries({ queryKey: ["drafts"] }); }, onError: () => { message.error("Ошибка при создании накладной"); }, }); const deleteDraftMutation = useMutation({ mutationFn: () => api.deleteDraft(draftId), onSuccess: () => { if (draft?.status === "CANCELED") { message.info("Черновик удален окончательно"); } else { message.warning("Черновик отменен"); queryClient.invalidateQueries({ queryKey: ["draft", draftId] }); } }, onError: () => { message.error("Ошибка при удалении"); }, }); const reorderItemsMutation = useMutation({ mutationFn: ({ draftId: id, payload, }: { draftId: string; payload: ReorderDraftItemsRequest; }) => api.reorderDraftItems(id, payload), onError: (error) => { message.error("Не удалось изменить порядок элементов"); console.error("Reorder error:", error); }, }); // --- ЭФФЕКТЫ --- // Инициализация данных при загрузке черновика useEffect(() => { if (draft) { // Инициализируем только если изменился draftId или стор пуст if (currentDraftIdRef.current !== draft.id || items.length === 0) { // 1. Инициализация строк (Store) setItems(draft.items || []); // 2. Инициализация шапки (Form) form.setFieldsValue({ store_id: draft.store_id, supplier_id: draft.supplier_id, comment: draft.comment, incoming_document_number: draft.incoming_document_number, date_incoming: draft.date_incoming ? dayjs(draft.date_incoming) : dayjs(), }); currentDraftIdRef.current = draft.id; } } }, [draft, items.length, setItems, form]); // --- ХЕЛПЕРЫ --- const totalSum = useMemo(() => { return ( items.reduce( (acc: number, item: DraftItem) => acc + Number(item.quantity) * Number(item.price), 0 ) || 0 ); }, [items]); const invalidItemsCount = useMemo(() => { return items.filter((i: DraftItem) => !i.product_id).length || 0; }, [items]); // Функция сохранения изменений на сервер const saveChanges = async () => { if (!isDirty) return; setIsSaving(true); try { // Собираем значения формы для обновления шапки черновика const formValues = form.getFieldsValue(); // Формируем единый payload для пакетного обновления (шапка + элементы) const payload: UpdateDraftRequest = { store_id: formValues.store_id, supplier_id: formValues.supplier_id, comment: formValues.comment || "", incoming_document_number: formValues.incoming_document_number || "", date_incoming: formValues.date_incoming ? formValues.date_incoming.format("YYYY-MM-DD") : undefined, items: items.map((item: DraftItem) => ({ id: item.id, product_id: item.product_id ?? "", container_id: item.container_id ?? "", quantity: Number(item.quantity), price: Number(item.price), sum: Number(item.sum), })), }; // Отправляем единый запрос на сервер await api.updateDraft(draftId, payload); // После успешного сохранения обновляем данные с сервера await queryClient.invalidateQueries({ queryKey: ["draft", draftId] }); // Сбрасываем флаг isDirty resetDirty(); message.success("Изменения сохранены"); } catch (error) { console.error("Ошибка сохранения:", error); message.error("Не удалось сохранить изменения"); throw error; } finally { setIsSaving(false); } }; const handleItemUpdate = (id: string, changes: Partial) => { // Обновляем локально через стор updateItem(id, changes); }; const handleCommit = async () => { try { const values = await form.validateFields(); if (invalidItemsCount > 0) { message.warning( `Осталось ${invalidItemsCount} нераспознанных товаров!` ); return; } // Сначала сохраняем изменения, если есть if (isDirty) { await saveChanges(); } commitMutation.mutate({ date_incoming: values.date_incoming.format("YYYY-MM-DD"), store_id: values.store_id, supplier_id: values.supplier_id, comment: values.comment || "", incoming_document_number: values.incoming_document_number || "", is_processed: isProcessed, }); } catch { message.error("Заполните обязательные поля (Склад, Поставщик)"); } }; const isCanceled = draft?.status === "CANCELED"; const isCompleted = draft?.status === "COMPLETED"; const handleBack = () => { if (isDirty) { confirm({ title: "Сохранить изменения?", icon: , content: "У вас есть несохраненные изменения. Сохранить их перед выходом?", okText: "Сохранить и выйти", cancelText: "Выйти без сохранения", onOk: async () => { try { await saveChanges(); onBack?.(); } catch { // Ошибка уже обработана в saveChanges } }, onCancel: () => { onBack?.(); }, }); } else { onBack?.(); } }; const handleDelete = () => { confirm({ title: isCanceled ? "Удалить окончательно?" : "Отменить черновик?", icon: , content: isCanceled ? "Черновик пропадет из списка навсегда." : 'Черновик получит статус "Отменен", но останется в списке.', okText: isCanceled ? "Удалить навсегда" : "Отменить", okType: "danger", cancelText: "Назад", onOk() { deleteDraftMutation.mutate(); }, }); }; const handleDragStart = () => { setIsDragging(true); }; const handleDragEnd = async (result: DropResult) => { setIsDragging(false); const { source, destination } = result; // Если нет назначения или позиция не изменилась if ( !destination || (source.droppableId === destination.droppableId && source.index === destination.index) ) { return; } if (!draft) return; // Обновляем локальное состояние через стор reorderItems(source.index, destination.index); // Подготавливаем payload для API const reorderPayload: ReorderDraftItemsRequest = { items: items.map((item: DraftItem, index: number) => ({ id: item.id, order: index, })), }; // Отправляем запрос на сервер try { await reorderItemsMutation.mutateAsync({ draftId: draft.id, payload: reorderPayload, }); } catch { // При ошибке откатываем локальное состояние через стор reorderItems(destination.index, source.index); message.error("Не удалось изменить порядок элементов"); } }; // --- RENDER --- const showSpinner = draftQuery.isLoading || (draft?.status === "PROCESSING" && items.length === 0); if (showSpinner) { return (

); } if (draftQuery.isError || !draft) { return ; } return (

{/* Единый хедер */}

{/* Левая часть: Кнопка назад + Номер + Статус */}

{onBack && (

{/* Правая часть: Кнопки действий */}

{/* Кнопка сохранения (показывается только если есть несохраненные изменения) */} {isDirty && ( )} {/* Кнопка просмотра чека (только если есть URL) */} {draft.photo_url && (

{/* Основная часть с прокруткой */}

{/* Form: Склады и Поставщики */}

markAsDirty()} > ({ label: s.name, value: s.id, }))} size="small" showSearch filterOption={(input, option) => String(option?.label ?? "") .toLowerCase() .includes(String(input).toLowerCase()) } />

</Form.Item>
          </Form>
        </div>

{/* Items Header */}
        <div
          style={{
            marginBottom: 8,
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            padding: "0 4px",
          }}
        >
          <Text strong style={{ fontSize: 14 }}>
            Позиции ({items.length})
          </Text>
          {invalidItemsCount > 0 && (
            <Text type="danger" style={{ fontSize: 12 }}>
              {invalidItemsCount} нераспознано
            </Text>
          )}
        </div>

{/* Items List */}
        <DragDropContext
          onDragStart={handleDragStart}
          onDragEnd={handleDragEnd}
        >
          <Droppable droppableId="draft-items">
            {(provided, snapshot) => (
              <div
                {...provided.droppableProps}
                ref={provided.innerRef}
                style={{
                  display: "flex",
                  flexDirection: "column",
                  gap: 8,
                  backgroundColor: snapshot.isDraggingOver
                    ? "#f0f0f0"
                    : "transparent",
                  borderRadius: "4px",
                  padding: snapshot.isDraggingOver ? "8px" : "0",
                  transition: "background-color 0.2s ease",
                }}
              >
                {items.map((item: DraftItem, index: number) => (
                  <DraftItemRow
                    key={item.id}
                    item={item}
                    index={index}
                    onLocalUpdate={handleItemUpdate}
                    onDelete={(itemId) => deleteItem(itemId)}
                    isUpdating={false}
                    recommendations={
                      (recommendationsQuery.data as
                        | Recommendation[]
                        | undefined) || []
                    }
                    isReordering={isReordering}
                  />
                ))}
                {provided.placeholder}
              </div>
            )}
          </Droppable>
        </DragDropContext>

{/* Кнопка добавления позиции */}
        <Button
          type="dashed"
          block
          icon={<PlusOutlined />}
          style={{ marginTop: 12, marginBottom: 80, height: 40 }}
          onClick={() => addItemMutation.mutate()}
          loading={addItemMutation.isPending}
          disabled={isCanceled}
          size="small"
        >
          Добавить товар
        </Button>
      </div>

{/* Footer Actions - прижат к низу контейнера */}
      <div
        style={{
          flexShrink: 0,
          background: "#fff",
          padding: "8px 12px",
          borderTop: "1px solid #f0f0f0",
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
        }}
      >
        <div style={{ display: "flex", flexDirection: "column" }}>
          <Text style={{ fontSize: 11, color: "#888", lineHeight: 1 }}>
            Итого:
          </Text>
          <Text
            style={{
              fontSize: 16,
              fontWeight: "bold",
              color: "#1890ff",
              lineHeight: 1.2,
            }}
          >
            {totalSum.toLocaleString("ru-RU", {
              style: "currency",
              currency: "RUB",
              minimumFractionDigits: 2,
              maximumFractionDigits: 2,
            })}
          </Text>
        </div>

<Button
          type="primary"
          // icon={<CheckOutlined />}
          onClick={handleCommit}
          loading={commitMutation.isPending}
          disabled={invalidItemsCount > 0 || isCanceled}
          style={{
            position: "relative",
            paddingLeft: 40,
            height: 36,
          }}
          size="small"
        >
          <Checkbox
            checked={isProcessed}
            onChange={(e) => setIsProcessed(e.target.checked)}
            onClick={(e) => e.stopPropagation()}
            disabled={invalidItemsCount > 0 || isCanceled}
            style={{
              position: "absolute",
              left: 10,
              top: "50%",
              transform: "translateY(-50%)",
              pointerEvents: "auto",
            }}
          />
          <span style={{ marginLeft: 8 }}>
            {isCanceled
              ? "Восстановить"
              : isCompleted
              ? "Обновить в iiko"
              : isProcessed
              ? "Провести и отправить"
              : "Сохранить (без проведения)"}
          </span>
        </Button>
      </div>

{/* Скрытый компонент для просмотра изображения */}
      {draft.photo_url && (
        <div style={{ display: "none" }}>
          <Image.PreviewGroup
            preview={{
              visible: previewVisible,
              onVisibleChange: (vis) => setPreviewVisible(vis),
              movable: true,
              scaleStep: 0.5,
            }}
          >
            <Image src={getStaticUrl(draft.photo_url)} />
          </Image.PreviewGroup>
        </div>
      )}

{/* Модальное окно для просмотра Excel файлов */}
      <ExcelPreviewModal
        visible={excelPreviewVisible}
        onCancel={() => setExcelPreviewVisible(false)}
        fileUrl={draft.photo_url || ""}
      />
    </div>
  );
};

```

# ===================================================================
# Файл: src/shared/features/invoices/DraftItemRow.tsx
# ===================================================================

```
import React, { useMemo, useState } from "react";
import { Draggable } from "@hello-pangea/dnd";
import {
  Card,
  Flex,
  InputNumber,
  Typography,
  Select,
  Tag,
  Button,
  Divider,
  Modal,
  Popconfirm,
} from "antd";
import {
  SyncOutlined,
  PlusOutlined,
  WarningFilled,
  DeleteOutlined,
} from "@ant-design/icons";
import { GripVertical } from "lucide-react";
import { CatalogSelect } from "../ocr/CatalogSelect";
import { CreateContainerModal } from "./CreateContainerModal";
import type {
  DraftItem,
  ProductSearchResult,
  ProductContainer,
  Recommendation,
} from "../../types";

const { Text } = Typography;

interface DraftItemRowProps {
  item: DraftItem;
  index: number;
  onLocalUpdate: (id: string, changes: Partial<DraftItem>) => void;
  onDelete: (itemId: string) => void;
  isUpdating: boolean;
  recommendations?: Recommendation[];
  isReordering: boolean;
}

export const DraftItemRow: React.FC<DraftItemRowProps> = ({
  item,
  index,
  onLocalUpdate,
  onDelete,
  isUpdating,
  recommendations = [],
  isReordering,
}) => {
  const [isModalOpen, setIsModalOpen] = useState(false);

const activeProduct = useMemo(() => {
    return item.product as unknown as ProductSearchResult | undefined;
  }, [item.product]);

const containers = useMemo(() => {
    if (!activeProduct) return [];
    return activeProduct.containers || [];
  }, [activeProduct]);

const baseUom =
    activeProduct?.main_unit?.name || activeProduct?.measure_unit || "ед.";

// --- WARNING LOGIC ---
  const activeWarning = useMemo(() => {
    if (!item.product_id) return null;
    return recommendations.find((r) => r.ProductID === item.product_id);
  }, [item.product_id, recommendations]);

// --- Handlers ---
  const handleProductChange = (
    prodId: string | null,
    productObj?: ProductSearchResult
  ) => {
    onLocalUpdate(item.id, {
      product_id: prodId,
      product: prodId ? productObj : null,
      container_id: null,
    });
  };

const handleContainerChange = (val: string) => {
    const newVal = val === "BASE_UNIT" ? "" : val;
    onLocalUpdate(item.id, {
      container_id: newVal,
    });
  };

const handleContainerCreated = (newContainer: ProductContainer) => {
    setIsModalOpen(false);
    onLocalUpdate(item.id, { container_id: newContainer.id });
  };

const handleValueChange = (
    field: "quantity" | "price" | "sum",
    val: number | null
  ) => {
    if (val !== null) {
      onLocalUpdate(item.id, {
        [field]: Number(val),
      });
    }
  };

const handleBlur = () => {
    // Изменения уже отправлены через onLocalUpdate в handleValueChange
  };

const cardBorderColor = !item.product_id
    ? "#ffa39e"
    : item.is_matched
    ? "#b7eb8f"
    : "#d9d9d9";

return (
    <>
      <Draggable
        draggableId={item.id}
        index={index}
        isDragDisabled={!isReordering}
      >
        {(provided, snapshot) => {
          const style = {
            marginBottom: "8px",
            backgroundColor: snapshot.isDragging ? "#e6f7ff" : "transparent",
            boxShadow: snapshot.isDragging
              ? "0 4px 12px rgba(0, 0, 0, 0.15)"
              : "none",
            borderRadius: "4px",
            transition: "background-color 0.2s ease, box-shadow 0.2s ease",
            ...provided.draggableProps.style,
          };

return (
            <div
              ref={provided.innerRef}
              {...provided.draggableProps}
              style={style}
            >
              <Card
                size="small"
                style={{
                  display: "flex",
                  alignItems: "center",
                  padding: "12px 16px",
                  borderLeft: `4px solid ${cardBorderColor}`,
                  border: snapshot.isDragging
                    ? "2px solid #1890ff"
                    : "1px solid #d9d9d9",
                  background: item.product_id ? "#fff" : "#fff1f0",
                  borderRadius: "4px",
                }}
                bodyStyle={{ padding: 0 }}
              >
                {/* Drag handle - иконка для перетаскивания (показываем только в режиме перетаскивания) */}
                {isReordering && (
                  <div
                    {...provided.dragHandleProps}
                    style={{
                      cursor: "grab",
                      padding: "4px 8px 4px 0",
                      color: "#8c8c8c",
                      display: "flex",
                      alignItems: "center",
                      transition: "color 0.2s ease",
                    }}
                    onMouseEnter={(e) => {
                      e.currentTarget.style.color = "#1890ff";
                    }}
                    onMouseLeave={(e) => {
                      e.currentTarget.style.color = "#8c8c8c";
                    }}
                  >
                    <GripVertical size={20} />
                  </div>
                )}

<Flex vertical gap={10} style={{ flex: 1 }}>
                  <Flex justify="space-between" align="start">
                    <div style={{ flex: 1 }}>
                      <Text
                        type="secondary"
                        style={{
                          fontSize: 12,
                          lineHeight: 1.2,
                          display: "block",
                        }}
                      >
                        {item.raw_name || "Новая позиция"}
                      </Text>
                      {item.raw_amount > 0 && (
                        <Text
                          type="secondary"
                          style={{ fontSize: 10, display: "block" }}
                        >
                          (чек: {item.raw_amount} x {item.raw_price})
                        </Text>
                      )}
                    </div>
                    <div
                      style={{
                        marginLeft: 8,
                        display: "flex",
                        alignItems: "center",
                        gap: 6,
                      }}
                    >
                      {isUpdating && (
                        <SyncOutlined spin style={{ color: "#1890ff" }} />
                      )}

{activeWarning && (
                        <WarningFilled
                          style={{
                            color: "#faad14",
                            fontSize: 16,
                            cursor: "pointer",
                          }}
                          onClick={showWarningModal}
                        />
                      )}

{!item.product_id && (
                        <Tag color="error" style={{ margin: 0 }}>
                          ?
                        </Tag>
                      )}

<Popconfirm
                        title="Удалить строку?"
                        onConfirm={() => onDelete(item.id)}
                        okText="Да"
                        cancelText="Нет"
                        placement="left"
                      >
                        <Button
                          type="text"
                          size="small"
                          icon={<DeleteOutlined />}
                          danger
                          style={{ marginLeft: 4 }}
                        />
                      </Popconfirm>
                    </div>
                  </Flex>

{activeProduct && (
                    <Select
                      style={{ width: "100%" }}
                      placeholder="Выберите единицу измерения"
                      options={containerOptions}
                      value={item.container_id || "BASE_UNIT"}
                      onChange={handleContainerChange}
                      dropdownRender={(menu) => (
                        <>
                          {menu}
                          <Divider style={{ margin: "4px 0" }} />
                          <Button
                            type="text"
                            block
                            icon={<PlusOutlined />}
                            onClick={() => setIsModalOpen(true)}
                            style={{ textAlign: "left" }}
                          >
                            Добавить фасовку...
                          </Button>
                        </>
                      )}
                    />
                  )}

<div
                    style={{
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "space-between",
                      background: "#fafafa",
                      margin: "0 -12px -12px -12px",
                      padding: "8px 12px",
                      borderTop: "1px solid #f0f0f0",
                      borderBottomLeftRadius: 8,
                      borderBottomRightRadius: 8,
                    }}
                  >
                    <div
                      style={{
                        display: "flex",
                        gap: 8,
                        alignItems: "center",
                        flex: 1,
                      }}
                    >
                      <InputNumber
                        style={{ width: 70 }}
                        controls={false}
                        placeholder="Кол"
                        min={0}
                        value={item.quantity}
                        onChange={(val) => handleValueChange("quantity", val)}
                        onBlur={() => handleBlur()}
                        precision={3}
                        parser={(value) =>
                          value?.replace(",", ".") as unknown as number
                        }
                      />
                      <Text type="secondary">x</Text>
                      <InputNumber
                        style={{ width: 80 }}
                        controls={false}
                        placeholder="Цена"
                        min={0}
                        value={item.price}
                        onChange={(val) => handleValueChange("price", val)}
                        onBlur={() => handleBlur()}
                        precision={2}
                        parser={(value) =>
                          value?.replace(",", ".") as unknown as number
                        }
                      />
                    </div>

<div
                      style={{ display: "flex", alignItems: "center", gap: 4 }}
                    >
                      <Text type="secondary">=</Text>
                      <InputNumber
                        style={{ width: 90, fontWeight: "bold" }}
                        controls={false}
                        placeholder="Сумма"
                        min={0}
                        value={item.sum}
                        onChange={(val) => handleValueChange("sum", val)}
                        onBlur={() => handleBlur()}
                        precision={2}
                        parser={(value) =>
                          value?.replace(",", ".") as unknown as number
                        }
                      />
                    </div>
                  </div>
                </Flex>
              </Card>
            </div>
          );
        }}
      </Draggable>
      {activeProduct && (
        <CreateContainerModal
          visible={isModalOpen}
          onCancel={() => setIsModalOpen(false)}
          productId={activeProduct.id}
          productBaseUnit={baseUom}
          onSuccess={handleContainerCreated}
        />
      )}
    </>
  );
};

```

# ===================================================================
# Файл: src/shared/features/invoices/DraftVerificationModal.tsx
# ===================================================================

```
import React, { useState } from "react";
import { Modal, Spin, Button, Typography, Alert, message } from "antd";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { useNavigate } from "react-router-dom";
import { DragDropContext, Droppable } from "@hello-pangea/dnd";
import { api } from "../../api";
import { DraftItemRow } from "./DraftItemRow";
import type { UpdateDraftItemRequest, DraftItem } from "../../types";

const { Text } = Typography;

interface DraftVerificationModalProps {
  draftId: string;
  visible: boolean;
  onClose: () => void;
}

/**
 * Модальное окно для быстрой проверки черновика после загрузки файла
 * Позволяет просмотреть и отредактировать позиции перед переходом к полному редактированию
 */
export const DraftVerificationModal: React.FC<DraftVerificationModalProps> = ({
  draftId,
  visible,
  onClose,
}) => {
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const [updatingItems, setUpdatingItems] = useState<Set<string>>(new Set());

// Получаем данные черновика
  const draftQuery = useQuery({
    queryKey: ["draft", draftId],
    queryFn: () => api.getDraft(draftId),
    enabled: visible && !!draftId,
    refetchInterval: (query) => {
      const status = query.state.data?.status;
      return status === "PROCESSING" ? 3000 : false;
    },
  });

// Получаем рекомендации
  const recommendationsQuery = useQuery({
    queryKey: ["recommendations"],
    queryFn: api.getRecommendations,
    enabled: visible,
  });

// Мутация для обновления строки
  const updateItemMutation = useMutation({
    mutationFn: (vars: { itemId: string; payload: UpdateDraftItemRequest }) =>
      api.updateDraftItem(draftId, vars.itemId, vars.payload),
    onMutate: async ({ itemId }) => {
      setUpdatingItems((prev) => new Set(prev).add(itemId));
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["draft", draftId] });
    },
    onError: () => {
      message.error("Не удалось сохранить строку");
    },
    onSettled: (_data, _err, vars) => {
      setUpdatingItems((prev) => {
        const next = new Set(prev);
        next.delete(vars.itemId);
        return next;
      });
    },
  });

const draft = draftQuery.data;
  const recommendations = recommendationsQuery.data || [];

const handleItemUpdate = (itemId: string, changes: Partial<DraftItem>) => {
    // Преобразуем Partial<DraftItem> в UpdateDraftItemRequest
    const payload: UpdateDraftItemRequest = {};

if (changes.product_id !== undefined) {
      // product_id может быть null, но UpdateDraftItemRequest ожидает только UUID
      // Если null, не включаем поле в payload
      if (changes.product_id !== null) {
        payload.product_id = changes.product_id;
      }
    }

if (changes.container_id !== undefined) {
      payload.container_id = changes.container_id;
    }

if (changes.quantity !== undefined) {
      payload.quantity = changes.quantity;
    }

if (changes.price !== undefined) {
      payload.price = changes.price;
    }

if (changes.sum !== undefined) {
      payload.sum = changes.sum;
    }

updateItemMutation.mutate({ itemId, payload });
  };

const handleDeleteItem = () => {
    // В модальном окне не реализуем удаление для упрощения
    // Пользователь может перейти к полному редактированию
    message.info("Для удаления позиции перейдите к полному редактированию");
  };

const handleGoToFullEdit = () => {
    onClose();
    navigate(`/web/invoice/draft/${draftId}`);
  };

const invalidItemsCount =
    draft?.items.filter((i: DraftItem) => !i.product_id).length || 0;

return (
    <Modal
      title="Проверка черновика"
      open={visible}
      onCancel={onClose}
      width={800}
      footer={[
        <Button key="close" onClick={onClose}>
          Закрыть
        </Button>,
        <Button
          key="edit"
          type="primary"
          onClick={handleGoToFullEdit}
          disabled={draftQuery.isLoading}
        >
          Перейти к полному редактированию
        </Button>,
      ]}
      destroyOnClose
    >
      {draftQuery.isLoading ? (
        <div style={{ textAlign: "center", padding: "40px 0" }}>
          <Spin size="large" />
          <div style={{ marginTop: "16px" }}>
            <Text type="secondary">Обработка файла...</Text>
          </div>
        </div>
      ) : draftQuery.isError ? (
        <Alert
          message="Ошибка загрузки черновика"
          description="Не удалось загрузить данные черновика. Попробуйте закрыть модальное окно и загрузить файл заново."
          type="error"
          showIcon
        />
      ) : draft ? (
        <div>
          {/* Информация о черновике */}
          <div style={{ marginBottom: "16px" }}>
            <Text strong>Номер: </Text>
            <Text>{draft.document_number || "Не указан"}</Text>
            <br />
            <Text strong>Статус: </Text>
            <Text>{draft.status}</Text>
            {draft.photo_url && (
              <>
                <br />
                <Text strong>Фото чека: </Text>
                <Text type="secondary">Загружено</Text>
              </>
            )}
          </div>

{/* Предупреждение о нераспознанных товарах */}
          {invalidItemsCount > 0 && (
            <Alert
              message={`${invalidItemsCount} позиций не распознано`}
              description="Пожалуйста, сопоставьте товары с каталогом перед отправкой"
              type="warning"
              showIcon
              style={{ marginBottom: "16px" }}
            />
          )}

{/* Список позиций */}
          <div style={{ maxHeight: "400px", overflowY: "auto" }}>
            {draft.items.length === 0 ? (
              <div style={{ textAlign: "center", padding: "20px" }}>
                <Text type="secondary">Нет позиций</Text>
              </div>
            ) : (
              <DragDropContext onDragEnd={() => {}}>
                <Droppable droppableId="modal-verification-list">
                  {(provided) => (
                    <div ref={provided.innerRef} {...provided.droppableProps}>
                      {draft.items.map((item: DraftItem, index: number) => (
                        <DraftItemRow
                          key={item.id}
                          item={item}
                          index={index}
                          onLocalUpdate={handleItemUpdate}
                          onDelete={handleDeleteItem}
                          isUpdating={updatingItems.has(item.id)}
                          recommendations={recommendations}
                          isReordering={false}
                        />
                      ))}
                      {provided.placeholder}
                    </div>
                  )}
                </Droppable>
              </DragDropContext>
            )}
          </div>
        </div>
      ) : null}
    </Modal>
  );
};

```

# ===================================================================
# Файл: src/shared/features/invoices/InvoiceViewer.tsx
# ===================================================================

```
import React, { useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { Spin, Alert, Button, Table, Typography, Tag, Image } from "antd";
import {
  FileImageOutlined,
  FileExcelOutlined,
  HistoryOutlined,
  ArrowLeftOutlined,
} from "@ant-design/icons";
import { api, getStaticUrl } from "../../api";
import type { DraftStatus } from "../../types";
import ExcelPreviewModal from "../../ui/ExcelPreviewModal";

const { Title, Text } = Typography;

interface InvoiceViewerProps {
  invoiceId: string;
  onBack?: () => void;
}

export const InvoiceViewer: React.FC<InvoiceViewerProps> = ({
  invoiceId,
  onBack,
}) => {
  // Состояние для просмотра фото чека
  const [previewVisible, setPreviewVisible] = useState(false);

// Состояние для просмотра Excel файла
  const [excelPreviewVisible, setExcelPreviewVisible] = useState(false);

// Запрос данных накладной
  const {
    data: invoice,
    isLoading,
    isError,
  } = useQuery({
    queryKey: ["invoice", invoiceId],
    queryFn: () => api.getInvoice(invoiceId),
    enabled: !!invoiceId,
  });

// Определение типа файла по расширению
  const isExcelFile = invoice?.photo_url?.toLowerCase().match(/\.(xls|xlsx)$/);

if (isLoading) {
    return (
      <div style={{ textAlign: "center", padding: 50 }}>
        <Spin size="large" />
      </div>
    );
  }

if (isError || !invoice) {
    return <Alert type="error" message="Ошибка загрузки накладной" />;
  }

const columns = [
    {
      title: "Товар",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "Кол-во",
      dataIndex: "quantity",
      key: "quantity",
      align: "right" as const,
    },
    {
      title: "Сумма",
      dataIndex: "total",
      key: "total",
      align: "right" as const,
      render: (total: number) =>
        total.toLocaleString("ru-RU", {
          style: "currency",
          currency: "RUB",
        }),
    },
  ];

const totalSum = (invoice.items || []).reduce(
    (acc: number, item: { total: number }) => acc + item.total,
    0
  );

return (
    <div
      style={{
        height: "100%",
        display: "flex",
        flexDirection: "column",
        backgroundColor: "#f5f5f5",
      }}
    >
      {/* Единый хедер */}
      <div
        style={{
          padding: "8px 12px",
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          gap: 8,
          flexShrink: 0,
          background: "#fff",
          borderBottom: "1px solid #f0f0f0",
        }}
      >
        {/* Левая часть: Кнопка назад + Номер + Информация */}
        <div
          style={{
            display: "flex",
            alignItems: "center",
            gap: 8,
            flex: 1,
            minWidth: 0,
          }}
        >
          {onBack && (
            <Button
              type="text"
              icon={<ArrowLeftOutlined />}
              onClick={onBack}
              size="small"
              style={{ flexShrink: 0 }}
            />
          )}
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              gap: 2,
              minWidth: 0,
            }}
          >
            <Title
              level={5}
              style={{ margin: 0, fontSize: 16, whiteSpace: "nowrap" }}
            >
              №{invoice.number}
            </Title>
            <Text
              type="secondary"
              style={{ fontSize: 11, whiteSpace: "nowrap" }}
            >
              {invoice.date} • {invoice.supplier.name}
            </Text>
          </div>
        </div>

{/* Правая часть: Статус + Кнопка фото */}
        <div
          style={{
            display: "flex",
            gap: 6,
            alignItems: "center",
            flexShrink: 0,
          }}
        >
          {getStatusTag(invoice.status)}

{/* Кнопка просмотра чека (только если есть URL) */}
          {invoice.photo_url && (
            <Button
              icon={isExcelFile ? <FileExcelOutlined /> : <FileImageOutlined />}
              onClick={() =>
                isExcelFile
                  ? setExcelPreviewVisible(true)
                  : setPreviewVisible(true)
              }
              size="small"
              type="text"
            />
          )}
        </div>
      </div>

{/* Основная часть с прокруткой */}
      <div style={{ flex: 1, overflowY: "auto", padding: "8px 12px" }}>
        {/* Таблица товаров */}
        <div
          style={{
            background: "#fff",
            padding: 12,
            borderRadius: 8,
            marginBottom: 16,
          }}
        >
          <Title level={5} style={{ marginBottom: 12, fontSize: 14 }}>
            Товары ({(invoice.items || []).length} поз.)
          </Title>

<Table
            columns={columns}
            dataSource={invoice.items || []}
            pagination={false}
            rowKey="name"
            size="small"
            summary={() => (
              <Table.Summary.Row>
                <Table.Summary.Cell index={0} colSpan={2}>
                  <Text strong>Итого:</Text>
                </Table.Summary.Cell>
                <Table.Summary.Cell index={2} align="right">
                  <Text strong>
                    {totalSum.toLocaleString("ru-RU", {
                      style: "currency",
                      currency: "RUB",
                    })}
                  </Text>
                </Table.Summary.Cell>
              </Table.Summary.Row>
            )}
          />
        </div>
      </div>

{/* Скрытый компонент для просмотра изображения */}
      {invoice.photo_url && (
        <div style={{ display: "none" }}>
          <Image.PreviewGroup
            preview={{
              visible: previewVisible,
              onVisibleChange: (vis) => setPreviewVisible(vis),
              movable: true,
              scaleStep: 0.5,
            }}
          >
            <Image src={getStaticUrl(invoice.photo_url)} />
          </Image.PreviewGroup>
        </div>
      )}

{/* Модальное окно для просмотра Excel файлов */}
      <ExcelPreviewModal
        visible={excelPreviewVisible}
        onCancel={() => setExcelPreviewVisible(false)}
        fileUrl={invoice.photo_url || ""}
      />
    </div>
  );
};

```

# ===================================================================
# Файл: src/shared/features/ocr/AddMatchForm.tsx
# ===================================================================

```
import React, { useState, useMemo, useEffect } from "react";
import {
  Card,
  Button,
  Flex,
  AutoComplete,
  Input,
  InputNumber,
  Typography,
  Select,
  Divider,
  Popconfirm,
} from "antd";
import {
  PlusOutlined,
  DeleteOutlined,
  EditOutlined,
  CloseOutlined,
} from "@ant-design/icons";
import { CatalogSelect } from "./CatalogSelect";
import { CreateContainerModal } from "../invoices/CreateContainerModal";
import type {
  CatalogItem,
  UnmatchedItem,
  ProductSearchResult,
  ProductContainer,
  ProductMatch,
} from "../../types";

const { Text } = Typography;

interface Props {
  catalog: CatalogItem[];
  unmatched?: UnmatchedItem[];
  onSave: (
    rawName: string,
    productId: string,
    quantity: number,
    containerId?: string
  ) => void;
  onDeleteUnmatched?: (rawName: string) => void;
  isLoading: boolean;
  initialValues?: ProductMatch; // Для редактирования
  onCancelEdit?: () => void; // Для сброса режима редактирования
}

export const AddMatchForm: React.FC<Props> = ({
  catalog,
  unmatched = [],
  onSave,
  onDeleteUnmatched,
  isLoading,
  initialValues,
  onCancelEdit,
}) => {
  // --- Состояния ---
  const [rawName, setRawName] = useState("");
  const [selectedProduct, setSelectedProduct] = useState<string | undefined>(
    undefined
  );
  // Храним полный объект товара, чтобы достать из него фасовки и имя для отображения
  const [selectedProductData, setSelectedProductData] = useState<
    ProductSearchResult | undefined
  >(undefined);
  const [quantity, setQuantity] = useState<number | null>(1);
  const [selectedContainer, setSelectedContainer] = useState<string | null>(
    null
  );

const [isModalOpen, setIsModalOpen] = useState(false);

// --- Эффект для инициализации полей при редактировании ---
  useEffect(() => {
    if (initialValues) {
      // eslint-disable-next-line
      setRawName(initialValues.raw_name || "");

const prodId = initialValues.product?.id;
      setSelectedProduct(prodId);

// Важно: восстанавливаем объект продукта из initialValues
      // Приводим тип, так как DTO могут немного отличаться, но нам нужны containers и name
      const prodData = initialValues.product as unknown as ProductSearchResult;
      setSelectedProductData(prodData);

setQuantity(Number(initialValues.quantity) || 1);
      setSelectedContainer(initialValues.container?.id || null);
    } else {
      // РЕЖИМ СОЗДАНИЯ (Сброс)
      setRawName("");
      setSelectedProduct(undefined);
      setSelectedProductData(undefined);
      setQuantity(1);
      setSelectedContainer(null);
    }
  }, [initialValues]);

// --- Вычисляемые значения ---

const unmatchedOptions = useMemo(() => {
    return unmatched.map((item) => ({
      value: item.raw_name,
      label: item.count ? `${item.raw_name} (${item.count} шт)` : item.raw_name,
    }));
  }, [unmatched]);

// Активный продукт: либо то, что выбрали в поиске, либо то, что пришло из редактирования
  const activeProduct = useMemo(() => {
    if (selectedProductData) return selectedProductData;
    // Фоллбэк: пытаемся найти в общем каталоге (если он загружен полностью, что редко)
    if (selectedProduct && catalog.length > 0) {
      return catalog.find(
        (item) => item.id === selectedProduct
      ) as unknown as ProductSearchResult;
    }
    return undefined;
  }, [selectedProduct, selectedProductData, catalog]);

// Список контейнеров текущего товара
  const containers = useMemo(() => {
    return activeProduct?.containers || [];
  }, [activeProduct]);

// Базовая единица
  const baseUom =
    activeProduct?.main_unit?.name || activeProduct?.measure_unit || "ед.";

// Текстовое отображение текущей единицы (для инпута количества)
  const currentUomName = useMemo(() => {
    if (selectedContainer) {
      const cont = containers.find((c) => c.id === selectedContainer);
      return cont ? cont.name : baseUom;
    }
    return baseUom;
  }, [selectedContainer, containers, baseUom]);

const isButtonDisabled =
    !rawName.trim() ||
    !selectedProduct ||
    quantity === null ||
    quantity <= 0 ||
    isLoading;

// --- Хендлеры ---

const handleProductChange = (
    val: string | null,
    productObj?: ProductSearchResult
  ) => {
    setSelectedProduct(val || undefined);
    if (productObj) {
      setSelectedProductData(productObj);
    }
    // При смене товара сбрасываем фасовку
    setSelectedContainer(null);
  };

const handleSubmit = () => {
    let quantityValue = quantity;

// Защита от null/строк
    if (quantityValue === null || quantityValue === undefined) {
      quantityValue = 1;
    } else if (typeof quantityValue === "string") {
      quantityValue = parseFloat(quantityValue);
    }
    if (isNaN(quantityValue) || quantityValue <= 0) {
      quantityValue = 1;
    }

if (rawName.trim() && selectedProduct) {
      onSave(
        rawName,
        selectedProduct,
        quantityValue,
        selectedContainer || undefined
      );

// Если это не редактирование, очищаем форму
      if (!initialValues) {
        setRawName("");
        setSelectedProduct(undefined);
        setSelectedProductData(undefined);
        setQuantity(1);
        setSelectedContainer(null);
      }
    }
  };

const handleContainerCreated = (newContainer: ProductContainer) => {
    setIsModalOpen(false);

// Добавляем созданную фасовку в локальный стейт продукта
    if (selectedProductData) {
      setSelectedProductData({
        ...selectedProductData,
        containers: [...(selectedProductData.containers || []), newContainer],
      });
    } else if (activeProduct) {
      setSelectedProductData({
        ...activeProduct,
        containers: [...(activeProduct.containers || []), newContainer],
      });
    }

// Выбираем новую фасовку
    setSelectedContainer(newContainer.id);
  };

const handleDeleteUnmatched = () => {
    if (onDeleteUnmatched && rawName.trim()) {
      onDeleteUnmatched(rawName);
      setRawName("");
    }
  };

// Кнопка "Сбросить" вызывает внешний обработчик отмены редактирования
  const handleCancel = () => {
    if (onCancelEdit) {
      onCancelEdit();
    }
  };

return (
    <Card
      title={
        initialValues ? "✏️ Редактирование связи" : "➕ Добавить новую связь"
      }
      size="small"
      style={{
        marginBottom: 16,
        borderColor: initialValues ? "#1890ff" : undefined, // Подсветка при редактировании
        background: initialValues ? "#f0f5ff" : undefined,
      }}
    >
      <Flex vertical gap="middle">
        {/* Поле: Текст из чека */}
        <div>
          <div style={{ marginBottom: 4, fontSize: 12, color: "#888" }}>
            Текст из чека (Raw Name):
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <AutoComplete
              options={unmatchedOptions}
              value={rawName}
              onChange={setRawName}
              filterOption={(inputValue, option) =>
                !inputValue ||
                (option?.value as string)
                  .toLowerCase()
                  .includes(inputValue.toLowerCase())
              }
              style={{ flex: 1 }}
            >
              <Input.TextArea
                placeholder="Например: Масло слив. коробка"
                autoSize={{ minRows: 1, maxRows: 4 }}
              />
            </AutoComplete>
            {onDeleteUnmatched && !initialValues && (
              <Popconfirm
                title="Удалить строку?"
                description="Удалить из списка нераспознанных?"
                onConfirm={handleDeleteUnmatched}
                okText="Да"
                cancelText="Нет"
              >
                <Button
                  danger
                  icon={<DeleteOutlined />}
                  disabled={!rawName.trim()}
                  title="Удалить мусорную строку"
                />
              </Popconfirm>
            )}
          </div>
        </div>

{/* Поле: Товар */}
        <div>
          <div style={{ marginBottom: 4, fontSize: 12, color: "#888" }}>
            Товар в iiko:
          </div>
          <CatalogSelect
            value={selectedProduct || null}
            onChange={handleProductChange}
            disabled={isLoading}
            initialProduct={activeProduct} // Передаем полный объект для правильного отображения!
          />
        </div>

{/* Поле: Фасовка */}
        {activeProduct && (
          <div>
            <div style={{ marginBottom: 4, fontSize: 12, color: "#888" }}>
              Единица измерения / Фасовка:
            </div>
            <Select
              style={{ width: "100%" }}
              value={selectedContainer}
              onChange={setSelectedContainer}
              placeholder="Выберите ед. измерения"
              options={[
                { value: null, label: `Базовая единица (${baseUom})` },
                ...containers.map((c) => ({
                  value: c.id,
                  label: `${c.name} (=${Number(c.count)} ${baseUom})`,
                })),
              ]}
              dropdownRender={(menu) => (
                <>
                  {menu}
                  <Divider style={{ margin: "4px 0" }} />
                  <Button
                    type="text"
                    block
                    icon={<PlusOutlined />}
                    onClick={() => setIsModalOpen(true)}
                    style={{ textAlign: "left" }}
                  >
                    Добавить фасовку
                  </Button>
                </>
              )}
            />
          </div>
        )}

{/* Поле: Количество */}
        <div>
          <div style={{ marginBottom: 4, fontSize: 12, color: "#888" }}>
            Коэффициент (сколько товара в одной позиции чека):
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <InputNumber
              min={0.001}
              step={selectedContainer ? 1 : 0.1}
              value={quantity}
              onChange={(val) => setQuantity(Number(val))}
              style={{ flex: 1 }}
              placeholder="1"
            />
            <Text strong>{currentUomName}</Text>
          </div>
        </div>

{/* Кнопки действий */}
        <div style={{ display: "flex", gap: 8, marginTop: 4 }}>
          <Button
            type="primary"
            icon={initialValues ? <EditOutlined /> : <PlusOutlined />}
            onClick={handleSubmit}
            loading={isLoading}
            disabled={isButtonDisabled}
            block
          >
            {initialValues ? "Сохранить изменения" : "Добавить связь"}
          </Button>

{initialValues && (
            <Button
              onClick={handleCancel}
              icon={<CloseOutlined />}
              title="Отменить редактирование"
            >
              Отмена
            </Button>
          )}
        </div>
      </Flex>

{/* Модалка создания фасовки */}
      {activeProduct && (
        <CreateContainerModal
          visible={isModalOpen}
          onCancel={() => setIsModalOpen(false)}
          productId={activeProduct.id}
          productBaseUnit={baseUom}
          onSuccess={handleContainerCreated}
        />
      )}
    </Card>
  );
};

```

# ===================================================================
# Файл: src/shared/features/ocr/CatalogSelect.tsx
# ===================================================================

```
import React, { useState, useEffect, useRef } from "react";
import { Select, Spin } from "antd";
import { api } from "../../api";
import type { CatalogItem, ProductSearchResult } from "../../types";

interface Props {
  value: string | null;
  onChange: (value: string | null, productObj?: ProductSearchResult) => void;
  disabled?: boolean;
  initialProduct?: CatalogItem | ProductSearchResult;
}

// Интерфейс для элемента выпадающего списка
interface SelectOption {
  label: string;
  value: string;
  data: ProductSearchResult;
}

export const CatalogSelect: React.FC<Props> = ({
  value,
  onChange,
  disabled,
  initialProduct,
}) => {
  const [options, setOptions] = useState<SelectOption[]>([]);
  const [fetching, setFetching] = useState(false);
  const [notFound, setNotFound] = useState(false);

const fetchRef = useRef<number | null>(null);

useEffect(() => {
    if (initialProduct && initialProduct.id === value) {
      const name = initialProduct.name;
      const code = initialProduct.code;
      setOptions([
        {
          label: code ? `${name} [${code}]` : name,
          value: initialProduct.id,
          data: initialProduct as ProductSearchResult,
        },
      ]);
    }
  }, [initialProduct, value]);

const handleChange = (
    val: string | undefined,
    option: SelectOption | SelectOption[] | undefined
  ) => {
    if (onChange) {
      const opt = Array.isArray(option) ? option[0] : option;
      onChange(val ?? null, opt?.data);
    }
  };

return (
    <Select
      showSearch
      placeholder="Начните вводить название товара..."
      filterOption={false}
      onSearch={handleSearch}
      notFoundContent={
        fetching ? (
          <Spin size="small" />
        ) : notFound ? (
          <div style={{ padding: "8px", color: "#999" }}>Товар не найден</div>
        ) : null
      }
      options={options}
      value={value || undefined}
      onChange={handleChange}
      disabled={disabled}
      style={{ width: "100%" }}
      listHeight={256}
      allowClear
      // При очистке сбрасываем опции и notFound, чтобы при следующем клике не вылезал старый товар
      onClear={() => {
        setOptions([]);
        setNotFound(false);
        onChange(null);
      }}
      // При клике (фокусе), если поле пустое - можно показать дефолтные опции или оставить пустым
      onFocus={() => {
        if (!value) setOptions([]);
      }}
    />
  );
};

```

# ===================================================================
# Файл: src/shared/features/ocr/MatchList.tsx
# ===================================================================

```
import React from "react";
import { List, Typography, Tag, Input, Empty, Button, Popconfirm } from "antd";
import {
  ArrowRightOutlined,
  SearchOutlined,
  DeleteOutlined,
  EditOutlined,
} from "@ant-design/icons";
import type { ProductMatch } from "../../types";

const { Text } = Typography;

interface Props {
  matches: ProductMatch[];
  onDeleteMatch?: (rawName: string) => void;
  onEditMatch?: (match: ProductMatch) => void;
  isDeleting?: boolean;
}

export const MatchList: React.FC<Props> = ({
  matches,
  onDeleteMatch,
  onEditMatch,
  isDeleting = false,
}) => {
  const [searchText, setSearchText] = React.useState("");

const filteredData = matches.filter((item) => {
    const raw = (item.raw_name || "").toLowerCase();
    const prod = item.product;
    const prodName = (prod?.name || "").toLowerCase();
    const search = searchText.toLowerCase();
    return raw.includes(search) || prodName.includes(search);
  });

return (
    <div>
      <Input
        placeholder="Поиск по связям..."
        prefix={<SearchOutlined style={{ color: "#ccc" }} />}
        style={{ marginBottom: 12 }}
        value={searchText}
        onChange={(e) => setSearchText(e.target.value)}
        allowClear
      />

<List
        itemLayout="vertical"
        dataSource={filteredData}
        locale={{ emptyText: <Empty description="Нет данных" /> }}
        pagination={{ pageSize: 10, size: "small", simple: true }}
        renderItem={(item) => {
          // Унификация полей (только snake_case)
          const rawName = item.raw_name || "Без названия";
          const product = item.product;
          const productName = product?.name || "Товар не найден";
          const qty = item.quantity || 1;

// Логика отображения Единицы или Фасовки
          const container = item.container;
          let displayUnit = "";

if (container) {
            // Если есть фасовка: "Пачка 180г"
            displayUnit = container.name;
          } else {
            // Иначе базовая ед.: "кг"
            displayUnit = product?.measure_unit || "ед.";
          }

return (
            <List.Item
              style={{
                background: "#fff",
                padding: 12,
                marginBottom: 8,
                borderRadius: 8,
                display: "flex",
                flexDirection: "column",
              }}
            >
              <div style={{ flex: 1 }}>
                <div style={{ marginBottom: 4 }}>
                  <Tag color="geekblue">Чек</Tag>
                  <Text strong>{rawName}</Text>
                </div>
                <div
                  style={{
                    display: "flex",
                    alignItems: "center",
                    gap: 8,
                    color: "#888",
                  }}
                >
                  <ArrowRightOutlined />
                  <Text>
                    {productName}
                    <Text strong style={{ color: "#555", marginLeft: 6 }}>
                      x {qty} {displayUnit}
                    </Text>
                  </Text>
                </div>
              </div>
              {(onDeleteMatch || onEditMatch) && (
                <div
                  style={{ display: "flex", justifyContent: "space-between" }}
                >
                  {onEditMatch && (
                    <Button
                      type="text"
                      icon={<EditOutlined />}
                      onClick={() => onEditMatch(item)}
                      size="small"
                    >
                      Редактировать
                    </Button>
                  )}
                  {onDeleteMatch && (
                    <Popconfirm
                      title="Удалить связь?"
                      description="Это действие нельзя отменить"
                      onConfirm={() => onDeleteMatch(rawName)}
                      okText="Да"
                      cancelText="Нет"
                    >
                      <Button
                        type="text"
                        danger
                        icon={<DeleteOutlined />}
                        loading={isDeleting}
                        size="small"
                      >
                        Удалить
                      </Button>
                    </Popconfirm>
                  )}
                </div>
              )}
            </List.Item>
          );
        }}
      />
    </div>
  );
};

```

# ===================================================================
# Файл: src/shared/hooks/useOcr.ts
# ===================================================================

```
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { api } from '../api';
import type { MatchRequest, ProductMatch, CatalogItem, UnmatchedItem } from '../types';
import { message } from 'antd';

export const useOcr = () => {
  const queryClient = useQueryClient();

const catalogQuery = useQuery<CatalogItem[], Error>({
    queryKey: ['catalog'],
    queryFn: api.getCatalogItems,
    staleTime: 1000 * 60 * 5, 
  });

const matchesQuery = useQuery<ProductMatch[], Error>({
    queryKey: ['matches'],
    queryFn: api.getMatches,
  });

const unmatchedQuery = useQuery<UnmatchedItem[], Error>({
    queryKey: ['unmatched'],
    queryFn: api.getUnmatched,
    staleTime: 0, 
  });

return {
    catalog: catalogQuery.data || [],
    matches: matchesQuery.data || [],
    unmatched: unmatchedQuery.data || [],
    isLoading: catalogQuery.isPending || matchesQuery.isPending,
    isError: catalogQuery.isError || matchesQuery.isError,
    createMatch: createMatchMutation.mutate,
    isCreating: createMatchMutation.isPending,
    deleteMatch: deleteMatchMutation.mutate,
    isDeletingMatch: deleteMatchMutation.isPending,
    deleteUnmatched: deleteUnmatchedMutation.mutate,
    isDeletingUnmatched: deleteUnmatchedMutation.isPending,
  };
};
```

# ===================================================================
# Файл: src/shared/hooks/usePlatform.ts
# ===================================================================

```
import { useMemo } from 'react';

export type Platform = 'MobileApp' | 'Desktop' | 'MobileBrowser';

/**
 * Хук для определения текущей платформы
 * MobileApp - если есть специфические признаки мобильного приложения
 * Desktop - если это десктопный браузер
 * MobileBrowser - если это мобильный браузер
 */
export const usePlatform = (): Platform => {
  return useMemo(() => {
    const userAgent = navigator.userAgent;

// Проверка на мобильное приложение (специфические признаки)
    // Можно добавить дополнительные проверки для конкретных приложений
    const isMobileApp = /rmser-app|mobile-app|cordova|phonegap/i.test(userAgent);

if (isMobileApp) {
      return 'MobileApp';
    }

if (isMobileBrowser) {
      return 'MobileBrowser';
    }

// По умолчанию - десктоп
    return 'Desktop';
  }, []);
};

```

# ===================================================================
# Файл: src/shared/hooks/useRecommendations.ts
# ===================================================================

```
import { useQuery } from '@tanstack/react-query';
import { api } from '../api';
import type { Recommendation } from '../types';

export const useRecommendations = () => {
  return useQuery<Recommendation[], Error>({
    queryKey: ['recommendations'],
    queryFn: api.getRecommendations,
    // Обновлять данные каждые 30 секунд, если вкладка активна
    refetchInterval: 30000, 
  });
};
```

# ===================================================================
# Файл: src/shared/hooks/useUserRole.ts
# ===================================================================

```
import { useEffect, useState, useCallback } from 'react';
import { api } from '../api';
import type { UserSettings, UserRole } from '../types';

interface UseUserRoleResult {
  /** Роль текущего пользователя или null если не загружено */
  role: UserRole | null;
  /** Полные настройки пользователя */
  settings: UserSettings | null;
  /** Состояние загрузки */
  loading: boolean;
  /** Ошибка загрузки */
  error: string | null;
  /** Функция для повторной загрузки настроек */
  refetch: () => Promise<void>;
  /** Является ли пользователь оператором */
  isOperator: boolean;
  /** Является ли пользователь админом или владельцем */
  isAdminOrOwner: boolean;
}

/**
 * Хук для получения роли пользователя и настроек.
 * Автоматически загружает настройки при монтировании компонента.
 */
export const useUserRole = (): UseUserRoleResult => {
  const [settings, setSettings] = useState<UserSettings | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

// Загружаем настройки при монтировании
  useEffect(() => {
    fetchSettings();
  }, [fetchSettings]);

const role = settings?.role ?? null;
  const isOperator = role === 'OPERATOR';
  const isAdminOrOwner = role === 'ADMIN' || role === 'OWNER';

return {
    role,
    settings,
    loading,
    error,
    refetch: fetchSettings,
    isOperator,
    isAdminOrOwner,
  };
};

```

# ===================================================================
# Файл: src/shared/hooks/useWebSocket.ts
# ===================================================================

```
import { useEffect, useState, useRef, useCallback } from 'react';

const apiUrl = import.meta.env.VITE_API_URL || '';

// Определяем базовый URL для WS (меняем http->ws, https->wss)
const getWsUrl = () => {
  let baseUrl = apiUrl;
  if (baseUrl.startsWith('/')) {
    baseUrl = window.location.origin;
  } else if (!baseUrl) {
    baseUrl = 'http://localhost:8080';
  }
  
  // Заменяем протокол
  const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
  const host = baseUrl.replace(/^http(s)?:\/\//, '');
  // Важно: путь /socket.io/ оставлен для совместимости с Nginx конфигом
  return `${protocol}//${host}/socket.io/`;
};

interface WsEvent {
  event: string;
  data: unknown;
}

interface UseWebSocketParams {
  autoReconnect?: boolean;
  onDisconnect?: () => void;
}

export const useWebSocket = (sessionId: string | null, params: UseWebSocketParams = {}) => {
  const { autoReconnect = false, onDisconnect } = params;
  const [isConnected, setIsConnected] = useState(false);
  const [lastError, setLastError] = useState<string | null>(null);
  const [lastMessage, setLastMessage] = useState<WsEvent | null>(null);
  
  const wsRef = useRef<WebSocket | null>(null);
  const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const reconnectAttemptsRef = useRef(0);
  const currentSessionIdRef = useRef<string | null>(null);
  
  // Используем ref для хранения функции reconnect, чтобы она могла вызывать сама себя
  const reconnectRef = useRef<(() => void) | null>(null);
  
  // Функция для переподключения WebSocket
  const reconnect = useCallback(() => {
    if (!currentSessionIdRef.current) return;
    
    const delay = Math.min(1000 + reconnectAttemptsRef.current * 1000, 5000);
    reconnectAttemptsRef.current++;
    
    console.log(`🔄 WS Reconnect attempt ${reconnectAttemptsRef.current} in ${delay}ms`);
    
    if (reconnectTimeoutRef.current) {
      clearTimeout(reconnectTimeoutRef.current);
    }
    
    reconnectTimeoutRef.current = setTimeout(() => {
      const url = `${getWsUrl()}?session_id=${currentSessionIdRef.current}`;
      console.log('🔌 Reconnecting WS:', url);
      
      const ws = new WebSocket(url);
      wsRef.current = ws;
      
      ws.onopen = () => {
        console.log('✅ WS Reconnected');
        setIsConnected(true);
        setLastError(null);
        reconnectAttemptsRef.current = 0;
      };
      
      ws.onclose = () => {
        // Используем ref для вызова reconnect
        reconnectRef.current?.();
      };
      
      ws.onerror = (error) => {
        console.error('❌ WS Error', error);
        setLastError('Connection error');
        setIsConnected(false);
      };
      
      ws.onmessage = (event) => {
        try {
          const parsed = JSON.parse(event.data);
          console.log('📨 WS Message:', parsed);
          setLastMessage(parsed);
        } catch {
          console.error('Failed to parse WS message', event.data);
        }
      };
    }, delay);
  }, []);
  
  const handleDisconnect = useCallback(() => {
    if (onDisconnect) {
      onDisconnect();
    }
    
    if (autoReconnect) {
      reconnect();
    }
  }, [onDisconnect, reconnect, autoReconnect]);
  
  useEffect(() => {
    // Сохраняем reconnect в ref после его создания
    reconnectRef.current = reconnect;
  }, [reconnect]);
  
  useEffect(() => {
    if (!sessionId) return;
    
    currentSessionIdRef.current = sessionId;
    reconnectAttemptsRef.current = 0;
    
    const url = `${getWsUrl()}?session_id=${sessionId}`;
    console.log('🔌 Connecting WS:', url);

const ws = new WebSocket(url);
    wsRef.current = ws;

ws.onopen = () => {
      console.log('✅ WS Connected');
      setIsConnected(true);
      setLastError(null);
    };

ws.onclose = (event) => {
      console.log('⚠️ WS Closed', event.code, event.reason);
      setIsConnected(false);
      handleDisconnect();
    };

ws.onerror = (error) => {
      console.error('❌ WS Error', error);
      setLastError('Connection error');
      setIsConnected(false);
    };

ws.onmessage = (event) => {
      try {
        const parsed = JSON.parse(event.data);
        console.log('📨 WS Message:', parsed);
        setLastMessage(parsed);
      } catch {
        console.error('Failed to parse WS message', event.data);
      }
    };

return () => {
      console.log('🧹 WS Cleanup');
      if (reconnectTimeoutRef.current) {
        clearTimeout(reconnectTimeoutRef.current);
        reconnectTimeoutRef.current = null;
      }
      ws.close();
    };
  }, [sessionId, handleDisconnect]);
  
  return { isConnected, lastError, lastMessage };
};

```

# ===================================================================
# Файл: src/shared/stores/activeDraftStore.ts
# ===================================================================

```
import { create } from 'zustand';
import { immer } from 'zustand/middleware/immer';
import type { DraftItem } from '../types';
import { recalculateItem } from '../utils/calculations';

/**
 * Интерфейс хранилища активного черновика
 * 
 * Управляет локальным состоянием элементов черновика накладной.
 * Отслеживает изменения через флаг isDirty.
 */
interface ActiveDraftStore {
  /** Массив элементов черновика */
  items: DraftItem[];
  
  /** Флаг, указывающий на наличие несохраненных изменений */
  isDirty: boolean;
  
  /**
   * Заменяет весь массив элементов черновика
   *
   * @param items - Новый массив элементов
   */
  setItems: (items: DraftItem[]) => void;
  
  /**
   * Обновляет элемент черновика по идентификатору
   *
   * При изменении числовых полей (quantity, price, sum) автоматически
   * пересчитывает зависимые значения с помощью recalculateItem.
   *
   * @param id - Идентификатор элемента для обновления
   * @param changes - Частичные изменения элемента
   *
   * @remarks
   * Если меняется product_id, quantity и price НЕ сбрасываются в 0.
   * При изменении любого поля устанавливает isDirty = true.
   */
  updateItem: (id: string, changes: Partial<DraftItem>) => void;
  
  /**
   * Удаляет элемент черновика по идентификатору
   *
   * @param id - Идентификатор элемента для удаления
   */
  deleteItem: (id: string) => void;
  
  /**
   * Добавляет новый элемент в черновик
   *
   * @param item - Новый элемент для добавления
   */
  addItem: (item: DraftItem) => void;
  
  /**
   * Перемещает элемент с одной позиции на другую
   *
   * @param startIndex - Исходная позиция элемента
   * @param endIndex - Новая позиция элемента
   */
  reorderItems: (startIndex: number, endIndex: number) => void;
  
  /**
   * Сбрасывает флаг isDirty в false
   * Используется после успешного сохранения изменений на сервер
   */
  resetDirty: () => void;
  
  /**
   * Устанавливает флаг isDirty в true
   * Используется для пометки черновика как измененного
   */
  markAsDirty: () => void;
}

/**
 * Zustand стор для управления состоянием активного черновика
 * 
 * Использует immer middleware для иммутабельных обновлений состояния.
 * Все изменения элементов автоматически устанавливают флаг isDirty = true,
 * кроме метода setItems, который сбрасывает флаг в false.
 */
export const useActiveDraftStore = create<ActiveDraftStore>()(
  immer((set) => ({
    // Начальное состояние
    items: [],
    isDirty: false,
    
    /**
     * Заменяет весь массив элементов черновика
     * Сбрасывает флаг isDirty в false
     */
    setItems: (items: DraftItem[]) =>
      set((state) => {
        state.items = items;
        state.isDirty = false;
      }),
    
    /**
     * Обновляет элемент черновика по идентификатору
     * 
     * Логика:
     * 1. Находит элемент по id
     * 2. Если меняются числовые поля (quantity, price, sum), использует recalculateItem
     * 3. Устанавливает isDirty = true
     * 4. При изменении product_id НЕ сбрасывает quantity и price
     */
    updateItem: (id: string, changes: Partial<DraftItem>) =>
      set((state) => {
        const itemIndex = state.items.findIndex((item: DraftItem) => item.id === id);
        
        if (itemIndex === -1) {
          return;
        }
        
        const item = state.items[itemIndex];
        
        // Проверяем, изменились ли числовые поля
        const numericFields: Array<keyof DraftItem> = ['quantity', 'price', 'sum'];
        const changedNumericField = numericFields.find(
          (field) => 
            changes[field] !== undefined && 
            changes[field] !== item[field]
        );
        
        if (changedNumericField) {
          // Используем recalculateItem для пересчета зависимых полей
          const newValue = changes[changedNumericField] as number;
          const recalculated = recalculateItem(
            item,
            changedNumericField as 'quantity' | 'price' | 'sum',
            newValue
          );
          
          // Применяем пересчитанные значения и остальные изменения
          state.items[itemIndex] = {
            ...recalculated,
            ...changes,
          };
        } else {
          // Просто применяем изменения без пересчета
          state.items[itemIndex] = {
            ...item,
            ...changes,
          };
        }
        
        state.isDirty = true;
      }),
    
    /**
     * Удаляет элемент черновика по идентификатору
     * Устанавливает isDirty = true
     */
    deleteItem: (id: string) =>
      set((state) => {
        state.items = state.items.filter((item: DraftItem) => item.id !== id);
        state.isDirty = true;
      }),
    
    /**
     * Добавляет новый элемент в черновик
     * Устанавливает isDirty = true
     */
    addItem: (item: DraftItem) =>
      set((state) => {
        state.items.push(item);
        state.isDirty = true;
      }),
    
    /**
     * Перемещает элемент с позиции startIndex на endIndex
     * Устанавливает isDirty = true
     */
    reorderItems: (startIndex: number, endIndex: number) =>
      set((state) => {
        const [removed] = state.items.splice(startIndex, 1);
        state.items.splice(endIndex, 0, removed);
        state.isDirty = true;
      }),
    
    /**
     * Сбрасывает флаг isDirty в false
     * Используется после успешного сохранения изменений на сервер
     */
    resetDirty: () =>
      set((state) => {
        state.isDirty = false;
      }),
    
    /**
     * Устанавливает флаг isDirty в true
     * Используется для пометки черновика как измененного
     */
    markAsDirty: () =>
      set((state) => {
        state.isDirty = true;
      }),
  }))
);

```

# ===================================================================
# Файл: src/shared/stores/authStore.ts
# ===================================================================

```
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

interface User {
  id: string;
  username: string;
  email?: string;
  role?: string;
}

interface AuthState {
  token: string | null;
  isAuthenticated: boolean;
  user: User | null;
  setToken: (token: string) => void;
  setUser: (user: User) => void;
  logout: () => void;
}

/**
 * Хранилище состояния авторизации
 * Сохраняет токен и данные пользователя в localStorage
 */
export const useAuthStore = create<AuthState>()(
  persist(
    (set) => ({
      token: null,
      isAuthenticated: false,
      user: null,

setToken: (token: string) => {
        set({ token, isAuthenticated: true });
      },

setUser: (user: User) => {
        set({ user });
      },

logout: () => {
        set({ token: null, isAuthenticated: false, user: null });
      },
    }),
    {
      name: 'auth-storage',
      partialize: (state) => ({
        token: state.token,
        isAuthenticated: state.isAuthenticated,
        user: state.user,
      }),
    }
  )
);

```

# ===================================================================
# Файл: src/shared/stores/serverStore.ts
# ===================================================================

```
import { create } from 'zustand';
import type { ServerShort } from '../types';
import { api } from '../api';

interface ServerState {
  servers: ServerShort[];
  activeServer: ServerShort | null;
  isLoading: boolean;
  error: string | null;
  fetchServers: () => Promise<void>;
  setActiveServer: (id: string) => Promise<void>;
}

/**
 * Хранилище состояния серверов
 * Управляет списком доступных серверов и текущим активным сервером
 */
export const useServerStore = create<ServerState>((set, get) => ({
  servers: [],
  activeServer: null,
  isLoading: false,
  error: null,

fetchServers: async () => {
    set({ isLoading: true, error: null });
    try {
      const servers = await api.getUserServers();
      const activeServer = servers.find(s => s.is_active) || null;
      set({ servers, activeServer, isLoading: false });
    } catch (error) {
      console.error('Ошибка при загрузке списка серверов:', error);
      set({ 
        error: error instanceof Error ? error.message : 'Не удалось загрузить список серверов',
        isLoading: false 
      });
    }
  },

setActiveServer: async (id: string) => {
    set({ isLoading: true, error: null });
    try {
      await api.switchServer(id);
      // После успешного переключения перезагружаем список серверов
      // чтобы обновить флаг is_active
      await get().fetchServers();
    } catch (error) {
      console.error('Ошибка при переключении сервера:', error);
      set({ 
        error: error instanceof Error ? error.message : 'Не удалось переключить сервер',
        isLoading: false 
      });
    }
  },
}));

```

# ===================================================================
# Файл: src/shared/stores/uiStore.ts
# ===================================================================

```
import { create } from 'zustand';

interface UIState {
  // Выбранный сервер (заглушка для будущего функционала)
  selectedServer: string | null;
  sidebarCollapsed: boolean;
  setSelectedServer: (server: string | null) => void;
  toggleSidebar: () => void;
  setSidebarCollapsed: (collapsed: boolean) => void;
}

/**
 * Хранилище UI состояния десктопной версии
 */
export const useUIStore = create<UIState>((set) => ({
  selectedServer: null,
  sidebarCollapsed: false,

setSelectedServer: (server: string | null) => {
    set({ selectedServer: server });
  },

toggleSidebar: () => {
    set((state) => ({ sidebarCollapsed: !state.sidebarCollapsed }));
  },

setSidebarCollapsed: (collapsed: boolean) => {
    set({ sidebarCollapsed: collapsed });
  },
}));

```

# ===================================================================
# Файл: src/shared/types/index.ts
# ===================================================================

```
// --- Общие типы ---

export type UUID = string;

// Добавляем типы ролей
export type UserRole = 'OWNER' | 'ADMIN' | 'OPERATOR';

// Краткая информация о сервере
export interface ServerShort {
  id: string;
  name: string;
  role: UserRole;
  is_active: boolean;
}

// Интерфейс пользователя сервера
export interface ServerUser {
  user_id: string;
  username: string;     // @username или пустая строка
  first_name: string;
  last_name: string;
  photo_url: string;    // URL картинки или пустая строка
  role: UserRole;
  is_me: boolean;       // Флаг, является ли этот юзер текущим пользователем
}

// --- Каталог и Фасовки (API v2.0) ---

export interface ProductContainer {
  id: UUID;
  name: string;   // "Пачка 180г"
  count: number;  // 0.180
}

// Запрос на создание фасовки
export interface AddContainerRequest {
  product_id: UUID;
  name: string;       // "Бутылка 0.75"
  count: number;      // 0.75
}

// Ответ на создание фасовки
export interface AddContainerResponse {
  status: string;
  container_id: UUID;
}

// Результат поиска товара
export interface ProductSearchResult {
  id: UUID;
  name: string;
  code: string;
  num?: string;
  
  // Обновляем структуру единицы измерения
  main_unit?: MainUnit;
  measure_unit?: string; // Оставим для совместимости, но брать будем из main_unit.name

containers: ProductContainer[];
}

// Совместимость с CatalogItem (чтобы не ломать старый код, если он где-то используется)
export interface CatalogItem extends ProductSearchResult {
  // Fallback поля
  ID?: UUID;
  Name?: string;
  Code?: string;
  MeasureUnit?: string;
  Containers?: ProductContainer[];
}

// --- Матчинг (Обучение) ---

export interface MatchRequest {
  raw_name: string;
  product_id: UUID;
  quantity: number;
  container_id?: UUID;
}

export interface ProductMatch {
  raw_name: string;
  product_id: UUID;
  product?: CatalogItem;
  quantity: number;
  container_id?: UUID;
  container?: ProductContainer;
  updated_at: string;
}

// --- Нераспознанное ---

export interface UnmatchedItem {
  raw_name: string;
  count: number;
  last_seen: string;
}

// --- Остальные типы ---

export interface Recommendation {
  ID: UUID;
  Type: string;
  ProductID: UUID;
  ProductName: string;
  Reason: string;
  CreatedAt: string;
}

export interface InvoiceItemRequest {
  product_id: UUID;
  amount: number;
  price: number;
}

export interface CreateInvoiceRequest {
  document_number: string;
  date_incoming: string;
  supplier_id: UUID;
  store_id: UUID;
  items: InvoiceItemRequest[];
}

export interface InvoiceResponse {
  status: string;
  created_number: string;
}

export interface HealthResponse {
  status: string;
  time: string;
}

// --- Справочники ---

export interface Store {
  id: UUID;
  name: string;
}

export interface Supplier {
  id: UUID;
  name: string;
}

export interface DictionariesResponse {
  stores: Store[];
  suppliers: Supplier[];
  // product_groups?: ProductGroup[]; // пока не реализовано
}

// --- Настройки и Статистика ---

export interface UserSettings {
  root_group_id: UUID | null;
  default_store_id: UUID | null;
  auto_conduct: boolean;
  role: UserRole; // Добавляем поле роли в настройки текущего пользователя
  last_sync_at: string | null; // Время последней синхронизации с iiko
  last_activity_at: string | null; // Время последней активности
  sync_interval: number; // Интервал синхронизации в минутах
}

export interface InvoiceStats {
  last_month: number;
  last_24h: number;
  total: number;
}

// Интерфейс группы товаров (рекурсивный)
export interface ProductGroup {
  key: string;
  value: string;
  title: string;
  children?: ProductGroup[];
}

// --- Черновик Накладной (Draft) ---

export interface DraftItem {
  id: UUID;
  
  // Данные из OCR (Read-only)
  raw_name: string;
  raw_amount: number;
  raw_price: number;

// Редактируемые данные
  product_id: UUID | null;
  container_id: UUID | null; // Фасовка
  quantity: number;
  price: number;
  sum: number;

// Мета-данные
  is_matched: boolean;
  product?: CatalogItem | null;
  container?: ProductContainer;
  
  // Поля для синхронизации состояния (опционально, если бэкенд их отдает)
  last_edited_field_1?: string;
  last_edited_field_2?: string;
}

// --- Список Черновиков (Summary) ---
export interface DraftSummary {
  id: UUID;
  document_number: string;
  date_incoming: string;
  status: DraftStatus; // Используем существующий тип статуса
  items_count: number;
  total_sum: number;
  store_name?: string;
  created_at: string;
}

export interface DraftInvoice {
  id: UUID;
  status: DraftStatus;
  document_number: string;
  incoming_document_number?: string
  date_incoming: string | null; // YYYY-MM-DD
  store_id: UUID | null;
  supplier_id: UUID | null;
  comment: string;
  items: DraftItem[];
  created_at?: string;
  photo_url?: string; // Добавлено поле фото чека
}

// DTO для обновления строки
export interface UpdateDraftItemRequest {
  id?: UUID; // ID элемента для идентификации при пакетном обновлении
  product_id?: UUID | null;
  container_id?: UUID | null;
  quantity?: number;
  price?: number;
  sum?: number;
  edited_field?: string; // ('quantity' | 'price' | 'sum')
}

// DTO для пакетного обновления черновика (шапка + элементы)
export interface UpdateDraftRequest {
  date_incoming?: string;
  store_id?: UUID;
  supplier_id?: UUID;
  comment?: string;
  incoming_document_number?: string;
  items?: UpdateDraftItemRequest[];
}

// DTO для коммита
export interface CommitDraftRequest {
  date_incoming: string;
  store_id: UUID;
  supplier_id: UUID;
  comment: string;
  incoming_document_number?: string;
  is_processed: boolean;
}

export interface ReorderDraftItemsRequest {
  items: Array<{
    id: UUID;
    order: number;
  }>;
}

export interface MainUnit {
  id: UUID;
  name: string; // "кг"
  code: string;
}

export type InvoiceType = 'DRAFT' | 'SYNCED'; // Тип записи: Черновик или Синхронизировано из iiko

export interface UnifiedInvoice {
  id: UUID;
  type: InvoiceType;         // Новый признак типа
  document_number: string;   // Внутренний номер iiko или ID черновика
  incoming_number: string;   // Входящий номер накладной от поставщика
  date_incoming: string;
  status: DraftStatus;
  items_count: number;
  total_sum: number;
  store_name?: string;
  created_at: string;
  is_app_created: boolean;   // Создано ли через наше приложение
  items_preview: string;     // Краткое содержание товаров
  photo_url: string | null;  // Ссылка на фото чека
  draft_id?: string;         // ID черновика для SYNCED накладных, созданных в приложении
}

export interface InvoiceDetails {
  id: UUID;
  number: string;
  date: string;
  status: DraftStatus;
  supplier: Supplier;
  items: {
    name: string;
    quantity: number;
    price: number;
    total: number;
  }[];
  photo_url: string | null;
}

export type PhotoStatus = 'ORPHAN' | 'HAS_DRAFT' | 'HAS_INVOICE';

export interface ReceiptPhoto {
  id: string;
  rms_server_id: string;
  uploaded_by: string;
  file_url: string;
  file_name: string;
  file_size: number;
  draft_id?: string;
  invoice_id?: string;
  created_at: string;
  status: PhotoStatus;
  can_delete: boolean;
  can_regenerate: boolean;
}

export interface GetPhotosResponse {
  photos: ReceiptPhoto[];
  total: number;
  page: number;
  limit: number;
}
```

# ===================================================================
# Файл: src/shared/ui/DragDropZone.tsx
# ===================================================================

```
import React from 'react';
import { useDropzone } from 'react-dropzone';
import { InboxOutlined } from '@ant-design/icons';
import { Typography } from 'antd';

const { Text } = Typography;

interface DragDropZoneProps {
  onDrop: (files: File[]) => void;
  accept?: Record<string, string[]>;
  maxSize?: number;
  maxFiles?: number;
  disabled?: boolean;
  className?: string;
  children?: React.ReactNode;
}

/**
 * Компонент зоны перетаскивания файлов
 * Обертка над react-dropzone с Ant Design стилизацией
 */
export const DragDropZone: React.FC<DragDropZoneProps> = ({
  onDrop,
  accept = {
    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx'],
    'application/vnd.ms-excel': ['.xls'],
    'image/*': ['.png', '.jpg', '.jpeg', '.gif', '.webp'],
  },
  maxSize = 10 * 1024 * 1024, // 10MB по умолчанию
  maxFiles = 10,
  disabled = false,
  className = '',
  children,
}) => {
  const { getRootProps, getInputProps, isDragActive, isDragReject } = useDropzone({
    onDrop,
    accept,
    maxSize,
    maxFiles,
    disabled,
  });

const getBorderColor = () => {
    if (isDragReject) return '#ff4d4f';
    if (isDragActive) return '#1890ff';
    return '#d9d9d9';
  };

const getBackgroundColor = () => {
    if (isDragActive) return '#e6f7ff';
    if (disabled) return '#f5f5f5';
    return '#fafafa';
  };

return (
    <div
      {...getRootProps()}
      className={className}
      style={{
        border: `2px dashed ${getBorderColor()}`,
        borderRadius: '8px',
        padding: '40px 20px',
        textAlign: 'center',
        cursor: disabled ? 'not-allowed' : 'pointer',
        backgroundColor: getBackgroundColor(),
        transition: 'all 0.3s ease',
      }}
    >
      <input {...getInputProps()} />
      {children || (
        <div>
          <InboxOutlined
            style={{
              fontSize: '48px',
              color: isDragActive ? '#1890ff' : '#bfbfbf',
              marginBottom: '16px',
            }}
          />
          <div>
            {isDragActive ? (
              <Text type="secondary">Отпустите файлы здесь</Text>
            ) : (
              <div>
                <Text>Перетащите файлы сюда или нажмите для выбора</Text>
                <br />
                <Text type="secondary" style={{ fontSize: '12px' }}>
                  Поддерживаются: .xlsx, .xls, изображения (макс. {maxSize / 1024 / 1024}MB)
                </Text>
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
};

```

# ===================================================================
# Файл: src/shared/ui/ExcelPreviewModal.tsx
# ===================================================================

```
import React, { useState, useEffect } from "react";
import { Modal, Button, message } from "antd";
import {
  ZoomInOutlined,
  ZoomOutOutlined,
  UndoOutlined,
} from "@ant-design/icons";
import * as XLSX from "xlsx";
import { apiClient } from "../api";

interface ExcelPreviewModalProps {
  visible: boolean;
  onCancel: () => void;
  fileUrl: string;
}

/**
 * Компонент для предпросмотра Excel файлов
 * Позволяет просматривать содержимое Excel файлов с возможностью масштабирования
 */
const ExcelPreviewModal: React.FC<ExcelPreviewModalProps> = ({
  visible,
  onCancel,
  fileUrl,
}) => {
  // Данные таблицы из Excel файла
  const [data, setData] = useState<
    (string | number | boolean | null | undefined)[][]
  >([]);
  // Масштаб отображения таблицы
  const [scale, setScale] = useState<number>(1);

/**
   * Загрузка и парсинг Excel файла при изменении видимости или URL файла
   */
  useEffect(() => {
    const loadExcelFile = async () => {
      if (!visible || !fileUrl) {
        return;
      }

console.log("ExcelPreviewModal: Start loading", fileUrl);

try {
        // Загрузка файла через apiClient с авторизацией
        const response = await apiClient.get(fileUrl, {
          responseType: "arraybuffer",
        });
        console.log(
          "ExcelPreviewModal: Got response",
          response.status,
          response.data.byteLength
        );
        const arrayBuffer = response.data;

// Чтение Excel файла
        const workbook = XLSX.read(arrayBuffer, { type: "array" });
        console.log("ExcelPreviewModal: Workbook parsed", workbook.SheetNames);

// Получение первого листа
        const firstSheetName = workbook.SheetNames[0];
        const sheet = workbook.Sheets[firstSheetName];

// Преобразование листа в JSON-массив массивов
        const jsonData = XLSX.utils.sheet_to_json(sheet, {
          header: 1,
        }) as (string | number | boolean | null | undefined)[][];

setData(jsonData);
        console.log("ExcelPreviewModal: Data set, rows:", jsonData.length);
        // Сброс масштаба при загрузке нового файла
        setScale(1);
      } catch (error) {
        console.error("ExcelPreviewModal Error:", error);

// Обработка ошибок авторизации (401) обрабатывается в интерсепторе apiClient
        if (error && typeof error === "object" && "response" in error) {
          const axiosError = error as { response?: { status?: number } };
          if (axiosError.response?.status === 401) {
            message.error(
              "Ошибка авторизации. Необходима повторная авторизация."
            );
          } else {
            message.error("Не удалось загрузить Excel файл");
          }
        } else {
          message.error("Не удалось загрузить Excel файл");
        }

setData([]);
      }
    };

loadExcelFile();
  }, [visible, fileUrl]);

/**
   * Увеличение масштаба
   */
  const handleZoomIn = () => {
    setScale((prev) => Math.min(prev + 0.1, 3));
  };

/**
   * Уменьшение масштаба
   */
  const handleZoomOut = () => {
    setScale((prev) => Math.max(prev - 0.1, 0.5));
  };

/**
   * Сброс масштаба до исходного значения
   */
  const handleReset = () => {
    setScale(1);
  };

/**
   * Обработчик закрытия модалки
   */
  const handleCancel = () => {
    setData([]);
    onCancel();
  };

return (
    <Modal
      open={visible}
      onCancel={handleCancel}
      width="90%"
      footer={null}
      title="Предпросмотр Excel"
      style={{ top: 20, zIndex: 10000 }}
    >
      {/* Панель инструментов для управления масштабом */}
      <div style={{ marginBottom: 16, display: "flex", gap: 8 }}>
        <Button
          icon={<ZoomInOutlined />}
          onClick={handleZoomIn}
          disabled={scale >= 3}
        >
          Увеличить (+)
        </Button>
        <Button
          icon={<ZoomOutOutlined />}
          onClick={handleZoomOut}
          disabled={scale <= 0.5}
        >
          Уменьшить (-)
        </Button>
        <Button
          icon={<UndoOutlined />}
          onClick={handleReset}
          disabled={scale === 1}
        >
          Сброс
        </Button>
        <span style={{ marginLeft: "auto", lineHeight: "32px" }}>
          Масштаб: {Math.round(scale * 100)}%
        </span>
      </div>

{/* Контейнер с прокруткой для таблицы */}
      <div
        style={{
          height: 600,
          overflow: "auto",
          border: "1px solid #d9d9d9",
          borderRadius: 4,
        }}
      >
        {/* Таблица с данными Excel */}
        <table
          style={{
            borderCollapse: "collapse",
            transform: `scale(${scale})`,
            transformOrigin: "top left",
            width: "100%",
          }}
        >
          <tbody>
            {data.map((row, rowIndex) => (
              <tr key={rowIndex}>
                {row.map((cell, cellIndex) => (
                  <td
                    key={cellIndex}
                    style={{
                      border: "1px solid #ccc",
                      padding: "8px",
                      minWidth: 100,
                      whiteSpace: "nowrap",
                    }}
                  >
                    {cell !== undefined && cell !== null ? String(cell) : ""}
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </Modal>
  );
};

export default ExcelPreviewModal;

```

# ===================================================================
# Файл: src/shared/utils/calculations.ts
# ===================================================================

```
import type { DraftItem } from '../types';

/**
 * Пересчитывает значения полей элемента черновика на основе измененного поля.
 * 
 * Логика "Треугольник": Q (Quantity) -> P (Price) -> S (Sum) -> Q...
 * Правило: "Пересчитываем значение, следующее за редактируемым. 
 * Оставляем значение, предшествующее редактируемому."
 * 
 * - Если меняем Quantity (Q): Previous=Sum (Keep), Next=Price (Recalc). Price = Sum / Quantity
 * - Если меняем Price (P): Previous=Quantity (Keep), Next=Sum (Recalc). Sum = Quantity * Price
 * - Если меняем Sum (S): Previous=Price (Keep), Next=Quantity (Recalc). Quantity = Sum / Price
 * 
 * @param item - Исходный элемент черновика (содержит "предыдущие/сохраняемые" значения)
 * @param changedField - Измененное поле ('quantity' | 'price' | 'sum')
 * @param newValue - Новое значение измененного поля
 * @returns Новый объект DraftItem с пересчитанными значениями
 * 
 * @example
 * // При изменении количества (пересчитываем цену, сумма сохраняется)
 * const updated = recalculateItem(item, 'quantity', 5);
 * 
 * @example
 * // При изменении суммы (пересчитываем количество, цена сохраняется)
 * const updated = recalculateItem(item, 'sum', 100);
 */
export function recalculateItem(
  item: DraftItem,
  changedField: 'quantity' | 'price' | 'sum',
  newValue: number
): DraftItem {
  switch (changedField) {
    case 'quantity': {
      // Меняем Quantity (Q): Previous=Sum (Keep), Next=Price (Recalc)
      // Price = Sum / Quantity
      // Обрабатываем деление на ноль
      if (newValue === 0) {
        return {
          ...item,
          quantity: newValue,
          price: 0,
        };
      }

const newPrice = item.sum / newValue;
      return {
        ...item,
        quantity: newValue,
        price: newPrice,
      };
    }

case 'price': {
      // Меняем Price (P): Previous=Quantity (Keep), Next=Sum (Recalc)
      // Sum = Quantity * Price
      const newSum = item.quantity * newValue;
      return {
        ...item,
        price: newValue,
        sum: newSum,
      };
    }

case 'sum': {
      // Меняем Sum (S): Previous=Price (Keep), Next=Quantity (Recalc)
      // Quantity = Sum / Price
      // Обрабатываем деление на ноль
      if (item.price === 0) {
        return {
          ...item,
          sum: newValue,
          quantity: 0,
        };
      }

const newQuantity = newValue / item.price;
      return {
        ...item,
        sum: newValue,
        quantity: newQuantity,
      };
    }

default: {
      // Для неизвестных полей возвращаем исходный объект
      return { ...item };
    }
  }
}

```

# ===================================================================
# Файл: src/vite-env.d.ts
# ===================================================================

```
/// <reference types="vite/client" />

interface TelegramWebApp {
  initData: string; // Сырая строка с параметрами и хешем
  initDataUnsafe: {
    user?: {
      id: number;
      first_name: string;
      last_name?: string;
      username?: string;
      language_code?: string;
    };
  };
  close: () => void;
  expand: () => void;
}

interface Window {
  Telegram?: {
    WebApp: TelegramWebApp;
  };
}
```

# ===================================================================
# Файл: tsconfig.app.json
# ===================================================================

```
{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2022",
    "useDefineForClassFields": true,
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "types": ["vite/client"],
    "skipLibCheck": true,

/* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

/* Path aliases */
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },

/* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["src"]
}

```

# ===================================================================
# Файл: tsconfig.json
# ===================================================================

```
{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
}

```

# ===================================================================
# Файл: tsconfig.node.json
# ===================================================================

```
{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "target": "ES2023",
    "lib": ["ES2023"],
    "module": "ESNext",
    "types": ["node"],
    "skipLibCheck": true,

/* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "noEmit": true,

```