From a8b899f7c49bac0fd76d4f649d677e9922221076 Mon Sep 17 00:00:00 2001
From: Matthieu <mtholot19@gmail.com>
Date: Wed, 18 Mar 2026 17:16:24 +0100
Subject: [PATCH] feat(ui) : move client tickets to project sub-page and fix
 profile layout for clients

- Move client tickets from admin tab to /projects/[id]/client-tickets page
- Add "Tickets client" sidebar link under project navigation
- Fix profile page using portal layout for ROLE_CLIENT users
- Bump version to v0.3.4

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 config/version.yaml                           |   2 +-
 frontend/layouts/default.vue                  |   9 +-
 frontend/pages/admin.vue                      |   2 -
 frontend/pages/profile.vue                    |  10 +
 .../pages/projects/[id]/client-tickets.vue    | 265 ++++++++++++++++++
 5 files changed, 284 insertions(+), 4 deletions(-)
 create mode 100644 frontend/pages/projects/[id]/client-tickets.vue

diff --git a/config/version.yaml b/config/version.yaml
index 7d6b519..22ba983 100644
--- a/config/version.yaml
+++ b/config/version.yaml
@@ -1,2 +1,2 @@
 parameters:
-    app.version: '0.3.3'
+    app.version: '0.3.4'
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index b25ad38..4894ea4 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -86,7 +86,14 @@
                             sub
                             @click="ui.closeMobileSidebar()"
                         />
-
+                        <SidebarLink
+                            :to="`/projects/${currentProjectId}/client-tickets`"
+                            icon="mdi:ticket-outline"
+                            label="Tickets client"
+                            :collapsed="sidebarIsCollapsed"
+                            sub
+                            @click="ui.closeMobileSidebar()"
+                        />
                     </template>
                     <SidebarLink
                         to="/time-tracking"
diff --git a/frontend/pages/admin.vue b/frontend/pages/admin.vue
index 0f8f91e..a26fceb 100644
--- a/frontend/pages/admin.vue
+++ b/frontend/pages/admin.vue
@@ -27,7 +27,6 @@
             <AdminPriorityTab v-if="activeTab === 'priorities'" />
             <AdminTagTab v-if="activeTab === 'tags'" />
             <AdminUserTab v-if="activeTab === 'users'" />
-            <AdminClientTicketTab v-if="activeTab === 'client-tickets'" />
             <AdminGiteaTab v-if="activeTab === 'gitea'" />
             <AdminBookStackTab v-if="activeTab === 'bookstack'" />
         </div>
@@ -45,7 +44,6 @@ const tabs = [
     { key: 'priorities', label: 'Priorités' },
     { key: 'tags', label: 'Tags' },
     { key: 'users', label: 'Utilisateurs' },
-    { key: 'client-tickets', label: 'Tickets client' },
     { key: 'gitea', label: 'Gitea' },
     { key: 'bookstack', label: 'BookStack' },
 ] as const
diff --git a/frontend/pages/profile.vue b/frontend/pages/profile.vue
index 42954f0..b14792c 100644
--- a/frontend/pages/profile.vue
+++ b/frontend/pages/profile.vue
@@ -1,4 +1,5 @@
 <template>
+    <NuxtLayout :name="isClientOnly ? 'portal' : 'default'">
     <div class="mx-auto max-w-lg px-4 py-10">
         <h1 class="mb-8 text-2xl font-bold text-neutral-900">{{ $t('profile.title') }}</h1>
 
@@ -45,12 +46,21 @@
             @cancel="selectedFile = null"
         />
     </div>
+    </NuxtLayout>
 </template>
 
 <script setup lang="ts">
 import { useAvatarService } from '~/composables/useAvatarService'
 
 const auth = useAuthStore()
+
+const isClientOnly = computed(() =>
+    auth.user?.roles?.includes('ROLE_CLIENT') && !auth.user?.roles?.includes('ROLE_ADMIN')
+)
+
+definePageMeta({
+    layout: false,
+})
 const { upload, remove } = useAvatarService()
 
 const selectedFile = ref<File | null>(null)
diff --git a/frontend/pages/projects/[id]/client-tickets.vue b/frontend/pages/projects/[id]/client-tickets.vue
new file mode 100644
index 0000000..3a60fdb
--- /dev/null
+++ b/frontend/pages/projects/[id]/client-tickets.vue
@@ -0,0 +1,265 @@
+<template>
+    <div>
+        <div class="sticky top-8 z-20 bg-white pb-4 sm:top-12">
+            <div class="flex items-center justify-between gap-3">
+                <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">
+                    Tickets client
+                    <span v-if="project" class="text-neutral-400">— {{ project.name }}</span>
+                </h1>
+            </div>
+
+            <div class="mt-4 flex flex-wrap items-center gap-3">
+                <select
+                    v-model="filterStatus"
+                    class="rounded-md border border-neutral-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none"
+                >
+                    <option :value="null">Tous les statuts</option>
+                    <option value="new">{{ $t('clientTicket.status.new') }}</option>
+                    <option value="in_progress">{{ $t('clientTicket.status.in_progress') }}</option>
+                    <option value="done">{{ $t('clientTicket.status.done') }}</option>
+                    <option value="rejected">{{ $t('clientTicket.status.rejected') }}</option>
+                </select>
+            </div>
+        </div>
+
+        <div v-if="isLoading" class="py-12 text-center text-sm text-neutral-400">
+            {{ $t('common.loading') }}
+        </div>
+
+        <div v-else-if="filteredTickets.length === 0" class="py-12 text-center text-sm text-neutral-400">
+            {{ $t('clientTicket.noTickets') }}
+        </div>
+
+        <div v-else class="mt-4 space-y-3">
+            <div
+                v-for="ticket in filteredTickets"
+                :key="ticket.id"
+                class="rounded-lg border border-neutral-200 bg-white"
+            >
+                <div
+                    class="flex cursor-pointer items-start justify-between gap-3 p-4 transition-colors hover:bg-neutral-50"
+                    @click="toggleExpand(ticket.id)"
+                >
+                    <div class="min-w-0 flex-1">
+                        <div class="flex flex-wrap items-center gap-2">
+                            <span class="text-xs font-bold text-primary-500">CT-{{ String(ticket.number).padStart(3, '0') }}</span>
+                            <span
+                                class="rounded-full px-2 py-0.5 text-xs font-semibold text-white"
+                                :class="typeBadgeClass(ticket.type)"
+                            >
+                                {{ $t(`clientTicket.type.${ticket.type}`) }}
+                            </span>
+                            <span
+                                class="rounded-full px-2 py-0.5 text-xs font-semibold"
+                                :class="statusBadgeClass(ticket.status)"
+                            >
+                                {{ $t(`clientTicket.status.${ticket.status}`) }}
+                            </span>
+                        </div>
+                        <p class="mt-1 text-sm font-semibold text-neutral-900">{{ ticket.title }}</p>
+                        <p class="mt-0.5 text-xs text-neutral-400">{{ formatDate(ticket.createdAt) }}</p>
+                    </div>
+                    <div class="flex items-center gap-1">
+                        <button
+                            class="rounded p-1.5 text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-primary-500"
+                            :title="$t('clientTicket.changeStatus')"
+                            @click.stop="openStatusChange(ticket)"
+                        >
+                            <Icon name="mdi:swap-horizontal" size="18" />
+                        </button>
+                        <button
+                            class="rounded p-1.5 text-neutral-400 transition-colors hover:bg-red-50 hover:text-red-500"
+                            title="Supprimer"
+                            @click.stop="onDelete(ticket)"
+                        >
+                            <Icon name="mdi:delete-outline" size="18" />
+                        </button>
+                        <Icon
+                            :name="expandedId === ticket.id ? 'mdi:chevron-up' : 'mdi:chevron-down'"
+                            size="20"
+                            class="text-neutral-400"
+                        />
+                    </div>
+                </div>
+
+                <!-- Expanded details -->
+                <div v-if="expandedId === ticket.id" class="border-t border-neutral-100 px-4 py-3">
+                    <p class="text-sm text-neutral-600 whitespace-pre-wrap">{{ ticket.description }}</p>
+                    <div v-if="ticket.url" class="mt-2">
+                        <a
+                            :href="ticket.url"
+                            target="_blank"
+                            class="text-xs text-primary-500 underline hover:text-primary-600"
+                        >
+                            {{ ticket.url }}
+                        </a>
+                    </div>
+                    <div v-if="ticket.statusComment" class="mt-2 rounded-lg bg-neutral-50 p-2 text-xs text-neutral-500">
+                        {{ ticket.statusComment }}
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Status change modal -->
+        <Teleport v-if="statusModalOpen" to="body">
+            <div class="fixed inset-0 z-[60] flex items-center justify-center p-4">
+                <div
+                    class="absolute inset-0 bg-slate-900/40 backdrop-blur-sm"
+                    @click="statusModalOpen = false"
+                />
+                <div class="relative z-10 w-full max-w-md rounded-2xl bg-white p-6 shadow-2xl">
+                    <h3 class="text-lg font-bold text-neutral-900">{{ $t('clientTicket.changeStatus') }}</h3>
+                    <p v-if="statusTarget" class="mt-1 text-sm text-neutral-500">
+                        CT-{{ String(statusTarget.number).padStart(3, '0') }} — {{ statusTarget.title }}
+                    </p>
+
+                    <div class="mt-4">
+                        <label class="mb-1 block text-sm font-medium text-neutral-700">Nouveau statut</label>
+                        <select
+                            v-model="newStatus"
+                            class="w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
+                        >
+                            <option :value="null" disabled>—</option>
+                            <option
+                                v-for="s in availableStatusTransitions"
+                                :key="s.value"
+                                :value="s.value"
+                            >
+                                {{ s.label }}
+                            </option>
+                        </select>
+                    </div>
+
+                    <div v-if="newStatus === 'rejected'" class="mt-4">
+                        <MalioInputTextArea
+                            v-model="statusComment"
+                            :label="$t('clientTicket.statusComment')"
+                            :size="3"
+                        />
+                        <p v-if="rejectionError" class="mt-1 text-xs text-red-500">
+                            {{ $t('clientTicket.rejectionRequired') }}
+                        </p>
+                    </div>
+
+                    <div class="mt-6 flex justify-end gap-3">
+                        <button
+                            class="rounded-lg border border-neutral-300 px-4 py-2 text-sm font-semibold text-neutral-700 transition-colors hover:bg-neutral-50"
+                            @click="statusModalOpen = false"
+                        >
+                            {{ $t('common.cancel') }}
+                        </button>
+                        <button
+                            class="rounded-lg bg-primary-500 px-6 py-2 text-sm font-semibold text-white transition-colors hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
+                            :disabled="isUpdatingStatus"
+                            @click="confirmStatusChange"
+                        >
+                            Confirmer
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </Teleport>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { ClientTicket, ClientTicketStatus } from '~/services/dto/client-ticket'
+import type { Project } from '~/services/dto/project'
+import { useClientTicketService } from '~/services/client-tickets'
+import { useProjectService } from '~/services/projects'
+
+const route = useRoute()
+const { t } = useI18n()
+const projectId = computed(() => Number(route.params.id))
+
+useHead({ title: 'Tickets client' })
+
+const clientTicketService = useClientTicketService()
+const projectService = useProjectService()
+const { typeBadgeClass, statusBadgeClass, formatDate, getAvailableStatusTransitions } = useClientTicketHelpers()
+
+const project = ref<Project | null>(null)
+const tickets = ref<ClientTicket[]>([])
+const isLoading = ref(true)
+const filterStatus = ref<string | null>(null)
+const expandedId = ref<number | null>(null)
+
+const filteredTickets = computed(() => {
+    if (!filterStatus.value) return tickets.value
+    return tickets.value.filter(t => t.status === filterStatus.value)
+})
+
+// Status change
+const statusModalOpen = ref(false)
+const statusTarget = ref<ClientTicket | null>(null)
+const newStatus = ref<string | null>(null)
+const statusComment = ref('')
+const rejectionError = ref(false)
+const isUpdatingStatus = ref(false)
+
+const availableStatusTransitions = computed(() => {
+    if (!statusTarget.value) return []
+    return getAvailableStatusTransitions(statusTarget.value.status, t)
+})
+
+function toggleExpand(id: number) {
+    expandedId.value = expandedId.value === id ? null : id
+}
+
+function openStatusChange(ticket: ClientTicket) {
+    statusTarget.value = ticket
+    newStatus.value = null
+    statusComment.value = ''
+    rejectionError.value = false
+    statusModalOpen.value = true
+}
+
+async function confirmStatusChange() {
+    if (!statusTarget.value || !newStatus.value) return
+
+    if (newStatus.value === 'rejected' && !statusComment.value.trim()) {
+        rejectionError.value = true
+        return
+    }
+
+    isUpdatingStatus.value = true
+    try {
+        await clientTicketService.updateStatus(statusTarget.value.id, {
+            status: newStatus.value as ClientTicketStatus,
+            statusComment: newStatus.value === 'rejected' ? statusComment.value.trim() : null,
+        })
+        statusModalOpen.value = false
+        await loadTickets()
+    } finally {
+        isUpdatingStatus.value = false
+    }
+}
+
+async function onDelete(ticket: ClientTicket) {
+    await clientTicketService.remove(ticket.id)
+    await loadTickets()
+}
+
+async function loadTickets() {
+    tickets.value = await clientTicketService.getAll({ project: projectId.value })
+}
+
+async function loadData() {
+    isLoading.value = true
+    try {
+        const [p, t] = await Promise.all([
+            projectService.getById(projectId.value),
+            clientTicketService.getAll({ project: projectId.value }),
+        ])
+        project.value = p
+        tickets.value = t
+    } finally {
+        isLoading.value = false
+    }
+}
+
+onMounted(() => {
+    loadData()
+})
+</script>