feat(reporting) : add Reporting dashboard front layer

LST-59 (3.1) front. Completes the Reporting module. - New frontend/modules/reporting/ layer (auto-detected): /reporting page (admin middleware) consuming the 4 read-only report endpoints. - Filters (period presets + custom dates, project, user). 4 sections (time per project, time per user, tasks by status, absences by type) each with a DataTable + a Chart.js chart (reused global registration). - Front-side CSV export per section (useCsvExport: BOM UTF-8, ; separator). - i18n keys (reporting.*, sidebar.admin.reporting). nuxt build passes; /reporting routed; no route regression.
2026-06-21 00:16:03 +02:00
parent b3b29fd753
commit f4ffc02028
9 changed files with 713 additions and 1 deletions
@@ -0,0 +1,52 @@
+<template>
+    <div class="h-64">
+        <Bar
+            v-if="hasData"
+            :data="chartData"
+            :options="options"
+        />
+        <p v-else class="flex h-full items-center justify-center text-sm text-neutral-400">
+            {{ emptyMessage ?? $t('reporting.empty') }}
+        </p>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { Bar } from 'vue-chartjs'
+
+const props = defineProps<{
+    labels: string[]
+    values: number[]
+    color?: string
+    emptyMessage?: string
+}>()
+
+const hasData = computed(() => props.values.some(v => v > 0))
+
+const chartData = computed(() => ({
+    labels: props.labels,
+    datasets: [{
+        data: props.values,
+        backgroundColor: props.color ?? '#6366f1',
+        borderWidth: 0,
+        borderRadius: 6,
+    }],
+}))
+
+const options = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+        legend: { display: false },
+    },
+    scales: {
+        y: {
+            beginAtZero: true,
+            grid: { color: '#f3f4f6' },
+        },
+        x: {
+            grid: { display: false },
+        },
+    },
+}
+</script>
@@ -0,0 +1,56 @@
+<template>
+    <div class="h-64">
+        <Doughnut
+            v-if="hasData"
+            :data="chartData"
+            :options="options"
+        />
+        <p v-else class="flex h-full items-center justify-center text-sm text-neutral-400">
+            {{ emptyMessage ?? $t('reporting.empty') }}
+        </p>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { Doughnut } from 'vue-chartjs'
+
+const props = defineProps<{
+    labels: string[]
+    values: number[]
+    colors?: string[]
+    emptyMessage?: string
+}>()
+
+const palette = [
+    '#6366f1', '#10b981', '#f59e0b', '#ef4444', '#3b82f6',
+    '#8b5cf6', '#ec4899', '#14b8a6', '#f97316', '#84cc16',
+]
+
+const hasData = computed(() => props.values.some(v => v > 0))
+
+const chartData = computed(() => ({
+    labels: props.labels,
+    datasets: [{
+        data: props.values,
+        backgroundColor: props.colors ?? props.labels.map((_, i) => palette[i % palette.length]),
+        borderWidth: 0,
+    }],
+}))
+
+const options = {
+    responsive: true,
+    maintainAspectRatio: false,
+    cutout: '65%',
+    plugins: {
+        legend: {
+            position: 'bottom' as const,
+            labels: {
+                padding: 16,
+                usePointStyle: true,
+                pointStyle: 'circle',
+                font: { size: 12 },
+            },
+        },
+    },
+}
+</script>
@@ -0,0 +1,44 @@
+export type CsvColumn<T> = {
+    header: string
+    value: (row: T) => string | number
+}
+
+/** Escapes a single CSV cell (quotes wrapping + doubled inner quotes). */
+function escapeCell(value: string | number): string {
+    const str = String(value ?? '')
+    if (/[",\n;]/.test(str)) {
+        return `"${str.replace(/"/g, '""')}"`
+    }
+    return str
+}
+
+export function useCsvExport() {
+    /** Builds a CSV string from rows + column definitions (semicolon separator, FR-friendly). */
+    function toCsv<T>(rows: T[], columns: CsvColumn<T>[]): string {
+        const header = columns.map(c => escapeCell(c.header)).join(';')
+        const lines = rows.map(row =>
+            columns.map(c => escapeCell(c.value(row))).join(';'),
+        )
+        return [header, ...lines].join('\n')
+    }
+
+    /** Triggers a browser download of the given CSV content. */
+    function downloadCsv<T>(filename: string, rows: T[], columns: CsvColumn<T>[]): void {
+        if (typeof window === 'undefined') {
+            return
+        }
+        const csv = toCsv(rows, columns)
+        // Prepend BOM so Excel detects UTF-8.
+        const blob = new Blob([`${csv}`], { type: 'text/csv;charset=utf-8;' })
+        const url = URL.createObjectURL(blob)
+        const link = document.createElement('a')
+        link.href = url
+        link.download = filename.endsWith('.csv') ? filename : `${filename}.csv`
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+        URL.revokeObjectURL(url)
+    }
+
+    return { toCsv, downloadCsv }
+}
@@ -0,0 +1,41 @@
+export type ReportPeriodKey = 'thisMonth' | 'lastMonth' | 'custom'
+
+export type ReportPeriodRange = {
+    from: string
+    to: string
+}
+
+/** Formats a Date as an ISO "YYYY-MM-DD" string (local time, no timezone shift). */
+function toIsoDate(date: Date): string {
+    const year = date.getFullYear()
+    const month = String(date.getMonth() + 1).padStart(2, '0')
+    const day = String(date.getDate()).padStart(2, '0')
+    return `${year}-${month}-${day}`
+}
+
+/** Returns the {from, to} range (inclusive) for a given month offset relative to now. */
+function getMonthRange(offset: number): ReportPeriodRange {
+    const now = new Date()
+    const start = new Date(now.getFullYear(), now.getMonth() + offset, 1)
+    const end = new Date(now.getFullYear(), now.getMonth() + offset + 1, 0)
+    return { from: toIsoDate(start), to: toIsoDate(end) }
+}
+
+export function useReportingFilters() {
+    const thisMonth = (): ReportPeriodRange => getMonthRange(0)
+    const lastMonth = (): ReportPeriodRange => getMonthRange(-1)
+
+    /** Resolves a preset key to a concrete range. `custom` keeps the provided range. */
+    function rangeForPreset(key: ReportPeriodKey, current: ReportPeriodRange): ReportPeriodRange {
+        switch (key) {
+            case 'thisMonth':
+                return thisMonth()
+            case 'lastMonth':
+                return lastMonth()
+            case 'custom':
+                return current
+        }
+    }
+
+    return { thisMonth, lastMonth, rangeForPreset, toIsoDate }
+}
@@ -0,0 +1 @@
+export default defineNuxtConfig({})
@@ -0,0 +1,388 @@
+<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('reporting.title') }}
+            </h1>
+
+            <!-- Filters -->
+            <div class="mt-4 flex flex-wrap items-end gap-3">
+                <MalioSelect
+                    v-model="selectedPeriod"
+                    :options="periodOptions"
+                    :label="$t('reporting.filters.period')"
+                    group-class="!w-48"
+                    text-field="text-sm"
+                    text-value="text-sm"
+                />
+                <div class="w-40">
+                    <label class="mb-1 block text-sm font-medium text-neutral-700">
+                        {{ $t('reporting.filters.from') }}
+                    </label>
+                    <MalioDate
+                        v-model="customFrom"
+                        :disabled="selectedPeriod !== 'custom'"
+                        group-class="w-full"
+                    />
+                </div>
+                <div class="w-40">
+                    <label class="mb-1 block text-sm font-medium text-neutral-700">
+                        {{ $t('reporting.filters.to') }}
+                    </label>
+                    <MalioDate
+                        v-model="customTo"
+                        :disabled="selectedPeriod !== 'custom'"
+                        group-class="w-full"
+                    />
+                </div>
+                <MalioSelect
+                    v-model="selectedProjectId"
+                    :options="projectOptions"
+                    :label="$t('reporting.filters.project')"
+                    :empty-option-label="$t('reporting.filters.allProjects')"
+                    group-class="!w-44"
+                    text-field="text-sm"
+                    text-value="text-sm"
+                />
+                <MalioSelect
+                    v-model="selectedUserId"
+                    :options="userOptions"
+                    :label="$t('reporting.filters.user')"
+                    :empty-option-label="$t('reporting.filters.allUsers')"
+                    group-class="!w-44"
+                    text-field="text-sm"
+                    text-value="text-sm"
+                />
+            </div>
+        </div>
+
+        <!-- Loading -->
+        <div v-if="isLoading" class="mt-12 flex items-center justify-center">
+            <p class="text-neutral-400">{{ $t('common.loading') }}</p>
+        </div>
+
+        <template v-else>
+            <!-- Section 1 : Time per project -->
+            <section class="mt-8 rounded-xl border border-neutral-100 bg-neutral-50 p-5">
+                <div class="flex items-center justify-between">
+                    <h2 class="text-sm font-semibold text-neutral-700">
+                        {{ $t('reporting.sections.timePerProject') }}
+                    </h2>
+                    <MalioButton
+                        icon-name="mdi:download"
+                        icon-position="left"
+                        button-class="w-auto px-3 py-1.5 text-sm"
+                        :label="$t('reporting.export')"
+                        :disabled="timePerProject.length === 0"
+                        @click="exportTimePerProject"
+                    />
+                </div>
+                <div class="mt-4 grid gap-6 lg:grid-cols-2">
+                    <DataTable
+                        :columns="projectColumns"
+                        :items="timePerProject"
+                        :empty-message="$t('reporting.empty')"
+                    >
+                        <template #cell-hours="{ item }">
+                            {{ formatHours((item as TimePerProject).hours) }}
+                        </template>
+                    </DataTable>
+                    <ReportingDoughnut
+                        :labels="timePerProject.map(r => r.projectName)"
+                        :values="timePerProject.map(r => round(r.hours))"
+                    />
+                </div>
+            </section>
+
+            <!-- Section 2 : Time per user -->
+            <section class="mt-6 rounded-xl border border-neutral-100 bg-neutral-50 p-5">
+                <div class="flex items-center justify-between">
+                    <h2 class="text-sm font-semibold text-neutral-700">
+                        {{ $t('reporting.sections.timePerUser') }}
+                    </h2>
+                    <MalioButton
+                        icon-name="mdi:download"
+                        icon-position="left"
+                        button-class="w-auto px-3 py-1.5 text-sm"
+                        :label="$t('reporting.export')"
+                        :disabled="timePerUser.length === 0"
+                        @click="exportTimePerUser"
+                    />
+                </div>
+                <div class="mt-4 grid gap-6 lg:grid-cols-2">
+                    <DataTable
+                        :columns="userColumns"
+                        :items="timePerUser"
+                        :empty-message="$t('reporting.empty')"
+                    >
+                        <template #cell-hours="{ item }">
+                            {{ formatHours((item as TimePerUser).hours) }}
+                        </template>
+                    </DataTable>
+                    <ReportingBarChart
+                        :labels="timePerUser.map(r => r.fullName || r.username)"
+                        :values="timePerUser.map(r => round(r.hours))"
+                        color="#10b981"
+                    />
+                </div>
+            </section>
+
+            <!-- Section 3 : Tasks by status -->
+            <section class="mt-6 rounded-xl border border-neutral-100 bg-neutral-50 p-5">
+                <div class="flex items-center justify-between">
+                    <h2 class="text-sm font-semibold text-neutral-700">
+                        {{ $t('reporting.sections.tasksByStatus') }}
+                    </h2>
+                    <MalioButton
+                        icon-name="mdi:download"
+                        icon-position="left"
+                        button-class="w-auto px-3 py-1.5 text-sm"
+                        :label="$t('reporting.export')"
+                        :disabled="tasksByStatus.length === 0"
+                        @click="exportTasksByStatus"
+                    />
+                </div>
+                <div class="mt-4 grid gap-6 lg:grid-cols-2">
+                    <DataTable
+                        :columns="statusColumns"
+                        :items="tasksByStatus"
+                        :empty-message="$t('reporting.empty')"
+                    />
+                    <ReportingDoughnut
+                        :labels="tasksByStatus.map(r => r.statusLabel)"
+                        :values="tasksByStatus.map(r => r.count)"
+                    />
+                </div>
+            </section>
+
+            <!-- Section 4 : Absences by type -->
+            <section class="mt-6 rounded-xl border border-neutral-100 bg-neutral-50 p-5">
+                <div class="flex items-center justify-between">
+                    <h2 class="text-sm font-semibold text-neutral-700">
+                        {{ $t('reporting.sections.absencesByType') }}
+                    </h2>
+                    <MalioButton
+                        icon-name="mdi:download"
+                        icon-position="left"
+                        button-class="w-auto px-3 py-1.5 text-sm"
+                        :label="$t('reporting.export')"
+                        :disabled="absencesByType.length === 0"
+                        @click="exportAbsencesByType"
+                    />
+                </div>
+                <div class="mt-4 grid gap-6 lg:grid-cols-2">
+                    <DataTable
+                        :columns="absenceColumns"
+                        :items="absenceRows"
+                        :empty-message="$t('reporting.empty')"
+                    />
+                    <ReportingBarChart
+                        :labels="absencesByType.map(r => absenceTypeLabel(r.type))"
+                        :values="absencesByType.map(r => r.totalDays)"
+                        color="#f59e0b"
+                    />
+                </div>
+            </section>
+        </template>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { DataTableColumn } from '~/components/ui/DataTable.vue'
+import type {
+    AbsencesByType,
+    ReportFilters,
+    TasksByStatus,
+    TimePerProject,
+    TimePerUser,
+} from '~/modules/reporting/services/dto/reporting'
+import { useReportingService } from '~/modules/reporting/services/reporting'
+import {
+    useReportingFilters,
+    type ReportPeriodKey,
+} from '~/modules/reporting/composables/useReportingFilters'
+import { useCsvExport } from '~/modules/reporting/composables/useCsvExport'
+import type { Project } from '~/modules/project-management/services/dto/project'
+import type { UserData } from '~/services/dto/user-data'
+import { useProjectService } from '~/modules/project-management/services/projects'
+import { useUserService } from '~/services/users'
+
+definePageMeta({ middleware: ['admin'] })
+
+const { t } = useI18n()
+useHead({ title: t('reporting.title') })
+
+const reportingService = useReportingService()
+const projectService = useProjectService()
+const userService = useUserService()
+const { rangeForPreset, thisMonth } = useReportingFilters()
+const { downloadCsv } = useCsvExport()
+
+// --- Filters state ---
+const selectedPeriod = ref<ReportPeriodKey>('thisMonth')
+const initialRange = thisMonth()
+const customFrom = ref<string | null>(initialRange.from)
+const customTo = ref<string | null>(initialRange.to)
+const selectedProjectId = ref<number | null>(null)
+const selectedUserId = ref<number | null>(null)
+
+const periodOptions = computed(() => [
+    { label: t('reporting.periods.thisMonth'), value: 'thisMonth' },
+    { label: t('reporting.periods.lastMonth'), value: 'lastMonth' },
+    { label: t('reporting.periods.custom'), value: 'custom' },
+])
+
+const projects = ref<Project[]>([])
+const users = ref<UserData[]>([])
+
+const projectOptions = computed(() =>
+    projects.value.map(p => ({ label: p.name, value: p.id })),
+)
+const userOptions = computed(() =>
+    users.value.map(u => ({
+        label: [u.firstName, u.lastName].filter(Boolean).join(' ') || u.username,
+        value: u.id,
+    })),
+)
+
+// --- Effective range (preset → concrete dates) ---
+const activeFilters = computed<ReportFilters>(() => ({
+    from: customFrom.value ?? initialRange.from,
+    to: customTo.value ?? initialRange.to,
+    projectId: selectedProjectId.value,
+    userId: selectedUserId.value,
+}))
+
+// When a non-custom preset is picked, sync the date pickers.
+watch(selectedPeriod, (key) => {
+    if (key !== 'custom') {
+        const range = rangeForPreset(key, {
+            from: customFrom.value ?? initialRange.from,
+            to: customTo.value ?? initialRange.to,
+        })
+        customFrom.value = range.from
+        customTo.value = range.to
+    }
+})
+
+// --- Report data ---
+const timePerProject = ref<TimePerProject[]>([])
+const timePerUser = ref<TimePerUser[]>([])
+const tasksByStatus = ref<TasksByStatus[]>([])
+const absencesByType = ref<AbsencesByType[]>([])
+const isLoading = ref(true)
+
+const absenceRows = computed(() =>
+    absencesByType.value.map(r => ({ ...r, typeLabel: absenceTypeLabel(r.type) })),
+)
+
+// --- Columns ---
+const projectColumns: DataTableColumn[] = [
+    { key: 'projectName', label: t('reporting.columns.project'), primary: true },
+    { key: 'hours', label: t('reporting.columns.hours') },
+    { key: 'entryCount', label: t('reporting.columns.entries') },
+]
+const userColumns: DataTableColumn[] = [
+    { key: 'fullName', label: t('reporting.columns.user'), primary: true },
+    { key: 'hours', label: t('reporting.columns.hours') },
+    { key: 'entryCount', label: t('reporting.columns.entries') },
+]
+const statusColumns: DataTableColumn[] = [
+    { key: 'statusLabel', label: t('reporting.columns.status'), primary: true },
+    { key: 'count', label: t('reporting.columns.count') },
+]
+const absenceColumns: DataTableColumn[] = [
+    { key: 'typeLabel', label: t('reporting.columns.type'), primary: true },
+    { key: 'count', label: t('reporting.columns.count') },
+    { key: 'totalDays', label: t('reporting.columns.days') },
+]
+
+// --- Helpers ---
+function round(value: number): number {
+    return Math.round(value * 100) / 100
+}
+
+function formatHours(h: number): string {
+    const hours = Math.floor(h)
+    const mins = Math.round((h - hours) * 60)
+    return mins > 0 ? `${hours}h${String(mins).padStart(2, '0')}` : `${hours}h`
+}
+
+function absenceTypeLabel(type: string): string {
+    const key = `reporting.absenceTypes.${type}`
+    const label = t(key)
+    return label === key ? type : label
+}
+
+// --- Loading ---
+async function loadReferenceData() {
+    const [proj, usr] = await Promise.all([
+        projectService.getAll(),
+        userService.getAll(),
+    ])
+    projects.value = proj
+    users.value = usr
+}
+
+async function loadReports() {
+    isLoading.value = true
+    try {
+        const filters = activeFilters.value
+        const [tpp, tpu, tbs, abt] = await Promise.all([
+            reportingService.timePerProject(filters),
+            reportingService.timePerUser(filters),
+            reportingService.tasksByStatus(filters),
+            reportingService.absencesByType(filters),
+        ])
+        timePerProject.value = tpp
+        timePerUser.value = tpu
+        tasksByStatus.value = tbs
+        absencesByType.value = abt
+    } finally {
+        isLoading.value = false
+    }
+}
+
+// Reload reports whenever the effective filters change.
+watch(activeFilters, () => {
+    loadReports()
+}, { deep: true })
+
+onMounted(async () => {
+    await loadReferenceData()
+    await loadReports()
+})
+
+// --- CSV export ---
+function exportTimePerProject() {
+    downloadCsv('rapport-temps-par-projet', timePerProject.value, [
+        { header: t('reporting.columns.project'), value: r => r.projectName },
+        { header: t('reporting.columns.code'), value: r => r.projectCode },
+        { header: t('reporting.columns.hours'), value: r => round(r.hours) },
+        { header: t('reporting.columns.entries'), value: r => r.entryCount },
+    ])
+}
+
+function exportTimePerUser() {
+    downloadCsv('rapport-temps-par-utilisateur', timePerUser.value, [
+        { header: t('reporting.columns.user'), value: r => r.fullName || r.username },
+        { header: t('reporting.columns.hours'), value: r => round(r.hours) },
+        { header: t('reporting.columns.entries'), value: r => r.entryCount },
+    ])
+}
+
+function exportTasksByStatus() {
+    downloadCsv('rapport-taches-par-statut', tasksByStatus.value, [
+        { header: t('reporting.columns.status'), value: r => r.statusLabel },
+        { header: t('reporting.columns.count'), value: r => r.count },
+    ])
+}
+
+function exportAbsencesByType() {
+    downloadCsv('rapport-absences-par-type', absencesByType.value, [
+        { header: t('reporting.columns.type'), value: r => absenceTypeLabel(r.type) },
+        { header: t('reporting.columns.count'), value: r => r.count },
+        { header: t('reporting.columns.days'), value: r => r.totalDays },
+    ])
+}
+</script>
@@ -0,0 +1,34 @@
+export type TimePerProject = {
+    projectId: number
+    projectCode: string
+    projectName: string
+    hours: number
+    entryCount: number
+}
+
+export type TimePerUser = {
+    userId: number
+    username: string
+    fullName: string
+    hours: number
+    entryCount: number
+}
+
+export type TasksByStatus = {
+    statusId: number
+    statusLabel: string
+    count: number
+}
+
+export type AbsencesByType = {
+    type: string
+    count: number
+    totalDays: number
+}
+
+export type ReportFilters = {
+    from: string
+    to: string
+    userId?: number | null
+    projectId?: number | null
+}
@@ -0,0 +1,51 @@
+import type {
+    AbsencesByType,
+    ReportFilters,
+    TasksByStatus,
+    TimePerProject,
+    TimePerUser,
+} from './dto/reporting'
+import type { AnyObject } from '~/shared/composables/useApi'
+import type { HydraCollection } from '~/utils/api'
+import { extractHydraMembers } from '~/utils/api'
+
+function buildQuery(filters: Partial<ReportFilters>, keys: (keyof ReportFilters)[]): AnyObject {
+    const query: AnyObject = {}
+    for (const key of keys) {
+        const value = filters[key]
+        if (value !== undefined && value !== null && value !== '') {
+            query[key] = value
+        }
+    }
+    return query
+}
+
+export function useReportingService() {
+    const api = useApi()
+
+    async function timePerProject(filters: ReportFilters): Promise<TimePerProject[]> {
+        const query = buildQuery(filters, ['from', 'to', 'userId', 'projectId'])
+        const data = await api.get<HydraCollection<TimePerProject>>('/reports/time-per-project', query, { toast: false })
+        return extractHydraMembers(data)
+    }
+
+    async function timePerUser(filters: ReportFilters): Promise<TimePerUser[]> {
+        const query = buildQuery(filters, ['from', 'to', 'projectId'])
+        const data = await api.get<HydraCollection<TimePerUser>>('/reports/time-per-user', query, { toast: false })
+        return extractHydraMembers(data)
+    }
+
+    async function tasksByStatus(filters: ReportFilters): Promise<TasksByStatus[]> {
+        const query = buildQuery(filters, ['projectId'])
+        const data = await api.get<HydraCollection<TasksByStatus>>('/reports/tasks-by-status', query, { toast: false })
+        return extractHydraMembers(data)
+    }
+
+    async function absencesByType(filters: ReportFilters): Promise<AbsencesByType[]> {
+        const query = buildQuery(filters, ['from', 'to', 'userId'])
+        const data = await api.get<HydraCollection<AbsencesByType>>('/reports/absences-by-type', query, { toast: false })
+        return extractHydraMembers(data)
+    }
+
+    return { timePerProject, timePerUser, tasksByStatus, absencesByType }
+}