RMSer App

{/* Header */}

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

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

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

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

{/* Items List */}
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {draft.items.map((item) => (
          <DraftItemRow
            key={item.id}
            item={item}
            onUpdate={handleItemUpdate}
            // Передаем обработчик удаления
            onDelete={(itemId) => deleteItemMutation.mutate(itemId)}
            isUpdating={updatingItems.has(item.id)}
            recommendations={recommendationsQuery.data || []}
          />
        ))}
      </div>

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

{/* Footer Actions */}
      <Affix offsetBottom={60}>
        <div
          style={{
            background: "#fff",
            padding: "8px 16px",
            borderTop: "1px solid #eee",
            boxShadow: "0 -2px 10px rgba(0,0,0,0.05)",
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            borderRadius: "8px 8px 0 0",
          }}
        >
          <div style={{ display: "flex", flexDirection: "column" }}>
            <span style={{ fontSize: 11, color: "#888", lineHeight: 1 }}>
              Итого:
            </span>
            <span
              style={{
                fontSize: 18,
                fontWeight: "bold",
                color: "#1890ff",
                lineHeight: 1.2,
              }}
            >
              {totalSum.toLocaleString("ru-RU", {
                style: "currency",
                currency: "RUB",
                maximumFractionDigits: 0,
              })}
            </span>
          </div>

<Button
            type="primary"
            icon={<CheckOutlined />}
            onClick={handleCommit}
            loading={commitMutation.isPending}
            disabled={invalidItemsCount > 0 || isCanceled}
            style={{ height: 40, padding: "0 24px" }}
          >
            {isCanceled ? "Восстановить" : "Отправить"}
          </Button>
        </div>
      </Affix>
    </div>
  );
};

```

# ===================================================================
# Файл: src/pages/OcrLearning.tsx
# ===================================================================

```
import React from 'react';
import { Spin, Alert } from 'antd';
import { useOcr } from '../hooks/useOcr';
import { AddMatchForm } from '../components/ocr/AddMatchForm';
import { MatchList } from '../components/ocr/MatchList';

export const OcrLearning: React.FC = () => {
  const { 
    catalog, 
    matches,
    unmatched, 
    isLoading, 
    isError, 
    createMatch, 
    isCreating 
  } = useOcr();

if (isLoading && matches.length === 0) {
    return (
      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh', flexDirection: 'column', gap: 16 }}>
        <Spin size="large" />
        <span style={{ color: '#888' }}>Загрузка справочников...</span>
      </div>
    );
  }

if (isError) {
    return (
      <Alert message="Ошибка" description="Не удалось загрузить данные." type="error" showIcon style={{ margin: 16 }} />
    );
  }

return (
    <div style={{ paddingBottom: 20 }}>
      <AddMatchForm 
        catalog={catalog}
        unmatched={unmatched}
        // Передаем containerId
        onSave={(raw, prodId, qty, contId) => createMatch({ 
          raw_name: raw, 
          product_id: prodId,
          quantity: qty,
          container_id: contId 
        })}
        isLoading={isCreating}
      />

<h3 style={{ marginLeft: 4, marginBottom: 12 }}>Обученные позиции ({matches.length})</h3>
      <MatchList matches={matches} />
    </div>
  );
};
```

# ===================================================================
# Файл: src/pages/SettingsPage.tsx
# ===================================================================

```
import React, { useEffect } from "react";
import {
  Typography,
  Card,
  Form,
  Select,
  Switch,
  Button,
  Row,
  Col,
  Statistic,
  TreeSelect,
  Spin,
  message,
} from "antd";
import {
  SaveOutlined,
  BarChartOutlined,
  SettingOutlined,
  FolderOpenOutlined,
} from "@ant-design/icons";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { api } from "../services/api";
import type { UserSettings } from "../services/types";

const { Title, Text } = Typography;

export const SettingsPage: React.FC = () => {
  const queryClient = useQueryClient();
  const [form] = Form.useForm();

// --- Запросы ---

const settingsQuery = useQuery({
    queryKey: ["settings"],
    queryFn: api.getSettings,
  });

const statsQuery = useQuery({
    queryKey: ["stats"],
    queryFn: api.getStats,
  });

const dictQuery = useQuery({
    queryKey: ["dictionaries"],
    queryFn: api.getDictionaries,
    staleTime: 1000 * 60 * 5,
  });

const groupsQuery = useQuery({
    queryKey: ["productGroups"],
    queryFn: api.getProductGroups,
    staleTime: 1000 * 60 * 10,
  });

// --- Мутации ---

// --- Эффекты ---

useEffect(() => {
    if (settingsQuery.data) {
      form.setFieldsValue(settingsQuery.data);
    }
  }, [settingsQuery.data, form]);

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

const handleSave = async () => {
    try {
      const values = await form.validateFields();
      saveMutation.mutate(values);
    } catch {
      // Ошибки валидации
    }
  };

// --- Рендер ---

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

return (
    <div style={{ padding: "0 16px 80px" }}>
      <Title level={4} style={{ marginTop: 16 }}>
        <SettingOutlined /> Настройки
      </Title>

{/* Статистика */}
      <Card
        size="small"
        style={{
          marginBottom: 16,
          background: "#f0f5ff",
          borderColor: "#d6e4ff",
        }}
      >
        <div
          style={{
            display: "flex",
            alignItems: "center",
            gap: 8,
            marginBottom: 12,
          }}
        >
          <BarChartOutlined style={{ color: "#1890ff" }} />
          <Text strong>Статистика накладных</Text>
        </div>
        <Row gutter={16}>
          <Col span={8}>
            <Statistic
              title="За 24ч"
              value={statsQuery.data?.last_24h || 0}
              valueStyle={{ fontSize: 18 }}
            />
          </Col>
          <Col span={8}>
            <Statistic
              title="Месяц"
              value={statsQuery.data?.last_month || 0}
              valueStyle={{ fontSize: 18 }}
            />
          </Col>
          <Col span={8}>
            <Statistic
              title="Всего"
              value={statsQuery.data?.total || 0}
              valueStyle={{ fontSize: 18 }}
            />
          </Col>
        </Row>
      </Card>

{/* Форма настроек */}
      <Form form={form} layout="vertical">
        <Card
          size="small"
          title="Основные параметры"
          style={{ marginBottom: 16 }}
        >
          <Form.Item
            label="Склад по умолчанию"
            name="default_store_id"
            tooltip="Этот склад будет выбираться автоматически при создании новой накладной"
          >
            <Select
              placeholder="Не выбрано"
              allowClear
              loading={dictQuery.isLoading}
              options={dictQuery.data?.stores.map((s) => ({
                label: s.name,
                value: s.id,
              }))}
            />
          </Form.Item>

<Form.Item
            label="Корневая группа товаров"
            name="root_group_id"
            tooltip="Товары для распознавания будут искаться только внутри этой группы (и её подгрупп)."
          >
            <TreeSelect
              showSearch
              style={{ width: "100%" }}
              dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
              placeholder="Выберите папку"
              allowClear
              treeDefaultExpandAll={false}
              treeData={groupsQuery.data}
              // ИСПРАВЛЕНО: Маппинг полей под структуру JSON (title, value)
              fieldNames={{
                label: "title",
                value: "value",
                children: "children",
              }}
              treeNodeFilterProp="title"
              suffixIcon={<FolderOpenOutlined />}
              loading={groupsQuery.isLoading}
            />
          </Form.Item>

<Form.Item
            name="auto_conduct"
            valuePropName="checked"
            style={{ marginBottom: 0 }}
          >
            <div
              style={{
                display: "flex",
                justifyContent: "space-between",
                alignItems: "center",
              }}
            >
              <div>
                <Text>Проводить накладные автоматически</Text>
                <br />
                <Text type="secondary" style={{ fontSize: 12 }}>
                  Если выключено, накладные в iiko будут создаваться как
                  "Непроведенные"
                </Text>
              </div>
              <Switch />
            </div>
          </Form.Item>
        </Card>

<Button
          type="primary"
          icon={<SaveOutlined />}
          block
          size="large"
          onClick={handleSave}
          loading={saveMutation.isPending}
        >
          Сохранить настройки
        </Button>
      </Form>
    </div>
  );
};

```

# ===================================================================
# Файл: src/services/api.ts
# ===================================================================

```
import axios from 'axios';
import { notification } from 'antd';
import type {
  CatalogItem,
  CreateInvoiceRequest,
  MatchRequest,
  HealthResponse,
  InvoiceResponse,
  ProductMatch,
  Recommendation,
  UnmatchedItem,
  UserSettings,
  InvoiceStats,
  ProductGroup,
  Store,
  Supplier,
  DraftInvoice,
  DraftItem,
  UpdateDraftItemRequest,
  CommitDraftRequest,
  ProductSearchResult,
  AddContainerRequest,
  AddContainerResponse,
  DictionariesResponse,
  DraftSummary
} from './types';

// Базовый URL
const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8080/api';

// Телеграм объект
const tg = window.Telegram?.WebApp;

// Событие для глобальной обработки 401
export const UNAUTHORIZED_EVENT = 'rms_unauthorized';

const apiClient = axios.create({
  baseURL: API_URL,
  headers: {
    'Content-Type': 'application/json',
  },
});

// --- Request Interceptor (Авторизация через initData) ---
apiClient.interceptors.request.use((config) => {
  const initData = tg?.initData;

// Если initData пустая — мы не в Telegram. Блокируем запрос.
  if (!initData) {
    console.error('Запрос заблокирован: приложение запущено вне Telegram.');
    return Promise.reject(new Error('MISSING_TELEGRAM_DATA'));
  }

// Устанавливаем заголовок согласно новым требованиям
  config.headers['Authorization'] = `Bearer ${initData}`;
  
  return config;
});

// --- 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));
    }
    
    // Если запрос был отменен нами (нет initData), не выводим стандартную ошибку API
    if (error.message === 'MISSING_TELEGRAM_DATA') {
      return Promise.reject(error);
    }

console.error('API Error:', error);
    return Promise.reject(error);
  }
);

export const api = {
  checkHealth: async (): Promise<HealthResponse> => {
    const { data } = await apiClient.get<HealthResponse>('/health');
    return data;
  },

getRecommendations: async (): Promise<Recommendation[]> => {
    const { data } = await apiClient.get<Recommendation[]>('/recommendations');
    return data;
  },

getCatalogItems: async (): Promise<CatalogItem[]> => {
    const { data } = await apiClient.get<CatalogItem[]>('/ocr/catalog');
    return data;
  },

searchProducts: async (query: string): Promise<ProductSearchResult[]> => {
    const { data } = await apiClient.get<ProductSearchResult[]>('/ocr/search', {
      params: { q: query }
    });
    return data;
  },

createContainer: async (payload: AddContainerRequest): Promise<AddContainerResponse> => {
    const { data } = await apiClient.post<AddContainerResponse>('/drafts/container', payload);
    return data;
  },

getMatches: async (): Promise<ProductMatch[]> => {
    const { data } = await apiClient.get<ProductMatch[]>('/ocr/matches');
    return data;
  },

getUnmatched: async (): Promise<UnmatchedItem[]> => {
    const { data } = await apiClient.get<UnmatchedItem[]>('/ocr/unmatched');
    return data;
  },

createMatch: async (payload: MatchRequest): Promise<{ status: string }> => {
    const { data } = await apiClient.post<{ status: string }>('/ocr/match', payload);
    return data;
  },

createInvoice: async (payload: CreateInvoiceRequest): Promise<InvoiceResponse> => {
    const { data } = await apiClient.post<InvoiceResponse>('/invoices/send', payload);
    return data;
  },

// --- НОВЫЙ МЕТОД: Получение всех справочников ---
  getDictionaries: async (): Promise<DictionariesResponse> => {
    const { data } = await apiClient.get<DictionariesResponse>('/dictionaries');
    return data;
  },

// Старые методы оставляем для совместимости, но они могут вызывать getDictionaries внутри или deprecated endpoint
  getStores: async (): Promise<Store[]> => {
    // Можно использовать новый эндпоинт и возвращать часть данных
    const { data } = await apiClient.get<DictionariesResponse>('/dictionaries');
    return data.stores;
  },

getSuppliers: async (): Promise<Supplier[]> => {
    // Реальный запрос вместо мока
    const { data } = await apiClient.get<DictionariesResponse>('/dictionaries');
    return data.suppliers;
  },

getDrafts: async (): Promise<DraftSummary[]> => {
    const { data } = await apiClient.get<DraftSummary[]>('/drafts');
    return data;
  },

getDraft: async (id: string): Promise<DraftInvoice> => {
    const { data } = await apiClient.get<DraftInvoice>(`/drafts/${id}`);
    return data;
  },

updateDraftItem: async (draftId: string, itemId: string, payload: UpdateDraftItemRequest): Promise<DraftInvoice> => {
    const { data } = await apiClient.patch<DraftInvoice>(`/drafts/${draftId}/items/${itemId}`, payload);
    return data;
  },

addDraftItem: async (draftId: string): Promise<DraftItem> => {
    const { data } = await apiClient.post<DraftItem>(`/drafts/${draftId}/items`, {});
    return data;
  },

deleteDraftItem: async (draftId: string, itemId: string): Promise<void> => {
    await apiClient.delete(`/drafts/${draftId}/items/${itemId}`);
  },

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<void> => {
    await apiClient.delete(`/drafts/${id}`);
  },
  
  // --- Настройки и Статистика ---

getSettings: async (): Promise<UserSettings> => {
    const { data } = await apiClient.get<UserSettings>('/settings');
    return data;
  },

updateSettings: async (payload: UserSettings): Promise<UserSettings> => {
    const { data } = await apiClient.post<UserSettings>('/settings', payload);
    return data;
  },

getStats: async (): Promise<InvoiceStats> => {
    const { data } = await apiClient.get<InvoiceStats>('/stats/invoices');
    return data;
  },

getProductGroups: async (): Promise<ProductGroup[]> => {
    const { data } = await apiClient.get<ProductGroup[]>('/dictionaries/groups');
    return data;
  },
};
```

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

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

export type UUID = string;

// --- Каталог и Фасовки (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;
}

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

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

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

export type DraftStatus = 'PROCESSING' | 'READY_TO_VERIFY' | 'COMPLETED' | 'ERROR' | 'CANCELED';

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;        // Развернутый объект для UI
  container?: ProductContainer; // Развернутый объект для UI
}

// --- Список Черновиков (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;
  date_incoming: string | null; // YYYY-MM-DD
  store_id: UUID | null;
  supplier_id: UUID | null;
  comment: string;
  items: DraftItem[];
  created_at?: string;
}

// DTO для обновления строки
export interface UpdateDraftItemRequest {
  product_id?: UUID;
  container_id?: UUID | null; // null если сбросили фасовку
  quantity?: number;
  price?: number;
}

// DTO для коммита
export interface CommitDraftRequest {
  date_incoming: string;
  store_id: UUID;
  supplier_id: UUID;
  comment: string;
}
export interface MainUnit {
  id: UUID;
  name: string; // "кг"
  code: string;
}
```

# ===================================================================
# Файл: 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",

/* 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,

```