diff --git a/.gitignore b/.gitignore
index 95ca378..bf162d7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,4 +9,5 @@ backend/public/*
 
 # Личные файлы
 deploy.js
-deploy.php
\ No newline at end of file
+deploy.php
+.vscode
\ No newline at end of file
diff --git a/backend/api/task.php b/backend/api/task.php
index fc2f8b1..61d2a8f 100644
--- a/backend/api/task.php
+++ b/backend/api/task.php
@@ -95,6 +95,14 @@ if ($method === 'POST') {
         RestApi::response($result);
     }
 
+    // Установка статуса архивации задачи
+    if ($action === 'set_archive') {
+        $id = $data['id'] ?? null;
+        $archive = $data['archive'] ?? 1;
+        $result = Task::setArchive($id, $archive);
+        RestApi::response($result);
+    }
+
     // Метод не указан
     if (!$action) {
         RestApi::response(['success' => false, 'error' => 'Укажите метод'], 400);
@@ -103,8 +111,16 @@ if ($method === 'POST') {
 
 if ($method === 'GET') {
     // Получение всех задач
+    // ?archive=0 (неархивные, по умолчанию), ?archive=1 (архивные), ?archive=all (все)
+    $archive = $_GET['archive'] ?? 0;
+    if ($archive === 'all') {
+        $archive = null;
+    } else {
+        $archive = (int)$archive;
+    }
+
     $task = new Task();
-    $tasks = $task->getAll();
+    $tasks = $task->getAll($archive);
     
     RestApi::response(['success' => true, 'data' => $tasks]);
 }
diff --git a/backend/app/class/enity/class_task.php b/backend/app/class/enity/class_task.php
index 6088399..58ac66e 100644
--- a/backend/app/class/enity/class_task.php
+++ b/backend/app/class/enity/class_task.php
@@ -15,6 +15,7 @@ class Task extends BaseEntity {
     public $title;
     public $descript;
     public $descript_full;
+    public $archive;
 
     // Валидация данных
     protected function validate() {
@@ -65,6 +66,7 @@ class Task extends BaseEntity {
             'title' => $this->title,
             'descript' => $this->descript ?: null,
             'descript_full' => $this->descript_full ?: null,
+            'archive' => 0,
             'date_create' => date('Y-m-d H:i:s'),
             'file_img' => '[]'
         ]);
@@ -175,7 +177,13 @@ class Task extends BaseEntity {
     }
 
     // Получение всех задач
-    public function getAll() {
+    // $archive: 0 = неархивные, 1 = архивные, null = все
+    public function getAll($archive = 0) {
+        $where = [];
+        if ($archive !== null) {
+            $where['archive'] = $archive ? 1 : 0;
+        }
+
         $tasks = Database::select($this->db_name, [
             'id',
             'id_department',
@@ -188,8 +196,9 @@ class Task extends BaseEntity {
             'file_img',
             'title',
             'descript',
-            'descript_full'
-        ]);
+            'descript_full',
+            'archive'
+        ], $where);
 
         // Декодируем JSON и получаем avatar_url из accounts
         return array_map(function($task) {
@@ -243,6 +252,29 @@ class Task extends BaseEntity {
         }
         return $task;
     }
+
+    // Установка статуса архивации задачи (только для задач в колонке 4)
+    public static function setArchive($id, $archive = 1) {
+        // Проверка что задача существует
+        $task = self::check_task($id);
+
+        // Архивировать можно только задачи в колонке 4
+        if ($archive && $task['column_id'] != 4) {
+            RestApi::response([
+                'success' => false, 
+                'errors' => ['column' => 'Архивировать можно только задачи из колонки "Готово"']
+            ], 400);
+        }
+
+        // Обновляем archive
+        Database::update('cards_task', [
+            'archive' => $archive ? 1 : 0
+        ], [
+            'id' => $id
+        ]);
+
+        return ['success' => true, 'archive' => $archive ? 1 : 0];
+    }
 }
 
 ?>
\ No newline at end of file
diff --git a/front_vue/src/api.js b/front_vue/src/api.js
index 1a6100e..50f755c 100644
--- a/front_vue/src/api.js
+++ b/front_vue/src/api.js
@@ -70,7 +70,8 @@ export const columnsApi = {
 
 // ==================== CARDS ====================
 export const cardsApi = {
-  getAll: () => request('/api/task', { credentials: 'include' }),
+  // archive: 0 = неархивные (по умолчанию), 1 = архивные, 'all' = все
+  getAll: (archive = 0) => request(`/api/task${archive !== 0 ? `?archive=${archive}` : ''}`, { credentials: 'include' }),
   updateOrder: (id, column_id, to_index) => request('/api/task', {
     method: 'POST',
     credentials: 'include',
@@ -94,6 +95,12 @@ export const cardsApi = {
     credentials: 'include',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ action: 'delete', id })
+  }),
+  setArchive: (id, archive = 1) => request('/api/task', { 
+    method: 'POST', 
+    credentials: 'include',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ action: 'set_archive', id, archive })
   })
 }
 
diff --git a/front_vue/src/components/Board.vue b/front_vue/src/components/Board.vue
index f41dbcf..97cc42f 100644
--- a/front_vue/src/components/Board.vue
+++ b/front_vue/src/components/Board.vue
@@ -10,6 +10,7 @@
         @drop-card="handleDropCard"
         @open-task="(card) => emit('open-task', { card, columnId: column.id })"
         @create-task="emit('create-task', column.id)"
+        @archive-task="archiveTask"
       />
     </div>
   </div>
@@ -238,7 +239,20 @@ const deleteTask = async (cardId, columnId) => {
   }
 }
 
-defineExpose({ saveTask, deleteTask })
+const archiveTask = async (cardId) => {
+  // Архивируем на сервере
+  const result = await cardsApi.setArchive(cardId, 1)
+  
+  if (result.success) {
+    // Удаляем из локального списка (задача уходит в архив)
+    const index = localCards.value.findIndex(c => c.id === cardId)
+    if (index !== -1) {
+      localCards.value.splice(index, 1)
+    }
+  }
+}
+
+defineExpose({ saveTask, deleteTask, archiveTask })
 </script>
 
 <style scoped>
diff --git a/front_vue/src/components/Card.vue b/front_vue/src/components/Card.vue
index 3a30549..f9e50be 100644
--- a/front_vue/src/components/Card.vue
+++ b/front_vue/src/components/Card.vue
@@ -19,6 +19,14 @@
         </span>
       </div>
       <div class="header-right">
+        <button 
+          v-if="canArchive" 
+          class="btn-archive-card" 
+          @click.stop="handleArchive"
+          title="В архив"
+        >
+          <i data-lucide="archive"></i>
+        </button>
         <span v-if="card.files && card.files.length" class="files-indicator" :title="card.files.length + ' изображений'">
           <i data-lucide="image-plus"></i>
         </span>
@@ -69,7 +77,7 @@ const props = defineProps({
   }
 })
 
-// defineEmits(['delete']) - будет при раскрытии карточки
+const emit = defineEmits(['archive'])
 
 const refreshIcons = () => {
   if (window.lucide) {
@@ -146,6 +154,15 @@ const daysLeftText = computed(() => {
 const isAvatarUrl = (value) => {
   return value && (value.startsWith('http://') || value.startsWith('https://') || value.startsWith('/'))
 }
+
+// Можно ли архивировать (только если колонка 4)
+const canArchive = computed(() => {
+  return Number(props.columnId) === 4
+})
+
+const handleArchive = () => {
+  emit('archive', props.card.id)
+}
 </script>
 
 <style scoped>
@@ -279,4 +296,33 @@ const isAvatarUrl = (value) => {
 .due-date.overdue {
   color: var(--red);
 }
+
+.btn-archive-card {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  border-radius: 6px;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.btn-archive-card i,
+.btn-archive-card svg {
+  width: 18px;
+  height: 18px;
+}
+
+.card:hover .btn-archive-card {
+  display: flex;
+}
+
+.btn-archive-card:hover {
+  background: var(--orange);
+  color: #000;
+}
 </style>
diff --git a/front_vue/src/components/Column.vue b/front_vue/src/components/Column.vue
index eac88c7..633ad36 100644
--- a/front_vue/src/components/Column.vue
+++ b/front_vue/src/components/Column.vue
@@ -30,6 +30,7 @@
           :departments="departments"
           :labels="labels"
           @click="emit('open-task', card)"
+          @archive="emit('archive-task', $event)"
         />
       </template>
       
@@ -56,7 +57,7 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['drop-card', 'open-task', 'create-task'])
+const emit = defineEmits(['drop-card', 'open-task', 'create-task', 'archive-task'])
 
 const refreshIcons = () => {
   if (window.lucide) {
diff --git a/front_vue/src/components/TaskPanel.vue b/front_vue/src/components/TaskPanel.vue
index 20a916c..e66d0ba 100644
--- a/front_vue/src/components/TaskPanel.vue
+++ b/front_vue/src/components/TaskPanel.vue
@@ -1,327 +1,186 @@
 <template>
-  <Transition name="panel">
-    <div v-if="show" class="panel-overlay" @mousedown.self="onOverlayMouseDown" @mouseup.self="onOverlayMouseUp">
-      <div class="panel" :style="{ width: panelWidth + 'px' }" ref="panelRef" @mousedown="overlayMouseDownTarget = false">
-        <!-- Ручка для изменения ширины -->
-        <div 
-          class="resize-handle"
-          @mousedown="startResize"
-        ></div>
-        
-        <div class="panel-header">
-          <div class="header-title">
-            <h2>{{ isNew ? 'Новая задача' : 'Редактирование' }}</h2>
-            <span v-if="!isNew && card?.dateCreate" class="header-date">
-              Создано: {{ formatDate(card.dateCreate) }}
-            </span>
-          </div>
-          <button class="btn-close" @click="tryClose">
-            <i data-lucide="x"></i>
-          </button>
-        </div>
+  <SlidePanel 
+    :show="show" 
+    @close="tryClose"
+  >
+    <template #header>
+      <h2>{{ isNew ? 'Новая задача' : 'Редактирование' }}</h2>
+      <span v-if="!isNew && card?.dateCreate" class="header-date">
+        Создано: {{ formatDate(card.dateCreate) }}
+      </span>
+    </template>
 
-        <div class="panel-body">
-          <div class="field">
-            <label>Название</label>
-            <input 
-              type="text" 
-              v-model="form.title" 
-              placeholder="Введите название задачи"
-              ref="titleInput"
-            >
-          </div>
+    <template #default>
+      <FormField label="Название">
+        <TextInput 
+          v-model="form.title" 
+          placeholder="Введите название задачи"
+          ref="titleInput"
+        />
+      </FormField>
 
-          <div class="field">
-            <label>Краткое описание</label>
-            <input 
-              type="text"
-              v-model="form.description" 
-              placeholder="Краткое описание в одну строку..."
-            >
-          </div>
+      <FormField label="Краткое описание">
+        <TextInput 
+          v-model="form.description" 
+          placeholder="Краткое описание в одну строку..."
+        />
+      </FormField>
 
-          <div class="field">
-            <div class="field-header">
-              <label>Подробное описание</label>
-              <div class="format-buttons">
-                <button type="button" class="format-btn" @mousedown.prevent="applyFormat('bold')" title="Жирный (Ctrl+B)">
-                  <i data-lucide="bold"></i>
-                </button>
-                <button type="button" class="format-btn" @mousedown.prevent="applyFormat('italic')" title="Курсив (Ctrl+I)">
-                  <i data-lucide="italic"></i>
-                </button>
-                <button type="button" class="format-btn" @mousedown.prevent="applyFormat('underline')" title="Подчёркивание (Ctrl+U)">
-                  <i data-lucide="underline"></i>
-                </button>
-              </div>
-            </div>
-            <!-- Редактируемое поле с форматированием -->
-            <div 
-              class="details-editor"
-              :class="{ 'is-empty': !form.details }"
-              contenteditable="true"
-              ref="detailsInput"
-              @input="onDetailsInput"
-              @paste="onDetailsPaste"
-              @keydown="onDetailsKeydown"
-              @click="onDetailsClick"
-              :data-placeholder="'Подробное описание задачи, заметки, ссылки...'"
-            ></div>
-          </div>
-
-          <div class="field">
-            <label>Отдел</label>
-            <div class="tags-select">
-              <button 
-                v-for="dept in departments" 
-                :key="dept.id"
-                class="tag-option"
-                :class="{ active: form.departmentId === dept.id }"
-                :style="{ '--tag-color': dept.color }"
-                @click="selectDepartment(dept.id)"
-              >
-                {{ dept.name_departments }}
-              </button>
-            </div>
-          </div>
-
-          <div class="field">
-            <label>Приоритет</label>
-            <div class="tags-select">
-              <button 
-                v-for="label in labels" 
-                :key="label.id"
-                class="tag-option priority-option"
-                :class="{ active: form.labelId === label.id }"
-                @click="selectLabel(label.id)"
-              >
-                <span class="priority-icon">{{ label.icon }}</span>
-                {{ label.name_labels }}
-              </button>
-            </div>
-          </div>
-
-          <div class="field-row">
-            <div class="field">
-              <label>Срок выполнения</label>
-              <DatePicker v-model="form.dueDate" />
-            </div>
-            <div class="field">
-              <label>Исполнитель</label>
-              <div class="user-dropdown" v-if="!usersLoading" ref="dropdownRef">
-                <!-- Выбранный пользователь / триггер -->
-                <button class="dropdown-trigger" @click="toggleDropdown">
-                  <img v-if="selectedUser" :src="getFullUrl(selectedUser.avatar_url)" :alt="selectedUser.name" class="user-avatar">
-                  <span v-else class="no-user-icon">—</span>
-                  <span class="user-name">{{ selectedUser ? selectedUser.name : 'Без исполнителя' }}</span>
-                  <i data-lucide="chevron-down" class="dropdown-arrow"></i>
-                </button>
-                
-                <!-- Выпадающий список -->
-                <div v-if="dropdownOpen" class="dropdown-menu">
-                  <input 
-                    type="text" 
-                    v-model="userSearch" 
-                    placeholder="Поиск..."
-                    class="dropdown-search"
-                    ref="searchInput"
-                    @click.stop
-                  >
-                  <div class="dropdown-list">
-                    <button 
-                      class="dropdown-item"
-                      :class="{ active: !form.userId }"
-                      @click="selectUser(null)"
-                    >
-                      <span class="no-user-icon">—</span>
-                      <span>Без исполнителя</span>
-                    </button>
-                    <button 
-                      v-for="user in filteredUsers" 
-                      :key="user.id"
-                      class="dropdown-item"
-                      :class="{ active: form.userId === user.id }"
-                      @click="selectUser(user.id)"
-                    >
-                      <img :src="getFullUrl(user.avatar_url)" :alt="user.name" class="user-avatar">
-                      <div class="user-info">
-                        <span class="user-name">{{ user.name }}</span>
-                        <span class="user-telegram">{{ user.telegram }}</span>
-                      </div>
-                    </button>
-                  </div>
-                </div>
-              </div>
-              <div v-else class="users-loading">Загрузка...</div>
-            </div>
-          </div>
-
-          <!-- Прикреплённые файлы -->
-          <div class="field">
-            <label>Прикреплённые файлы</label>
-            <div class="file-hint">Разрешены: PNG, JPEG, JPG, ZIP, RAR (до 10 МБ)</div>
-            
-            <input 
-              type="file" 
-              ref="fileInput"
-              accept=".png,.jpg,.jpeg,.zip,.rar,image/png,image/jpeg,application/zip,application/x-rar-compressed"
-              multiple
-              @change="handleFileSelect"
-              style="display: none"
-            >
-
-            <!-- Пустая зона drag & drop (когда нет файлов) -->
-            <div 
-              v-if="visibleFiles.length === 0"
-              class="file-dropzone"
-              :class="{ 'dragover': isDragging }"
-              @dragover.prevent="isDragging = true"
-              @dragleave.prevent="isDragging = false"
-              @drop.prevent="handleFileDrop"
-              @click="triggerFileInput"
-            >
-              <i data-lucide="image-plus" class="dropzone-icon"></i>
-              <span class="dropzone-text">Перетащите изображения сюда</span>
-              <span class="dropzone-subtext">или нажмите для выбора</span>
-            </div>
-
-            <!-- Сетка с файлами (когда есть файлы) -->
-            <div 
-              v-else 
-              class="files-container"
-              :class="{ 'dragover': isDragging }"
-              @dragover.prevent="isDragging = true"
-              @dragleave.prevent="isDragging = false"
-              @drop.prevent="handleFileDrop"
-            >
-              <!-- Превью файлов -->
-              <div 
-                v-for="(file, index) in attachedFiles" 
-                :key="file.name + '-' + file.size"
-                class="file-preview-item"
-                v-show="!file.toDelete"
-              >
-                <div class="file-actions">
-                  <button class="btn-download-file" @click.stop="downloadFile(file)" title="Скачать">
-                    <i data-lucide="download"></i>
-                  </button>
-                  <button class="btn-remove-file" @click.stop="removeFile(index)" title="Удалить">
-                    <i data-lucide="x"></i>
-                  </button>
-                </div>
-                <div class="file-thumbnail" @click="!isArchive(file) && openImagePreview(file)">
-                  <template v-if="isArchive(file)">
-                    <div class="archive-icon">
-                      <i data-lucide="archive"></i>
-                      <span class="archive-ext">.{{ file.name.split('.').pop() }}</span>
-                    </div>
-                  </template>
-                  <img v-else :src="getFullUrl(file.preview)" :alt="file.name">
-                </div>
-              </div>
-
-              <!-- Кнопка добавить ещё -->
-              <div class="file-add-btn" @click="triggerFileInput">
-                <i data-lucide="plus"></i>
-                <span>Добавить</span>
-              </div>
-            </div>
-
-            <!-- Ошибка загрузки -->
-            <div v-if="fileError" class="file-error">
-              <i data-lucide="alert-circle"></i>
-              {{ fileError }}
-            </div>
-          </div>
-
-        </div>
-
-        <div class="panel-footer">
-          <button v-if="!isNew" class="btn-delete" @click="handleDelete">
-            <i data-lucide="trash-2"></i>
-            Удалить
-          </button>
-          <div class="footer-right">
-            <button class="btn-cancel" @click="tryClose">Отмена</button>
-            <button class="btn-save" @click="handleSave" :disabled="!form.title.trim() || !form.departmentId || isSaving">
-              <span v-if="isSaving" class="btn-loader"></span>
-              <span v-else>{{ isNew ? 'Создать' : 'Сохранить' }}</span>
+      <FormField label="Подробное описание">
+        <template #actions>
+          <div class="format-buttons">
+            <button type="button" class="format-btn" @mousedown.prevent="applyFormat('bold')" title="Жирный (Ctrl+B)">
+              <i data-lucide="bold"></i>
+            </button>
+            <button type="button" class="format-btn" @mousedown.prevent="applyFormat('italic')" title="Курсив (Ctrl+I)">
+              <i data-lucide="italic"></i>
+            </button>
+            <button type="button" class="format-btn" @mousedown.prevent="applyFormat('underline')" title="Подчёркивание (Ctrl+U)">
+              <i data-lucide="underline"></i>
             </button>
           </div>
-        </div>
+        </template>
+        <RichTextEditor 
+          v-model="form.details" 
+          placeholder="Подробное описание задачи, заметки, ссылки..."
+          :show-toolbar="false"
+          ref="detailsEditor"
+        />
+      </FormField>
+
+      <FormField label="Отдел">
+        <TagsSelect 
+          v-model="form.departmentId"
+          :options="departmentOptions"
+        />
+      </FormField>
+
+      <FormField label="Приоритет">
+        <TagsSelect 
+          v-model="form.labelId"
+          :options="labelOptions"
+        />
+      </FormField>
+
+      <div class="field-row">
+        <FormField label="Срок выполнения">
+          <DatePicker v-model="form.dueDate" />
+        </FormField>
+        
+        <FormField label="Исполнитель">
+          <SelectDropdown 
+            v-if="!usersLoading"
+            v-model="form.userId"
+            :options="userOptions"
+            searchable
+            placeholder="Без исполнителя"
+            empty-label="Без исполнителя"
+          />
+          <div v-else class="users-loading">Загрузка...</div>
+        </FormField>
       </div>
-      
-      <!-- Диалог несохранённых изменений -->
-      <ConfirmDialog
-        :show="showUnsavedDialog"
-        title="Обнаружены изменения"
-        message="У вас есть несохранённые изменения.<br>Что вы хотите сделать?"
-        confirm-text="Сохранить"
-        :show-discard="true"
-        @confirm="confirmSave"
-        @cancel="cancelClose"
-        @discard="confirmDiscard"
-      />
 
-      <!-- Диалог удаления задачи -->
-      <ConfirmDialog
-        :show="showDeleteDialog"
-        title="Удалить задачу?"
-        message="Это действие нельзя отменить.<br>Задача будет удалена навсегда."
-        confirm-text="Удалить"
-        variant="danger"
-        @confirm="confirmDelete"
-        @cancel="showDeleteDialog = false"
-      />
+      <FormField 
+        label="Прикреплённые файлы" 
+        hint="Разрешены: PNG, JPEG, JPG, ZIP, RAR (до 10 МБ)"
+        :error="fileError"
+      >
+        <FileUploader 
+          :files="attachedFiles"
+          :get-full-url="getFullUrl"
+          @add="handleFileAdd"
+          @remove="handleFileRemove"
+          @preview="openImagePreview"
+          @error="fileError = $event"
+        />
+      </FormField>
+    </template>
 
-      <!-- Диалог удаления файла -->
-      <ConfirmDialog
-        :show="showDeleteFileDialog"
-        title="Удалить изображение?"
-        message="Изображение будет удалено из задачи."
-        confirm-text="Удалить"
-        variant="danger"
-        @confirm="confirmDeleteFile"
-        @cancel="showDeleteFileDialog = false"
-      />
+    <template #footer>
+      <div class="footer-left">
+        <button v-if="!isNew" class="btn-icon btn-delete" @click="handleDelete" title="Удалить">
+          <i data-lucide="trash-2"></i>
+        </button>
+        <button v-if="!isNew && canArchive" class="btn-icon btn-archive" @click="handleArchive" title="В архив">
+          <i data-lucide="archive"></i>
+        </button>
+      </div>
+      <div class="footer-right">
+        <button class="btn-cancel" @click="tryClose">Отмена</button>
+        <button class="btn-save" @click="handleSave" :disabled="!form.title.trim() || !form.departmentId || isSaving">
+          <span v-if="isSaving" class="btn-loader"></span>
+          <span v-else>{{ isNew ? 'Создать' : 'Сохранить' }}</span>
+        </button>
+      </div>
+    </template>
+  </SlidePanel>
 
-      <!-- Модальное окно просмотра изображения -->
-      <Transition name="dialog">
-        <div v-if="previewImage" class="image-preview-overlay" @click="closeImagePreview">
-          <div class="image-preview-container" @click.stop>
-            <div class="preview-actions">
-              <button class="btn-download-preview" @click="downloadFile(previewImage)" title="Скачать">
-                <i data-lucide="download"></i>
-              </button>
-              <button class="btn-delete-preview" @click="deleteFromPreview" title="Удалить">
-                <i data-lucide="trash-2"></i>
-              </button>
-              <button class="btn-close-preview" @click="closeImagePreview" title="Закрыть">
-                <i data-lucide="x"></i>
-              </button>
-            </div>
-            <template v-if="isArchive(previewImage)">
-              <div class="archive-preview-icon">
-                <i data-lucide="archive"></i>
-                <span>{{ previewImage.name }}</span>
-              </div>
-            </template>
-            <img v-else :src="getFullUrl(previewImage.preview)" :alt="previewImage.name" class="image-preview-full">
-            <div class="image-preview-info">
-              <span class="preview-name">{{ previewImage.name }}</span>
-              <span class="preview-size">{{ formatFileSize(previewImage.size) }}</span>
-            </div>
-          </div>
-        </div>
-      </Transition>
-    </div>
-  </Transition>
+  <!-- Диалог несохранённых изменений -->
+  <ConfirmDialog
+    :show="showUnsavedDialog"
+    title="Обнаружены изменения"
+    message="У вас есть несохранённые изменения.<br>Что вы хотите сделать?"
+    confirm-text="Сохранить"
+    :show-discard="true"
+    @confirm="confirmSave"
+    @cancel="cancelClose"
+    @discard="confirmDiscard"
+  />
+
+  <!-- Диалог удаления задачи -->
+  <ConfirmDialog
+    :show="showDeleteDialog"
+    title="Удалить задачу?"
+    message="Это действие нельзя отменить.<br>Задача будет удалена навсегда."
+    confirm-text="Удалить"
+    variant="danger"
+    @confirm="confirmDelete"
+    @cancel="showDeleteDialog = false"
+  />
+
+  <!-- Диалог удаления файла -->
+  <ConfirmDialog
+    :show="showDeleteFileDialog"
+    title="Удалить изображение?"
+    message="Изображение будет удалено из задачи."
+    confirm-text="Удалить"
+    variant="danger"
+    @confirm="confirmDeleteFile"
+    @cancel="showDeleteFileDialog = false"
+  />
+
+  <!-- Диалог архивации задачи -->
+  <ConfirmDialog
+    :show="showArchiveDialog"
+    title="Архивировать задачу?"
+    message="Задача будет перемещена в архив.<br>Вы сможете восстановить её позже."
+    confirm-text="В архив"
+    variant="warning"
+    @confirm="confirmArchive"
+    @cancel="showArchiveDialog = false"
+  />
+
+  <!-- Модальное окно просмотра изображения -->
+  <ImagePreview 
+    :file="previewImage"
+    :get-full-url="getFullUrl"
+    @close="closeImagePreview"
+    @delete="deleteFromPreview"
+  />
 </template>
 
 <script setup>
-import { ref, reactive, computed, watch, onMounted, onUpdated, onUnmounted, nextTick } from 'vue'
+import { ref, reactive, computed, watch, onMounted, onUpdated, nextTick } from 'vue'
 import DatePicker from './DatePicker.vue'
 import ConfirmDialog from './ConfirmDialog.vue'
+import SlidePanel from './ui/SlidePanel.vue'
+import FormField from './ui/FormField.vue'
+import TextInput from './ui/TextInput.vue'
+import RichTextEditor from './ui/RichTextEditor.vue'
+import SelectDropdown from './ui/SelectDropdown.vue'
+import TagsSelect from './ui/TagsSelect.vue'
+import FileUploader from './ui/FileUploader.vue'
+import ImagePreview from './ui/ImagePreview.vue'
 import { usersApi, taskImageApi, getFullUrl } from '../api'
 
 const props = defineProps({
@@ -338,7 +197,7 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['close', 'save', 'delete'])
+const emit = defineEmits(['close', 'save', 'delete', 'archive'])
 
 const isNew = ref(true)
 const users = ref([])
@@ -356,179 +215,49 @@ const form = reactive({
 })
 
 const titleInput = ref(null)
-const dropdownRef = ref(null)
-const searchInput = ref(null)
-const panelRef = ref(null)
-const fileInput = ref(null)
-const detailsInput = ref(null)
-const dropdownOpen = ref(false)
-const userSearch = ref('')
+const detailsEditor = ref(null)
+
+// Преобразование departments в формат для TagsSelect
+const departmentOptions = computed(() => {
+  return props.departments.map(dept => ({
+    value: dept.id,
+    label: dept.name_departments,
+    color: dept.color
+  }))
+})
+
+// Преобразование labels в формат для TagsSelect
+const labelOptions = computed(() => {
+  return props.labels.map(label => ({
+    value: label.id,
+    label: label.name_labels,
+    icon: label.icon
+  }))
+})
+
+// Преобразование users в формат для SelectDropdown
+const userOptions = computed(() => {
+  return users.value.map(user => ({
+    value: user.id,
+    label: user.name,
+    subtitle: user.telegram,
+    avatar: getFullUrl(user.avatar_url)
+  }))
+})
 
 // Прикреплённые файлы
 const attachedFiles = ref([])
-const isDragging = ref(false)
 const fileError = ref('')
-const allowedExtensions = ['png', 'jpg', 'jpeg', 'zip', 'rar']
-const archiveExtensions = ['zip', 'rar']
-const maxFileSize = 10 * 1024 * 1024 // 10 MB
-
-// Получить расширение файла
-const getFileExt = (file) => {
-  return file.name?.split('.').pop()?.toLowerCase() || ''
-}
-
-// Проверка разрешён ли файл (по расширению)
-const isAllowedFile = (file) => {
-  return allowedExtensions.includes(getFileExt(file))
-}
-
-// Проверка является ли файл архивом
-const isArchive = (file) => {
-  return archiveExtensions.includes(getFileExt(file))
-}
-
-// Видимые файлы (без помеченных на удаление)
-const visibleFiles = computed(() => attachedFiles.value.filter(f => !f.toDelete))
 
 // Просмотр изображения
 const previewImage = ref(null)
 
-// Resize панели
-const panelWidth = ref(600)
-const isResizing = ref(false)
-const minWidth = 500
-const maxWidth = 1000
-
-const startResize = (e) => {
-  isResizing.value = true
-  document.addEventListener('mousemove', onResize)
-  document.addEventListener('mouseup', stopResize)
-  document.body.style.cursor = 'ew-resize'
-  document.body.style.userSelect = 'none'
-}
-
-const onResize = (e) => {
-  if (!isResizing.value) return
-  const newWidth = window.innerWidth - e.clientX
-  panelWidth.value = Math.min(maxWidth, Math.max(minWidth, newWidth))
-}
-
-const stopResize = () => {
-  // Небольшая задержка чтобы клик на overlay не сработал
-  setTimeout(() => {
-    isResizing.value = false
-  }, 100)
-  document.removeEventListener('mousemove', onResize)
-  document.removeEventListener('mouseup', stopResize)
-  document.body.style.cursor = ''
-  document.body.style.userSelect = ''
-}
-
-const overlayMouseDownTarget = ref(false)
-
-const onOverlayMouseDown = () => {
-  overlayMouseDownTarget.value = true
-}
-
-const onOverlayMouseUp = () => {
-  if (overlayMouseDownTarget.value && !isResizing.value) {
-    tryClose()
-  }
-  overlayMouseDownTarget.value = false
-}
-
-const tryClose = () => {
-  if (hasChanges.value) {
-    showUnsavedDialog.value = true
-  } else {
-    emit('close')
-  }
-}
-
-const confirmSave = () => {
-  showUnsavedDialog.value = false
-  handleSave()
-}
-
-const confirmDiscard = () => {
-  showUnsavedDialog.value = false
-  emit('close')
-}
-
-const cancelClose = () => {
-  showUnsavedDialog.value = false
-}
-
-const selectDepartment = (id) => {
-  form.departmentId = form.departmentId === id ? null : id
-}
-
-const selectLabel = (id) => {
-  form.labelId = form.labelId === id ? null : id
-}
-
-const selectUser = (id) => {
-  form.userId = id
-  dropdownOpen.value = false
-  userSearch.value = ''
-}
-
-const toggleDropdown = async () => {
-  dropdownOpen.value = !dropdownOpen.value
-  if (dropdownOpen.value) {
-    await nextTick()
-    searchInput.value?.focus()
-    refreshIcons()
-  }
-}
-
-const selectedUser = computed(() => {
-  if (!form.userId) return null
-  return users.value.find(u => u.id === form.userId)
-})
-
-const filteredUsers = computed(() => {
-  if (!userSearch.value.trim()) return users.value
-  const search = userSearch.value.toLowerCase()
-  return users.value.filter(u => 
-    u.name.toLowerCase().includes(search) || 
-    u.username.toLowerCase().includes(search) ||
-    u.telegram.toLowerCase().includes(search)
-  )
-})
-
-const handleClickOutside = (e) => {
-  if (dropdownRef.value && !dropdownRef.value.contains(e.target)) {
-    dropdownOpen.value = false
-    userSearch.value = ''
-  }
-}
-
-const fetchUsers = async () => {
-  usersLoading.value = true
-  try {
-    const data = await usersApi.getAll()
-    if (data.success) {
-      users.value = data.data
-    }
-  } catch (error) {
-    console.error('Ошибка загрузки пользователей:', error)
-  } finally {
-    usersLoading.value = false
-  }
-}
-
-const findUserIdByAvatar = (avatarUrl) => {
-  if (!avatarUrl) return null
-  const user = users.value.find(u => u.avatar_url === avatarUrl)
-  return user ? user.id : null
-}
-
-const getAvatarByUserId = (userId) => {
-  if (!userId) return null
-  const user = users.value.find(u => u.id === userId)
-  return user ? user.avatar_url : null
-}
+// Диалоги
+const showUnsavedDialog = ref(false)
+const showDeleteDialog = ref(false)
+const showDeleteFileDialog = ref(false)
+const showArchiveDialog = ref(false)
+const fileToDeleteIndex = ref(null)
 
 // Начальные значения для отслеживания изменений
 const initialForm = ref({})
@@ -558,10 +287,47 @@ const hasChanges = computed(() => {
     attachedFiles.value.length !== initialFilesCount.value
 })
 
-const showUnsavedDialog = ref(false)
-const showDeleteDialog = ref(false)
-const showDeleteFileDialog = ref(false)
-const fileToDeleteIndex = ref(null)
+const tryClose = () => {
+  if (hasChanges.value) {
+    showUnsavedDialog.value = true
+  } else {
+    emit('close')
+  }
+}
+
+const confirmSave = () => {
+  showUnsavedDialog.value = false
+  handleSave()
+}
+
+const confirmDiscard = () => {
+  showUnsavedDialog.value = false
+  emit('close')
+}
+
+const cancelClose = () => {
+  showUnsavedDialog.value = false
+}
+
+const fetchUsers = async () => {
+  usersLoading.value = true
+  try {
+    const data = await usersApi.getAll()
+    if (data.success) {
+      users.value = data.data
+    }
+  } catch (error) {
+    console.error('Ошибка загрузки пользователей:', error)
+  } finally {
+    usersLoading.value = false
+  }
+}
+
+const getAvatarByUserId = (userId) => {
+  if (!userId) return null
+  const user = users.value.find(u => u.id === userId)
+  return user ? user.avatar_url : null
+}
 
 const resetForm = () => {
   form.title = ''
@@ -574,14 +340,22 @@ const resetForm = () => {
   clearFiles()
 }
 
+const clearFiles = () => {
+  attachedFiles.value = []
+  fileError.value = ''
+  previewImage.value = null
+}
+
+// Применить форматирование через редактор
+const applyFormat = (command) => {
+  detailsEditor.value?.applyFormat(command)
+}
+
 watch(() => props.show, async (newVal) => {
   if (newVal) {
     isNew.value = !props.card
-    
-    // Очищаем файлы при открытии панели
     clearFiles()
     
-    // Загружаем пользователей при открытии
     await fetchUsers()
     
     if (props.card) {
@@ -591,32 +365,29 @@ watch(() => props.show, async (newVal) => {
       form.departmentId = props.card.departmentId || null
       form.labelId = props.card.labelId || null
       form.dueDate = props.card.dueDate || ''
-      // Используем accountId напрямую
       form.userId = props.card.accountId || null
       
-      // Загружаем существующие файлы если есть
       if (props.card.files && props.card.files.length > 0) {
         attachedFiles.value = props.card.files.map(f => ({
           name: f.name,
           size: f.size,
           type: f.type,
           preview: f.data || f.url,
-          isNew: false  // Файл уже на сервере
+          isNew: false
         }))
       }
     } else {
       resetForm()
     }
     
-    // Сохраняем начальные значения для отслеживания изменений
     await nextTick()
     saveInitialForm()
     
-    // Устанавливаем содержимое редактора описания
-    setEditorContent(form.details)
+    // Установка содержимого редактора
+    detailsEditor.value?.setContent(form.details)
     
     await nextTick()
-    titleInput.value?.focus()
+    titleInput.value?.$el?.focus()
     refreshIcons()
   }
 })
@@ -628,7 +399,6 @@ const handleSave = async () => {
   fileError.value = ''
   
   if (props.card?.id) {
-    
     // Загружаем новые файлы
     const newFiles = attachedFiles.value.filter(f => f.isNew && !f.toDelete)
     for (const file of newFiles) {
@@ -656,7 +426,6 @@ const handleSave = async () => {
       }
     }
     
-    // Убираем удалённые из массива
     attachedFiles.value = attachedFiles.value.filter(f => !f.toDelete)
   }
   
@@ -687,6 +456,22 @@ const handleDelete = () => {
   showDeleteDialog.value = true
 }
 
+// Можно ли архивировать (только если колонка 4)
+const canArchive = computed(() => {
+  return Number(props.columnId) === 4
+})
+
+const handleArchive = () => {
+  showArchiveDialog.value = true
+}
+
+const confirmArchive = () => {
+  showArchiveDialog.value = false
+  if (props.card?.id) {
+    emit('archive', props.card.id)
+  }
+}
+
 const confirmDelete = () => {
   showDeleteDialog.value = false
   emit('delete', props.card.id)
@@ -700,71 +485,14 @@ const formatDate = (dateStr) => {
   return `${day} ${months[date.getMonth()]} ${date.getFullYear()}`
 }
 
-// Функции для работы с файлами
-const triggerFileInput = () => {
-  fileInput.value?.click()
+// Работа с файлами
+const handleFileAdd = async (file) => {
+  attachedFiles.value.push(file)
+  await nextTick()
+  refreshIcons()
 }
 
-const handleFileSelect = (event) => {
-  const files = event.target.files
-  if (files) {
-    processFiles(Array.from(files))
-  }
-  // Сбрасываем input для повторного выбора того же файла
-  event.target.value = ''
-}
-
-const handleFileDrop = (event) => {
-  isDragging.value = false
-  const files = event.dataTransfer.files
-  if (files) {
-    processFiles(Array.from(files))
-  }
-}
-
-const processFiles = (files) => {
-  fileError.value = ''
-  
-  for (const file of files) {
-    // Проверка типа файла
-    if (!isAllowedFile(file)) {
-      fileError.value = `Файл "${file.name}" не поддерживается. Разрешены: PNG, JPEG, JPG, ZIP, RAR.`
-      continue
-    }
-    
-    // Проверка размера файла
-    if (file.size > maxFileSize) {
-      fileError.value = `Файл "${file.name}" слишком большой. Максимальный размер: 10 МБ.`
-      continue
-    }
-    
-    // Проверяем, не добавлен ли уже такой файл
-    const isDuplicate = attachedFiles.value.some(
-      f => f.name === file.name && f.size === file.size
-    )
-    if (isDuplicate) {
-      continue
-    }
-    
-    // Создаём превью
-    const reader = new FileReader()
-    reader.onload = async (e) => {
-      attachedFiles.value.push({
-        file: file,
-        name: file.name,
-        size: file.size,
-        type: file.type,
-        preview: e.target.result,
-        isNew: true  // Флаг что файл новый и не загружен на сервер
-      })
-      await nextTick()
-      refreshIcons()
-    }
-    reader.readAsDataURL(file)
-  }
-}
-
-const removeFile = (index) => {
+const handleFileRemove = (index) => {
   fileToDeleteIndex.value = index
   showDeleteFileDialog.value = true
 }
@@ -774,10 +502,8 @@ const confirmDeleteFile = () => {
     const file = attachedFiles.value[fileToDeleteIndex.value]
     
     if (file.isNew) {
-      // Новый файл — просто удаляем из массива
       attachedFiles.value.splice(fileToDeleteIndex.value, 1)
     } else {
-      // Существующий файл — помечаем для удаления при сохранении
       file.toDelete = true
     }
   }
@@ -785,18 +511,6 @@ const confirmDeleteFile = () => {
   fileToDeleteIndex.value = null
 }
 
-const formatFileSize = (bytes) => {
-  if (bytes < 1024) return bytes + ' Б'
-  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' КБ'
-  return (bytes / (1024 * 1024)).toFixed(1) + ' МБ'
-}
-
-const clearFiles = () => {
-  attachedFiles.value = []
-  fileError.value = ''
-  previewImage.value = null
-}
-
 const openImagePreview = (file) => {
   previewImage.value = file
   nextTick(refreshIcons)
@@ -813,311 +527,34 @@ const deleteFromPreview = () => {
     )
     if (index !== -1) {
       closeImagePreview()
-      removeFile(index)
+      handleFileRemove(index)
     }
   }
 }
 
-const downloadFile = async (file) => {
-  const url = getFullUrl(file.preview)
-  try {
-    // Если это data URL (base64) - скачиваем напрямую
-    if (file.preview.startsWith('data:')) {
-      const link = document.createElement('a')
-      link.href = file.preview
-      link.download = file.name
-      document.body.appendChild(link)
-      link.click()
-      document.body.removeChild(link)
-    } else {
-      // Для внешних URL - загружаем как blob
-      const response = await fetch(url)
-      const blob = await response.blob()
-      const blobUrl = window.URL.createObjectURL(blob)
-      const link = document.createElement('a')
-      link.href = blobUrl
-      link.download = file.name
-      document.body.appendChild(link)
-      link.click()
-      document.body.removeChild(link)
-      window.URL.revokeObjectURL(blobUrl)
-    }
-  } catch (error) {
-    console.error('Ошибка скачивания:', error)
-    // Fallback - открыть в новой вкладке
-    window.open(url, '_blank')
-  }
-}
-
 const refreshIcons = () => {
   if (window.lucide) {
     window.lucide.createIcons()
   }
 }
 
-// Применить форматирование (toggle)
-const applyFormat = (command) => {
-  detailsInput.value?.focus()
-  document.execCommand(command, false, null)
-  syncDetailsFromEditor()
-}
-
-// Синхронизация содержимого редактора с form.details
-const syncDetailsFromEditor = () => {
-  if (!detailsInput.value) return
-  // Нормализуем переносы строк в <br>
-  let html = detailsInput.value.innerHTML
-  html = html.replace(/<\/div><div>/gi, '<br>')
-  html = html.replace(/<div>/gi, '')
-  html = html.replace(/<\/div>/gi, '')
-  form.details = html
-}
-
-// Обработка ввода
-const onDetailsInput = () => {
-  syncDetailsFromEditor()
-}
-
-// Обработка клика (открытие ссылок)
-const onDetailsClick = (e) => {
-  // Если кликнули по ссылке — открываем в новой вкладке
-  if (e.target.tagName === 'A') {
-    e.preventDefault()
-    window.open(e.target.href, '_blank')
-  }
-}
-
-// Обработка вставки (очистка форматирования из внешних источников)
-const onDetailsPaste = (e) => {
-  e.preventDefault()
-  const text = e.clipboardData.getData('text/plain')
-  document.execCommand('insertText', false, text)
-  // Подсвечиваем ссылки после вставки
-  setTimeout(linkifyContent, 0)
-}
-
-// Горячие клавиши
-const onDetailsKeydown = (e) => {
-  if (e.ctrlKey || e.metaKey) {
-    if (e.key === 'b') {
-      e.preventDefault()
-      applyFormat('bold')
-    } else if (e.key === 'i') {
-      e.preventDefault()
-      applyFormat('italic')
-    } else if (e.key === 'u') {
-      e.preventDefault()
-      applyFormat('underline')
-    }
-  }
-  
-  // После пробела или Enter — подсвечиваем ссылки
-  if (e.key === ' ' || e.key === 'Enter') {
-    setTimeout(linkifyContent, 0)
-  }
-}
-
-// Автоматическое преобразование URL в ссылки (вызывается после пробела/Enter)
-const linkifyContent = () => {
-  if (!detailsInput.value) return
-  
-  const html = detailsInput.value.innerHTML
-  
-  // Ищем URL которые ещё не в тегах <a>
-  // Разбиваем HTML на части: теги <a>...</a> и остальной текст
-  const parts = html.split(/(<a [^>]*>.*?<\/a>)/gi)
-  
-  let changed = false
-  const newParts = parts.map(part => {
-    // Если это уже ссылка — не трогаем
-    if (part.startsWith('<a ')) return part
-    
-    // Ищем URL в этой части
-    const newPart = part.replace(
-      /(https?:\/\/[^\s<>"]+)/g,
-      '<a href="$1" target="_blank" rel="noopener">$1</a>'
-    )
-    if (newPart !== part) changed = true
-    return newPart
-  })
-  
-  if (changed) {
-    // Сохраняем позицию курсора (в конце)
-    detailsInput.value.innerHTML = newParts.join('')
-    
-    // Ставим курсор в конец
-    const range = document.createRange()
-    const selection = window.getSelection()
-    range.selectNodeContents(detailsInput.value)
-    range.collapse(false)
-    selection.removeAllRanges()
-    selection.addRange(range)
-    
-    syncDetailsFromEditor()
-  }
-}
-
-// Установка содержимого редактора
-const setEditorContent = (html) => {
-  if (detailsInput.value) {
-    detailsInput.value.innerHTML = linkifyHtml(html || '')
-  }
-}
-
-// Простое преобразование URL в ссылки (без сложных regex)
-const linkifyHtml = (html) => {
-  if (!html) return ''
-  
-  // Если уже есть теги <a> — не трогаем
-  if (html.includes('<a ')) return html
-  
-  // Простая замена URL на ссылки
-  return html.replace(
-    /(https?:\/\/[^\s<>"]+)/g,
-    '<a href="$1" target="_blank" rel="noopener">$1</a>'
-  )
-}
-
-onMounted(() => {
-  refreshIcons()
-  document.addEventListener('click', handleClickOutside)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside)
-})
-
+onMounted(refreshIcons)
 onUpdated(refreshIcons)
 </script>
 
 <style scoped>
-.panel-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 1000;
-}
-
-.panel {
-  position: fixed;
-  top: 0;
-  right: 0;
-  max-width: 100%;
-  height: 100vh;
-  background: #18181b;
-  display: flex;
-  flex-direction: column;
-  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.4);
-}
-
-.resize-handle {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 6px;
-  height: 100%;
-  cursor: ew-resize;
-  background: transparent;
-  transition: background 0.15s;
-  z-index: 10;
-}
-
-.resize-handle:hover,
-.resize-handle:active {
-  background: var(--accent);
-}
-
-.panel-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 24px 32px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-}
-
-.header-title {
-  display: flex;
-  align-items: baseline;
-  gap: 16px;
-}
-
-.panel-header h2 {
-  font-size: 20px;
-  font-weight: 500;
-}
-
 .header-date {
   font-size: 13px;
   color: var(--text-muted);
 }
 
-.btn-close {
-  background: none;
-  border: none;
-  color: var(--text-muted);
-  cursor: pointer;
-  padding: 8px;
+.field-row {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 8px;
-  transition: all 0.15s;
+  gap: 20px;
 }
 
-.btn-close i {
-  width: 20px;
-  height: 20px;
-}
-
-.btn-close:hover {
-  background: rgba(255, 255, 255, 0.06);
-  color: var(--text-primary);
-}
-
-.panel-body {
+.field-row > :deep(.field) {
   flex: 1;
-  padding: 32px;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-}
-
-.panel-body::-webkit-scrollbar {
-  width: 6px;
-}
-
-.panel-body::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.panel-body::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.15);
-  border-radius: 3px;
-}
-
-.panel-body::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.25);
-}
-
-.field {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.field label {
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.field-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
 }
 
 .format-buttons {
@@ -1156,381 +593,58 @@ onUpdated(refreshIcons)
   height: 10px;
 }
 
-.field input {
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 8px;
-  padding: 14px 16px;
-  height: 48px;
-  color: var(--text-primary);
-  font-family: inherit;
-  font-size: 14px;
-  outline: none;
-  transition: all 0.15s;
-}
-
-.field textarea {
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 8px;
-  padding: 14px 16px;
-  color: var(--text-primary);
-  font-family: inherit;
-  font-size: 14px;
-  outline: none;
-}
-
-.field input:focus,
-.field textarea:focus {
-  border-color: var(--accent);
-  background: rgba(255, 255, 255, 0.06);
-}
-
-.field input::placeholder,
-.field textarea::placeholder {
-  color: var(--text-muted);
-}
-
-.field textarea {
-  resize: vertical;
-  min-height: 120px;
-  line-height: 1.6;
-  transition: border-color 0.15s, background 0.15s;
-}
-
-/* Редактор описания с форматированием */
-.details-editor {
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 8px;
-  padding: 14px 16px;
-  min-height: 120px;
-  max-height: 400px;
-  overflow-y: auto;
-  color: var(--text-primary);
-  font-size: 14px;
-  line-height: 1.6;
-  transition: border-color 0.15s, background 0.15s;
-  word-break: break-word;
-  outline: none;
-  resize: vertical;
-}
-
-.details-editor:focus {
-  border-color: var(--accent);
-  background: rgba(255, 255, 255, 0.06);
-}
-
-.details-editor:empty::before {
-  content: attr(data-placeholder);
-  color: var(--text-muted);
-  pointer-events: none;
-}
-
-.details-editor::-webkit-scrollbar {
-  width: 6px;
-}
-
-.details-editor::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.details-editor::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.15);
-  border-radius: 3px;
-}
-
-.details-editor :deep(a) {
-  color: var(--accent);
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.details-editor :deep(a:hover) {
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-.details-editor :deep(b),
-.details-editor :deep(strong) {
-  font-weight: 600;
-}
-
-.details-editor :deep(i),
-.details-editor :deep(em) {
-  font-style: italic;
-}
-
-.details-editor :deep(u) {
-  text-decoration: underline;
-}
-
-.field textarea::-webkit-scrollbar {
-  width: 6px;
-}
-
-.field textarea::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.field textarea::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.15);
-  border-radius: 3px;
-}
-
-.field textarea::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.25);
-}
-
-.field-row {
-  display: flex;
-  gap: 20px;
-}
-
-.field-row .field {
-  flex: 1;
-}
-
-.tags-select {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-.tag-option {
-  padding: 8px 14px;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 6px;
-  color: var(--text-secondary);
-  font-family: inherit;
-  font-size: 12px;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.3px;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.tag-option:hover {
-  border-color: var(--tag-color);
-  color: var(--tag-color);
-}
-
-.tag-option.active {
-  background: var(--tag-color);
-  border-color: var(--tag-color);
-  color: #000;
-}
-
-.priority-option {
-  --tag-color: var(--accent);
-}
-
-.priority-icon {
-  font-size: 14px;
-  margin-right: 4px;
-}
-
-.user-dropdown {
-  position: relative;
-}
-
-.dropdown-trigger {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-  padding: 14px 16px;
-  height: 48px;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 8px;
-  box-sizing: border-box;
-  color: var(--text-primary);
-  font-family: inherit;
-  font-size: 14px;
-  cursor: pointer;
-  transition: all 0.15s;
-  text-align: left;
-}
-
-.dropdown-trigger:hover {
-  border-color: rgba(255, 255, 255, 0.15);
-  background: rgba(255, 255, 255, 0.06);
-}
-
-.dropdown-arrow {
-  width: 16px;
-  height: 16px;
-  margin-left: auto;
-  color: var(--text-muted);
-}
-
-.dropdown-menu {
-  position: absolute;
-  top: calc(100% + 6px);
-  left: 0;
-  right: 0;
-  background: #1f1f23;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 10px;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
-  z-index: 100;
-  overflow: hidden;
-}
-
-.dropdown-search {
-  width: 100%;
-  padding: 12px 14px;
-  background: transparent;
-  border: none;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-  color: var(--text-primary);
-  font-family: inherit;
-  font-size: 14px;
-  outline: none;
-}
-
-.dropdown-search::placeholder {
-  color: var(--text-muted);
-}
-
-.dropdown-list {
-  max-height: 240px;
-  overflow-y: auto;
-  padding: 6px;
-}
-
-.dropdown-list::-webkit-scrollbar {
-  width: 6px;
-}
-
-.dropdown-list::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.dropdown-list::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.15);
-  border-radius: 3px;
-}
-
-.dropdown-list::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.25);
-}
-
-.dropdown-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-  padding: 10px 12px;
-  background: transparent;
-  border: none;
-  border-radius: 6px;
-  color: var(--text-secondary);
-  font-family: inherit;
-  font-size: 13px;
-  cursor: pointer;
-  transition: all 0.1s;
-  text-align: left;
-}
-
-.dropdown-item:hover {
-  background: rgba(255, 255, 255, 0.06);
-  color: var(--text-primary);
-}
-
-.dropdown-item.active {
-  background: var(--accent);
-  color: #000;
-}
-
-.user-avatar {
-  width: 28px;
-  height: 28px;
-  border-radius: 6px;
-  object-fit: cover;
-  flex-shrink: 0;
-}
-
-.user-info {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.user-name {
-  white-space: nowrap;
-}
-
-.user-telegram {
-  font-size: 11px;
-  color: var(--text-muted);
-}
-
-.dropdown-item.active .user-telegram {
-  color: rgba(0, 0, 0, 0.5);
-}
-
-.no-user-icon {
-  width: 28px;
-  height: 28px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 6px;
-  font-size: 14px;
-  flex-shrink: 0;
-}
-
-.dropdown-item.active .no-user-icon {
-  background: rgba(0, 0, 0, 0.15);
-}
-
 .users-loading {
   color: var(--text-muted);
   font-size: 13px;
   padding: 12px 0;
 }
 
-.panel-footer {
+.btn-icon.btn-delete {
+  border: 1px solid var(--red);
+  color: var(--red);
+}
+
+.btn-icon.btn-delete:hover {
+  background: var(--red);
+  color: #000;
+}
+
+.footer-left {
+  display: flex;
+  gap: 8px;
+}
+
+.btn-icon {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  padding: 24px 32px;
-  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  justify-content: center;
+  width: 42px;
+  height: 42px;
+  background: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.btn-icon i {
+  width: 18px;
+  height: 18px;
+}
+
+.btn-icon.btn-archive {
+  border: 1px solid var(--orange);
+  color: var(--orange);
+}
+
+.btn-icon.btn-archive:hover {
+  background: var(--orange);
+  color: #000;
 }
 
 .footer-right {
   display: flex;
   gap: 12px;
-}
-
-.btn-delete {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 20px;
-  background: none;
-  border: 1px solid var(--red);
-  border-radius: 8px;
-  color: var(--red);
-  font-family: inherit;
-  font-size: 14px;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.btn-delete i {
-  width: 16px;
-  height: 16px;
-}
-
-.btn-delete:hover {
-  background: var(--red);
-  color: #000;
+  margin-left: auto;
 }
 
 .btn-cancel {
@@ -1586,375 +700,4 @@ onUpdated(refreshIcons)
     transform: rotate(360deg);
   }
 }
-
-/* Transition */
-.panel-enter-active,
-.panel-leave-active {
-  transition: all 0.3s ease;
-}
-
-.panel-enter-active .panel,
-.panel-leave-active .panel {
-  transition: transform 0.3s ease;
-}
-
-.panel-enter-from,
-.panel-leave-to {
-  opacity: 0;
-}
-
-.panel-enter-from .panel,
-.panel-leave-to .panel {
-  transform: translateX(100%);
-}
-
-/* Секция загрузки файлов */
-.file-hint {
-  font-size: 11px;
-  color: var(--text-muted);
-  margin-bottom: 8px;
-}
-
-.file-dropzone {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 32px 24px;
-  background: rgba(255, 255, 255, 0.02);
-  border: 2px dashed rgba(255, 255, 255, 0.12);
-  border-radius: 12px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.file-dropzone:hover {
-  border-color: rgba(255, 255, 255, 0.25);
-  background: rgba(255, 255, 255, 0.04);
-}
-
-.file-dropzone.dragover {
-  border-color: var(--accent);
-  background: rgba(0, 212, 170, 0.08);
-}
-
-.dropzone-icon {
-  width: 36px;
-  height: 36px;
-  color: var(--text-muted);
-  opacity: 0.6;
-  transition: all 0.2s;
-}
-
-.file-dropzone:hover .dropzone-icon,
-.file-dropzone.dragover .dropzone-icon {
-  color: var(--accent);
-  opacity: 1;
-}
-
-.dropzone-text {
-  font-size: 14px;
-  color: var(--text-secondary);
-  font-weight: 500;
-}
-
-.dropzone-subtext {
-  font-size: 12px;
-  color: var(--text-muted);
-}
-
-/* Контейнер с файлами */
-.files-container {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  gap: 12px;
-  padding: 12px;
-  background: rgba(255, 255, 255, 0.02);
-  border: 2px dashed rgba(255, 255, 255, 0.12);
-  border-radius: 12px;
-  transition: all 0.2s ease;
-}
-
-.files-container.dragover {
-  border-color: var(--accent);
-  background: rgba(0, 212, 170, 0.08);
-}
-
-.file-preview-item {
-  position: relative;
-  min-width: 0;
-}
-
-.file-thumbnail {
-  width: 100%;
-  padding-bottom: 100%;
-  position: relative;
-  border-radius: 8px;
-  background: rgba(255, 255, 255, 0.06);
-  cursor: pointer;
-  transition: opacity 0.15s;
-  overflow: hidden;
-}
-
-.file-thumbnail img {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.archive-icon {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background: rgba(255, 255, 255, 0.05);
-  color: var(--text-secondary);
-}
-
-.archive-icon i {
-  width: 32px;
-  height: 32px;
-  opacity: 0.7;
-}
-
-.archive-ext {
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  margin-top: 4px;
-  opacity: 0.6;
-}
-
-.file-preview-item:hover .file-thumbnail {
-  opacity: 0.85;
-}
-
-
-/* Контейнер кнопок действий */
-.file-actions {
-  position: absolute;
-  top: 6px;
-  right: 6px;
-  display: flex;
-  gap: 4px;
-  z-index: 10;
-  opacity: 0;
-  transition: opacity 0.15s;
-}
-
-.file-preview-item:hover .file-actions {
-  opacity: 1;
-}
-
-.btn-remove-file,
-.btn-download-file {
-  width: 26px;
-  height: 26px;
-  background: rgba(0, 0, 0, 0.7);
-  border: none;
-  border-radius: 6px;
-  color: #fff;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.15s;
-}
-
-.btn-remove-file i,
-.btn-download-file i {
-  width: 14px;
-  height: 14px;
-}
-
-.btn-remove-file:hover {
-  background: #ef4444;
-}
-
-.btn-download-file:hover {
-  background: var(--accent);
-  color: #000;
-}
-
-/* Кнопка добавить ещё */
-.file-add-btn {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  aspect-ratio: 1;
-  background: rgba(255, 255, 255, 0.04);
-  border: 2px dashed rgba(255, 255, 255, 0.15);
-  border-radius: 12px;
-  cursor: pointer;
-  transition: all 0.15s;
-  color: var(--text-muted);
-}
-
-.file-add-btn:hover {
-  border-color: var(--accent);
-  background: rgba(0, 212, 170, 0.08);
-  color: var(--accent);
-}
-
-.file-add-btn i {
-  width: 24px;
-  height: 24px;
-}
-
-.file-add-btn span {
-  font-size: 11px;
-  font-weight: 500;
-}
-
-/* Ошибка загрузки */
-.file-error {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-top: 12px;
-  padding: 10px 14px;
-  background: rgba(239, 68, 68, 0.1);
-  border: 1px solid rgba(239, 68, 68, 0.2);
-  border-radius: 8px;
-  color: #ef4444;
-  font-size: 12px;
-}
-
-.file-error i {
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-}
-
-/* Модальное окно просмотра изображения */
-.image-preview-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.9);
-  backdrop-filter: blur(8px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1200;
-  padding: 40px;
-}
-
-.image-preview-container {
-  position: relative;
-  max-width: 90vw;
-  max-height: 90vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-}
-
-.preview-actions {
-  position: absolute;
-  top: -50px;
-  right: 0;
-  display: flex;
-  gap: 8px;
-}
-
-.btn-close-preview,
-.btn-download-preview,
-.btn-delete-preview {
-  width: 40px;
-  height: 40px;
-  background: rgba(255, 255, 255, 0.1);
-  border: none;
-  border-radius: 50%;
-  color: #fff;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s;
-}
-
-.btn-close-preview:hover {
-  background: rgba(255, 255, 255, 0.25);
-  transform: scale(1.1);
-}
-
-.btn-download-preview:hover {
-  background: var(--accent);
-  color: #000;
-  transform: scale(1.1);
-}
-
-.btn-delete-preview:hover {
-  background: #ef4444;
-  transform: scale(1.1);
-}
-
-.btn-close-preview i,
-.btn-download-preview i,
-.btn-delete-preview i {
-  width: 20px;
-  height: 20px;
-}
-
-.image-preview-full {
-  max-width: 100%;
-  max-height: calc(90vh - 60px);
-  object-fit: contain;
-  border-radius: 12px;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
-}
-
-.archive-preview-icon {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 16px;
-  padding: 60px;
-  background: var(--bg-card);
-  border-radius: 16px;
-  color: var(--text-secondary);
-}
-
-.archive-preview-icon i {
-  width: 64px;
-  height: 64px;
-  opacity: 0.6;
-}
-
-.archive-preview-icon span {
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.image-preview-info {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 20px;
-  background: rgba(255, 255, 255, 0.08);
-  border-radius: 8px;
-}
-
-.preview-name {
-  font-size: 14px;
-  color: var(--text-primary);
-  font-weight: 500;
-}
-
-.preview-size {
-  font-size: 12px;
-  color: var(--text-muted);
-}
 </style>
diff --git a/front_vue/src/components/ui/FileUploader.vue b/front_vue/src/components/ui/FileUploader.vue
new file mode 100644
index 0000000..8568151
--- /dev/null
+++ b/front_vue/src/components/ui/FileUploader.vue
@@ -0,0 +1,454 @@
+<template>
+  <div class="file-uploader">
+    <input 
+      type="file" 
+      ref="fileInputRef"
+      :accept="acceptString"
+      :multiple="multiple"
+      @change="handleFileSelect"
+      style="display: none"
+    >
+
+    <!-- Пустая зона drag & drop -->
+    <div 
+      v-if="files.length === 0"
+      class="file-dropzone"
+      :class="{ 'dragover': isDragging }"
+      @dragover.prevent="isDragging = true"
+      @dragleave.prevent="isDragging = false"
+      @drop.prevent="handleFileDrop"
+      @click="triggerFileInput"
+    >
+      <i data-lucide="image-plus" class="dropzone-icon"></i>
+      <span class="dropzone-text">{{ dropzoneText }}</span>
+      <span class="dropzone-subtext">{{ dropzoneSubtext }}</span>
+    </div>
+
+    <!-- Сетка с файлами -->
+    <div 
+      v-else 
+      class="files-container"
+      :class="{ 'dragover': isDragging }"
+      @dragover.prevent="isDragging = true"
+      @dragleave.prevent="isDragging = false"
+      @drop.prevent="handleFileDrop"
+    >
+      <!-- Превью файлов -->
+      <div 
+        v-for="(file, index) in visibleFiles" 
+        :key="file.name + '-' + file.size"
+        class="file-preview-item"
+      >
+        <div class="file-actions">
+          <button class="btn-download-file" @click.stop="downloadFile(file)" title="Скачать">
+            <i data-lucide="download"></i>
+          </button>
+          <button class="btn-remove-file" @click.stop="$emit('remove', index)" title="Удалить">
+            <i data-lucide="x"></i>
+          </button>
+        </div>
+        <div class="file-thumbnail" @click="!isArchive(file) && $emit('preview', file)">
+          <template v-if="isArchive(file)">
+            <div class="archive-icon">
+              <i data-lucide="archive"></i>
+              <span class="archive-ext">.{{ getFileExt(file) }}</span>
+            </div>
+          </template>
+          <img v-else :src="getPreviewUrl(file)" :alt="file.name">
+        </div>
+      </div>
+
+      <!-- Кнопка добавить ещё -->
+      <div class="file-add-btn" @click="triggerFileInput">
+        <i data-lucide="plus"></i>
+        <span>Добавить</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUpdated } from 'vue'
+
+const props = defineProps({
+  files: {
+    type: Array,
+    default: () => []
+    // Формат: [{ name, size, type, preview, isNew, toDelete }]
+  },
+  allowedExtensions: {
+    type: Array,
+    default: () => ['png', 'jpg', 'jpeg', 'zip', 'rar']
+  },
+  archiveExtensions: {
+    type: Array,
+    default: () => ['zip', 'rar']
+  },
+  maxFileSize: {
+    type: Number,
+    default: 10 * 1024 * 1024 // 10 MB
+  },
+  multiple: {
+    type: Boolean,
+    default: true
+  },
+  dropzoneText: {
+    type: String,
+    default: 'Перетащите файлы сюда'
+  },
+  dropzoneSubtext: {
+    type: String,
+    default: 'или нажмите для выбора'
+  },
+  getFullUrl: {
+    type: Function,
+    default: (url) => url
+  }
+})
+
+const emit = defineEmits(['add', 'remove', 'preview', 'error'])
+
+const fileInputRef = ref(null)
+const isDragging = ref(false)
+
+// Видимые файлы (без помеченных на удаление)
+const visibleFiles = computed(() => props.files.filter(f => !f.toDelete))
+
+// Accept строка для input
+const acceptString = computed(() => {
+  const mimeTypes = {
+    'png': 'image/png',
+    'jpg': 'image/jpeg',
+    'jpeg': 'image/jpeg',
+    'zip': 'application/zip',
+    'rar': 'application/x-rar-compressed'
+  }
+  const exts = props.allowedExtensions.map(e => `.${e}`)
+  const mimes = props.allowedExtensions.map(e => mimeTypes[e]).filter(Boolean)
+  return [...exts, ...mimes].join(',')
+})
+
+// Получить расширение файла
+const getFileExt = (file) => {
+  return file.name?.split('.').pop()?.toLowerCase() || ''
+}
+
+// Проверка разрешён ли файл
+const isAllowedFile = (file) => {
+  return props.allowedExtensions.includes(getFileExt(file))
+}
+
+// Проверка является ли файл архивом
+const isArchive = (file) => {
+  return props.archiveExtensions.includes(getFileExt(file))
+}
+
+// Получить URL превью
+const getPreviewUrl = (file) => {
+  return props.getFullUrl(file.preview)
+}
+
+// Открыть диалог выбора файлов
+const triggerFileInput = () => {
+  fileInputRef.value?.click()
+}
+
+// Обработка выбора файлов
+const handleFileSelect = (event) => {
+  const files = event.target.files
+  if (files) {
+    processFiles(Array.from(files))
+  }
+  event.target.value = ''
+}
+
+// Обработка drop
+const handleFileDrop = (event) => {
+  isDragging.value = false
+  const files = event.dataTransfer.files
+  if (files) {
+    processFiles(Array.from(files))
+  }
+}
+
+// Обработка файлов
+const processFiles = (fileList) => {
+  for (const file of fileList) {
+    // Проверка типа
+    if (!isAllowedFile(file)) {
+      emit('error', `Файл "${file.name}" не поддерживается.`)
+      continue
+    }
+    
+    // Проверка размера
+    if (file.size > props.maxFileSize) {
+      emit('error', `Файл "${file.name}" слишком большой.`)
+      continue
+    }
+    
+    // Проверяем дубликат
+    const isDuplicate = props.files.some(
+      f => f.name === file.name && f.size === file.size
+    )
+    if (isDuplicate) continue
+    
+    // Создаём превью
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      emit('add', {
+        file: file,
+        name: file.name,
+        size: file.size,
+        type: file.type,
+        preview: e.target.result,
+        isNew: true
+      })
+    }
+    reader.readAsDataURL(file)
+  }
+}
+
+// Скачивание файла
+const downloadFile = async (file) => {
+  const url = getPreviewUrl(file)
+  try {
+    if (file.preview?.startsWith('data:')) {
+      const link = document.createElement('a')
+      link.href = file.preview
+      link.download = file.name
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+    } else {
+      const response = await fetch(url)
+      const blob = await response.blob()
+      const blobUrl = window.URL.createObjectURL(blob)
+      const link = document.createElement('a')
+      link.href = blobUrl
+      link.download = file.name
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+      window.URL.revokeObjectURL(blobUrl)
+    }
+  } catch (error) {
+    console.error('Ошибка скачивания:', error)
+    window.open(url, '_blank')
+  }
+}
+
+// Обновление иконок
+const refreshIcons = () => {
+  if (window.lucide) {
+    window.lucide.createIcons()
+  }
+}
+
+onMounted(refreshIcons)
+onUpdated(refreshIcons)
+
+// Экспортируем методы
+defineExpose({
+  triggerFileInput
+})
+</script>
+
+<style scoped>
+.file-dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 32px 24px;
+  background: rgba(255, 255, 255, 0.02);
+  border: 2px dashed rgba(255, 255, 255, 0.12);
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.file-dropzone:hover {
+  border-color: rgba(255, 255, 255, 0.25);
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.file-dropzone.dragover {
+  border-color: var(--accent);
+  background: rgba(0, 212, 170, 0.08);
+}
+
+.dropzone-icon {
+  width: 36px;
+  height: 36px;
+  color: var(--text-muted);
+  opacity: 0.6;
+  transition: all 0.2s;
+}
+
+.file-dropzone:hover .dropzone-icon,
+.file-dropzone.dragover .dropzone-icon {
+  color: var(--accent);
+  opacity: 1;
+}
+
+.dropzone-text {
+  font-size: 14px;
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+.dropzone-subtext {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.files-container {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 12px;
+  padding: 12px;
+  background: rgba(255, 255, 255, 0.02);
+  border: 2px dashed rgba(255, 255, 255, 0.12);
+  border-radius: 12px;
+  transition: all 0.2s ease;
+}
+
+.files-container.dragover {
+  border-color: var(--accent);
+  background: rgba(0, 212, 170, 0.08);
+}
+
+.file-preview-item {
+  position: relative;
+  min-width: 0;
+}
+
+.file-thumbnail {
+  width: 100%;
+  padding-bottom: 100%;
+  position: relative;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.06);
+  cursor: pointer;
+  transition: opacity 0.15s;
+  overflow: hidden;
+}
+
+.file-thumbnail img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.archive-icon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text-secondary);
+}
+
+.archive-icon i {
+  width: 32px;
+  height: 32px;
+  opacity: 0.7;
+}
+
+.archive-ext {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  margin-top: 4px;
+  opacity: 0.6;
+}
+
+.file-preview-item:hover .file-thumbnail {
+  opacity: 0.85;
+}
+
+.file-actions {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  display: flex;
+  gap: 4px;
+  z-index: 10;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.file-preview-item:hover .file-actions {
+  opacity: 1;
+}
+
+.btn-remove-file,
+.btn-download-file {
+  width: 26px;
+  height: 26px;
+  background: rgba(0, 0, 0, 0.7);
+  border: none;
+  border-radius: 6px;
+  color: #fff;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s;
+}
+
+.btn-remove-file i,
+.btn-download-file i {
+  width: 14px;
+  height: 14px;
+}
+
+.btn-remove-file:hover {
+  background: #ef4444;
+}
+
+.btn-download-file:hover {
+  background: var(--accent);
+  color: #000;
+}
+
+.file-add-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  aspect-ratio: 1;
+  background: rgba(255, 255, 255, 0.04);
+  border: 2px dashed rgba(255, 255, 255, 0.15);
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.15s;
+  color: var(--text-muted);
+}
+
+.file-add-btn:hover {
+  border-color: var(--accent);
+  background: rgba(0, 212, 170, 0.08);
+  color: var(--accent);
+}
+
+.file-add-btn i {
+  width: 24px;
+  height: 24px;
+}
+
+.file-add-btn span {
+  font-size: 11px;
+  font-weight: 500;
+}
+</style>
diff --git a/front_vue/src/components/ui/FormField.vue b/front_vue/src/components/ui/FormField.vue
new file mode 100644
index 0000000..f7f8f52
--- /dev/null
+++ b/front_vue/src/components/ui/FormField.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="field">
+    <div v-if="label" class="field-header">
+      <label>{{ label }}</label>
+      <slot name="actions"></slot>
+    </div>
+    <div v-if="hint" class="field-hint">{{ hint }}</div>
+    <slot></slot>
+    <div v-if="error" class="field-error">
+      <i data-lucide="alert-circle"></i>
+      {{ error }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, onUpdated } from 'vue'
+
+defineProps({
+  label: {
+    type: String,
+    default: ''
+  },
+  hint: {
+    type: String,
+    default: ''
+  },
+  error: {
+    type: String,
+    default: ''
+  }
+})
+
+const refreshIcons = () => {
+  if (window.lucide) {
+    window.lucide.createIcons()
+  }
+}
+
+onMounted(refreshIcons)
+onUpdated(refreshIcons)
+</script>
+
+<style scoped>
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.field-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.field label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.field-hint {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-top: -6px;
+}
+
+.field-error {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.2);
+  border-radius: 8px;
+  color: #ef4444;
+  font-size: 12px;
+}
+
+.field-error i {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+</style>
diff --git a/front_vue/src/components/ui/ImagePreview.vue b/front_vue/src/components/ui/ImagePreview.vue
new file mode 100644
index 0000000..0470da8
--- /dev/null
+++ b/front_vue/src/components/ui/ImagePreview.vue
@@ -0,0 +1,256 @@
+<template>
+  <Transition name="dialog">
+    <div v-if="file" class="image-preview-overlay" @click="$emit('close')">
+      <div class="image-preview-container" @click.stop>
+        <div class="preview-actions">
+          <button class="btn-download-preview" @click="downloadFile" title="Скачать">
+            <i data-lucide="download"></i>
+          </button>
+          <button v-if="showDelete" class="btn-delete-preview" @click="$emit('delete')" title="Удалить">
+            <i data-lucide="trash-2"></i>
+          </button>
+          <button class="btn-close-preview" @click="$emit('close')" title="Закрыть">
+            <i data-lucide="x"></i>
+          </button>
+        </div>
+        
+        <!-- Архив -->
+        <template v-if="isArchive">
+          <div class="archive-preview-icon">
+            <i data-lucide="archive"></i>
+            <span>{{ file.name }}</span>
+          </div>
+        </template>
+        
+        <!-- Изображение -->
+        <img v-else :src="previewUrl" :alt="file.name" class="image-preview-full">
+        
+        <div class="image-preview-info">
+          <span class="preview-name">{{ file.name }}</span>
+          <span class="preview-size">{{ formatFileSize(file.size) }}</span>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup>
+import { computed, onMounted, onUpdated } from 'vue'
+
+const props = defineProps({
+  file: {
+    type: Object,
+    default: null
+    // Формат: { name, size, type, preview }
+  },
+  showDelete: {
+    type: Boolean,
+    default: true
+  },
+  archiveExtensions: {
+    type: Array,
+    default: () => ['zip', 'rar']
+  },
+  getFullUrl: {
+    type: Function,
+    default: (url) => url
+  }
+})
+
+const emit = defineEmits(['close', 'delete'])
+
+// URL превью
+const previewUrl = computed(() => {
+  if (!props.file) return ''
+  return props.getFullUrl(props.file.preview)
+})
+
+// Проверка архива
+const isArchive = computed(() => {
+  if (!props.file) return false
+  const ext = props.file.name?.split('.').pop()?.toLowerCase() || ''
+  return props.archiveExtensions.includes(ext)
+})
+
+// Форматирование размера
+const formatFileSize = (bytes) => {
+  if (!bytes) return ''
+  if (bytes < 1024) return bytes + ' Б'
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' КБ'
+  return (bytes / (1024 * 1024)).toFixed(1) + ' МБ'
+}
+
+// Скачивание
+const downloadFile = async () => {
+  if (!props.file) return
+  
+  const url = previewUrl.value
+  try {
+    if (props.file.preview?.startsWith('data:')) {
+      const link = document.createElement('a')
+      link.href = props.file.preview
+      link.download = props.file.name
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+    } else {
+      const response = await fetch(url)
+      const blob = await response.blob()
+      const blobUrl = window.URL.createObjectURL(blob)
+      const link = document.createElement('a')
+      link.href = blobUrl
+      link.download = props.file.name
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+      window.URL.revokeObjectURL(blobUrl)
+    }
+  } catch (error) {
+    console.error('Ошибка скачивания:', error)
+    window.open(url, '_blank')
+  }
+}
+
+// Обновление иконок
+const refreshIcons = () => {
+  if (window.lucide) {
+    window.lucide.createIcons()
+  }
+}
+
+onMounted(refreshIcons)
+onUpdated(refreshIcons)
+</script>
+
+<style scoped>
+.image-preview-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.9);
+  backdrop-filter: blur(8px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1200;
+  padding: 40px;
+}
+
+.image-preview-container {
+  position: relative;
+  max-width: 90vw;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+
+.preview-actions {
+  position: absolute;
+  top: -50px;
+  right: 0;
+  display: flex;
+  gap: 8px;
+}
+
+.btn-close-preview,
+.btn-download-preview,
+.btn-delete-preview {
+  width: 40px;
+  height: 40px;
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  border-radius: 50%;
+  color: #fff;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+}
+
+.btn-close-preview:hover {
+  background: rgba(255, 255, 255, 0.25);
+  transform: scale(1.1);
+}
+
+.btn-download-preview:hover {
+  background: var(--accent);
+  color: #000;
+  transform: scale(1.1);
+}
+
+.btn-delete-preview:hover {
+  background: #ef4444;
+  transform: scale(1.1);
+}
+
+.btn-close-preview i,
+.btn-download-preview i,
+.btn-delete-preview i {
+  width: 20px;
+  height: 20px;
+}
+
+.image-preview-full {
+  max-width: 100%;
+  max-height: calc(90vh - 60px);
+  object-fit: contain;
+  border-radius: 12px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+}
+
+.archive-preview-icon {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: 60px;
+  background: var(--bg-card);
+  border-radius: 16px;
+  color: var(--text-secondary);
+}
+
+.archive-preview-icon i {
+  width: 64px;
+  height: 64px;
+  opacity: 0.6;
+}
+
+.archive-preview-icon span {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.image-preview-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 20px;
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 8px;
+}
+
+.preview-name {
+  font-size: 14px;
+  color: var(--text-primary);
+  font-weight: 500;
+}
+
+.preview-size {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+/* Transition */
+.dialog-enter-active,
+.dialog-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.dialog-enter-from,
+.dialog-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/front_vue/src/components/ui/RichTextEditor.vue b/front_vue/src/components/ui/RichTextEditor.vue
new file mode 100644
index 0000000..cc97893
--- /dev/null
+++ b/front_vue/src/components/ui/RichTextEditor.vue
@@ -0,0 +1,324 @@
+<template>
+  <div class="rich-editor-wrapper">
+    <!-- Кнопки форматирования -->
+    <div v-if="showToolbar" class="format-buttons">
+      <button 
+        type="button" 
+        class="format-btn" 
+        @mousedown.prevent="applyFormat('bold')" 
+        title="Жирный (Ctrl+B)"
+      >
+        <i data-lucide="bold"></i>
+      </button>
+      <button 
+        type="button" 
+        class="format-btn" 
+        @mousedown.prevent="applyFormat('italic')" 
+        title="Курсив (Ctrl+I)"
+      >
+        <i data-lucide="italic"></i>
+      </button>
+      <button 
+        type="button" 
+        class="format-btn" 
+        @mousedown.prevent="applyFormat('underline')" 
+        title="Подчёркивание (Ctrl+U)"
+      >
+        <i data-lucide="underline"></i>
+      </button>
+    </div>
+    
+    <!-- Редактируемое поле -->
+    <div 
+      class="rich-editor"
+      :class="{ 'is-empty': !modelValue }"
+      contenteditable="true"
+      ref="editorRef"
+      @input="onInput"
+      @paste="onPaste"
+      @keydown="onKeydown"
+      @click="onClick"
+      @focus="$emit('focus', $event)"
+      @blur="$emit('blur', $event)"
+      :data-placeholder="placeholder"
+    ></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, onUpdated } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ''
+  },
+  placeholder: {
+    type: String,
+    default: 'Введите текст...'
+  },
+  showToolbar: {
+    type: Boolean,
+    default: true
+  },
+  autoLinkify: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'focus', 'blur'])
+
+const editorRef = ref(null)
+
+// Применить форматирование
+const applyFormat = (command) => {
+  editorRef.value?.focus()
+  document.execCommand(command, false, null)
+  syncContent()
+}
+
+// Синхронизация содержимого
+const syncContent = () => {
+  if (!editorRef.value) return
+  let html = editorRef.value.innerHTML
+  // Нормализуем переносы строк
+  html = html.replace(/<\/div><div>/gi, '<br>')
+  html = html.replace(/<div>/gi, '')
+  html = html.replace(/<\/div>/gi, '')
+  emit('update:modelValue', html)
+}
+
+// Обработка ввода
+const onInput = () => {
+  syncContent()
+}
+
+// Обработка клика (открытие ссылок)
+const onClick = (e) => {
+  if (e.target.tagName === 'A') {
+    e.preventDefault()
+    window.open(e.target.href, '_blank')
+  }
+}
+
+// Обработка вставки
+const onPaste = (e) => {
+  e.preventDefault()
+  const text = e.clipboardData.getData('text/plain')
+  document.execCommand('insertText', false, text)
+  if (props.autoLinkify) {
+    setTimeout(linkifyContent, 0)
+  }
+}
+
+// Горячие клавиши
+const onKeydown = (e) => {
+  if (e.ctrlKey || e.metaKey) {
+    if (e.key === 'b') {
+      e.preventDefault()
+      applyFormat('bold')
+    } else if (e.key === 'i') {
+      e.preventDefault()
+      applyFormat('italic')
+    } else if (e.key === 'u') {
+      e.preventDefault()
+      applyFormat('underline')
+    }
+  }
+  
+  // После пробела или Enter — подсвечиваем ссылки
+  if (props.autoLinkify && (e.key === ' ' || e.key === 'Enter')) {
+    setTimeout(linkifyContent, 0)
+  }
+}
+
+// Автоматическое преобразование URL в ссылки
+const linkifyContent = () => {
+  if (!editorRef.value) return
+  
+  const html = editorRef.value.innerHTML
+  const parts = html.split(/(<a [^>]*>.*?<\/a>)/gi)
+  
+  let changed = false
+  const newParts = parts.map(part => {
+    if (part.startsWith('<a ')) return part
+    
+    const newPart = part.replace(
+      /(https?:\/\/[^\s<>"]+)/g,
+      '<a href="$1" target="_blank" rel="noopener">$1</a>'
+    )
+    if (newPart !== part) changed = true
+    return newPart
+  })
+  
+  if (changed) {
+    editorRef.value.innerHTML = newParts.join('')
+    
+    // Ставим курсор в конец
+    const range = document.createRange()
+    const selection = window.getSelection()
+    range.selectNodeContents(editorRef.value)
+    range.collapse(false)
+    selection.removeAllRanges()
+    selection.addRange(range)
+    
+    syncContent()
+  }
+}
+
+// Преобразование URL в ссылки
+const linkifyHtml = (html) => {
+  if (!html) return ''
+  if (html.includes('<a ')) return html
+  return html.replace(
+    /(https?:\/\/[^\s<>"]+)/g,
+    '<a href="$1" target="_blank" rel="noopener">$1</a>'
+  )
+}
+
+// Установка содержимого
+const setContent = (html) => {
+  if (editorRef.value) {
+    editorRef.value.innerHTML = linkifyHtml(html || '')
+  }
+}
+
+// Следим за внешними изменениями modelValue
+watch(() => props.modelValue, (newVal, oldVal) => {
+  // Обновляем только если изменение пришло извне
+  if (editorRef.value && editorRef.value.innerHTML !== newVal) {
+    setContent(newVal)
+  }
+}, { immediate: true })
+
+// Обновление иконок Lucide
+const refreshIcons = () => {
+  if (window.lucide) {
+    window.lucide.createIcons()
+  }
+}
+
+onMounted(() => {
+  refreshIcons()
+  setContent(props.modelValue)
+})
+
+onUpdated(refreshIcons)
+
+// Экспортируем методы для использования извне
+defineExpose({
+  setContent,
+  applyFormat,
+  focus: () => editorRef.value?.focus()
+})
+</script>
+
+<style scoped>
+.rich-editor-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.format-buttons {
+  display: flex;
+  gap: 3px;
+}
+
+.format-btn {
+  width: 24px;
+  height: 24px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 5px;
+  color: var(--text-muted);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s;
+}
+
+.format-btn:hover {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 255, 255, 0.15);
+  color: var(--text-primary);
+}
+
+.format-btn:active {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #000;
+}
+
+.format-btn i {
+  width: 10px;
+  height: 10px;
+}
+
+.rich-editor {
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 8px;
+  padding: 14px 16px;
+  min-height: 120px;
+  max-height: 400px;
+  overflow-y: auto;
+  color: var(--text-primary);
+  font-size: 14px;
+  line-height: 1.6;
+  transition: border-color 0.15s, background 0.15s;
+  word-break: break-word;
+  outline: none;
+  resize: vertical;
+}
+
+.rich-editor:focus {
+  border-color: var(--accent);
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.rich-editor:empty::before {
+  content: attr(data-placeholder);
+  color: var(--text-muted);
+  pointer-events: none;
+}
+
+.rich-editor::-webkit-scrollbar {
+  width: 6px;
+}
+
+.rich-editor::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.rich-editor::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 3px;
+}
+
+.rich-editor :deep(a) {
+  color: var(--accent);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.rich-editor :deep(a:hover) {
+  text-decoration: underline;
+}
+
+.rich-editor :deep(b),
+.rich-editor :deep(strong) {
+  font-weight: 600;
+}
+
+.rich-editor :deep(i),
+.rich-editor :deep(em) {
+  font-style: italic;
+}
+
+.rich-editor :deep(u) {
+  text-decoration: underline;
+}
+</style>
diff --git a/front_vue/src/components/ui/SelectDropdown.vue b/front_vue/src/components/ui/SelectDropdown.vue
new file mode 100644
index 0000000..c4cff71
--- /dev/null
+++ b/front_vue/src/components/ui/SelectDropdown.vue
@@ -0,0 +1,369 @@
+<template>
+  <div class="select-dropdown" ref="dropdownRef">
+    <!-- Триггер -->
+    <button class="dropdown-trigger" @click="toggleDropdown" :disabled="disabled">
+      <slot name="selected" :selected="selectedOption">
+        <img 
+          v-if="selectedOption?.avatar" 
+          :src="selectedOption.avatar" 
+          :alt="selectedOption.label" 
+          class="option-avatar"
+        >
+        <span v-else-if="!selectedOption" class="no-selection-icon">—</span>
+        <span class="selected-label">{{ selectedOption?.label || placeholder }}</span>
+      </slot>
+      <i data-lucide="chevron-down" class="dropdown-arrow"></i>
+    </button>
+    
+    <!-- Выпадающий список -->
+    <Transition name="dropdown">
+      <div v-if="isOpen" class="dropdown-menu">
+        <input 
+          v-if="searchable"
+          type="text" 
+          v-model="searchQuery" 
+          :placeholder="searchPlaceholder"
+          class="dropdown-search"
+          ref="searchInputRef"
+          @click.stop
+        >
+        <div class="dropdown-list">
+          <!-- Опция "не выбрано" -->
+          <button 
+            v-if="allowEmpty"
+            class="dropdown-item"
+            :class="{ active: !modelValue }"
+            @click="selectOption(null)"
+          >
+            <span class="no-selection-icon">—</span>
+            <span>{{ emptyLabel }}</span>
+          </button>
+          
+          <!-- Опции -->
+          <button 
+            v-for="option in filteredOptions" 
+            :key="option.value"
+            class="dropdown-item"
+            :class="{ active: modelValue === option.value }"
+            @click="selectOption(option.value)"
+          >
+            <slot name="option" :option="option">
+              <img 
+                v-if="option.avatar" 
+                :src="option.avatar" 
+                :alt="option.label" 
+                class="option-avatar"
+              >
+              <div class="option-content">
+                <span class="option-label">{{ option.label }}</span>
+                <span v-if="option.subtitle" class="option-subtitle">{{ option.subtitle }}</span>
+              </div>
+            </slot>
+          </button>
+          
+          <!-- Пустой результат поиска -->
+          <div v-if="searchable && filteredOptions.length === 0" class="dropdown-empty">
+            Ничего не найдено
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onUnmounted, onUpdated, nextTick } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number, null],
+    default: null
+  },
+  options: {
+    type: Array,
+    default: () => []
+    // Формат: [{ value: 1, label: 'Name', subtitle: '@telegram', avatar: 'url' }]
+  },
+  placeholder: {
+    type: String,
+    default: 'Выберите...'
+  },
+  searchable: {
+    type: Boolean,
+    default: false
+  },
+  searchPlaceholder: {
+    type: String,
+    default: 'Поиск...'
+  },
+  allowEmpty: {
+    type: Boolean,
+    default: true
+  },
+  emptyLabel: {
+    type: String,
+    default: 'Не выбрано'
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const dropdownRef = ref(null)
+const searchInputRef = ref(null)
+const isOpen = ref(false)
+const searchQuery = ref('')
+
+// Выбранная опция
+const selectedOption = computed(() => {
+  if (!props.modelValue) return null
+  return props.options.find(opt => opt.value === props.modelValue)
+})
+
+// Отфильтрованные опции
+const filteredOptions = computed(() => {
+  if (!searchQuery.value.trim()) return props.options
+  const query = searchQuery.value.toLowerCase()
+  return props.options.filter(opt => 
+    opt.label?.toLowerCase().includes(query) ||
+    opt.subtitle?.toLowerCase().includes(query)
+  )
+})
+
+// Переключение dropdown
+const toggleDropdown = async () => {
+  isOpen.value = !isOpen.value
+  if (isOpen.value) {
+    await nextTick()
+    searchInputRef.value?.focus()
+    refreshIcons()
+  }
+}
+
+// Выбор опции
+const selectOption = (value) => {
+  emit('update:modelValue', value)
+  emit('change', value)
+  isOpen.value = false
+  searchQuery.value = ''
+}
+
+// Закрытие при клике вне
+const handleClickOutside = (e) => {
+  if (dropdownRef.value && !dropdownRef.value.contains(e.target)) {
+    isOpen.value = false
+    searchQuery.value = ''
+  }
+}
+
+// Обновление иконок
+const refreshIcons = () => {
+  if (window.lucide) {
+    window.lucide.createIcons()
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+  refreshIcons()
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
+
+onUpdated(refreshIcons)
+</script>
+
+<style scoped>
+.select-dropdown {
+  position: relative;
+}
+
+.dropdown-trigger {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 14px 16px;
+  height: 48px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 8px;
+  box-sizing: border-box;
+  color: var(--text-primary);
+  font-family: inherit;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.15s;
+  text-align: left;
+}
+
+.dropdown-trigger:hover:not(:disabled) {
+  border-color: rgba(255, 255, 255, 0.15);
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.dropdown-trigger:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.dropdown-arrow {
+  width: 16px;
+  height: 16px;
+  margin-left: auto;
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  right: 0;
+  background: #1f1f23;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 10px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
+  z-index: 100;
+  overflow: hidden;
+}
+
+.dropdown-search {
+  width: 100%;
+  padding: 12px 14px;
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  color: var(--text-primary);
+  font-family: inherit;
+  font-size: 14px;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.dropdown-search::placeholder {
+  color: var(--text-muted);
+}
+
+.dropdown-list {
+  max-height: 240px;
+  overflow-y: auto;
+  padding: 6px;
+}
+
+.dropdown-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.dropdown-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.dropdown-list::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 3px;
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 10px 12px;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  color: var(--text-secondary);
+  font-family: inherit;
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.1s;
+  text-align: left;
+}
+
+.dropdown-item:hover {
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--text-primary);
+}
+
+.dropdown-item.active {
+  background: var(--accent);
+  color: #000;
+}
+
+.option-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.option-content {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.option-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.selected-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.option-subtitle {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.dropdown-item.active .option-subtitle {
+  color: rgba(0, 0, 0, 0.5);
+}
+
+.no-selection-icon {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  font-size: 14px;
+  flex-shrink: 0;
+}
+
+.dropdown-item.active .no-selection-icon {
+  background: rgba(0, 0, 0, 0.15);
+}
+
+.dropdown-empty {
+  padding: 16px;
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
+/* Transition */
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: all 0.15s ease;
+}
+
+.dropdown-enter-from,
+.dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+</style>
diff --git a/front_vue/src/components/ui/SlidePanel.vue b/front_vue/src/components/ui/SlidePanel.vue
new file mode 100644
index 0000000..d3aeb1a
--- /dev/null
+++ b/front_vue/src/components/ui/SlidePanel.vue
@@ -0,0 +1,282 @@
+<template>
+  <Transition name="panel">
+    <div 
+      v-if="show" 
+      class="panel-overlay" 
+      @mousedown.self="onOverlayMouseDown" 
+      @mouseup.self="onOverlayMouseUp"
+    >
+      <div 
+        class="panel" 
+        :style="{ width: panelWidth + 'px' }" 
+        ref="panelRef" 
+        @mousedown="overlayMouseDownTarget = false"
+      >
+        <!-- Ручка для изменения ширины -->
+        <div 
+          class="resize-handle"
+          @mousedown="startResize"
+        ></div>
+        
+        <div class="panel-header">
+          <div class="header-content">
+            <slot name="header"></slot>
+          </div>
+          <button class="btn-close" @click="handleClose">
+            <i data-lucide="x"></i>
+          </button>
+        </div>
+
+        <div class="panel-body">
+          <slot></slot>
+        </div>
+
+        <div v-if="$slots.footer" class="panel-footer">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, onUpdated, watch } from 'vue'
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  },
+  width: {
+    type: Number,
+    default: 600
+  },
+  minWidth: {
+    type: Number,
+    default: 500
+  },
+  maxWidth: {
+    type: Number,
+    default: 1000
+  },
+  resizable: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const emit = defineEmits(['close', 'update:show'])
+
+const panelRef = ref(null)
+const panelWidth = ref(props.width)
+const isResizing = ref(false)
+const overlayMouseDownTarget = ref(false)
+
+// Resize логика
+const startResize = (e) => {
+  if (!props.resizable) return
+  isResizing.value = true
+  document.addEventListener('mousemove', onResize)
+  document.addEventListener('mouseup', stopResize)
+  document.body.style.cursor = 'ew-resize'
+  document.body.style.userSelect = 'none'
+}
+
+const onResize = (e) => {
+  if (!isResizing.value) return
+  const newWidth = window.innerWidth - e.clientX
+  panelWidth.value = Math.min(props.maxWidth, Math.max(props.minWidth, newWidth))
+}
+
+const stopResize = () => {
+  setTimeout(() => {
+    isResizing.value = false
+  }, 100)
+  document.removeEventListener('mousemove', onResize)
+  document.removeEventListener('mouseup', stopResize)
+  document.body.style.cursor = ''
+  document.body.style.userSelect = ''
+}
+
+// Закрытие по клику на overlay
+const onOverlayMouseDown = () => {
+  overlayMouseDownTarget.value = true
+}
+
+const onOverlayMouseUp = () => {
+  if (overlayMouseDownTarget.value && !isResizing.value) {
+    handleClose()
+  }
+  overlayMouseDownTarget.value = false
+}
+
+const handleClose = () => {
+  emit('close')
+  emit('update:show', false)
+}
+
+// Обновление иконок Lucide
+const refreshIcons = () => {
+  if (window.lucide) {
+    window.lucide.createIcons()
+  }
+}
+
+// Сброс ширины при открытии
+watch(() => props.show, (newVal) => {
+  if (newVal) {
+    panelWidth.value = props.width
+  }
+})
+
+onMounted(refreshIcons)
+onUpdated(refreshIcons)
+
+onUnmounted(() => {
+  document.removeEventListener('mousemove', onResize)
+  document.removeEventListener('mouseup', stopResize)
+})
+</script>
+
+<style scoped>
+.panel-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+}
+
+.panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  max-width: 100%;
+  height: 100vh;
+  background: #18181b;
+  display: flex;
+  flex-direction: column;
+  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.4);
+}
+
+.resize-handle {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 6px;
+  height: 100%;
+  cursor: ew-resize;
+  background: transparent;
+  transition: background 0.15s;
+  z-index: 10;
+}
+
+.resize-handle:hover,
+.resize-handle:active {
+  background: var(--accent);
+}
+
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24px 32px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.header-content {
+  display: flex;
+  align-items: baseline;
+  gap: 16px;
+  flex: 1;
+}
+
+.header-content :deep(h2) {
+  font-size: 20px;
+  font-weight: 500;
+  margin: 0;
+}
+
+.header-content :deep(.header-date) {
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+.btn-close {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  padding: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  transition: all 0.15s;
+  flex-shrink: 0;
+}
+
+.btn-close i {
+  width: 20px;
+  height: 20px;
+}
+
+.btn-close:hover {
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--text-primary);
+}
+
+.panel-body {
+  flex: 1;
+  padding: 32px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.panel-body::-webkit-scrollbar {
+  width: 6px;
+}
+
+.panel-body::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.panel-body::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 3px;
+}
+
+.panel-body::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+.panel-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24px 32px;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+/* Transition */
+.panel-enter-active,
+.panel-leave-active {
+  transition: all 0.3s ease;
+}
+
+.panel-enter-active .panel,
+.panel-leave-active .panel {
+  transition: transform 0.3s ease;
+}
+
+.panel-enter-from,
+.panel-leave-to {
+  opacity: 0;
+}
+
+.panel-enter-from .panel,
+.panel-leave-to .panel {
+  transform: translateX(100%);
+}
+</style>
diff --git a/front_vue/src/components/ui/TagsSelect.vue b/front_vue/src/components/ui/TagsSelect.vue
new file mode 100644
index 0000000..7243a75
--- /dev/null
+++ b/front_vue/src/components/ui/TagsSelect.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="tags-select">
+    <button 
+      v-for="option in options" 
+      :key="option.value"
+      class="tag-option"
+      :class="{ active: isSelected(option.value) }"
+      :style="{ '--tag-color': option.color || defaultColor }"
+      @click="toggleOption(option.value)"
+    >
+      <span v-if="option.icon" class="tag-icon">{{ option.icon }}</span>
+      {{ option.label }}
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number, Array, null],
+    default: null
+  },
+  options: {
+    type: Array,
+    default: () => []
+    // Формат: [{ value: 1, label: 'Name', color: '#00d4aa', icon: '🔥' }]
+  },
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  allowDeselect: {
+    type: Boolean,
+    default: true
+  },
+  defaultColor: {
+    type: String,
+    default: 'var(--accent)'
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+// Проверка выбрана ли опция
+const isSelected = (value) => {
+  if (props.multiple) {
+    return Array.isArray(props.modelValue) && props.modelValue.includes(value)
+  }
+  return props.modelValue === value
+}
+
+// Переключение опции
+const toggleOption = (value) => {
+  let newValue
+  
+  if (props.multiple) {
+    const current = Array.isArray(props.modelValue) ? [...props.modelValue] : []
+    const index = current.indexOf(value)
+    
+    if (index > -1) {
+      if (props.allowDeselect) {
+        current.splice(index, 1)
+      }
+    } else {
+      current.push(value)
+    }
+    newValue = current
+  } else {
+    // Single select
+    if (props.modelValue === value && props.allowDeselect) {
+      newValue = null
+    } else {
+      newValue = value
+    }
+  }
+  
+  emit('update:modelValue', newValue)
+  emit('change', newValue)
+}
+</script>
+
+<style scoped>
+.tags-select {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.tag-option {
+  padding: 8px 14px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 6px;
+  color: var(--text-secondary);
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.tag-option:hover {
+  border-color: var(--tag-color);
+  color: var(--tag-color);
+}
+
+.tag-option.active {
+  background: var(--tag-color);
+  border-color: var(--tag-color);
+  color: #000;
+}
+
+.tag-icon {
+  font-size: 14px;
+  margin-right: 4px;
+}
+</style>
diff --git a/front_vue/src/components/ui/TextInput.vue b/front_vue/src/components/ui/TextInput.vue
new file mode 100644
index 0000000..53cb79e
--- /dev/null
+++ b/front_vue/src/components/ui/TextInput.vue
@@ -0,0 +1,68 @@
+<template>
+  <input 
+    type="text"
+    class="text-input"
+    :value="modelValue"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :readonly="readonly"
+    @input="$emit('update:modelValue', $event.target.value)"
+    @focus="$emit('focus', $event)"
+    @blur="$emit('blur', $event)"
+    @keydown="$emit('keydown', $event)"
+  >
+</template>
+
+<script setup>
+defineProps({
+  modelValue: {
+    type: String,
+    default: ''
+  },
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  }
+})
+
+defineEmits(['update:modelValue', 'focus', 'blur', 'keydown'])
+</script>
+
+<style scoped>
+.text-input {
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 8px;
+  padding: 14px 16px;
+  height: 48px;
+  color: var(--text-primary);
+  font-family: inherit;
+  font-size: 14px;
+  outline: none;
+  transition: all 0.15s;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.text-input:focus {
+  border-color: var(--accent);
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.text-input::placeholder {
+  color: var(--text-muted);
+}
+
+.text-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+</style>
diff --git a/front_vue/src/views/MainApp.vue b/front_vue/src/views/MainApp.vue
index a8231f9..e1f1905 100644
--- a/front_vue/src/views/MainApp.vue
+++ b/front_vue/src/views/MainApp.vue
@@ -73,12 +73,13 @@
       @close="closePanel"
       @save="handleSaveTask"
       @delete="handleDeleteTask"
+      @archive="handleArchiveTask"
     />
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, watch, onMounted } from 'vue'
 import Sidebar from '../components/Sidebar.vue'
 import Header from '../components/Header.vue'
 import Board from '../components/Board.vue'
@@ -86,7 +87,18 @@ import TaskPanel from '../components/TaskPanel.vue'
 import { departmentsApi, labelsApi, columnsApi, cardsApi } from '../api'
 
 // Активный фильтр по отделу (null = все)
-const activeDepartment = ref(null)
+// Восстанавливаем из localStorage
+const savedDepartment = localStorage.getItem('activeDepartment')
+const activeDepartment = ref(savedDepartment ? parseInt(savedDepartment) : null)
+
+// Сохраняем в localStorage при изменении
+watch(activeDepartment, (newVal) => {
+  if (newVal === null) {
+    localStorage.removeItem('activeDepartment')
+  } else {
+    localStorage.setItem('activeDepartment', newVal.toString())
+  }
+})
 // Статистика для шапки
 const stats = ref({ total: 0, inProgress: 0, done: 0 })
 // Данные из API
@@ -157,6 +169,12 @@ const handleDeleteTask = async (cardId) => {
   closePanel()
 }
 
+// Архивировать задачу через Board компонент
+const handleArchiveTask = async (cardId) => {
+  await boardRef.value?.archiveTask(cardId)
+  closePanel()
+}
+
 // Инициализация при монтировании
 onMounted(() => {
   fetchData()