feat(frontend) : add portal pages, update auth middleware and DTOs for client portal

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/layouts/portal.vue

@@ -0,0 +1,76 @@
+<template>
+    <div class="h-screen overflow-hidden">
+        <div class="flex h-full">
+            <!-- Mobile sidebar overlay -->
+            <Transition name="sidebar-overlay">
+                <div
+                    v-if="ui.sidebarOpen"
+                    class="fixed inset-0 z-40 bg-black/50 lg:hidden"
+                    @click="ui.closeMobileSidebar()"
+                />
+            </Transition>
+
+            <aside
+                class="fixed inset-y-0 left-0 z-50 flex h-full w-64 flex-shrink-0 flex-col border-r border-neutral-200 bg-tertiary-500 transition-transform duration-300 lg:static lg:z-auto lg:translate-x-0"
+                :class="ui.sidebarOpen ? 'translate-x-0' : '-translate-x-full'"
+            >
+                <div class="flex items-center justify-between">
+                    <img src="/malio.png" alt="Logo" class="w-auto" />
+                    <button
+                        class="mr-2 rounded-md p-2 text-neutral-500 hover:bg-neutral-200 hover:text-neutral-700 transition-colors lg:hidden"
+                        @click="ui.closeMobileSidebar()"
+                    >
+                        <Icon name="mdi:close" size="20" />
+                    </button>
+                </div>
+                <nav class="flex-1 px-4 pb-6">
+                    <SidebarLink
+                        to="/portal"
+                        icon="mdi:folder-outline"
+                        label="Mes projets"
+                        :collapsed="false"
+                        class="border-t border-secondary-500 pt-6"
+                        @click="ui.closeMobileSidebar()"
+                    />
+                </nav>
+
+                <div class="flex flex-col gap-2 items-center p-4">
+                    <p class="font-bold">v {{ version }}</p>
+                </div>
+            </aside>
+
+            <div class="h-full flex-1 flex flex-col min-h-0">
+                <AppTopNav :user="auth.user" />
+                <main class="flex flex-1 flex-col overflow-y-auto bg-white px-4 pb-24 sm:px-8 lg:px-16">
+                    <div aria-hidden="true" class="pointer-events-none sticky top-0 z-30 h-8 flex-shrink-0 bg-white sm:h-12" />
+                    <slot />
+                </main>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useAppVersion } from '~/composables/useAppVersion'
+
+const auth = useAuthStore()
+const ui = useUiStore()
+const route = useRoute()
+const { version } = useAppVersion()
+
+// Close mobile sidebar on route change
+watch(() => route.path, () => {
+    ui.closeMobileSidebar()
+})
+</script>
+
+<style scoped>
+.sidebar-overlay-enter-active,
+.sidebar-overlay-leave-active {
+    transition: opacity 0.3s ease;
+}
+.sidebar-overlay-enter-from,
+.sidebar-overlay-leave-to {
+    opacity: 0;
+}
+</style>

frontend/middleware/auth.global.ts

@@ -1,16 +1,26 @@
 export default defineNuxtRouteMiddleware(async (to) => {
-  const auth = useAuthStore()
-  const isLogin = to.path === '/login'
+    const auth = useAuthStore()
+    const isLogin = to.path === '/login'
 
-  if (!auth.checked) {
-    await auth.ensureSession()
-  }
+    if (!auth.checked) {
+        await auth.ensureSession()
+    }
 
-  if (!isLogin && !auth.isAuthenticated) {
-    return navigateTo('/login')
-  }
+    if (!isLogin && !auth.isAuthenticated) {
+        return navigateTo('/login')
+    }
 
-  if (isLogin && auth.isAuthenticated) {
-    return navigateTo('/')
-  }
+    if (isLogin && auth.isAuthenticated) {
+        const isClient = auth.user?.roles?.includes('ROLE_CLIENT') ?? false
+        return navigateTo(isClient ? '/portal' : '/')
+    }
+
+    // ROLE_CLIENT: redirect to /portal, block internal pages
+    if (auth.isAuthenticated && auth.user?.roles?.includes('ROLE_CLIENT')) {
+        const isPortalRoute = to.path.startsWith('/portal')
+        const isLoginRoute = to.path === '/login'
+        if (!isPortalRoute && !isLoginRoute) {
+            return navigateTo('/portal')
+        }
+    }
 })

frontend/pages/portal/index.vue

@@ -0,0 +1,87 @@
+<template>
+    <div>
+        <div class="sticky top-8 z-20 bg-white pb-4 sm:top-12">
+            <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">{{ $t('portal.projects') }}</h1>
+        </div>
+
+        <div v-if="isLoading" class="py-8 text-center text-sm text-neutral-400">
+            {{ $t('common.loading') }}
+        </div>
+
+        <div v-else-if="projects.length === 0" class="py-8 text-center text-sm text-neutral-400">
+            {{ $t('portal.noProjects') }}
+        </div>
+
+        <div v-else class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            <NuxtLink
+                v-for="project in projects"
+                :key="project.id"
+                :to="`/portal/projects/${project.id}`"
+                class="rounded-lg border border-neutral-200 bg-white p-5 shadow-sm transition hover:shadow-md"
+            >
+                <h3 class="text-lg font-bold text-neutral-900">{{ project.name }}</h3>
+                <p class="mt-2 text-sm text-neutral-500">
+                    {{ ticketCountByProject[project.id] ?? 0 }} {{ $t('portal.openTickets') }}
+                </p>
+            </NuxtLink>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { Project } from '~/services/dto/project'
+import type { ClientTicket } from '~/services/dto/client-ticket'
+import { useClientTicketService } from '~/services/client-tickets'
+import { useProjectService } from '~/services/projects'
+
+definePageMeta({
+    layout: 'portal',
+})
+
+const { t } = useI18n()
+useHead({ title: t('portal.title') })
+
+const auth = useAuthStore()
+const clientTicketService = useClientTicketService()
+const projectService = useProjectService()
+
+const projects = ref<Project[]>([])
+const tickets = ref<ClientTicket[]>([])
+const isLoading = ref(true)
+
+const ticketCountByProject = computed(() => {
+    const counts: Record<number, number> = {}
+    for (const ticket of tickets.value) {
+        if (ticket.status === 'new' || ticket.status === 'in_progress') {
+            // Extract project ID from IRI
+            const match = ticket.project.match(/\/api\/projects\/(\d+)/)
+            if (match) {
+                const projectId = Number(match[1])
+                counts[projectId] = (counts[projectId] ?? 0) + 1
+            }
+        }
+    }
+    return counts
+})
+
+async function loadData() {
+    isLoading.value = true
+    try {
+        if (auth.user?.roles?.includes('ROLE_ADMIN')) {
+            // Admin sees all projects
+            const allProjects = await projectService.getAll({ archived: false })
+            projects.value = allProjects
+        } else {
+            // Client sees allowed projects
+            projects.value = auth.user?.allowedProjects ?? []
+        }
+        tickets.value = await clientTicketService.getAll()
+    } finally {
+        isLoading.value = false
+    }
+}
+
+onMounted(() => {
+    loadData()
+})
+</script>

frontend/pages/portal/projects/[id]/new-ticket.vue

@@ -0,0 +1,132 @@
+<template>
+    <div>
+        <div class="sticky top-8 z-20 bg-white pb-4 sm:top-12">
+            <NuxtLink
+                :to="`/portal/projects/${projectId}`"
+                class="text-sm text-neutral-400 hover:text-primary-500"
+            >
+                {{ $t('portal.backToProject') }}
+            </NuxtLink>
+            <h1 class="mt-1 text-xl font-bold text-primary-500 sm:text-2xl">{{ $t('portal.newTicket') }}</h1>
+        </div>
+
+        <form class="mt-4 max-w-2xl" @submit.prevent="handleSubmit">
+            <!-- Type -->
+            <div>
+                <label class="mb-1 block text-sm font-medium text-neutral-700">{{ $t('clientTicket.selectType') }}</label>
+                <select
+                    v-model="form.type"
+                    class="w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                >
+                    <option value="bug">{{ $t('clientTicket.type.bug') }}</option>
+                    <option value="improvement">{{ $t('clientTicket.type.improvement') }}</option>
+                    <option value="other">{{ $t('clientTicket.type.other') }}</option>
+                </select>
+            </div>
+
+            <!-- Title -->
+            <div class="mt-4">
+                <MalioInputText
+                    v-model="form.title"
+                    :label="$t('clientTicket.title')"
+                    input-class="w-full"
+                    :error="touched.title && !form.title.trim() ? $t('clientTicket.title') + ' requis' : ''"
+                    @blur="touched.title = true"
+                />
+            </div>
+
+            <!-- Description -->
+            <div class="mt-4">
+                <MalioInputTextArea
+                    v-model="form.description"
+                    :label="$t('clientTicket.description')"
+                    :size="5"
+                />
+            </div>
+
+            <!-- URL (only for bug type) -->
+            <div v-if="form.type === 'bug'" class="mt-4">
+                <MalioInputText
+                    v-model="form.url"
+                    :label="$t('clientTicket.url')"
+                    input-class="w-full"
+                />
+            </div>
+
+            <!-- Document upload (only after ticket is created) -->
+            <div class="mt-4 rounded-lg border border-dashed border-neutral-300 p-4">
+                <p class="text-sm text-neutral-500">
+                    <Icon name="heroicons:information-circle" class="mr-1 inline h-4 w-4" />
+                    Les documents pourront être ajoutés après la soumission du ticket.
+                </p>
+            </div>
+
+            <!-- Submit -->
+            <div class="mt-6 flex items-center gap-3">
+                <NuxtLink
+                    :to="`/portal/projects/${projectId}`"
+                    class="rounded-lg border border-neutral-300 px-4 py-2 text-sm font-semibold text-neutral-700 transition-colors hover:bg-neutral-50"
+                >
+                    {{ $t('common.cancel') }}
+                </NuxtLink>
+                <button
+                    type="submit"
+                    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="isSubmitting"
+                >
+                    {{ $t('portal.submitTicket') }}
+                </button>
+            </div>
+        </form>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { ClientTicketType } from '~/services/dto/client-ticket'
+import { useClientTicketService } from '~/services/client-tickets'
+
+definePageMeta({
+    layout: 'portal',
+})
+
+const route = useRoute()
+const { t } = useI18n()
+const projectId = computed(() => Number(route.params.id))
+
+useHead({ title: t('portal.newTicket') })
+
+const clientTicketService = useClientTicketService()
+
+const form = reactive({
+    type: 'bug' as ClientTicketType | string,
+    title: '',
+    description: '',
+    url: '',
+})
+
+const touched = reactive({
+    title: false,
+})
+
+const isSubmitting = ref(false)
+
+async function handleSubmit() {
+    touched.title = true
+    if (!form.title.trim()) return
+    if (!form.description.trim()) return
+
+    isSubmitting.value = true
+    try {
+        await clientTicketService.create({
+            type: form.type as ClientTicketType,
+            title: form.title.trim(),
+            description: form.description.trim(),
+            url: form.type === 'bug' && form.url.trim() ? form.url.trim() : null,
+            project: `/api/projects/${projectId.value}`,
+        })
+        await navigateTo(`/portal/projects/${projectId.value}`)
+    } finally {
+        isSubmitting.value = false
+    }
+}
+</script>

frontend/services/client-tickets.ts

@@ -1,30 +1,31 @@
-import type { ClientTicket, ClientTicketWrite } from './dto/client-ticket'
+import type { ClientTicket, ClientTicketWrite, ClientTicketStatusUpdate } from './dto/client-ticket'
 import type { HydraCollection } from '~/utils/api'
 import { extractHydraMembers } from '~/utils/api'
 
 export function useClientTicketService() {
     const api = useApi()
 
-    async function getAll(params?: Record<string, string | number>): Promise<ClientTicket[]> {
-        const data = await api.get<HydraCollection<ClientTicket>>('/client_tickets', params)
+    async function getAll(params?: { project?: number; status?: string; submittedBy?: number }): Promise<ClientTicket[]> {
+        const query: Record<string, unknown> = {}
+        if (params?.project) query.project = `/api/projects/${params.project}`
+        if (params?.status) query.status = params.status
+        if (params?.submittedBy) query.submittedBy = `/api/users/${params.submittedBy}`
+        const data = await api.get<HydraCollection<ClientTicket>>('/client_tickets', query)
         return extractHydraMembers(data)
     }
 
     async function getById(id: number): Promise<ClientTicket> {
-        return await api.get<ClientTicket>(`/client_tickets/${id}`)
+        return api.get<ClientTicket>(`/client_tickets/${id}`)
     }
 
-    async function create(data: ClientTicketWrite): Promise<ClientTicket> {
-        return await api.post<ClientTicket>('/client_tickets', data as Record<string, unknown>, {
-            toastSuccessKey: 'clientTicket.created',
+    async function create(payload: ClientTicketWrite): Promise<ClientTicket> {
+        return api.post<ClientTicket>('/client_tickets', payload as Record<string, unknown>, {
+            toastSuccessKey: 'portal.ticketCreated',
         })
     }
 
-    async function updateStatus(id: number, status: string, statusComment?: string): Promise<ClientTicket> {
-        return await api.patch<ClientTicket>(`/client_tickets/${id}`, {
-            status,
-            ...(statusComment ? { statusComment } : {}),
-        }, {
+    async function updateStatus(id: number, payload: ClientTicketStatusUpdate): Promise<ClientTicket> {
+        return api.patch<ClientTicket>(`/client_tickets/${id}`, payload as Record<string, unknown>, {
             toastSuccessKey: 'clientTicket.statusUpdated',
         })
     }

frontend/services/dto/client-ticket.ts

@@ -1,5 +1,4 @@
 import type { TaskDocument } from './task-document'
-import type { UserData } from './user-data'
 
 export type ClientTicketType = 'bug' | 'improvement' | 'other'
 export type ClientTicketStatus = 'new' | 'in_progress' | 'done' | 'rejected'
@@ -15,10 +14,10 @@ export type ClientTicket = {
     status: ClientTicketStatus
     statusComment: string | null
     project: string
-    submittedBy: UserData | null
+    submittedBy: string | null
     createdAt: string
     updatedAt: string
-    documents: TaskDocument[]
+    documents?: TaskDocument[]
 }
 
 export type ClientTicketWrite = {
@@ -28,3 +27,8 @@ export type ClientTicketWrite = {
     url?: string | null
     project: string
 }
+
+export type ClientTicketStatusUpdate = {
+    status: ClientTicketStatus
+    statusComment?: string | null
+}

frontend/services/dto/task.ts

@@ -22,7 +22,13 @@ export type Task = {
     tags: TaskTag[]
     documents: TaskDocument[]
     archived: boolean
-    clientTicket?: { id: number; number: number; type: string; status: string; title: string } | null
+    clientTicket: {
+        id: number
+        number: number
+        type: string
+        status: string
+        title: string
+    } | null
 }
 
 export type TaskWrite = {

frontend/services/dto/user-data.ts

@@ -1,10 +1,12 @@
+import type { Project } from './project'
+
 export type UserData = {
     id: number
     '@id'?: string
     username: string
     roles: string[]
-    client?: { '@id'?: string; id: number; name: string } | null
-    allowedProjects?: { '@id'?: string; id: number; name: string }[]
+    client?: { id: number; name: string } | null
+    allowedProjects?: Project[]
 }
 
 export type UserWrite = {