From 40145206b21368f05090ed89fdcc1f301702c8c2 Mon Sep 17 00:00:00 2001
From: tlartem <tlartem@ya.ru>
Date: Tue, 15 Jul 2025 16:46:58 +0300
Subject: [PATCH] =?UTF-8?q?=D0=A3=D0=BF=D1=80=D0=BE=D1=89=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B8=D0=B5=20=D0=BA=D0=BE=D0=B4=D0=B0=20=D0=B8=20=D1=83=D0=BB?=
 =?UTF-8?q?=D1=83=D1=87=D1=88=D0=B5=D0=BD=D0=B8=D0=B5=20=D1=81=D1=82=D0=B8?=
 =?UTF-8?q?=D0=BB=D1=8F=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD?=
 =?UTF-8?q?=D1=82=D0=B0=20TemplateEditor?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TemplateManager/TemplateEditor.tsx        | 169 +++++++++---------
 1 file changed, 88 insertions(+), 81 deletions(-)

diff --git a/src/components/TemplateManager/TemplateEditor.tsx b/src/components/TemplateManager/TemplateEditor.tsx
index c639e0d..eb623bd 100644
--- a/src/components/TemplateManager/TemplateEditor.tsx
+++ b/src/components/TemplateManager/TemplateEditor.tsx
@@ -1,16 +1,16 @@
-import { ArrowLeft, Save, Upload, Wrench } from 'lucide-react';
-import React, { useRef, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import * as XLSX from 'xlsx';
-import { Template } from '../../types/template';
-import DualSpreadsheet from '../DualSpreadsheet/DualSpreadsheet';
-import { Button } from '../ui/button';
+import { ArrowLeft, Save, Upload, Wrench } from 'lucide-react'
+import React, { useRef, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import * as XLSX from 'xlsx'
+import { Template } from '../../types/template'
+import DualSpreadsheet from '../DualSpreadsheet/DualSpreadsheet'
+import { Button } from '../ui/button'
 
 interface TemplateEditorProps {
-  template: Template;
-  onSave: (template: Template) => void;
-  onCancel: () => void;
-  onBack: () => void;
+  template: Template
+  onSave: (template: Template) => void
+  onCancel: () => void
+  onBack: () => void
 }
 
 export const TemplateEditor: React.FC<TemplateEditorProps> = ({
@@ -19,98 +19,104 @@ export const TemplateEditor: React.FC<TemplateEditorProps> = ({
   onCancel,
   onBack,
 }) => {
-  const [editedTemplate, setEditedTemplate] = useState<Template>(template);
-  const [excelData, setExcelData] = useState<Record<string, any>>(template.excelData || {});
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const navigate = useNavigate();
+  const [editedTemplate, setEditedTemplate] = useState<Template>(template)
+  const [excelData, setExcelData] = useState<Record<string, any>>(
+    template.excelData || {},
+  )
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const navigate = useNavigate()
 
   const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (!file) return;
+    const file = event.target.files?.[0]
+    if (!file) return
 
-    const reader = new FileReader();
+    const reader = new FileReader()
     reader.onload = (e) => {
       try {
-        const data = new Uint8Array(e.target?.result as ArrayBuffer);
-        const workbook = XLSX.read(data, { type: 'array' });
-        
+        const data = new Uint8Array(e.target?.result as ArrayBuffer)
+        const workbook = XLSX.read(data, { type: 'array' })
+
         // Читаем первый лист
-        const firstSheetName = workbook.SheetNames[0];
-        const worksheet = workbook.Sheets[firstSheetName];
-        const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
-        
+        const firstSheetName = workbook.SheetNames[0]
+        const worksheet = workbook.Sheets[firstSheetName]
+        const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 })
+
         // Преобразуем в формат для нашей системы
-        const formattedData: Record<string, any> = {};
-        
-        (jsonData as any[][]).forEach((row, rowIndex) => {
+        const formattedData: Record<string, any> = {}
+
+        ;(jsonData as any[][]).forEach((row, rowIndex) => {
           row.forEach((cell, colIndex) => {
             if (cell !== undefined && cell !== null && cell !== '') {
-              const cellName = String.fromCharCode(65 + colIndex) + (rowIndex + 1);
-              formattedData[cellName] = cell;
+              const cellName =
+                String.fromCharCode(65 + colIndex) + (rowIndex + 1)
+              formattedData[cellName] = cell
             }
-          });
-        });
+          })
+        })
 
-        setExcelData(formattedData);
-        setEditedTemplate(prev => ({
+        setExcelData(formattedData)
+        setEditedTemplate((prev) => ({
           ...prev,
           excelFile: file,
           excelData: formattedData,
           updatedAt: new Date(),
-        }));
-        
+        }))
+
         // Принудительно обновляем данные в таблице
         setTimeout(() => {
-          setExcelData({...formattedData});
-        }, 100);
+          setExcelData({ ...formattedData })
+        }, 100)
       } catch (error) {
-        console.error('Ошибка при чтении Excel файла:', error);
-        alert('Ошибка при чтении Excel файла');
+        console.error('Ошибка при чтении Excel файла:', error)
+        alert('Ошибка при чтении Excel файла')
       }
-    };
-    reader.readAsArrayBuffer(file);
-  };
+    }
+    reader.readAsArrayBuffer(file)
+  }
 
   const handleSave = () => {
-    onSave(editedTemplate);
-  };
+    onSave(editedTemplate)
+  }
 
   const handleCreateElements = () => {
-    navigate('/elements');
-  };
+    navigate('/elements')
+  }
 
   return (
-    <div className="h-screen flex flex-col bg-gray-50">
+    <div className="flex h-screen flex-col bg-background">
       {/* Заголовок */}
-      <div className="bg-white border-b border-gray-200 p-4 flex-shrink-0">
+      <div className="flex-shrink-0 border-b bg-card px-4 py-3">
         <div className="flex items-center justify-between">
-          <div className="flex items-center gap-4">
+          <div className="flex items-center gap-3">
             <Button variant="ghost" size="icon" onClick={onBack}>
               <ArrowLeft className="h-4 w-4" />
             </Button>
             <div>
-              <h1 className="text-xl font-semibold text-gray-800">
-                Редактирование шаблона: {editedTemplate.name}
-              </h1>
-              <p className="text-sm text-gray-600 mt-1">
+              <h1 className="text-lg font-semibold">{editedTemplate.name}</h1>
+              <p className="mt-0.5 text-xs text-muted-foreground">
                 Настройте Excel шаблон и значения отчета
               </p>
             </div>
           </div>
           <div className="flex gap-2">
-            <Button 
-              variant="outline" 
+            <Button
+              variant="outline"
+              size="sm"
               onClick={handleCreateElements}
               className="flex items-center gap-2"
             >
-              <Wrench className="h-4 w-4" />
+              <Wrench className="h-3.5 w-3.5" />
               Создать элементы
             </Button>
-            <Button variant="outline" onClick={onCancel}>
+            <Button variant="outline" size="sm" onClick={onCancel}>
               Отмена
             </Button>
-            <Button onClick={handleSave} className="flex items-center gap-2">
-              <Save className="h-4 w-4" />
+            <Button
+              size="sm"
+              onClick={handleSave}
+              className="flex items-center gap-2"
+            >
+              <Save className="h-3.5 w-3.5" />
               Сохранить
             </Button>
           </div>
@@ -118,25 +124,26 @@ export const TemplateEditor: React.FC<TemplateEditorProps> = ({
       </div>
 
       {/* Панель загрузки Excel */}
-      <div className="bg-white border-b border-gray-200 p-4 flex-shrink-0">
+      <div className="flex-shrink-0 border-b bg-muted/30 px-4 py-2">
         <div className="flex items-center justify-between">
-          <div className="flex items-center gap-4">
-            <div className="text-sm font-medium text-gray-700">
+          <div className="flex items-center gap-3">
+            <span className="text-xs font-medium text-muted-foreground">
               Excel шаблон:
-            </div>
+            </span>
             {editedTemplate.excelFile ? (
-              <div className="flex items-center gap-2 text-sm text-green-600">
-                <Upload className="h-4 w-4" />
-                <span>{editedTemplate.excelFile.name}</span>
+              <div className="flex items-center gap-2 rounded-md bg-emerald-50 px-2 py-1">
+                <Upload className="h-3 w-3 text-emerald-600" />
+                <span className="text-xs text-emerald-700">
+                  {editedTemplate.excelFile.name}
+                </span>
               </div>
             ) : (
-              <div className="text-sm text-gray-500">Файл не загружен</div>
+              <div className="text-xs text-muted-foreground">
+                Файл не загружен
+              </div>
             )}
           </div>
-          <div className="flex items-center gap-2">
-            <div className="text-sm text-gray-500">
-              Элементов создано: {editedTemplate.elements.length}
-            </div>
+          <div className="flex items-center gap-3">
             <input
               ref={fileInputRef}
               type="file"
@@ -148,21 +155,21 @@ export const TemplateEditor: React.FC<TemplateEditorProps> = ({
               variant="outline"
               size="sm"
               onClick={() => fileInputRef.current?.click()}
-              className="flex items-center gap-2"
+              className="flex h-7 items-center gap-2"
             >
-              <Upload className="h-4 w-4" />
-              {editedTemplate.excelFile ? 'Заменить файл' : 'Загрузить Excel'}
+              <Upload className="h-3 w-3" />
+              <span className="text-xs">
+                {editedTemplate.excelFile ? 'Заменить файл' : 'Загрузить Excel'}
+              </span>
             </Button>
           </div>
         </div>
       </div>
 
       {/* Таблицы - теперь занимают всё оставшееся пространство */}
-      <div className="flex-1 min-h-0">
-        <DualSpreadsheet 
-          templateData={{ Report: excelData }}
-        />
+      <div className="min-h-0 flex-1">
+        <DualSpreadsheet templateData={{ Report: excelData }} />
       </div>
     </div>
-  );
-}; 
\ No newline at end of file
+  )
+}