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.
This commit is contained in:
Matthieu
@@ -360,7 +360,52 @@
|
|||||||
"section": "Administration",
|
"section": "Administration",
|
||||||
"teamAbsences": "Absences équipe",
|
"teamAbsences": "Absences équipe",
|
||||||
"administration": "Administration",
|
"administration": "Administration",
|
||||||
"directory": "Répertoire"
|
"directory": "Répertoire",
|
||||||
|
"reporting": "Rapports"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"reporting": {
|
||||||
|
"title": "Rapports",
|
||||||
|
"export": "Exporter (CSV)",
|
||||||
|
"empty": "Aucune donnée pour cette période.",
|
||||||
|
"filters": {
|
||||||
|
"period": "Période",
|
||||||
|
"from": "Du",
|
||||||
|
"to": "Au",
|
||||||
|
"project": "Projet",
|
||||||
|
"allProjects": "Tous les projets",
|
||||||
|
"user": "Utilisateur",
|
||||||
|
"allUsers": "Tous les utilisateurs"
|
||||||
|
},
|
||||||
|
"periods": {
|
||||||
|
"thisMonth": "Mois courant",
|
||||||
|
"lastMonth": "Mois dernier",
|
||||||
|
"custom": "Personnalisé"
|
||||||
|
},
|
||||||
|
"sections": {
|
||||||
|
"timePerProject": "Temps par projet",
|
||||||
|
"timePerUser": "Temps par utilisateur",
|
||||||
|
"tasksByStatus": "Tâches par statut",
|
||||||
|
"absencesByType": "Absences par type"
|
||||||
|
},
|
||||||
|
"columns": {
|
||||||
|
"project": "Projet",
|
||||||
|
"code": "Code",
|
||||||
|
"user": "Utilisateur",
|
||||||
|
"status": "Statut",
|
||||||
|
"type": "Type",
|
||||||
|
"hours": "Heures",
|
||||||
|
"entries": "Nb saisies",
|
||||||
|
"count": "Nombre",
|
||||||
|
"days": "Jours"
|
||||||
|
},
|
||||||
|
"absenceTypes": {
|
||||||
|
"cp": "Congés payés",
|
||||||
|
"mariage_pacs": "Mariage / PACS",
|
||||||
|
"naissance": "Naissance",
|
||||||
|
"conge_parental": "Congé parental",
|
||||||
|
"deces": "Décès proche",
|
||||||
|
"maladie": "Arrêt maladie"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"common": {
|
"common": {
|
||||||
|
|||||||
@@ -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 }
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user