Полноценно редактируются черновики

Добавляются фасовки как в черновике, так и в обучении
Исправил внешний вид

rmser-view/src/pages/DraftsList.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { List, Typography, Tag, Spin, Empty } from 'antd';
+import { useNavigate } from 'react-router-dom';
+import { ArrowRightOutlined } from '@ant-design/icons';
+import { api } from '../services/api';
+
+const { Title, Text } = Typography;
+
+export const DraftsList: React.FC = () => {
+  const navigate = useNavigate();
+  
+  const { data: drafts, isLoading, isError } = useQuery({
+    queryKey: ['drafts'],
+    queryFn: api.getDrafts,
+    refetchOnWindowFocus: true
+  });
+
+  const getStatusTag = (status: string) => {
+    switch (status) {
+      case 'PROCESSING': return <Tag color="blue">Обработка</Tag>;
+      case 'READY_TO_VERIFY': return <Tag color="orange">Проверка</Tag>;
+      case 'COMPLETED': return <Tag color="green">Готово</Tag>;
+      case 'ERROR': return <Tag color="red">Ошибка</Tag>;
+      case 'CANCELED': return <Tag color="default" style={{ color: '#999' }}>Отменен</Tag>;
+      default: return <Tag>{status}</Tag>;
+    }
+  };
+
+  if (isLoading) {
+    return <div style={{ textAlign: 'center', padding: 40 }}><Spin size="large" /></div>;
+  }
+
+  if (isError) {
+    return <div style={{ padding: 20, textAlign: 'center' }}>Ошибка загрузки списка</div>;
+  }
+
+  return (
+    <div style={{ padding: '0 16px 20px' }}>
+      <Title level={4} style={{ marginTop: 16, marginBottom: 16 }}>Черновики накладных</Title>
+      
+      {(!drafts || drafts.length === 0) ? (
+         <Empty description="Нет активных черновиков" />
+      ) : (
+        <List
+          itemLayout="horizontal"
+          dataSource={drafts}
+          renderItem={(item) => (
+            <List.Item 
+              style={{ 
+                background: '#fff', 
+                padding: 12, 
+                marginBottom: 8, 
+                borderRadius: 8, 
+                cursor: 'pointer',
+                opacity: item.status === 'CANCELED' ? 0.6 : 1 // Делаем отмененные бледными
+              }}
+              onClick={() => navigate(`/invoice/${item.id}`)}
+            >
+               <div style={{ width: '100%' }}>
+                 <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
+                    <Text strong style={{ fontSize: 16, textDecoration: item.status === 'CANCELED' ? 'line-through' : 'none' }}>
+                      {item.document_number || 'Без номера'}
+                    </Text>
+                    {getStatusTag(item.status)}
+                 </div>
+                 
+                 <div style={{ display: 'flex', justifyContent: 'space-between', color: '#888', fontSize: 13 }}>
+                    <span>{new Date(item.date_incoming).toLocaleDateString()}</span>
+                    <span>{item.items_count} поз.</span>
+                 </div>
+                 
+                 <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6, alignItems: 'center' }}>
+                    <Text strong>
+                       {item.total_sum.toLocaleString('ru-RU', { style: 'currency', currency: 'RUB' })}
+                    </Text>
+                    <ArrowRightOutlined style={{ color: '#1890ff' }} />
+                 </div>
+               </div>
+            </List.Item>
+          )}
+        />
+      )}
+    </div>
+  );
+};