2 окна и настройка элементов

src/pages/ProtocolCreation/ui/Page/Page.tsx

@@ -0,0 +1,105 @@
+import { FileText, Plus } from 'lucide-react';
+import { FC, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { TemplateRenderer } from '../../../../components/TemplateManager/TemplateRenderer';
+import { Button } from '../../../../components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../../../components/ui/card';
+import { useTemplateContext } from '../../../../contexts/TemplateContext';
+import { Template } from '../../../../types/template';
+
+export const ProtocolCreation: FC = () => {
+  const navigate = useNavigate();
+  const { templates } = useTemplateContext();
+  const [selectedTemplate, setSelectedTemplate] = useState<Template | null>(null);
+
+  const handleTemplateSelect = (template: Template) => {
+    setSelectedTemplate(template);
+  };
+
+  const handleBack = () => {
+    setSelectedTemplate(null);
+  };
+
+  const handleEdit = () => {
+    // Переходим на страницу редактирования шаблона
+    navigate('/templates');
+  };
+
+  if (selectedTemplate) {
+    return (
+      <TemplateRenderer
+        template={selectedTemplate}
+        onBack={handleBack}
+        onEdit={handleEdit}
+        hideSpreadsheet={true}
+      />
+    );
+  }
+
+  return (
+    <div className="p-6 max-w-7xl mx-auto">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900">Создание протокола</h1>
+          <p className="text-gray-600 mt-2">Выберите шаблон для создания нового протокола</p>
+        </div>
+        
+        <Button 
+          variant="outline" 
+          onClick={() => navigate('/templates')}
+          className="flex items-center gap-2"
+        >
+          <Plus className="h-4 w-4" />
+          Создать шаблон
+        </Button>
+      </div>
+
+      {templates.length === 0 ? (
+        <div className="text-center py-12">
+          <FileText className="h-16 w-16 text-gray-400 mx-auto mb-4" />
+          <h3 className="text-lg font-medium text-gray-900 mb-2">Нет доступных шаблонов</h3>
+          <p className="text-gray-600 mb-6">Создайте шаблон протокола для начала работы</p>
+          <Button onClick={() => navigate('/templates')}>
+            <Plus className="h-4 w-4 mr-2" />
+            Создать шаблон
+          </Button>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {templates.map((template) => (
+            <Card key={template.id} className="hover:shadow-lg transition-shadow cursor-pointer">
+              <CardHeader>
+                <CardTitle className="text-lg">{template.name}</CardTitle>
+                {template.description && (
+                  <CardDescription className="mt-1">
+                    {template.description}
+                  </CardDescription>
+                )}
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-2 text-sm text-gray-600">
+                  <div className="flex items-center gap-2">
+                    <FileText className="h-4 w-4" />
+                    <span>{template.elements.length} элементов для заполнения</span>
+                  </div>
+                  <div className="text-xs text-gray-500 mt-2">
+                    Создан: {template.createdAt.toLocaleDateString()}
+                  </div>
+                </div>
+                <div className="mt-4">
+                  <Button
+                    className="w-full"
+                    onClick={() => handleTemplateSelect(template)}
+                    disabled={!template.excelFile}
+                  >
+                    {template.excelFile ? 'Создать протокол' : 'Шаблон не настроен'}
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};