feat : ajout de l'export récap. salaire

frontend/components/SalaryRecapDrawer.vue

@@ -0,0 +1,87 @@
+<template>
+    <AppDrawer v-model="drawerOpen" title="Récapitulatif Salaire">
+        <form class="space-y-4" @submit.prevent="handleSubmit">
+            <div>
+                <label class="text-md font-semibold text-neutral-700" for="salary-recap-month">
+                    Mois <span class="text-red-600">*</span>
+                </label>
+                <input
+                    id="salary-recap-month"
+                    v-model="selectedMonth"
+                    type="month"
+                    :class="monthFieldClass"
+                />
+                <p v-if="showMonthError" class="mt-1 text-sm text-red-600">
+                    Le mois est obligatoire.
+                </p>
+            </div>
+
+            <div class="flex justify-center pt-2">
+                <button
+                    type="submit"
+                    class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+                    :class="submitButtonClass"
+                >
+                    Imprimer
+                </button>
+            </div>
+        </form>
+    </AppDrawer>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import AppDrawer from '~/components/AppDrawer.vue'
+
+const props = defineProps<{
+    modelValue: boolean
+}>()
+
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: boolean): void
+    (event: 'submit', month: string): void
+}>()
+
+const drawerOpen = computed({
+    get: () => props.modelValue,
+    set: (value: boolean) => emit('update:modelValue', value)
+})
+
+const now = new Date()
+const defaultMonth = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`
+const selectedMonth = ref(defaultMonth)
+const validationTouched = ref(false)
+
+const isMonthValid = computed(() => selectedMonth.value.trim() !== '')
+const showMonthError = computed(() => validationTouched.value && !isMonthValid.value)
+
+const baseInputClass = 'mt-2 w-full rounded-md border px-3 py-2 text-md text-neutral-900'
+const monthFieldClass = computed(() => {
+    if (showMonthError.value) {
+        return `${baseInputClass} border-red-500`
+    }
+    return `${baseInputClass} border-neutral-300`
+})
+
+const submitButtonClass = computed(() => {
+    if (!isMonthValid.value) {
+        return 'opacity-50 cursor-not-allowed'
+    }
+    return ''
+})
+
+const handleSubmit = () => {
+    validationTouched.value = true
+    if (!isMonthValid.value) return
+    emit('submit', selectedMonth.value)
+}
+
+watch(
+    () => props.modelValue,
+    (isOpen) => {
+        if (!isOpen) {
+            validationTouched.value = false
+        }
+    }
+)
+</script>

frontend/pages/employees/index.vue

@@ -3,13 +3,22 @@
         <div class="shrink-0">
             <div class="flex items-center justify-between">
                 <h1 class="text-4xl font-bold text-primary-500">Employés</h1>
-                <button
-                    type="button"
-                    class="flex items-center gap-2 rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
-                    @click="openCreate"
-                >
-                    + Ajouter un employé
-                </button>
+                <div class="flex items-center gap-3">
+                    <button
+                        type="button"
+                        class="flex items-center gap-2 rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+                        @click="isSalaryRecapOpen = true"
+                    >
+                        Export récap. salaire
+                    </button>
+                    <button
+                        type="button"
+                        class="flex items-center gap-2 rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+                        @click="openCreate"
+                    >
+                        + Ajouter un employé
+                    </button>
+                </div>
             </div>
             <div class="flex gap-10 py-7">
                 <div class="w-80">
@@ -200,6 +209,11 @@
                 </div>
             </form>
         </AppDrawer>
+
+        <SalaryRecapDrawer
+            v-model="isSalaryRecapOpen"
+            @submit="handleSalaryRecapPrint"
+        />
     </div>
 </template>
 
@@ -211,7 +225,9 @@ import {listContracts} from '~/services/contracts'
 import {createEmployee, deleteEmployee, listEmployees, updateEmployee} from '~/services/employees'
 import {listSites} from '~/services/sites'
 import SiteFilterSelector from '~/components/SiteFilterSelector.vue'
+import SalaryRecapDrawer from '~/components/SalaryRecapDrawer.vue'
 import {contractNatureLabel, isContractNature, requiresContractEndDate, showsContractEndDate} from '~/utils/contract'
+import {usePdfPrinter} from '~/composables/usePdfPrinter'
 
 useHead({
     title: 'Employés'
@@ -220,6 +236,8 @@ useHead({
 const isDrawerOpen = ref(false)
 const isSubmitting = ref(false)
 const isLoading = ref(false)
+const isSalaryRecapOpen = ref(false)
+const { printPdf } = usePdfPrinter()
 const sitesInitialized = ref(false)
 const editingEmployee = ref<Employee | null>(null)
 const drawerTitle = computed(() =>
@@ -503,6 +521,11 @@ const openCreate = () => {
     isDrawerOpen.value = true
 }
 
+const handleSalaryRecapPrint = async (month: string) => {
+    await printPdf(`/salary-recap/print?month=${month}`)
+    isSalaryRecapOpen.value = false
+}
+
 const confirmDelete = async (employee: Employee) => {
     const ok = window.confirm(`Supprimer ${employee.firstName} ${employee.lastName} ?`)
     if (!ok) return