фикс создания фасовки

rmser-view/src/pages/DraftsList.tsx

@@ -2,11 +2,19 @@
 
 import React, { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
-import { List, Typography, Tag, Spin, Empty, DatePicker, Flex } from "antd";
+import {
+  List,
+  Typography,
+  Tag,
+  Spin,
+  Empty,
+  DatePicker,
+  Flex,
+  Button,
+} from "antd";
 import { useNavigate } from "react-router-dom";
 import {
   ArrowRightOutlined,
-  HistoryOutlined,
   CheckCircleOutlined,
   DeleteOutlined,
   PlusOutlined,
@@ -14,53 +22,56 @@ import {
   LoadingOutlined,
   CloseCircleOutlined,
   StopOutlined,
+  SyncOutlined,
+  CloudServerOutlined,
 } from "@ant-design/icons";
 import dayjs, { Dayjs } from "dayjs";
 import { api } from "../services/api";
 import type { UnifiedInvoice } from "../services/types";
 
 const { Title, Text } = Typography;
-const { RangePicker } = DatePicker;
 
 export const DraftsList: React.FC = () => {
   const navigate = useNavigate();
 
   // Состояние фильтра дат: по умолчанию последние 7 дней
-  const [dateRange, setDateRange] = useState<[Dayjs, Dayjs]>([
-    dayjs().subtract(7, "day"),
-    dayjs(),
-  ]);
+  const [startDate, setStartDate] = useState<Dayjs>(dayjs().subtract(7, "day"));
+  const [endDate, setEndDate] = useState<Dayjs>(dayjs());
+  const [syncLoading, setSyncLoading] = useState(false);
 
   // Запрос данных с учетом дат (даты в ключе обеспечивают авто-перезапрос)
   const {
     data: invoices,
     isLoading,
     isError,
+    refetch,
   } = useQuery({
     queryKey: [
       "drafts",
-      dateRange[0].format("YYYY-MM-DD"),
-      dateRange[1].format("YYYY-MM-DD"),
+      startDate.format("YYYY-MM-DD"),
+      endDate.format("YYYY-MM-DD"),
     ],
     queryFn: () =>
       api.getDrafts(
-        dateRange[0].format("YYYY-MM-DD"),
-        dateRange[1].format("YYYY-MM-DD")
+        startDate.format("YYYY-MM-DD"),
+        endDate.format("YYYY-MM-DD")
       ),
     staleTime: 0,
     refetchOnMount: true,
     refetchOnWindowFocus: true,
   });
 
-  const getStatusTag = (item: UnifiedInvoice) => {
-    if (item.type === "SYNCED") {
-      return (
-        <Tag icon={<HistoryOutlined />} color="success">
-          Синхронизировано
-        </Tag>
-      );
+  const handleSync = async () => {
+    setSyncLoading(true);
+    try {
+      await api.syncInvoices();
+      refetch();
+    } finally {
+      setSyncLoading(false);
     }
+  };
 
+  const getStatusTag = (item: UnifiedInvoice) => {
     switch (item.status) {
       case "PROCESSING":
         return (
@@ -95,19 +106,19 @@ export const DraftsList: React.FC = () => {
       case "NEW":
         return (
           <Tag icon={<PlusOutlined />} color="blue">
-            Новый
+            Новая
           </Tag>
         );
       case "PROCESSED":
         return (
           <Tag icon={<CheckCircleOutlined />} color="green">
-            Обработан
+            Проведена
           </Tag>
         );
       case "DELETED":
         return (
           <Tag icon={<DeleteOutlined />} color="red">
-            Удален
+            Удалена
           </Tag>
         );
       default:
@@ -133,9 +144,16 @@ export const DraftsList: React.FC = () => {
 
   return (
     <div style={{ padding: "0 4px 20px" }}>
-      <Title level={4} style={{ marginTop: 16, marginBottom: 16 }}>
-        Накладные
-      </Title>
+      <Flex align="center" gap={8} style={{ marginTop: 16, marginBottom: 16 }}>
+        <Title level={4} style={{ margin: 0 }}>
+          Накладные
+        </Title>
+        <Button
+          icon={<SyncOutlined />}
+          loading={syncLoading}
+          onClick={handleSync}
+        />
+      </Flex>
 
       {/* Фильтр дат */}
       <div
@@ -152,13 +170,24 @@ export const DraftsList: React.FC = () => {
         >
           Период загрузки:
         </Text>
-        <RangePicker
-          value={dateRange}
-          onChange={(dates) => dates && setDateRange([dates[0]!, dates[1]!])}
-          style={{ width: "100%" }}
-          allowClear={false}
-          format="DD.MM.YYYY"
-        />
+        <Flex gap={8}>
+          <DatePicker
+            value={startDate}
+            onChange={(date) => date && setStartDate(date)}
+            style={{ flex: 1 }}
+            placeholder="Начало"
+            format="DD.MM.YYYY"
+            allowClear={false}
+          />
+          <DatePicker
+            value={endDate}
+            onChange={(date) => date && setEndDate(date)}
+            style={{ flex: 1 }}
+            placeholder="Конец"
+            format="DD.MM.YYYY"
+            allowClear={false}
+          />
+        </Flex>
       </div>
 
       {isLoading ? (
@@ -194,6 +223,9 @@ export const DraftsList: React.FC = () => {
                         <Text strong style={{ fontSize: 16 }}>
                           {item.document_number || "Без номера"}
                         </Text>
+                        {item.type === "SYNCED" && (
+                          <CloudServerOutlined style={{ color: "gray" }} />
+                        )}
                         {item.is_app_created && (
                           <span title="Создано в RMSer">📱</span>
                         )}