From ebd3a93cb236d0be606626926b644e5555fa0865 Mon Sep 17 00:00:00 2001
From: tlartem <tlartem@ya.ru>
Date: Wed, 23 Jul 2025 18:28:00 +0300
Subject: [PATCH] f

---
 .../BasicElements/CheckboxElement.tsx         |  53 -------
 src/component/BasicElements/RadioElement.tsx  | 139 ------------------
 .../BasicElements/TextareaElement.tsx         |  54 -------
 src/component/BasicElements/index.ts          |   5 +-
 src/component/TemplateManager/HeaderBar.tsx   |   4 +-
 src/component/ui/badge.tsx                    |   2 +-
 src/component/ui/button.tsx                   |  31 ++--
 src/component/ui/card.tsx                     |  29 ++--
 src/component/ui/checkbox.tsx                 |  12 +-
 src/component/ui/dialog.tsx                   |  35 +++--
 src/component/ui/input.tsx                    |   8 +-
 src/component/ui/label.tsx                    |  10 +-
 src/component/ui/radio-group.tsx              |  12 +-
 src/component/ui/select.tsx                   |  45 +++---
 src/component/ui/separator.tsx                |  12 +-
 src/component/ui/textarea.tsx                 |   8 +-
 src/components/ui/button.tsx                  |  57 +++++++
 .../model/implementations}/DateElement.tsx    |  22 +--
 src/entitiy/element/model/interface.ts        |  14 +-
 src/page/ElementsCreation/Page.tsx            |   4 +-
 src/page/ProtocolCreation/Page.tsx            |   6 +-
 21 files changed, 185 insertions(+), 377 deletions(-)
 delete mode 100644 src/component/BasicElements/CheckboxElement.tsx
 delete mode 100644 src/component/BasicElements/RadioElement.tsx
 delete mode 100644 src/component/BasicElements/TextareaElement.tsx
 create mode 100644 src/components/ui/button.tsx
 rename src/{component/BasicElements => entitiy/element/model/implementations}/DateElement.tsx (56%)

diff --git a/src/component/BasicElements/CheckboxElement.tsx b/src/component/BasicElements/CheckboxElement.tsx
deleted file mode 100644
index f7802aa..0000000
--- a/src/component/BasicElements/CheckboxElement.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { ElementDefinition } from '@/entitiy/element/model/interface'
-import { CheckSquare } from 'lucide-react'
-
-interface CheckboxConfig {
-  placeholder?: string
-  required?: boolean
-  targetCells: any[]
-}
-
-export const checkboxDefinition: ElementDefinition<CheckboxConfig, boolean> = {
-  type: 'checkbox',
-  label: 'Чекбокс',
-  icon: <CheckSquare className="h-4 w-4" />,
-  version: 1,
-  defaultConfig: {
-    placeholder: '',
-    required: false,
-    targetCells: [],
-  },
-  mapToCells: config => config.targetCells || [],
-  mapToCellValues: (config, value) => {
-    const cells = config.targetCells || []
-    return cells.map(target => ({ target, value: value || false }))
-  },
-  Editor: () => (
-    <div className="text-sm text-gray-600">
-      Дополнительные настройки отсутствуют
-    </div>
-  ),
-  Preview: ({ config }) => (
-    <div className="space-y-3">
-      <div className="text-sm font-medium text-gray-700">Предпросмотр</div>
-      <div className="rounded-lg border border-gray-200 bg-white p-4">
-        <div className="flex items-center space-x-2">
-          <div className="h-4 w-4 rounded border border-gray-300" />
-          <span className="text-sm">{config.placeholder || 'Отметить'}</span>
-        </div>
-      </div>
-    </div>
-  ),
-  Render: ({ config, value, onChange }) => (
-    <div className="flex items-center space-x-2">
-      <input
-        type="checkbox"
-        checked={value || false}
-        onChange={e => onChange?.(e.target.checked)}
-        required={config.required}
-        className="h-4 w-4"
-      />
-      <span className="text-sm">{config.placeholder || 'Отметить'}</span>
-    </div>
-  ),
-}
diff --git a/src/component/BasicElements/RadioElement.tsx b/src/component/BasicElements/RadioElement.tsx
deleted file mode 100644
index b85a3a4..0000000
--- a/src/component/BasicElements/RadioElement.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import { Button } from '@/component/ui/button'
-import { Input } from '@/component/ui/input'
-import { ElementDefinition } from '@/entitiy/element/model/interface'
-import { ElementOption } from '@/type/template'
-import { CheckSquare, Plus, Trash2 } from 'lucide-react'
-
-interface RadioConfig {
-  placeholder?: string
-  required?: boolean
-  options: ElementOption[]
-  targetCells: any[]
-}
-
-export const radioDefinition: ElementDefinition<RadioConfig, string> = {
-  type: 'radio',
-  label: 'Радиокнопки',
-  icon: <CheckSquare className="h-4 w-4" />,
-  version: 1,
-  defaultConfig: {
-    placeholder: '',
-    required: false,
-    options: [],
-    targetCells: [],
-  },
-  mapToCells: config => config.targetCells || [],
-  mapToCellValues: (config, value) => {
-    const cells = config.targetCells || []
-    return cells.map(target => ({ target, value: value || '' }))
-  },
-  Editor: ({ config, onChange }) => {
-    const handleAddOption = () => {
-      onChange({
-        ...config,
-        options: [...config.options, { value: '', label: '' }],
-      })
-    }
-
-    const handleUpdateOption = (
-      index: number,
-      field: 'value' | 'label',
-      value: string
-    ) => {
-      onChange({
-        ...config,
-        options: config.options.map((option, i) =>
-          i === index ? { ...option, [field]: value } : option
-        ),
-      })
-    }
-
-    const handleRemoveOption = (index: number) => {
-      onChange({
-        ...config,
-        options: config.options.filter((_, i) => i !== index),
-      })
-    }
-
-    return (
-      <div className="space-y-4">
-        <div className="space-y-2">
-          <div className="flex items-center justify-between">
-            <label className="text-sm font-medium">Варианты</label>
-            <Button variant="outline" size="sm" onClick={handleAddOption}>
-              <Plus className="mr-1 h-4 w-4" />
-              Добавить
-            </Button>
-          </div>
-          <div className="max-h-32 space-y-2 overflow-y-auto">
-            {config.options.map((option, index) => (
-              <div key={index} className="flex gap-2">
-                <Input
-                  placeholder="Значение"
-                  value={option.value}
-                  onChange={e =>
-                    handleUpdateOption(index, 'value', e.target.value)
-                  }
-                />
-                <Input
-                  placeholder="Подпись"
-                  value={option.label}
-                  onChange={e =>
-                    handleUpdateOption(index, 'label', e.target.value)
-                  }
-                />
-                <Button
-                  variant="outline"
-                  size="icon"
-                  onClick={() => handleRemoveOption(index)}
-                >
-                  <Trash2 className="h-4 w-4" />
-                </Button>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    )
-  },
-  Preview: ({ config }) => (
-    <div className="space-y-3">
-      <div className="text-sm font-medium text-gray-700">Предпросмотр</div>
-      <div className="rounded-lg border border-gray-200 bg-white p-4">
-        <div className="space-y-2">
-          {config.options.length > 0 ? (
-            config.options.map((option, index) => (
-              <div key={index} className="flex items-center space-x-2">
-                <div className="h-4 w-4 rounded-full border border-gray-300" />
-                <span className="text-sm">{option.label}</span>
-              </div>
-            ))
-          ) : (
-            <div className="flex items-center space-x-2">
-              <div className="h-4 w-4 rounded-full border border-gray-300" />
-              <span className="text-sm text-gray-500">Вариант 1</span>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  ),
-  Render: ({ config, value, onChange }) => (
-    <div className="space-y-2">
-      {config.options.map((option, index) => (
-        <div key={index} className="flex items-center space-x-2">
-          <input
-            type="radio"
-            name="radio-group"
-            value={option.value}
-            checked={value === option.value}
-            onChange={e => onChange?.(e.target.value)}
-            required={config.required}
-            className="h-4 w-4"
-          />
-          <span className="text-sm">{option.label}</span>
-        </div>
-      ))}
-    </div>
-  ),
-}
diff --git a/src/component/BasicElements/TextareaElement.tsx b/src/component/BasicElements/TextareaElement.tsx
deleted file mode 100644
index 4aef047..0000000
--- a/src/component/BasicElements/TextareaElement.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { Textarea } from '@/component/ui/textarea'
-import { ElementDefinition } from '@/entitiy/element/model/interface'
-import { FileText } from 'lucide-react'
-
-interface TextareaConfig {
-  placeholder?: string
-  required?: boolean
-  targetCells: any[]
-}
-
-export const textareaDefinition: ElementDefinition<TextareaConfig, string> = {
-  type: 'textarea',
-  label: 'Многострочный текст',
-  icon: <FileText className="h-4 w-4" />,
-  version: 1,
-  defaultConfig: {
-    placeholder: '',
-    required: false,
-    targetCells: [],
-  },
-  mapToCells: config => config.targetCells || [],
-  mapToCellValues: (config, value) => {
-    const cells = config.targetCells || []
-    return cells.map(target => ({ target, value: value || '' }))
-  },
-  Editor: () => (
-    <div className="text-sm text-gray-600">
-      Дополнительные настройки отсутствуют
-    </div>
-  ),
-  Preview: ({ config }) => (
-    <div className="space-y-3">
-      <div className="text-sm font-medium text-gray-700">Предпросмотр</div>
-      <div className="rounded-lg border border-gray-200 bg-white p-4">
-        <Textarea
-          placeholder={config.placeholder || 'Введите текст'}
-          disabled
-          rows={3}
-          className="w-full resize-none"
-        />
-      </div>
-    </div>
-  ),
-  Render: ({ config, value, onChange }) => (
-    <Textarea
-      placeholder={config.placeholder || 'Введите текст'}
-      value={value || ''}
-      onChange={e => onChange?.(e.target.value)}
-      required={config.required}
-      rows={3}
-      className="w-full resize-none"
-    />
-  ),
-}
diff --git a/src/component/BasicElements/index.ts b/src/component/BasicElements/index.ts
index 2b7dfc2..55fcb07 100644
--- a/src/component/BasicElements/index.ts
+++ b/src/component/BasicElements/index.ts
@@ -1,9 +1,6 @@
 export { textDefinition } from '@/entitiy/element/model/implementations/TextElement'
 export { buttonGroupDefinition } from '../../entitiy/element/model/implementations/ButtonGroup'
+export { dateDefinition } from '../../entitiy/element/model/implementations/DateElement'
 export { calibrationConditionsDefinition } from './CalibrationConditionsElement'
-export { checkboxDefinition } from './CheckboxElement'
-export { dateDefinition } from './DateElement'
 export { numberDefinition } from './NumberElement'
-export { radioDefinition } from './RadioElement'
 export { selectDefinition } from './SelectElement'
-export { textareaDefinition } from './TextareaElement'
diff --git a/src/component/TemplateManager/HeaderBar.tsx b/src/component/TemplateManager/HeaderBar.tsx
index 9890241..18dbd01 100644
--- a/src/component/TemplateManager/HeaderBar.tsx
+++ b/src/component/TemplateManager/HeaderBar.tsx
@@ -30,7 +30,7 @@ export const HeaderBar: React.FC<HeaderBarProps> = ({ template, onBack }) => {
         </div>
         <div className="flex gap-2">
           <Button
-            variant="outline"
+            variant="link"
             size="sm"
             onClick={() => navigate(`/templates/${template.id}/elements`)}
             className="flex items-center gap-1 hover:bg-muted"
@@ -39,7 +39,7 @@ export const HeaderBar: React.FC<HeaderBarProps> = ({ template, onBack }) => {
             <span className="text-sm">Редактор интерфейса</span>
           </Button>
           <Button
-            variant="outline"
+            variant="link"
             size="sm"
             onClick={() => navigate(`/templates/${template.id}/protocols`)}
             className="flex items-center gap-1 hover:bg-muted"
diff --git a/src/component/ui/badge.tsx b/src/component/ui/badge.tsx
index 21c5039..cd0069c 100644
--- a/src/component/ui/badge.tsx
+++ b/src/component/ui/badge.tsx
@@ -20,7 +20,7 @@ const badgeVariants = cva(
     defaultVariants: {
       variant: 'default',
     },
-  },
+  }
 )
 
 export interface BadgeProps
diff --git a/src/component/ui/button.tsx b/src/component/ui/button.tsx
index 283e82c..ae86560 100644
--- a/src/component/ui/button.tsx
+++ b/src/component/ui/button.tsx
@@ -1,9 +1,15 @@
-import * as React from "react"
-import { cn } from "../../lib/utils"
+import { cn } from '@/lib/utils'
+import * as React from 'react'
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
+  variant?:
+    | 'default'
+    | 'destructive'
+    | 'outline'
+    | 'secondary'
+    | 'ghost'
+    | 'link'
   size?: 'default' | 'sm' | 'lg' | 'icon'
 }
 
@@ -12,14 +18,19 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     return (
       <button
         className={cn(
-          "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+          'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
           {
-            'bg-primary text-primary-foreground hover:bg-primary/90': variant === 'default',
-            'bg-destructive text-destructive-foreground hover:bg-destructive/90': variant === 'destructive',
-            'border border-input bg-background hover:bg-accent hover:text-accent-foreground': variant === 'outline',
-            'bg-secondary text-secondary-foreground hover:bg-secondary/80': variant === 'secondary',
+            'bg-primary text-primary-foreground hover:bg-primary/90':
+              variant === 'default',
+            'bg-destructive text-destructive-foreground hover:bg-destructive/90':
+              variant === 'destructive',
+            'border border-input bg-background hover:bg-accent hover:text-accent-foreground':
+              variant === 'outline',
+            'bg-secondary text-secondary-foreground hover:bg-secondary/80':
+              variant === 'secondary',
             'hover:bg-accent hover:text-accent-foreground': variant === 'ghost',
-            'text-primary underline-offset-4 hover:underline': variant === 'link',
+            'text-primary underline-offset-4 hover:underline':
+              variant === 'link',
           },
           {
             'h-10 px-4 py-2': size === 'default',
@@ -35,6 +46,6 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     )
   }
 )
-Button.displayName = "Button"
+Button.displayName = 'Button'
 
 export { Button }
diff --git a/src/component/ui/card.tsx b/src/component/ui/card.tsx
index e2f1a11..547b185 100644
--- a/src/component/ui/card.tsx
+++ b/src/component/ui/card.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from 'react'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const Card = React.forwardRef<
   HTMLDivElement,
@@ -9,13 +9,13 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      'rounded-lg border bg-card text-card-foreground shadow-sm',
       className
     )}
     {...props}
   />
 ))
-Card.displayName = "Card"
+Card.displayName = 'Card'
 
 const CardHeader = React.forwardRef<
   HTMLDivElement,
@@ -23,11 +23,11 @@ const CardHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    className={cn('flex flex-col space-y-1.5 p-6', className)}
     {...props}
   />
 ))
-CardHeader.displayName = "CardHeader"
+CardHeader.displayName = 'CardHeader'
 
 const CardTitle = React.forwardRef<
   HTMLDivElement,
@@ -36,13 +36,13 @@ const CardTitle = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "text-2xl font-semibold leading-none tracking-tight",
+      'text-2xl font-semibold leading-none tracking-tight',
       className
     )}
     {...props}
   />
 ))
-CardTitle.displayName = "CardTitle"
+CardTitle.displayName = 'CardTitle'
 
 const CardDescription = React.forwardRef<
   HTMLDivElement,
@@ -50,19 +50,19 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn('text-sm text-muted-foreground', className)}
     {...props}
   />
 ))
-CardDescription.displayName = "CardDescription"
+CardDescription.displayName = 'CardDescription'
 
 const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
 ))
-CardContent.displayName = "CardContent"
+CardContent.displayName = 'CardContent'
 
 const CardFooter = React.forwardRef<
   HTMLDivElement,
@@ -70,11 +70,10 @@ const CardFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
+    className={cn('flex items-center p-6 pt-0', className)}
     {...props}
   />
 ))
-CardFooter.displayName = "CardFooter"
+CardFooter.displayName = 'CardFooter'
 
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }
-
diff --git a/src/component/ui/checkbox.tsx b/src/component/ui/checkbox.tsx
index 7421438..98a4bad 100644
--- a/src/component/ui/checkbox.tsx
+++ b/src/component/ui/checkbox.tsx
@@ -1,7 +1,7 @@
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { Check } from "lucide-react"
-import * as React from "react"
-import { cn } from "../../lib/utils"
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import { Check } from 'lucide-react'
+import * as React from 'react'
+import { cn } from '../../lib/utils'
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
@@ -10,13 +10,13 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
       className
     )}
     {...props}
   >
     <CheckboxPrimitive.Indicator
-      className={cn("flex items-center justify-center text-current")}
+      className={cn('flex items-center justify-center text-current')}
     >
       <Check className="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
diff --git a/src/component/ui/dialog.tsx b/src/component/ui/dialog.tsx
index e1ea1c3..f7c59cc 100644
--- a/src/component/ui/dialog.tsx
+++ b/src/component/ui/dialog.tsx
@@ -1,7 +1,7 @@
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
-import * as React from "react"
-import { cn } from "../../lib/utils"
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { X } from 'lucide-react'
+import * as React from 'react'
+import { cn } from '../../lib/utils'
 
 const Dialog = DialogPrimitive.Root
 
@@ -18,7 +18,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-background/80 backdrop-blur-sm',
       className
     )}
     {...props}
@@ -35,7 +35,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 sm:rounded-lg',
         className
       )}
       {...props}
@@ -56,13 +56,13 @@ const DialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
+      'flex flex-col space-y-1.5 text-center sm:text-left',
       className
     )}
     {...props}
   />
 )
-DialogHeader.displayName = "DialogHeader"
+DialogHeader.displayName = 'DialogHeader'
 
 const DialogFooter = ({
   className,
@@ -70,13 +70,13 @@ const DialogFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
       className
     )}
     {...props}
   />
 )
-DialogFooter.displayName = "DialogFooter"
+DialogFooter.displayName = 'DialogFooter'
 
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
@@ -85,7 +85,7 @@ const DialogTitle = React.forwardRef<
   <DialogPrimitive.Title
     ref={ref}
     className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
+      'text-lg font-semibold leading-none tracking-tight',
       className
     )}
     {...props}
@@ -99,12 +99,21 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn('text-sm text-muted-foreground', className)}
     {...props}
   />
 ))
 DialogDescription.displayName = DialogPrimitive.Description.displayName
 
 export {
-    Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
 }
diff --git a/src/component/ui/input.tsx b/src/component/ui/input.tsx
index fc1e640..d43d884 100644
--- a/src/component/ui/input.tsx
+++ b/src/component/ui/input.tsx
@@ -1,5 +1,5 @@
-import * as React from "react"
-import { cn } from "../../lib/utils"
+import * as React from 'react'
+import { cn } from '../../lib/utils'
 
 export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {}
@@ -10,7 +10,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
           className
         )}
         ref={ref}
@@ -19,6 +19,6 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     )
   }
 )
-Input.displayName = "Input"
+Input.displayName = 'Input'
 
 export { Input }
diff --git a/src/component/ui/label.tsx b/src/component/ui/label.tsx
index 358b6d3..1c36f9d 100644
--- a/src/component/ui/label.tsx
+++ b/src/component/ui/label.tsx
@@ -1,11 +1,11 @@
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { cva, type VariantProps } from "class-variance-authority"
-import * as React from "react"
+import * as LabelPrimitive from '@radix-ui/react-label'
+import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
 )
 
 const Label = React.forwardRef<
diff --git a/src/component/ui/radio-group.tsx b/src/component/ui/radio-group.tsx
index 98cda5f..c4ba4e2 100644
--- a/src/component/ui/radio-group.tsx
+++ b/src/component/ui/radio-group.tsx
@@ -1,7 +1,7 @@
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
-import { Circle } from "lucide-react"
-import * as React from "react"
-import { cn } from "../../lib/utils"
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
+import { Circle } from 'lucide-react'
+import * as React from 'react'
+import { cn } from '../../lib/utils'
 
 const RadioGroup = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Root>,
@@ -9,7 +9,7 @@ const RadioGroup = React.forwardRef<
 >(({ className, ...props }, ref) => {
   return (
     <RadioGroupPrimitive.Root
-      className={cn("grid gap-2", className)}
+      className={cn('grid gap-2', className)}
       {...props}
       ref={ref}
     />
@@ -25,7 +25,7 @@ const RadioGroupItem = React.forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        'aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
         className
       )}
       {...props}
diff --git a/src/component/ui/select.tsx b/src/component/ui/select.tsx
index 566ed96..a20a2df 100644
--- a/src/component/ui/select.tsx
+++ b/src/component/ui/select.tsx
@@ -1,7 +1,7 @@
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { Check, ChevronDown, ChevronUp } from "lucide-react"
-import * as React from "react"
-import { cn } from "../../lib/utils"
+import * as SelectPrimitive from '@radix-ui/react-select'
+import { Check, ChevronDown, ChevronUp } from 'lucide-react'
+import * as React from 'react'
+import { cn } from '../../lib/utils'
 
 const Select = SelectPrimitive.Root
 
@@ -16,7 +16,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
       className
     )}
     {...props}
@@ -36,7 +36,7 @@ const SelectScrollUpButton = React.forwardRef<
   <SelectPrimitive.ScrollUpButton
     ref={ref}
     className={cn(
-      "flex cursor-default items-center justify-center py-1",
+      'flex cursor-default items-center justify-center py-1',
       className
     )}
     {...props}
@@ -53,7 +53,7 @@ const SelectScrollDownButton = React.forwardRef<
   <SelectPrimitive.ScrollDownButton
     ref={ref}
     className={cn(
-      "flex cursor-default items-center justify-center py-1",
+      'flex cursor-default items-center justify-center py-1',
       className
     )}
     {...props}
@@ -67,14 +67,14 @@ SelectScrollDownButton.displayName =
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
+>(({ className, children, position = 'popper', ...props }, ref) => (
   <SelectPrimitive.Portal>
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        position === "popper" &&
-          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md',
+        position === 'popper' &&
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
         className
       )}
       position={position}
@@ -83,9 +83,9 @@ const SelectContent = React.forwardRef<
       <SelectScrollUpButton />
       <SelectPrimitive.Viewport
         className={cn(
-          "p-1",
-          position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          'p-1',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
         )}
       >
         {children}
@@ -102,7 +102,7 @@ const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
-    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
     {...props}
   />
 ))
@@ -115,7 +115,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     {...props}
@@ -137,12 +137,21 @@ const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
     {...props}
   />
 ))
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName
 
 export {
-    Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
 }
diff --git a/src/component/ui/separator.tsx b/src/component/ui/separator.tsx
index de4fd6b..bdde5e4 100644
--- a/src/component/ui/separator.tsx
+++ b/src/component/ui/separator.tsx
@@ -1,14 +1,14 @@
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
-import * as React from "react"
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+import * as React from 'react'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
 >(
   (
-    { className, orientation = "horizontal", decorative = true, ...props },
+    { className, orientation = 'horizontal', decorative = true, ...props },
     ref
   ) => (
     <SeparatorPrimitive.Root
@@ -16,8 +16,8 @@ const Separator = React.forwardRef<
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        'shrink-0 bg-border',
+        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
         className
       )}
       {...props}
diff --git a/src/component/ui/textarea.tsx b/src/component/ui/textarea.tsx
index 21431f2..78118cc 100644
--- a/src/component/ui/textarea.tsx
+++ b/src/component/ui/textarea.tsx
@@ -1,5 +1,5 @@
-import * as React from "react"
-import { cn } from "../../lib/utils"
+import * as React from 'react'
+import { cn } from '../../lib/utils'
 
 export interface TextareaProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
           className
         )}
         ref={ref}
@@ -18,6 +18,6 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     )
   }
 )
-Textarea.displayName = "Textarea"
+Textarea.displayName = 'Textarea'
 
 export { Textarea }
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
new file mode 100644
index 0000000..65d4fcd
--- /dev/null
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
diff --git a/src/component/BasicElements/DateElement.tsx b/src/entitiy/element/model/implementations/DateElement.tsx
similarity index 56%
rename from src/component/BasicElements/DateElement.tsx
rename to src/entitiy/element/model/implementations/DateElement.tsx
index 38c95ba..d63fa99 100644
--- a/src/component/BasicElements/DateElement.tsx
+++ b/src/entitiy/element/model/implementations/DateElement.tsx
@@ -1,5 +1,6 @@
 import { Input } from '@/component/ui/input'
 import { ElementDefinition } from '@/entitiy/element/model/interface'
+import { ExtraSettingsBadge } from '@/entitiy/element/ui/extraSettingsBadge'
 import { Calendar } from 'lucide-react'
 
 interface DateConfig {
@@ -21,27 +22,10 @@ export const dateDefinition: ElementDefinition<DateConfig, string> = {
     const cells = config.targetCells || []
     return cells.map(target => ({ target, value: value || '' }))
   },
-  Editor: ({ config, onChange }) => (
-    <div className="space-y-4">
-      <div className="flex items-center space-x-2">
-        <input
-          type="checkbox"
-          id="required"
-          checked={config.required}
-          onChange={e => onChange({ ...config, required: e.target.checked })}
-        />
-        <label htmlFor="required" className="text-sm font-medium">
-          Обязательное поле
-        </label>
-      </div>
-    </div>
-  ),
+  Editor: () => <ExtraSettingsBadge />,
   Preview: () => (
     <div className="space-y-3">
-      <div className="text-sm font-medium text-gray-700">Предпросмотр</div>
-      <div className="rounded-lg border border-gray-200 bg-white p-4">
-        <Input type="date" disabled className="w-full" />
-      </div>
+      <Input type="date" className="w-full" />
     </div>
   ),
   Render: ({ config, value, onChange }) => (
diff --git a/src/entitiy/element/model/interface.ts b/src/entitiy/element/model/interface.ts
index 298d1cb..eabd4c7 100644
--- a/src/entitiy/element/model/interface.ts
+++ b/src/entitiy/element/model/interface.ts
@@ -1,13 +1,10 @@
 import { textDefinition } from '@/component/BasicElements'
 import { calibrationConditionsDefinition } from '@/component/BasicElements/CalibrationConditionsElement'
-import { checkboxDefinition } from '@/component/BasicElements/CheckboxElement'
-import { dateDefinition } from '@/component/BasicElements/DateElement'
 import { numberDefinition } from '@/component/BasicElements/NumberElement'
-import { radioDefinition } from '@/component/BasicElements/RadioElement'
 import { selectDefinition } from '@/component/BasicElements/SelectElement'
-import { textareaDefinition } from '@/component/BasicElements/TextareaElement'
 import { standardsDefinition } from '@/component/StandardsElement/definition'
 import { buttonGroupDefinition } from '@/entitiy/element/model/implementations/ButtonGroup'
+import { dateDefinition } from '@/entitiy/element/model/implementations/DateElement'
 import { CellTarget } from '@/type/template'
 import { ReactNode } from 'react'
 
@@ -66,10 +63,7 @@ export function getElementDefinition(
 export const elementDefinitions = {
   text: textDefinition,
   select: selectDefinition,
-  radio: radioDefinition,
-  checkbox: checkboxDefinition,
   number: numberDefinition,
-  textarea: textareaDefinition,
   date: dateDefinition,
   standards: standardsDefinition,
   calibration_conditions: calibrationConditionsDefinition,
@@ -79,17 +73,11 @@ export const elementDefinitions = {
 export type ElementType = keyof typeof elementDefinitions
 
 export function initializeElementRegistry() {
-  // Базовые элементы
   registerElement('text', textDefinition)
   registerElement('select', selectDefinition)
   registerElement('number', numberDefinition)
   registerElement('date', dateDefinition)
-  registerElement('textarea', textareaDefinition)
-  registerElement('checkbox', checkboxDefinition)
-  registerElement('radio', radioDefinition)
   registerElement('button_group', buttonGroupDefinition)
   registerElement('calibration_conditions', calibrationConditionsDefinition)
-
-  // Специальные элементы
   registerElement('standards', standardsDefinition)
 }
diff --git a/src/page/ElementsCreation/Page.tsx b/src/page/ElementsCreation/Page.tsx
index 98584d1..8c74904 100644
--- a/src/page/ElementsCreation/Page.tsx
+++ b/src/page/ElementsCreation/Page.tsx
@@ -172,7 +172,7 @@ export const ElementsCreation: FC = () => {
           </div>
           <div className="flex gap-2">
             <Button
-              variant="outline"
+              variant="link"
               size="sm"
               onClick={() => navigate(`/templates/${selectedTemplate.id}/edit`)}
               className="flex items-center gap-2 hover:bg-muted"
@@ -181,7 +181,7 @@ export const ElementsCreation: FC = () => {
               Настройки шаблона
             </Button>
             <Button
-              variant="outline"
+              variant="link"
               size="sm"
               onClick={() =>
                 navigate(`/templates/${selectedTemplate.id}/protocols`)
diff --git a/src/page/ProtocolCreation/Page.tsx b/src/page/ProtocolCreation/Page.tsx
index 284202e..3b57a80 100644
--- a/src/page/ProtocolCreation/Page.tsx
+++ b/src/page/ProtocolCreation/Page.tsx
@@ -283,7 +283,7 @@ const ProtocolForm: FC<ProtocolFormProps> = ({ template, onSave, onBack }) => {
           {/* Кнопки справа */}
           <div className="absolute right-0 flex gap-2">
             <Button
-              variant="outline"
+              variant="link"
               size="sm"
               onClick={() => navigate(`/templates/${template.id}/edit`)}
               className="flex items-center gap-1 hover:bg-muted"
@@ -292,7 +292,7 @@ const ProtocolForm: FC<ProtocolFormProps> = ({ template, onSave, onBack }) => {
               <span className="text-sm">Редактор шаблона</span>
             </Button>
             <Button
-              variant="outline"
+              variant="link"
               size="sm"
               onClick={() => navigate(`/templates/${template.id}/elements`)}
               className="flex items-center gap-1 hover:bg-muted"
@@ -314,7 +314,7 @@ const ProtocolForm: FC<ProtocolFormProps> = ({ template, onSave, onBack }) => {
               <Grid className="h-4 w-4" />
             </Button>
             <Button variant="outline" onClick={handleSave} disabled={!canSave}>
-              <Save className="mr-2 h-4 w-4" />
+              <Save className="h-4 w-4" />
               Сохранить протокол
             </Button>
           </div>