Упрощение кода и улучшение стиля компонента TemplateEditor

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,80 +19,81 @@ 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> = {};
+        const formattedData: Record<string, any> = {}
 
-        (jsonData as any[][]).forEach((row, rowIndex) => {
+        ;(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>
@@ -100,17 +101,22 @@ export const TemplateEditor: React.FC<TemplateEditorProps> = ({
           <div className="flex gap-2">
             <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" />
+              <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>
-  );
-}; 
+  )
+}