Страница Архива

1. Добавлены новые методы
2. Добавлена страница архивных задач.

backend/app/class/enity/class_task.php

@@ -100,22 +100,25 @@ class Task extends BaseEntity {
             return $errors;
         }
 
-        // Проверка что задача существует и получаем текущую колонку
+        // Проверка что задача существует и получаем текущие данные
-        $task = Database::get($this->db_name, ['id', 'column_id'], ['id' => $this->id]);
+        $task = Database::get($this->db_name, ['id', 'column_id', 'order'], ['id' => $this->id]);
         if (!$task) {
             $this->addError('task', 'Задача не найдена');
             return $this->getErrors();
         }
 
+        // Получаем текущую колонку
         $old_column_id = (int)$task['column_id'];
-        $new_column_id = (int)$this->column_id;
+
+        // Если column_id не передан — оставляем текущий
+        $new_column_id = $this->column_id !== null ? (int)$this->column_id : $old_column_id;
 
         // Формируем данные для обновления
         $update_data = [
             'id_department' => $this->id_department,
             'id_label' => $this->id_label,
-            'order' => $this->order,
+            'order' => $this->order ?? $task['order'],
-            'column_id' => $this->column_id,
+            'column_id' => $new_column_id,
             'date' => $this->date ?: null,
             'id_account' => $this->id_account,
             'title' => $this->title,
@@ -168,10 +171,12 @@ class Task extends BaseEntity {
         $task = self::check_task($id);
         $old_column_id = (int)$task['column_id'];
         $new_column_id = (int)$column_id;
+        $archive = (int)$task['archive'];
 
-        // Получаем все карточки целевой колонки (кроме перемещаемой)
+        // Получаем все карточки целевой колонки с тем же статусом архивации (кроме перемещаемой)
         $cards = Database::select('cards_task', ['id', 'order'], [
             'column_id' => $column_id,
+            'archive' => $archive,
             'id[!]' => $id,
             'ORDER' => ['order' => 'ASC']
         ]) ?? [];
@@ -297,10 +302,18 @@ class Task extends BaseEntity {
             ], 400);
         }
 
-        // Обновляем archive
+        // Данные для обновления
-        Database::update('cards_task', [
+        $update_data = [
             'archive' => $archive ? 1 : 0
-        ], [
+        ];
+
+        // При разархивировании — возвращаем в колонку "Готово"
+        if (!$archive) {
+            $update_data['column_id'] = COLUMN_DONE_ID;
+        }
+
+        // Обновляем в БД
+        Database::update('cards_task', $update_data, [
             'id' => $id
         ]);
 

front_vue/src/components/ArchiveCard.vue

@@ -0,0 +1,372 @@
+<template>
+  <div
+    class="archive-card"
+    :class="{ 'has-label-color': cardLabelColor, 'dragging': isDragging }"
+    :style="cardLabelColor ? { '--label-bg': cardLabelColor } : {}"
+    :draggable="true"
+    @dragstart="handleDragStart"
+    @dragend="handleDragEnd"
+    @click="$emit('click')"
+  >
+    <!-- Drag handle (6 точек) -->
+    <div 
+      class="drag-handle"
+      title="Перетащите для изменения порядка"
+    >
+      <i data-lucide="grip-vertical"></i>
+    </div>
+
+    <!-- Аватарка -->
+    <div class="card-assignee" v-if="card.assignee">
+      <img 
+        v-if="isAvatarUrl(card.assignee)" 
+        :src="getFullUrl(card.assignee)" 
+        alt="avatar"
+        class="assignee-img"
+      />
+      <span v-else class="assignee-initials">{{ card.assignee }}</span>
+    </div>
+
+    <!-- Контент -->
+    <div class="card-main">
+      <div class="card-content">
+        <h3 class="card-title">
+          <span v-if="cardLabel" class="label-icon" :title="cardLabel.name_labels">{{ cardLabel.icon }}</span>
+          {{ card.title }}
+        </h3>
+        <p v-if="card.description" class="card-description">{{ card.description }}</p>
+      </div>
+    </div>
+
+    <!-- Центральная часть: мета-информация -->
+    <div class="card-meta">
+      <span 
+        v-if="cardDepartment" 
+        class="department-tag"
+        :style="{ color: cardDepartment.color }"
+      >
+        {{ cardDepartment.name_departments }}
+      </span>
+      <span v-if="card.files && card.files.length" class="files-badge" :title="card.files.length + ' файлов'">
+        <i data-lucide="image"></i>
+      </span>
+    </div>
+
+    <!-- Даты: создано и выполнено -->
+    <div class="card-dates">
+      <span class="date-created">{{ formatDateFull(card.dateCreate) }}</span>
+      <span class="date-closed">{{ formatDateFull(card.dateClosed) }}</span>
+    </div>
+
+    <!-- Кнопки действий (всегда видны) -->
+    <div class="card-actions">
+      <button 
+        class="btn-action btn-restore" 
+        @click.stop="$emit('restore', card.id)"
+        title="Вернуть из архива"
+      >
+        <i data-lucide="archive-restore"></i>
+      </button>
+      <button 
+        class="btn-action btn-delete" 
+        @click.stop="$emit('delete', card.id)"
+        title="Удалить навсегда"
+      >
+        <i data-lucide="trash-2"></i>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUpdated } from 'vue'
+import { getFullUrl } from '../api'
+
+const props = defineProps({
+  card: Object,
+  index: Number,
+  departments: {
+    type: Array,
+    default: () => []
+  },
+  labels: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const emit = defineEmits(['click', 'restore', 'delete', 'dragstart', 'dragend'])
+
+const refreshIcons = () => {
+  if (window.lucide) {
+    window.lucide.createIcons()
+  }
+}
+
+onMounted(refreshIcons)
+onUpdated(refreshIcons)
+
+// Drag state
+const isDragging = ref(false)
+
+const handleDragStart = (e) => {
+  isDragging.value = true
+  e.dataTransfer.effectAllowed = 'move'
+  e.dataTransfer.setData('cardId', props.card.id.toString())
+  e.dataTransfer.setData('fromIndex', props.index.toString())
+  emit('dragstart', props.card.id)
+}
+
+const handleDragEnd = () => {
+  isDragging.value = false
+  emit('dragend')
+}
+
+// Получаем отдел по id
+const cardDepartment = computed(() => {
+  if (!props.card.departmentId) return null
+  return props.departments.find(d => d.id === props.card.departmentId) || null
+})
+
+// Получаем лейбл по id
+const cardLabel = computed(() => {
+  if (!props.card.labelId) return null
+  return props.labels.find(l => l.id === props.card.labelId) || null
+})
+
+// Цвет лейбла для акцента
+const cardLabelColor = computed(() => {
+  return cardLabel.value?.color || null
+})
+
+// Проверка на URL аватарки
+const isAvatarUrl = (value) => {
+  return value && (value.startsWith('http://') || value.startsWith('https://') || value.startsWith('/'))
+}
+
+// Полная дата с временем
+const formatDateFull = (dateStr) => {
+  if (!dateStr) return '—'
+  const date = new Date(dateStr)
+  const day = date.getDate().toString().padStart(2, '0')
+  const months = ['янв', 'фев', 'мар', 'апр', 'мая', 'июн', 'июл', 'авг', 'сен', 'окт', 'ноя', 'дек']
+  const year = date.getFullYear()
+  const hours = date.getHours().toString().padStart(2, '0')
+  const minutes = date.getMinutes().toString().padStart(2, '0')
+  return `${day} ${months[date.getMonth()]} ${year}, ${hours}:${minutes}`
+}
+</script>
+
+<style scoped>
+.archive-card {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  background: var(--bg-card);
+  border-radius: 10px;
+  padding: 12px 16px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  border-left: 3px solid transparent;
+}
+
+.archive-card:hover {
+  background: var(--bg-card-hover);
+}
+
+.archive-card.dragging {
+  opacity: 0.4;
+}
+
+/* Drag handle (6 точек) */
+.drag-handle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: grab;
+  flex-shrink: 0;
+  padding: 4px;
+  margin: -4px;
+  margin-right: 0;
+  border-radius: 4px;
+  color: var(--text-muted);
+  opacity: 0.4;
+  transition: all 0.15s ease;
+}
+
+.drag-handle:hover {
+  opacity: 1;
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.drag-handle:active {
+  cursor: grabbing;
+}
+
+.drag-handle i {
+  width: 16px;
+  height: 16px;
+}
+
+.archive-card.has-label-color {
+  border-left-color: var(--label-bg);
+  background: color-mix(in srgb, var(--label-bg) 8%, var(--bg-card));
+}
+
+.archive-card.has-label-color:hover {
+  background: color-mix(in srgb, var(--label-bg) 12%, var(--bg-card-hover));
+}
+
+/* Левая часть: аватарка + контент */
+.card-main {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+  min-width: 0;
+}
+
+/* Приоритет (иконка лейбла) — внутри заголовка */
+.label-icon {
+  font-size: 13px;
+  margin-right: 6px;
+}
+
+.card-content {
+  min-width: 0;
+  flex: 1;
+}
+
+.card-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0;
+}
+
+.card-description {
+  font-size: 12px;
+  color: var(--text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 4px 0 0 0;
+}
+
+/* Мета-информация */
+.card-meta {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-shrink: 0;
+}
+
+.department-tag {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+}
+
+.files-badge {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.files-badge i {
+  width: 14px;
+  height: 14px;
+}
+
+/* Аватарка */
+.card-assignee {
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  background: var(--blue, #3b82f6);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.assignee-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.assignee-initials {
+  font-size: 10px;
+  font-weight: 600;
+  color: white;
+}
+
+/* Даты */
+.card-dates {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  text-align: right;
+}
+
+.date-created,
+.date-closed {
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.date-created {
+  color: var(--text-muted);
+}
+
+.date-closed {
+  color: var(--green, #00d4aa);
+}
+
+/* Кнопки действий (всегда видны) */
+.card-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.btn-action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: rgba(255, 255, 255, 0.08);
+  border: none;
+  border-radius: 8px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.btn-action i {
+  width: 16px;
+  height: 16px;
+}
+
+.btn-restore:hover {
+  background: var(--orange, #ff9f43);
+  color: #000;
+}
+
+.btn-delete:hover {
+  background: var(--red, #ff4757);
+  color: #fff;
+}
+</style>

front_vue/src/components/Sidebar.vue

@@ -7,10 +7,13 @@
     
     <!-- Меню навигации -->
     <nav class="sidebar-nav">
-      <router-link to="/" class="nav-item" :class="{ active: $route.path === '/' }">
+      <router-link to="/" class="nav-item" :class="{ active: $route.path === '/' }" title="Доска задач">
         <i data-lucide="kanban"></i>
       </router-link>
-      <router-link to="/team" class="nav-item" :class="{ active: $route.path === '/team' }">
+      <router-link to="/archive" class="nav-item" :class="{ active: $route.path === '/archive' }" title="Архив">
+        <i data-lucide="archive"></i>
+      </router-link>
+      <router-link to="/team" class="nav-item" :class="{ active: $route.path === '/team' }" title="Команда">
         <i data-lucide="users"></i>
       </router-link>
     </nav>

front_vue/src/components/TaskPanel.vue

@@ -99,9 +99,12 @@
         <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="В архив">
+        <button v-if="!isNew && canArchive && !isArchived" class="btn-icon btn-archive" @click="handleArchive" title="В архив">
           <i data-lucide="archive"></i>
         </button>
+        <button v-if="!isNew && isArchived" class="btn-icon btn-restore" @click="handleRestore" title="Из архива">
+          <i data-lucide="archive-restore"></i>
+        </button>
       </div>
       <div class="footer-right">
         <button class="btn-cancel" @click="tryClose">Отмена</button>
@@ -158,6 +161,17 @@
     @cancel="showArchiveDialog = false"
   />
 
+  <!-- Диалог разархивации задачи -->
+  <ConfirmDialog
+    :show="showRestoreDialog"
+    title="Вернуть из архива?"
+    message="Задача будет возвращена на доску<br>в колонку «Готово»."
+    confirm-text="Вернуть"
+    variant="warning"
+    @confirm="confirmRestore"
+    @cancel="showRestoreDialog = false"
+  />
+
   <!-- Модальное окно просмотра изображения -->
   <ImagePreview 
     :file="previewImage"
@@ -185,6 +199,10 @@ const props = defineProps({
   show: Boolean,
   card: Object,
   columnId: [String, Number],
+  isArchived: {
+    type: Boolean,
+    default: false
+  },
   departments: {
     type: Array,
     default: () => []
@@ -199,7 +217,7 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['close', 'save', 'delete', 'archive'])
+const emit = defineEmits(['close', 'save', 'delete', 'archive', 'restore'])
 
 const isNew = ref(true)
 const isSaving = ref(false)
@@ -257,6 +275,7 @@ const showUnsavedDialog = ref(false)
 const showDeleteDialog = ref(false)
 const showDeleteFileDialog = ref(false)
 const showArchiveDialog = ref(false)
+const showRestoreDialog = ref(false)
 const fileToDeleteIndex = ref(null)
 
 // Начальные значения для отслеживания изменений
@@ -456,6 +475,17 @@ const confirmArchive = () => {
   }
 }
 
+const handleRestore = () => {
+  showRestoreDialog.value = true
+}
+
+const confirmRestore = () => {
+  showRestoreDialog.value = false
+  if (props.card?.id) {
+    emit('restore', props.card.id)
+  }
+}
+
 const confirmDelete = () => {
   showDeleteDialog.value = false
   emit('delete', props.card.id)
@@ -620,6 +650,16 @@ onUpdated(refreshIcons)
   color: #000;
 }
 
+.btn-icon.btn-restore {
+  border: 1px solid var(--orange);
+  color: var(--orange);
+}
+
+.btn-icon.btn-restore:hover {
+  background: var(--orange);
+  color: #000;
+}
+
 .footer-right {
   display: flex;
   gap: 12px;

front_vue/src/router.js

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import MainApp from './views/MainApp.vue'
 import LoginPage from './views/LoginPage.vue'
 import TeamPage from './views/TeamPage.vue'
+import ArchivePage from './views/ArchivePage.vue'
 import { authApi, loadServerConfig } from './api'
 
 // Флаг загрузки конфига (один раз за сессию)
@@ -30,6 +31,12 @@ const routes = [
     component: TeamPage,
     meta: { requiresAuth: true }
   },
+  {
+    path: '/archive',
+    name: 'archive',
+    component: ArchivePage,
+    meta: { requiresAuth: true }
+  },
   {
     path: '/login',
     name: 'login',

front_vue/src/views/ArchivePage.vue

@@ -0,0 +1,538 @@
+<template>
+  <div class="app">
+    <!-- Боковая панель навигации -->
+    <Sidebar />
+
+    <!-- Основной контент -->
+    <div class="main-wrapper">
+      <!-- Шапка с заголовком и фильтрами -->
+      <Header title="Архив задач">
+        <template #filters>
+          <div class="filters">
+            <button 
+              class="filter-tag"
+              :class="{ active: activeDepartment === null }"
+              @click="activeDepartment = null"
+            >
+              Все
+            </button>
+            <button 
+              v-for="dept in departments" 
+              :key="dept.id"
+              class="filter-tag"
+              :class="{ active: activeDepartment === dept.id }"
+              @click="activeDepartment = activeDepartment === dept.id ? null : dept.id"
+            >
+              {{ dept.name_departments }}
+            </button>
+          </div>
+        </template>
+        <template #stats>
+          <div class="header-stats">
+            <div class="stat">
+              <span class="stat-value">{{ filteredCards.length }}</span>
+              <span class="stat-label">в архиве</span>
+            </div>
+          </div>
+        </template>
+      </Header>
+      
+      <!-- Список архивных задач -->
+      <main class="main">
+        <div 
+          class="archive-list"
+          :class="{ 'drag-over': isDragOver }"
+          ref="listRef"
+          @dragover.prevent="handleDragOver"
+          @dragenter.prevent="handleDragEnter"
+          @dragleave="handleDragLeave"
+          @drop="handleDrop"
+        >
+          <template v-for="(card, index) in filteredCards" :key="card.id">
+            <!-- Индикатор перед карточкой -->
+            <div v-if="isDragOver && dropIndex === index" class="drop-indicator"></div>
+            <ArchiveCard
+              :card="card"
+              :index="index"
+              :departments="departments"
+              :labels="labels"
+              @click="openTaskPanel(card)"
+              @restore="handleRestore"
+              @delete="confirmDelete"
+            />
+          </template>
+          
+          <!-- Индикатор в конце списка -->
+          <div v-if="isDragOver && dropIndex === filteredCards.length" class="drop-indicator"></div>
+          
+          <!-- Пустое состояние -->
+          <div v-if="filteredCards.length === 0 && !loading" class="empty-state">
+            <i data-lucide="archive-x"></i>
+            <p>Архив пуст</p>
+            <span>Архивированные задачи появятся здесь</span>
+          </div>
+          
+          <!-- Загрузка -->
+          <div v-if="loading" class="loading-state">
+            <i data-lucide="loader-2" class="spin"></i>
+            <span>Загрузка...</span>
+          </div>
+        </div>
+      </main>
+    </div>
+
+    <!-- Панель редактирования задачи -->
+    <TaskPanel 
+      :show="panelOpen"
+      :card="editingCard"
+      :column-id="null"
+      :is-archived="true"
+      :departments="departments"
+      :labels="labels"
+      :users="users"
+      @close="closePanel"
+      @save="handleSaveTask"
+      @delete="handleDeleteTask"
+      @restore="handleRestoreFromPanel"
+    />
+
+    <!-- Диалог подтверждения удаления -->
+    <ConfirmDialog
+      :show="confirmDialogOpen"
+      title="Удалить задачу?"
+      message="Задача будет удалена безвозвратно. Это действие нельзя отменить."
+      confirm-text="Удалить"
+      @confirm="handleConfirmDelete"
+      @cancel="confirmDialogOpen = false"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue'
+import Sidebar from '../components/Sidebar.vue'
+import Header from '../components/Header.vue'
+import ArchiveCard from '../components/ArchiveCard.vue'
+import TaskPanel from '../components/TaskPanel.vue'
+import ConfirmDialog from '../components/ConfirmDialog.vue'
+import { departmentsApi, labelsApi, cardsApi, usersApi } from '../api'
+
+// Активный фильтр по отделу (синхронизация с основной доской)
+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 departments = ref([])
+const labels = ref([])
+const cards = ref([])
+const users = ref([])
+const loading = ref(true)
+
+// Отфильтрованные карточки (сортируем по order)
+const filteredCards = computed(() => {
+  let result = cards.value
+  if (activeDepartment.value) {
+    result = result.filter(card => card.departmentId === activeDepartment.value)
+  }
+  return result.sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+})
+
+// Drag & Drop
+const listRef = ref(null)
+const isDragOver = ref(false)
+const dropIndex = ref(-1)
+let dragEnterCounter = 0
+
+const handleDragEnter = () => {
+  dragEnterCounter++
+  isDragOver.value = true
+}
+
+const calculateDropIndex = (clientY) => {
+  if (!listRef.value) return filteredCards.value.length
+  
+  const cardElements = listRef.value.querySelectorAll('.archive-card')
+  let index = filteredCards.value.length
+  
+  for (let i = 0; i < cardElements.length; i++) {
+    const rect = cardElements[i].getBoundingClientRect()
+    const cardMiddle = rect.top + rect.height / 2
+    
+    if (clientY < cardMiddle) {
+      index = i
+      break
+    }
+  }
+  
+  return index
+}
+
+const handleDragOver = (e) => {
+  isDragOver.value = true
+  dropIndex.value = calculateDropIndex(e.clientY)
+}
+
+const handleDragLeave = () => {
+  dragEnterCounter--
+  if (dragEnterCounter === 0) {
+    isDragOver.value = false
+    dropIndex.value = -1
+  }
+}
+
+const handleDrop = async (e) => {
+  const cardId = parseInt(e.dataTransfer.getData('cardId'))
+  const fromIndex = parseInt(e.dataTransfer.getData('fromIndex'))
+  const toIndex = calculateDropIndex(e.clientY)
+  
+  dragEnterCounter = 0
+  isDragOver.value = false
+  dropIndex.value = -1
+  
+  // Если позиция не изменилась — ничего не делаем
+  if (fromIndex === toIndex || fromIndex === toIndex - 1) return
+  
+  // Локально перемещаем карточку
+  const card = cards.value.find(c => c.id === cardId)
+  if (!card) return
+  
+  // Удаляем из старой позиции
+  const cardIndex = cards.value.indexOf(card)
+  cards.value.splice(cardIndex, 1)
+  
+  // Вычисляем новую позицию
+  let newIndex = toIndex
+  if (cardIndex < toIndex) newIndex--
+  
+  // Вставляем в новую позицию
+  cards.value.splice(newIndex, 0, card)
+  
+  // Пересчитываем order для всех
+  cards.value.forEach((c, idx) => {
+    c.order = idx
+  })
+  
+  // Отправляем на сервер
+  await cardsApi.updateOrder(cardId, card.columnId, newIndex)
+}
+
+// Загрузка данных
+const fetchData = async () => {
+  loading.value = true
+  try {
+    const [departmentsData, labelsData, cardsData, usersData] = await Promise.all([
+      departmentsApi.getAll(),
+      labelsApi.getAll(),
+      cardsApi.getAll(1), // archive = 1
+      usersApi.getAll()
+    ])
+    
+    if (departmentsData.success) departments.value = departmentsData.data
+    if (labelsData.success) labels.value = labelsData.data
+    if (usersData.success) users.value = usersData.data
+    
+    if (cardsData.success) {
+      cards.value = cardsData.data.map(card => ({
+        id: card.id,
+        title: card.title,
+        description: card.descript,
+        details: card.descript_full,
+        departmentId: card.id_department,
+        labelId: card.id_label,
+        accountId: card.id_account,
+        assignee: card.avatar_img,
+        dueDate: card.date,
+        dateCreate: card.date_create,
+        dateClosed: card.date_closed,
+        columnId: card.column_id,
+        order: card.order ?? 0,
+        files: card.files || (card.file_img || []).map(f => ({
+          name: f.name,
+          url: f.url,
+          size: f.size,
+          preview: f.url
+        }))
+      }))
+    }
+  } catch (error) {
+    console.error('Ошибка загрузки данных:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+// Панель редактирования
+const panelOpen = ref(false)
+const editingCard = ref(null)
+
+const openTaskPanel = (card) => {
+  editingCard.value = card
+  panelOpen.value = true
+}
+
+const closePanel = () => {
+  panelOpen.value = false
+  editingCard.value = null
+}
+
+// Сохранение задачи
+const handleSaveTask = async (taskData) => {
+  if (taskData.id) {
+    // Обновляем на сервере
+    await cardsApi.update({
+      id: taskData.id,
+      id_department: taskData.departmentId,
+      id_label: taskData.labelId,
+      id_account: taskData.accountId,
+      date: taskData.dueDate,
+      title: taskData.title,
+      descript: taskData.description,
+      descript_full: taskData.details
+    })
+    
+    // Обновляем локально
+    const card = cards.value.find(c => c.id === taskData.id)
+    if (card) {
+      card.title = taskData.title
+      card.description = taskData.description
+      card.details = taskData.details
+      card.departmentId = taskData.departmentId
+      card.labelId = taskData.labelId
+      card.dueDate = taskData.dueDate
+      card.accountId = taskData.accountId
+      card.assignee = taskData.assignee
+      card.files = taskData.files || []
+    }
+  }
+  closePanel()
+}
+
+// Удаление через панель
+const handleDeleteTask = async (cardId) => {
+  const result = await cardsApi.delete(cardId)
+  if (result.success) {
+    cards.value = cards.value.filter(c => c.id !== cardId)
+  }
+  closePanel()
+}
+
+// Диалог подтверждения удаления
+const confirmDialogOpen = ref(false)
+const cardToDelete = ref(null)
+
+const confirmDelete = (cardId) => {
+  cardToDelete.value = cardId
+  confirmDialogOpen.value = true
+}
+
+const handleConfirmDelete = async () => {
+  if (cardToDelete.value) {
+    const result = await cardsApi.delete(cardToDelete.value)
+    if (result.success) {
+      cards.value = cards.value.filter(c => c.id !== cardToDelete.value)
+    }
+  }
+  confirmDialogOpen.value = false
+  cardToDelete.value = null
+}
+
+// Восстановление из архива
+const handleRestore = async (cardId) => {
+  const result = await cardsApi.setArchive(cardId, 0)
+  if (result.success) {
+    cards.value = cards.value.filter(c => c.id !== cardId)
+  }
+}
+
+// Восстановление через панель редактирования
+const handleRestoreFromPanel = async (cardId) => {
+  await handleRestore(cardId)
+  closePanel()
+}
+
+// Инициализация
+onMounted(() => {
+  fetchData()
+  if (window.lucide) {
+    window.lucide.createIcons()
+  }
+})
+</script>
+
+<style scoped>
+/* Контейнер приложения */
+.app {
+  display: flex;
+  min-height: 100vh;
+}
+
+/* Основная область контента */
+.main-wrapper {
+  flex: 1;
+  margin-left: 64px;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-main);
+}
+
+/* Контейнер фильтров */
+.filters {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+/* Кнопка фильтра */
+.filter-tag {
+  padding: 6px 12px;
+  background: var(--bg-card);
+  border: none;
+  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;
+}
+
+.filter-tag:hover {
+  background: var(--bg-card-hover);
+  color: var(--text-primary);
+}
+
+/* Активный фильтр */
+.filter-tag.active {
+  background: var(--accent);
+  color: #000;
+}
+
+/* Блок статистики */
+.header-stats {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 10px 20px;
+  background: var(--bg-card);
+  border-radius: 10px;
+}
+
+.stat {
+  display: flex;
+  align-items: baseline;
+  gap: 5px;
+}
+
+.stat-value {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.stat-label {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+/* Основная область */
+.main {
+  flex: 1;
+  padding: 0 36px 36px;
+  overflow-y: auto;
+}
+
+/* Список архивных карточек */
+.archive-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-width: 1200px;
+  min-height: 200px;
+}
+
+.archive-list.drag-over {
+  background: rgba(0, 212, 170, 0.03);
+  border-radius: 12px;
+  padding: 8px;
+  margin: -8px;
+}
+
+/* Индикатор места вставки */
+.drop-indicator {
+  height: 4px;
+  background: var(--accent);
+  border-radius: 2px;
+  margin: 4px 0;
+  animation: pulse 1s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 0.5; }
+  50% { opacity: 1; }
+}
+
+/* Пустое состояние */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 80px 20px;
+  text-align: center;
+  color: var(--text-muted);
+}
+
+.empty-state i {
+  width: 48px;
+  height: 48px;
+  opacity: 0.4;
+  margin-bottom: 16px;
+}
+
+.empty-state p {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  margin: 0 0 8px 0;
+}
+
+.empty-state span {
+  font-size: 13px;
+}
+
+/* Загрузка */
+.loading-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 60px 20px;
+  color: var(--text-muted);
+}
+
+.loading-state i {
+  width: 20px;
+  height: 20px;
+}
+
+.spin {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+</style>