[#SIRH-12] Export des heures d'un employé sur une année (#7)

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

Reviewed-on: #7
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

frontend/pages/employees/[id].vue

@@ -13,7 +13,16 @@
         <div v-else class="flex min-h-0 flex-1 flex-col">
             <div class="flex items-center justify-between">
                 <div>
-                    <h1 class="text-[32px] font-bold">{{ employee.firstName }} {{ employee.lastName }}</h1>
+                    <div class="flex items-center gap-4">
+                        <h1 class="text-[32px] font-bold">{{ employee.firstName }} {{ employee.lastName }}</h1>
+                        <button
+                            class="inline-flex items-center justify-center rounded-md p-1 transition-colors duration-150 focus:outline-none focus-visible:ring-2 bg-primary-500 hover:bg-secondary-500 active:bg-primary-500 text-white cursor-pointer"
+                            title="Export heures annuelles"
+                            @click="isYearlyHoursDrawerOpen = true"
+                        >
+                            <Icon name="mdi:printer" size="24" />
+                        </button>
+                    </div>
                     <p>Date d'entrée : {{ employee.entryDate ? employee.entryDate.split('-').reverse().join('/') : '-' }}</p>
                 </div>
                 <div class="text-right">
@@ -166,10 +175,24 @@
                 </div>
             </div>
         </div>
+
+        <EmployeeYearlyHoursDrawer
+            v-if="employee"
+            v-model="isYearlyHoursDrawerOpen"
+            :employee-id="employee.id"
+            @submit="handleYearlyHoursPrint"
+        />
     </div>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
+import EmployeeYearlyHoursDrawer from '~/components/EmployeeYearlyHoursDrawer.vue'
+import { usePdfPrinter } from '~/composables/usePdfPrinter'
+
+const { printPdf } = usePdfPrinter()
+const isYearlyHoursDrawerOpen = ref(false)
+
 const {
     employee,
     isLoading,
@@ -234,6 +257,12 @@ const {
     submitDeleteBonus
 } = useEmployeeDetailPage()
 
+const handleYearlyHoursPrint = async (year: number) => {
+    if (!employee.value) return
+    await printPdf(`/yearly-hours/print?employeeId=${employee.value.id}&year=${year}`)
+    isYearlyHoursDrawerOpen.value = false
+}
+
 useHead(() => ({
     title: employee.value
         ? `${employee.value.firstName} ${employee.value.lastName}`