From 81d04336539c186e2ff1cafef13a30e35f520ef5 Mon Sep 17 00:00:00 2001
From: Matthieu <mtholot19@gmail.com>
Date: Thu, 12 Mar 2026 18:05:12 +0100
Subject: [PATCH] feat(frontend) : create project archives page

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/pages/projects/[id]/archives.vue | 161 ++++++++++++++++++++++
 1 file changed, 161 insertions(+)
 create mode 100644 frontend/pages/projects/[id]/archives.vue

diff --git a/frontend/pages/projects/[id]/archives.vue b/frontend/pages/projects/[id]/archives.vue
new file mode 100644
index 0000000..eff8ecf
--- /dev/null
+++ b/frontend/pages/projects/[id]/archives.vue
@@ -0,0 +1,161 @@
+<template>
+    <div>
+        <div class="flex items-center justify-between">
+            <h1 class="text-2xl font-bold text-primary-500">{{ project?.name ?? '' }} — {{ $t('archive.title') }}</h1>
+        </div>
+
+        <div class="mt-4">
+            <MalioSelect
+                v-model="selectedGroupId"
+                :options="groupFilterOptions"
+                label="Groupe"
+                empty-option-label="Tous les groupes"
+                min-width="w-64"
+            />
+        </div>
+
+        <div class="mt-6">
+            <p v-if="filteredTasks.length === 0" class="text-sm text-neutral-400">
+                {{ $t('archive.empty') }}
+            </p>
+            <div v-else class="grid grid-cols-1 gap-3 md:grid-cols-2">
+                <div
+                    v-for="task in filteredTasks"
+                    :key="task.id"
+                    class="flex cursor-pointer items-center justify-between rounded-lg border border-neutral-200 bg-white px-4 py-3 hover:shadow-sm"
+                    @click="openTaskEdit(task)"
+                >
+                    <div class="flex items-center gap-3">
+                        <span class="text-xs font-bold text-neutral-400">{{ project?.code }}-{{ task.number }}</span>
+                        <span class="text-sm font-semibold text-neutral-900">{{ task.title }}</span>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <span
+                            v-if="task.status"
+                            class="rounded-full px-2 py-0.5 text-xs font-semibold text-white"
+                            :style="{ backgroundColor: task.status.color }"
+                        >
+                            {{ task.status.label }}
+                        </span>
+                        <span
+                            v-if="task.group"
+                            class="rounded-full border px-2 py-0.5 text-xs font-semibold"
+                            :style="{ borderColor: task.group.color, color: task.group.color }"
+                        >
+                            {{ task.group.title }}
+                        </span>
+                        <span
+                            v-if="task.assignee"
+                            class="flex h-5 w-5 items-center justify-center rounded-full bg-primary-500 text-[10px] font-bold text-white"
+                            :title="task.assignee.username"
+                        >
+                            {{ task.assignee.username.substring(0, 2).toUpperCase() }}
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <TaskDrawer
+            v-model="taskDrawerOpen"
+            :task="selectedTask"
+            :project-id="projectId"
+            :statuses="statuses"
+            :efforts="efforts"
+            :priorities="priorities"
+            :tags="tags"
+            :groups="groups"
+            :users="users"
+            @saved="onSaved"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { Project } from '~/services/dto/project'
+import type { Task } from '~/services/dto/task'
+import type { TaskStatus } from '~/services/dto/task-status'
+import type { TaskEffort } from '~/services/dto/task-effort'
+import type { TaskPriority } from '~/services/dto/task-priority'
+import type { TaskTag } from '~/services/dto/task-tag'
+import type { TaskGroup } from '~/services/dto/task-group'
+import type { UserData } from '~/services/dto/user-data'
+import { useProjectService } from '~/services/projects'
+import { useTaskService } from '~/services/tasks'
+import { useTaskStatusService } from '~/services/task-statuses'
+import { useTaskEffortService } from '~/services/task-efforts'
+import { useTaskPriorityService } from '~/services/task-priorities'
+import { useTaskTagService } from '~/services/task-tags'
+import { useTaskGroupService } from '~/services/task-groups'
+import { useUserService } from '~/services/users'
+
+const route = useRoute()
+const projectId = computed(() => Number(route.params.id))
+
+useHead({ title: 'Archives' })
+
+const projectService = useProjectService()
+const taskService = useTaskService()
+const statusService = useTaskStatusService()
+const effortService = useTaskEffortService()
+const priorityService = useTaskPriorityService()
+const tagService = useTaskTagService()
+const groupService = useTaskGroupService()
+const userService = useUserService()
+
+const project = ref<Project | null>(null)
+const archivedTasks = ref<Task[]>([])
+const statuses = ref<TaskStatus[]>([])
+const efforts = ref<TaskEffort[]>([])
+const priorities = ref<TaskPriority[]>([])
+const tags = ref<TaskTag[]>([])
+const groups = ref<TaskGroup[]>([])
+const users = ref<UserData[]>([])
+
+const selectedGroupId = ref<number | null>(null)
+const taskDrawerOpen = ref(false)
+const selectedTask = ref<Task | null>(null)
+
+const groupFilterOptions = computed(() =>
+    groups.value.map(g => ({ label: g.title, value: g.id }))
+)
+
+const filteredTasks = computed(() => {
+    if (!selectedGroupId.value) return archivedTasks.value
+    return archivedTasks.value.filter(t => t.group?.id === selectedGroupId.value)
+})
+
+async function loadData() {
+    const [p, t, s, e, pr, ty, g, u] = await Promise.all([
+        projectService.getById(projectId.value),
+        taskService.getByProjectArchived(projectId.value),
+        statusService.getAll(),
+        effortService.getAll(),
+        priorityService.getAll(),
+        tagService.getAll(),
+        groupService.getByProject(projectId.value),
+        userService.getAll(),
+    ])
+    project.value = p
+    archivedTasks.value = t
+    statuses.value = s
+    efforts.value = e
+    priorities.value = pr
+    tags.value = ty
+    groups.value = g
+    users.value = u
+}
+
+function openTaskEdit(task: Task) {
+    selectedTask.value = task
+    taskDrawerOpen.value = true
+}
+
+async function onSaved() {
+    await loadData()
+}
+
+onMounted(() => {
+    loadData()
+})
+</script>