feat : first commit

2026-02-03 18:04:06 +01:00
parent 43b0364a5a
commit a5dcd5e3e9
101 changed files with 29976 additions and 96 deletions
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
--- a/frontend/app.vue
+++ b/frontend/app.vue
@@ -0,0 +1,5 @@
+<template>
+    <NuxtLayout>
+        <NuxtPage />
+    </NuxtLayout>
+</template>
--- a/frontend/components/AppDrawer.vue
+++ b/frontend/components/AppDrawer.vue
@@ -0,0 +1,56 @@
+<template>
+  <div v-if="modelValue" class="fixed inset-0 z-50">
+    <Transition name="drawer-backdrop">
+      <div class="absolute inset-0 bg-black/40" @click="close" />
+    </Transition>
+    <Transition name="drawer-panel">
+      <div class="absolute right-0 top-0 h-full w-full max-w-md bg-white shadow-xl">
+        <div class="flex items-center justify-between border-b border-neutral-200 bg-tertiary-500 px-6 py-4">
+          <h2 class="text-lg font-semibold text-neutral-900">
+            {{ title }}
+          </h2>
+          <button
+            type="button"
+            class="rounded-md p-2 text-neutral-500 hover:bg-neutral-100"
+            @click="close"
+          >
+            ✕
+          </button>
+        </div>
+        <div class="p-6">
+          <slot />
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ modelValue: boolean; title?: string }>()
+const emit = defineEmits<{ (e: 'update:modelValue', value: boolean): void }>()
+
+const close = () => emit('update:modelValue', false)
+</script>
+
+<style scoped>
+.drawer-backdrop-enter-active,
+.drawer-backdrop-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.drawer-backdrop-enter-from,
+.drawer-backdrop-leave-to {
+  opacity: 0;
+}
+
+.drawer-panel-enter-active,
+.drawer-panel-leave-active {
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.drawer-panel-enter-from,
+.drawer-panel-leave-to {
+  transform: translateX(100%);
+  opacity: 0;
+}
+</style>
--- a/frontend/composables/useApi.ts
+++ b/frontend/composables/useApi.ts
@@ -0,0 +1,183 @@
+import type { FetchOptions } from 'ofetch'
+import { $fetch, FetchError } from 'ofetch'
+import { useAuthStore } from '~/stores/auth'
+
+export type AnyObject = Record<string, unknown>
+
+export type ApiClient = {
+  get<T>(url: string, query?: AnyObject, options?: ApiFetchOptions<'json'>): Promise<T>
+  getBlob(url: string, query?: AnyObject, options?: ApiFetchOptions<'blob'>): Promise<Blob>
+  post<T>(url: string, body?: AnyObject, options?: ApiFetchOptions<'json'>): Promise<T>
+  put<T>(url: string, body?: AnyObject, options?: ApiFetchOptions<'json'>): Promise<T>
+  patch<T>(url: string, body?: AnyObject, options?: ApiFetchOptions<'json'>): Promise<T>
+  delete<T>(url: string, query?: AnyObject, options?: ApiFetchOptions<'json'>): Promise<T>
+}
+
+export type ApiFetchOptions<ResponseType extends 'json' | 'blob'> =
+  FetchOptions<ResponseType> & {
+    toast?: boolean
+    toastTitle?: string
+    toastErrorMessage?: string
+    toastSuccessMessage?: string
+    toastErrorKey?: string
+    toastSuccessKey?: string
+  }
+
+export const useApi = (): ApiClient => {
+  const config = useRuntimeConfig()
+  const baseURL = config.public.apiBase ?? '/api'
+  const toast = useToast()
+  const auth = useAuthStore()
+  const nuxtApp = useNuxtApp()
+  let isHandlingUnauthorized = false
+  const i18n = nuxtApp.$i18n as
+    | {
+        t: (key: string) => string
+        te?: (key: string) => boolean
+      }
+    | undefined
+  const t = (key: string) => (i18n?.t ? String(i18n.t(key)) : key)
+  const te = (key: string) => (i18n?.te ? i18n.te(key) : false)
+
+  const extractErrorMessage = (error: unknown, responseData?: unknown): string => {
+    const data = responseData ?? (error as FetchError)?.data
+
+    if (typeof data === 'string') {
+      return data
+    }
+
+    if (data && typeof data === 'object') {
+      const record = data as Record<string, unknown>
+      return (
+        (record['hydra:description'] as string) ||
+        (record.detail as string) ||
+        (record.message as string) ||
+        (record.error as string) ||
+        (record.title as string) ||
+        (record['hydra:title'] as string) ||
+        ''
+      )
+    }
+
+    return (error as FetchError)?.message ?? 'Erreur inconnue.'
+  }
+
+  const methodErrorKeys: Record<string, string> = {
+    GET: 'errors.http.get',
+    POST: 'errors.http.post',
+    PUT: 'errors.http.put',
+    PATCH: 'errors.http.patch',
+    DELETE: 'errors.http.delete'
+  }
+
+  const client = $fetch.create({
+    baseURL,
+    retry: 0,
+    credentials: 'include',
+    onResponse({ options, response }) {
+      const apiOptions = options as ApiFetchOptions<'json'>
+      if (apiOptions?.toast === false) {
+        return
+      }
+
+      if (response?.status && response.status >= 400) {
+        return
+      }
+
+      const successKey = apiOptions?.toastSuccessKey
+      const successMessage =
+        apiOptions?.toastSuccessMessage ||
+        (successKey ? (te(successKey) ? t(successKey) : successKey) : '')
+
+      if (successMessage) {
+        toast.success({
+          title: 'Succès',
+          message: successMessage
+        })
+      }
+    },
+    async onResponseError({ response, error, options }) {
+      if (response?.status === 401) {
+        const requestUrl = typeof options?.url === 'string' ? options.url : ''
+        if (!requestUrl.includes('/login_check') && !requestUrl.includes('/logout')) {
+          if (!isHandlingUnauthorized) {
+            isHandlingUnauthorized = true
+            auth.clearSession()
+            const route = useRoute()
+            if (route.path !== '/login') {
+              await navigateTo('/login')
+            }
+            isHandlingUnauthorized = false
+          }
+        }
+        return
+      }
+
+      const apiOptions = options as ApiFetchOptions<'json'>
+      if (apiOptions?.toast === false) {
+        return
+      }
+
+      const method =
+        typeof options?.method === 'string' ? options.method.toUpperCase() : 'GET'
+      const defaultKey = methodErrorKeys[method]
+      const defaultMessage =
+        defaultKey && te(defaultKey) ? t(defaultKey) : ''
+      const errorKey = apiOptions?.toastErrorKey
+      const errorMessage =
+        errorKey ? (te(errorKey) ? t(errorKey) : errorKey) : ''
+      const extractedMessage = extractErrorMessage(error, response?._data)
+      const message =
+        apiOptions?.toastErrorMessage ||
+        errorMessage ||
+        defaultMessage ||
+        extractedMessage ||
+        'Une erreur est survenue.'
+
+      toast.error({
+        title: apiOptions?.toastTitle ?? 'Erreur',
+        message
+      })
+    }
+  })
+
+  const request = <T>(
+    method: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE',
+    url: string,
+    options: ApiFetchOptions<'json'> = {}
+  ) => {
+    const needsJsonBody = method === 'POST' || method === 'PUT'
+    const needsMergePatch = method === 'PATCH'
+
+    const headers = new Headers(options.headers as HeadersInit | undefined)
+
+    if (needsMergePatch && !headers.has('Content-Type')) {
+      headers.set('Content-Type', 'application/merge-patch+json')
+    } else if (needsJsonBody && !headers.has('Content-Type')) {
+      headers.set('Content-Type', 'application/json')
+    }
+
+    return client<T>(url, { ...options, method, headers })
+  }
+
+  return {
+    get<T>(url: string, query: AnyObject = {}, options: ApiFetchOptions<'json'> = {}) {
+      return request<T>('GET', url, { ...options, query })
+    },
+    getBlob(url: string, query: AnyObject = {}, options: ApiFetchOptions<'blob'> = {}) {
+      return client<Blob>(url, { ...options, method: 'GET', query, responseType: 'blob' })
+    },
+    post<T>(url: string, body: AnyObject = {}, options: ApiFetchOptions<'json'> = {}) {
+      return request<T>('POST', url, { ...options, body })
+    },
+    put<T>(url: string, body: AnyObject = {}, options: ApiFetchOptions<'json'> = {}) {
+      return request<T>('PUT', url, { ...options, body })
+    },
+    patch<T>(url: string, body: AnyObject = {}, options: ApiFetchOptions<'json'> = {}) {
+      return request<T>('PATCH', url, { ...options, body })
+    },
+    delete<T>(url: string, query: AnyObject = {}, options: ApiFetchOptions<'json'> = {}) {
+      return request<T>('DELETE', url, { ...options, query })
+    }
+  }
+}
--- a/frontend/i18n.config.ts
+++ b/frontend/i18n.config.ts
@@ -0,0 +1,7 @@
+import { defineI18nConfig } from '@nuxtjs/i18n'
+
+export default defineI18nConfig(() => ({
+  legacy: false,
+  locale: 'fr',
+  messages: {}
+}))
--- a/frontend/i18n/locales/fr.json
+++ b/frontend/i18n/locales/fr.json
@@ -1,64 +1,22 @@
 {
-  "errors": {
-    "http": {
-      "get": "Impossible de récupérer les données.",
-      "post": "Impossible de créer la ressource.",
-      "put": "Impossible de mettre à jour la ressource.",
-      "patch": "Impossible de mettre à jour la ressource.",
-      "delete": "Impossible de supprimer la ressource."
+    "errors": {
+        "http": {
+            "get": "Impossible de récupérer les données.",
+            "post": "Impossible de créer la ressource.",
+            "put": "Impossible de mettre à jour la ressource.",
+            "patch": "Impossible de mettre à jour la ressource.",
+            "delete": "Impossible de supprimer la ressource."
+        },
+        "auth": {
+            "login": "Identifiants invalides.",
+            "logout": "Impossible de se déconnecter.",
+            "session": "Session expirée"
+        }
    },
-    "reception": {
-      "list": "Impossible de récupérer la liste des réceptions.",
-      "fetch": "Impossible de récupérer la réception.",
-      "create": "Impossible de créer la réception.",
-      "update": "Impossible de mettre à jour la réception.",
-      "weigh": "Impossible de récupérer la pesée."
-    },
-    "receptionType": {
-      "list": "Impossible de récupérer la liste des types de réception."
-    },
-    "merchandiseType": {
-      "list": "Impossible de récupérer la liste des types de marchandises."
-    },
-    "building": {
-      "list": "Impossible de récupérer la liste des bâtiments."
-    },
-    "pelletType": {
-      "list": "Impossible de récupérer la liste des types de granulés."
-    },
-    "receptionPelletBuilding": {
-      "list": "Impossible de récupérer la liste des dépôts de granulés.",
-      "create": "Impossible d'enregistrer le dépôt de granulés.",
-      "delete": "Impossible de supprimer le dépôt de granulés."
-    },
-    "supplier": {
-      "list": "Impossible de récupérer la liste des fournisseurs."
-    },
-    "truck": {
-      "list": "Impossible de récupérer la liste des camions."
-    },
-    "carrier": {
-      "list": "Impossible de récupérer la liste des transporteurs."
-    },
-    "driver": {
-      "list": "Impossible de récupérer la liste des chauffeurs."
-    },
-    "vehicle": {
-      "list": "Impossible de récupérer la liste des immatriculations."
-    },
-    "auth": {
-      "login": "Identifiants invalides.",
-      "users": "Impossible de récupérer les utilisateurs.",
-      "logout": "Impossible de se déconnecter."
+    "success": {
+        "auth": {
+            "login": "Connexion réussie.",
+            "logout": "Déconnexion réussie."
+        }
    }
-  },
-  "success": {
-    "reception": {
-      "update": "Réception mise à jour avec succès."
-    },
-    "auth": {
-      "login": "Connexion réussie.",
-      "logout": "Déconnexion réussie."
-    }
-  }
 }
--- a/frontend/layouts/auth.vue
+++ b/frontend/layouts/auth.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="min-h-screen bg-primary-500 from-primary-50 via-white to-neutral-100 text-neutral-900">
+  <div class="min-h-screen bg-tertiary-500 from-tertiary-50 via-white to-neutral-100 text-neutral-900">
    <main class="mx-auto flex min-h-screen w-full max-w-[720px] items-center px-6 py-12">
      <slot />
    </main>
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -1,11 +1,64 @@
-<script setup lang="ts">
-
-</script>
-
 <template>
-  $END$
+    <div class="min-h-screen">
+        <div class="flex min-h-screen">
+      <aside class="flex w-64 flex-col border-r border-neutral-200 bg-tertiary-500 no-print">
+                <div>
+                    <img src="/malio.png" alt="Logo" class="w-auto"/>
+                </div>
+                <nav class="flex-1 px-4 pb-6">
+                    <NuxtLink
+                        to="/"
+                        class="flex items-center gap-3 px-4 pb-3 pt-6 text-md font-semibold text-neutral-700 hover:bg-primary-50 hover:text-primary-600 border-t border-secondary-500"
+                        active-class="bg-primary-50 text-primary-600"
+                    >
+                        Tableau de bord
+                    </NuxtLink>
+                    <NuxtLink
+                        to="/calendar"
+                        class="flex items-center gap-3 px-4 py-3 text-md font-semibold text-neutral-700 hover:bg-primary-50 hover:text-primary-600"
+                        active-class="bg-primary-50 text-primary-600"
+                    >
+                        Calendrier
+                    </NuxtLink>
+                    <NuxtLink
+                        to="/employees"
+                        class="flex items-center gap-3 px-4 py-3 text-md font-semibold text-neutral-700 hover:bg-primary-50 hover:text-primary-600"
+                        active-class="bg-primary-50 text-primary-600"
+                    >
+                        Employés
+                    </NuxtLink>
+                    <NuxtLink
+                        to="/absence-types"
+                        class="flex items-center gap-3 px-4 py-3 text-md font-semibold text-neutral-700 hover:bg-primary-50 hover:text-primary-600"
+                        active-class="bg-primary-50 text-primary-600"
+                    >
+                        Types d'absence
+                    </NuxtLink>
+                </nav>
+
+                <div class="p-4">
+                    <button
+                        type="button"
+                        class="w-full rounded-lg px-4 py-2 text-md font-semibold text-white bg-primary-500"
+                        @click="handleLogout"
+                    >
+                        Déconnexion
+                    </button>
+                </div>
+            </aside>
+
+            <main class="flex-1 px-8 py-8">
+                <slot/>
+            </main>
+        </div>
+    </div>
 </template>

-<style scoped>
+<script setup lang="ts">
+const auth = useAuthStore()

-</style>
+const handleLogout = async () => {
+    await auth.logout()
+    await navigateTo('/login')
+}
+</script>
--- a/frontend/locales/fr.json
+++ b/frontend/locales/fr.json
@@ -0,0 +1 @@
+{}
--- a/frontend/middleware/auth.global.ts
+++ b/frontend/middleware/auth.global.ts
@@ -0,0 +1,16 @@
+export default defineNuxtRouteMiddleware(async (to) => {
+  const auth = useAuthStore()
+  const isLogin = to.path === '/login'
+
+  if (!auth.checked) {
+    await auth.ensureSession()
+  }
+
+  if (!isLogin && !auth.isAuthenticated) {
+    return navigateTo('/login')
+  }
+
+  if (isLogin && auth.isAuthenticated) {
+    return navigateTo('/')
+  }
+})
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -0,0 +1,39 @@
+export default defineNuxtConfig({
+    compatibilityDate: '2025-07-15',
+    devtools: {enabled: false},
+    ssr: false,
+    app: {
+        baseURL: process.env.NUXT_PUBLIC_APP_BASE || '/'
+    },
+    modules: [
+        '@nuxtjs/tailwindcss',
+        '@pinia/nuxt',
+        'nuxt-toast',
+        '@nuxtjs/i18n'
+    ],
+    runtimeConfig: {
+        public: {
+            apiBase: process.env.NUXT_PUBLIC_API_BASE
+        }
+    },
+    devServer: {port: 3001},
+    toast: {
+        settings: {
+            timeout: 10000,
+            closeOnClick: true,
+            progressBar: false
+        }
+    },
+    i18n: {
+        strategy: 'no_prefix',
+        defaultLocale: 'fr',
+        langDir: 'locales',
+        locales: [
+            {code: 'fr', file: 'fr.json', name: 'Français'}
+        ],
+        vueI18n: './i18n.config.ts'
+    },
+    typescript: {
+        strict: true
+    }
+})
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,25 @@
+{
+    "name": "frontend",
+    "type": "module",
+    "private": true,
+    "scripts": {
+        "build": "nuxt build",
+        "dev": "nuxt dev",
+        "generate": "nuxt generate",
+        "preview": "nuxt preview",
+        "postinstall": "nuxt prepare",
+        "build:dist": "nuxt generate && rm -rf dist && cp -R .output/public dist"
+    },
+    "dependencies": {
+        "@nuxtjs/i18n": "^10.2.1",
+        "@pinia/nuxt": "^0.11.3",
+        "nuxt": "^4.3.0",
+        "nuxt-toast": "^1.4.0",
+        "pinia": "^3.0.4",
+        "vue": "^3.5.27",
+        "vue-router": "^4.6.4"
+    },
+    "devDependencies": {
+        "@nuxtjs/tailwindcss": "^6.14.0"
+    }
+}
--- a/frontend/pages/absence-types.vue
+++ b/frontend/pages/absence-types.vue
@@ -0,0 +1,211 @@
+<template>
+  <div>
+    <div class="flex items-center justify-between pb-12">
+      <h1 class="text-4xl font-bold text-primary-500">Types d'absence</h1>
+      <button
+        type="button"
+        class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+        @click="openCreate"
+      >
+        Ajouter un type
+      </button>
+    </div>
+
+    <div
+      v-if="!isLoading && absenceTypes.length === 0"
+      class="rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600"
+    >
+      Aucun type pour le moment.
+    </div>
+
+    <div v-else class="overflow-hidden rounded-lg border border-neutral-200 bg-white">
+      <div class="grid grid-cols-[120px_120px_1fr_200px] gap-4 border-b border-neutral-200 bg-tertiary-500 px-6 py-3 text-md font-semibold text-neutral-700">
+        <span class="text-left">Code</span>
+        <span class="text-left">Libellé</span>
+        <span class="text-left">Couleur</span>
+        <span class="text-right">Actions</span>
+      </div>
+      <div v-if="isLoading" class="px-6 py-4 text-md text-neutral-500">
+        Chargement...
+      </div>
+      <div v-else>
+        <div
+          v-for="type in absenceTypes"
+          :key="type.id"
+          class="grid grid-cols-[120px_120px_1fr_200px] items-center gap-4 border-b border-neutral-100 px-6 py-3 text-md text-neutral-800 last:border-b-0"
+        >
+          <span class="font-semibold text-left">{{ type.code }}</span>
+          <span class="text-left">{{ type.label }}</span>
+          <div class="flex items-center gap-2 justify-start">
+            <span
+              class="inline-block h-3 w-3 rounded-full"
+              :style="{ backgroundColor: type.color }"
+            />
+            <span class="text-md uppercase text-neutral-500">{{ type.color }}</span>
+          </div>
+          <div class="flex items-center justify-end gap-2">
+            <button
+              type="button"
+              class="rounded-md border border-neutral-200 px-2 py-1 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
+              @click="openEdit(type)"
+            >
+              Modifier
+            </button>
+            <button
+              type="button"
+              class="rounded-md border border-red-200 px-2 py-1 text-md font-semibold text-red-600 hover:bg-red-50"
+              @click="confirmDelete(type)"
+            >
+              Supprimer
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <AppDrawer v-model="isDrawerOpen" :title="drawerTitle">
+      <form class="space-y-4" @submit.prevent="handleSubmit">
+        <div>
+          <label class="text-md font-semibold text-neutral-700" for="code">Code</label>
+          <input
+            id="code"
+            v-model="form.code"
+            type="text"
+            maxlength="10"
+            class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-200"
+          />
+        </div>
+        <div>
+          <label class="text-md font-semibold text-neutral-700" for="label">Libellé</label>
+          <input
+            id="label"
+            v-model="form.label"
+            type="text"
+            class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-200"
+          />
+        </div>
+        <div>
+          <label class="text-md font-semibold text-neutral-700" for="color">Couleur</label>
+          <div class="mt-2 flex items-center gap-3">
+            <input
+              id="color"
+              v-model="form.color"
+              type="color"
+              class="h-10 w-16 cursor-pointer rounded-md border border-neutral-300 bg-white p-1"
+            />
+            <span class="text-md font-semibold text-neutral-600">{{ form.color }}</span>
+          </div>
+        </div>
+        <div class="flex justify-end gap-3 pt-2">
+          <button
+            type="button"
+            class="rounded-lg border border-neutral-200 px-4 py-2 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
+            @click="closeDrawer"
+          >
+            Annuler
+          </button>
+          <button
+            type="submit"
+            class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+            :disabled="isSubmitting"
+          >
+            Enregistrer
+          </button>
+        </div>
+      </form>
+    </AppDrawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { AbsenceType } from '~/services/dto/absence-type'
+import { createAbsenceType, deleteAbsenceType, listAbsenceTypes, updateAbsenceType } from '~/services/absence-types'
+
+const isDrawerOpen = ref(false)
+const isSubmitting = ref(false)
+const isLoading = ref(false)
+
+const absenceTypes = ref<AbsenceType[]>([])
+const editingType = ref<AbsenceType | null>(null)
+
+const drawerTitle = computed(() =>
+  editingType.value ? "Modifier un type" : "Ajouter un type"
+)
+
+const form = reactive({
+  code: '',
+  label: '',
+  color: ''
+})
+
+const loadAbsenceTypes = async () => {
+  isLoading.value = true
+  try {
+    absenceTypes.value = await listAbsenceTypes()
+  } finally {
+    isLoading.value = false
+  }
+}
+
+onMounted(loadAbsenceTypes)
+
+const resetForm = () => {
+  form.code = ''
+  form.label = ''
+  form.color = ''
+}
+
+const openCreate = () => {
+  editingType.value = null
+  resetForm()
+  isDrawerOpen.value = true
+}
+
+const openEdit = (type: AbsenceType) => {
+  editingType.value = type
+  form.code = type.code
+  form.label = type.label
+  form.color = type.color
+  isDrawerOpen.value = true
+}
+
+const closeDrawer = () => {
+  isDrawerOpen.value = false
+  editingType.value = null
+  resetForm()
+}
+
+const handleSubmit = async () => {
+  if (isSubmitting.value) return
+
+  isSubmitting.value = true
+  try {
+    if (editingType.value) {
+      await updateAbsenceType(editingType.value.id, {
+        code: form.code,
+        label: form.label,
+        color: form.color
+      })
+    } else {
+      await createAbsenceType({
+        code: form.code,
+        label: form.label,
+        color: form.color
+      })
+    }
+
+    closeDrawer()
+    await loadAbsenceTypes()
+  } finally {
+    isSubmitting.value = false
+  }
+}
+
+const confirmDelete = async (type: AbsenceType) => {
+  const ok = window.confirm(`Supprimer le type ${type.label} ?`)
+  if (!ok) return
+
+  await deleteAbsenceType(type.id)
+  await loadAbsenceTypes()
+}
+</script>
--- a/frontend/pages/calendar.vue
+++ b/frontend/pages/calendar.vue
@@ -0,0 +1,510 @@
+<template>
+  <div>
+    <div class="flex flex-wrap items-center justify-between gap-4 pb-10 no-print">
+      <h1 class="text-4xl font-bold text-primary-500">Calendrier des absences</h1>
+      <div class="flex items-center gap-3">
+        <select
+          v-model="selectedMonth"
+          class="rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
+        >
+          <option v-for="month in months" :key="month.value" :value="month.value">
+            {{ month.label }}
+          </option>
+        </select>
+        <select
+          v-model="selectedYear"
+          class="rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
+        >
+          <option v-for="year in years" :key="year" :value="year">
+            {{ year }}
+          </option>
+        </select>
+        <button
+          type="button"
+          class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+          @click="openCreateFromToday"
+        >
+          Ajouter une absence
+        </button>
+        <button
+          type="button"
+          class="rounded-lg border border-neutral-200 px-4 py-2 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
+          @click="printMonth('1')"
+        >
+          Imprimer 1 mois
+        </button>
+        <button
+          type="button"
+          class="rounded-lg border border-neutral-200 px-4 py-2 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
+          @click="printMonth('3')"
+        >
+          Imprimer 3 mois
+        </button>
+      </div>
+    </div>
+
+    <div class="max-h-[80vh] overflow-auto rounded-lg border border-neutral-200 bg-white no-print">
+      <div class="min-w-[900px]">
+        <div class="grid" :style="gridStyle">
+          <div class="sticky left-0 z-10 border-b border-neutral-200 bg-tertiary-500 px-4 py-3 text-md font-semibold text-neutral-700">
+            Employés
+          </div>
+          <div
+            v-for="day in daysInMonth"
+            :key="day.date"
+            class="border-b border-neutral-200 bg-tertiary-500 px-2 py-3 text-center text-xs font-semibold text-neutral-700"
+          >
+            <div>{{ day.label }}</div>
+            <div class="text-[10px] text-neutral-500">{{ day.weekday }}</div>
+          </div>
+
+          <template v-for="employee in employees" :key="employee.id">
+            <div class="sticky left-0 z-10 border-b border-neutral-100 bg-white px-4 py-3 text-md font-semibold text-neutral-800">
+              {{ employee.firstName }} {{ employee.lastName }}
+            </div>
+            <div
+              v-for="day in daysInMonth"
+              :key="employee.id + '-' + day.date"
+              class="border-b border-neutral-100 px-2 py-2 text-center text-xs text-neutral-800"
+            >
+              <button
+                type="button"
+                class="flex h-8 w-full items-center justify-center rounded-md border border-neutral-200 text-[11px] font-semibold text-neutral-800 hover:border-primary-500/40"
+                :style="getCellStyle(employee.id, day.date)"
+                @click="openCreate(employee, day.date)"
+              >
+                <span v-if="getCellCode(employee.id, day.date)">
+                  {{ getCellCode(employee.id, day.date) }}
+                </span>
+              </button>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="printMode" class="print-only space-y-8">
+      <div
+        v-for="month in printMonths"
+        :key="`${month.year}-${month.month}`"
+        class="overflow-hidden rounded-lg border border-neutral-200 bg-white"
+      >
+        <div class="flex items-center justify-between border-b border-neutral-200 bg-tertiary-500 px-6 py-3 text-lg font-bold text-neutral-700">
+          <span>Calendrier {{ month.label }} {{ month.year }}</span>
+        </div>
+        <div class="overflow-auto">
+          <div class="min-w-[900px]">
+            <div class="grid" :style="getGridStyle(month.days.length)">
+              <div class="sticky left-0 z-10 border-b border-neutral-200 bg-tertiary-500 px-4 py-3 text-md font-semibold text-neutral-700">
+                Employé
+              </div>
+              <div
+                v-for="day in month.days"
+                :key="day.date"
+                class="border-b border-neutral-200 bg-tertiary-500 px-2 py-3 text-center text-xs font-semibold text-neutral-700"
+              >
+                <div>{{ day.label }}</div>
+                <div class="text-[10px] text-neutral-500">{{ day.weekday }}</div>
+              </div>
+
+              <template v-for="employee in employees" :key="employee.id">
+                <div class="sticky left-0 z-10 border-b border-neutral-100 bg-white px-4 py-3 text-md font-semibold text-neutral-800">
+                  {{ employee.firstName }} {{ employee.lastName }}
+                </div>
+                <div
+                  v-for="day in month.days"
+                  :key="employee.id + '-' + day.date"
+                  class="border-b border-neutral-100 px-2 py-2 text-center text-xs text-neutral-800"
+                >
+                  <div
+                    class="flex h-8 w-full items-center justify-center rounded-md border border-neutral-200 text-[11px] font-semibold text-neutral-800"
+                    :style="getCellStyle(employee.id, day.date)"
+                  >
+                    <span v-if="getCellCode(employee.id, day.date)">
+                      {{ getCellCode(employee.id, day.date) }}
+                    </span>
+                  </div>
+                </div>
+              </template>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <AppDrawer v-model="isDrawerOpen" title="Nouvelle absence">
+      <form class="space-y-4" @submit.prevent="handleSubmit">
+        <div>
+          <label class="text-md font-semibold text-neutral-700" for="employee">Employé</label>
+          <select
+            id="employee"
+            v-model="form.employeeId"
+            class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
+          >
+            <option value="" disabled>Choisir un employé</option>
+            <option v-for="employee in employees" :key="employee.id" :value="employee.id">
+              {{ employee.firstName }} {{ employee.lastName }}
+            </option>
+          </select>
+        </div>
+
+        <div>
+          <label class="text-md font-semibold text-neutral-700" for="type">Type d'absence</label>
+          <select
+            id="type"
+            v-model="form.typeId"
+            class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
+          >
+            <option value="" disabled>Choisir un type</option>
+            <option v-for="type in absenceTypes" :key="type.id" :value="type.id">
+              {{ type.label }} ({{ type.code }})
+            </option>
+          </select>
+        </div>
+
+        <div class="grid grid-cols-2 gap-4">
+          <div>
+            <label class="text-md font-semibold text-neutral-700" for="start-date">Date de début</label>
+            <input
+              id="start-date"
+              v-model="form.startDate"
+              type="date"
+              class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-md text-neutral-900"
+            />
+          </div>
+          <div>
+            <label class="text-md font-semibold text-neutral-700" for="end-date">Date de fin</label>
+            <input
+              id="end-date"
+              v-model="form.endDate"
+              type="date"
+              class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-md text-neutral-900"
+            />
+          </div>
+        </div>
+
+        <div>
+          <label class="text-md font-semibold text-neutral-700" for="comment">Commentaire</label>
+          <textarea
+            id="comment"
+            v-model="form.comment"
+            rows="3"
+            class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-md text-neutral-900"
+          />
+        </div>
+
+        <div class="flex justify-end gap-3 pt-2">
+          <button
+            v-if="editingAbsence"
+            type="button"
+            class="rounded-lg border border-red-200 px-4 py-2 text-md font-semibold text-red-600 hover:bg-red-50"
+            @click="handleDelete"
+          >
+            Supprimer
+          </button>
+          <button
+            type="button"
+            class="rounded-lg border border-neutral-200 px-4 py-2 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
+            @click="closeDrawer"
+          >
+            Annuler
+          </button>
+          <button
+            type="submit"
+            class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+            :disabled="isSubmitting"
+          >
+            Enregistrer
+          </button>
+        </div>
+      </form>
+    </AppDrawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Employee } from '~/services/dto/employee'
+import type { AbsenceType } from '~/services/dto/absence-type'
+import type { Absence } from '~/services/dto/absence'
+import { listEmployees } from '~/services/employees'
+import { listAbsenceTypes } from '~/services/absence-types'
+import { createAbsence, deleteAbsence, listAbsences, updateAbsence } from '~/services/absences'
+import { getDaysInMonth, normalizeDate, toYmd } from '~/utils/date'
+
+const employees = ref<Employee[]>([])
+const absenceTypes = ref<AbsenceType[]>([])
+const absences = ref<Absence[]>([])
+
+const isDrawerOpen = ref(false)
+const isSubmitting = ref(false)
+const editingAbsence = ref<Absence | null>(null)
+
+const now = new Date()
+const selectedMonth = ref(now.getMonth())
+const selectedYear = ref(now.getFullYear())
+
+const months = [
+  { value: 0, label: 'Janvier' },
+  { value: 1, label: 'Février' },
+  { value: 2, label: 'Mars' },
+  { value: 3, label: 'Avril' },
+  { value: 4, label: 'Mai' },
+  { value: 5, label: 'Juin' },
+  { value: 6, label: 'Juillet' },
+  { value: 7, label: 'Août' },
+  { value: 8, label: 'Septembre' },
+  { value: 9, label: 'Octobre' },
+  { value: 10, label: 'Novembre' },
+  { value: 11, label: 'Décembre' }
+]
+
+const years = Array.from({ length: 5 }, (_, i) => now.getFullYear() - 2 + i)
+
+
+const daysInMonth = computed(() => getDaysInMonth(selectedYear.value, selectedMonth.value))
+
+const getGridStyle = (daysCount: number) => {
+  return {
+    gridTemplateColumns: `220px repeat(${daysCount}, minmax(44px, 1fr))`
+  }
+}
+
+const gridStyle = computed(() => getGridStyle(daysInMonth.value.length))
+
+const form = reactive({
+  employeeId: '' as number | '',
+  typeId: '' as number | '',
+  startDate: '',
+  endDate: '',
+  comment: ''
+})
+
+const printMode = ref<'1' | '3' | null>(null)
+
+const monthLabel = (monthIndex: number) => months.find((m) => m.value === monthIndex)?.label ?? ''
+
+const printMonths = computed(() => {
+  if (!printMode.value) return []
+
+  const startYear = selectedYear.value
+  const startMonth = selectedMonth.value
+  const count = printMode.value === '3' ? 3 : 1
+
+  return Array.from({ length: count }, (_, offset) => {
+    const date = new Date(startYear, startMonth + offset, 1)
+    const year = date.getFullYear()
+    const month = date.getMonth()
+    return {
+      year,
+      month,
+      label: monthLabel(month),
+      days: getDaysInMonth(year, month)
+    }
+  })
+})
+
+const resetForm = () => {
+  form.employeeId = ''
+  form.typeId = ''
+  form.startDate = ''
+  form.endDate = ''
+  form.comment = ''
+}
+
+const closeDrawer = () => {
+  isDrawerOpen.value = false
+  editingAbsence.value = null
+  resetForm()
+}
+
+const loadEmployees = async () => {
+  employees.value = await listEmployees()
+}
+
+const loadAbsenceTypes = async () => {
+  absenceTypes.value = await listAbsenceTypes()
+}
+
+const loadAbsences = async () => {
+  absences.value = await listAbsences()
+}
+
+onMounted(async () => {
+  await Promise.all([loadEmployees(), loadAbsenceTypes(), loadAbsences()])
+})
+
+watch([selectedMonth, selectedYear], async () => {
+  await loadAbsences()
+})
+
+const getCellAbsence = (employeeId: number, date: string) => {
+  const match = absences.value.find((absence) => {
+    const employee = absence.employee?.id
+    const start = normalizeDate(absence.startDate)
+    const end = normalizeDate(absence.endDate)
+    return Number(employee) === employeeId && date >= start && date <= end
+  })
+
+  if (!match) return null
+
+  return {
+    id: match.id,
+    code: match.type?.code ?? '',
+    color: match.type?.color ?? '#222783'
+  }
+}
+
+const getCellStyle = (employeeId: number, date: string) => {
+  const absence = getCellAbsence(employeeId, date)
+  if (!absence) return undefined
+
+  return {
+    backgroundColor: absence.color,
+    color: '#fff'
+  }
+}
+
+const getCellCode = (employeeId: number, date: string) => {
+  return getCellAbsence(employeeId, date)?.code ?? ''
+}
+
+const openCreate = (employee: Employee, date: string) => {
+  const existing = absences.value.find((absence) => {
+    const start = normalizeDate(absence.startDate)
+    const end = normalizeDate(absence.endDate)
+    return absence.employee?.id === employee.id && date >= start && date <= end
+  })
+
+  if (existing) {
+    editingAbsence.value = existing
+    form.employeeId = existing.employee.id
+    form.typeId = existing.type.id
+    form.startDate = normalizeDate(existing.startDate)
+    form.endDate = normalizeDate(existing.endDate)
+    form.comment = existing.comment ?? ''
+  } else {
+    editingAbsence.value = null
+    form.employeeId = employee.id
+    form.startDate = date
+    form.endDate = date
+    form.typeId = ''
+    form.comment = ''
+  }
+
+  isDrawerOpen.value = true
+}
+
+const openCreateFromToday = () => {
+  editingAbsence.value = null
+  form.employeeId = ''
+  form.typeId = ''
+  const now = new Date()
+  const today = toYmd(now.getFullYear(), now.getMonth(), now.getDate())
+  form.startDate = today
+  form.endDate = today
+  form.comment = ''
+  isDrawerOpen.value = true
+}
+
+const handleSubmit = async () => {
+  if (isSubmitting.value) return
+
+  isSubmitting.value = true
+  try {
+    const start = normalizeDate(form.startDate)
+    const end = normalizeDate(form.endDate)
+    const overlaps = absences.value.filter((absence) => {
+      if (absence.employee?.id !== Number(form.employeeId)) return false
+      if (editingAbsence.value && absence.id === editingAbsence.value.id) return false
+      const aStart = normalizeDate(absence.startDate)
+      const aEnd = normalizeDate(absence.endDate)
+      return start <= aEnd && end >= aStart
+    })
+
+    for (const overlap of overlaps) {
+      await deleteAbsence(overlap.id)
+    }
+
+    if (editingAbsence.value) {
+      await updateAbsence({
+        id: editingAbsence.value.id,
+        employeeId: Number(form.employeeId),
+        typeId: Number(form.typeId),
+        startDate: form.startDate,
+        endDate: form.endDate,
+        comment: form.comment
+      })
+    } else {
+      await createAbsence({
+        employeeId: Number(form.employeeId),
+        typeId: Number(form.typeId),
+        startDate: form.startDate,
+        endDate: form.endDate,
+        comment: form.comment
+      })
+    }
+
+    closeDrawer()
+    await loadAbsences()
+  } finally {
+    isSubmitting.value = false
+  }
+}
+
+const handleDelete = async () => {
+  if (!editingAbsence.value) return
+
+  const ok = window.confirm('Supprimer cette absence ?')
+  if (!ok) return
+
+  await deleteAbsence(editingAbsence.value.id)
+  closeDrawer()
+  await loadAbsences()
+}
+
+const printMonth = async (mode: '1' | '3') => {
+  printMode.value = mode
+  await nextTick()
+  window.print()
+  printMode.value = null
+}
+</script>
+
+<style>
+.print-only {
+  display: none;
+}
+
+@media print {
+  .no-print {
+    display: none !important;
+  }
+
+  .print-only {
+    display: block;
+  }
+
+  * {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+
+  .print-only .border-neutral-200,
+  .print-only .border-neutral-100 {
+    border-color: #d1d5db !important;
+  }
+
+  .print-only .bg-tertiary-500 {
+    background-color: #f3f4f8 !important;
+  }
+
+  .print-only .rounded-lg,
+  .print-only .rounded-md {
+    border-radius: 0 !important;
+  }
+
+  body {
+    background: #fff;
+  }
+}
+</style>
--- a/frontend/pages/employees.vue
+++ b/frontend/pages/employees.vue
@@ -0,0 +1,170 @@
+<template>
+  <div>
+    <div class="flex items-center justify-between pb-12">
+      <h1 class="text-4xl font-bold text-primary-500">Employés</h1>
+      <button
+        type="button"
+        class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+        @click="isDrawerOpen = true"
+      >
+        Ajouter un employé
+      </button>
+    </div>
+
+    <div
+      v-if="!isLoading && employees.length === 0"
+      class="rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600"
+    >
+      Aucun employé pour le moment.
+    </div>
+
+    <div v-else class="max-h-[80vh] overflow-auto rounded-lg border border-neutral-200 bg-white">
+      <div class="grid grid-cols-[120px_1fr_200px] gap-4 border-b border-neutral-200 bg-tertiary-500 px-6 py-3 text-md font-semibold text-neutral-700">
+        <span class="text-left">Prénom</span>
+        <span class="text-left">Nom</span>
+        <span class="text-right">Actions</span>
+      </div>
+      <div v-if="isLoading" class="px-6 py-4 text-md text-neutral-500">
+        Chargement...
+      </div>
+      <div v-else>
+        <div
+          v-for="employee in employees"
+          :key="employee.id"
+          class="grid grid-cols-[120px_1fr_200px] items-center gap-4 border-b border-neutral-100 px-6 py-3 text-md text-neutral-800 last:border-b-0"
+        >
+          <span>{{ employee.firstName }}</span>
+          <span>{{ employee.lastName }}</span>
+          <div class="flex items-center justify-end gap-2">
+            <button
+              type="button"
+              class="rounded-md border border-neutral-200 px-2 py-1 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
+              @click="openEdit(employee)"
+            >
+              Modifier
+            </button>
+            <button
+              type="button"
+              class="rounded-md border border-red-200 px-2 py-1 text-md font-semibold text-red-600 hover:bg-red-50"
+              @click="confirmDelete(employee)"
+            >
+              Supprimer
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <AppDrawer v-model="isDrawerOpen" :title="drawerTitle">
+      <form class="space-y-4" @submit.prevent="handleSubmit">
+        <div>
+          <label class="text-md font-semibold text-neutral-700" for="first-name">Prénom</label>
+          <input
+            id="first-name"
+            v-model="form.firstName"
+            type="text"
+            class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-200"
+          />
+        </div>
+        <div>
+          <label class="text-md font-semibold text-neutral-700" for="last-name">Nom</label>
+          <input
+            id="last-name"
+            v-model="form.lastName"
+            type="text"
+            class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-200"
+          />
+        </div>
+        <div class="flex justify-end gap-3 pt-2">
+          <button
+            type="button"
+            class="rounded-lg border border-neutral-200 px-4 py-2 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
+            @click="isDrawerOpen = false"
+          >
+            Annuler
+          </button>
+          <button
+            type="submit"
+            class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+            :disabled="isSubmitting"
+          >
+            Enregistrer
+          </button>
+        </div>
+      </form>
+    </AppDrawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Employee } from '~/services/dto/employee'
+import { createEmployee, deleteEmployee, listEmployees, updateEmployee } from '~/services/employees'
+
+const isDrawerOpen = ref(false)
+const isSubmitting = ref(false)
+const isLoading = ref(false)
+const editingEmployee = ref<Employee | null>(null)
+const drawerTitle = computed(() =>
+  editingEmployee.value ? 'Modifier un employé' : 'Ajouter un employé'
+)
+
+const employees = ref<Employee[]>([])
+
+const form = reactive({
+  firstName: '',
+  lastName: ''
+})
+
+const loadEmployees = async () => {
+  isLoading.value = true
+  try {
+    employees.value = await listEmployees()
+  } finally {
+    isLoading.value = false
+  }
+}
+
+onMounted(loadEmployees)
+
+const handleSubmit = async () => {
+  if (isSubmitting.value) return
+
+  isSubmitting.value = true
+  try {
+    if (editingEmployee.value) {
+      await updateEmployee(editingEmployee.value.id, {
+        firstName: form.firstName,
+        lastName: form.lastName
+      })
+    } else {
+      await createEmployee({
+        firstName: form.firstName,
+        lastName: form.lastName
+      })
+    }
+
+    form.firstName = ''
+    form.lastName = ''
+    editingEmployee.value = null
+    isDrawerOpen.value = false
+    await loadEmployees()
+  } finally {
+    isSubmitting.value = false
+  }
+}
+
+const openEdit = (employee: Employee) => {
+  editingEmployee.value = employee
+  form.firstName = employee.firstName
+  form.lastName = employee.lastName
+  isDrawerOpen.value = true
+}
+
+const confirmDelete = async (employee: Employee) => {
+  const ok = window.confirm(`Supprimer ${employee.firstName} ${employee.lastName} ?`)
+  if (!ok) return
+
+  await deleteEmployee(employee.id)
+  await loadEmployees()
+}
+</script>
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -1,11 +1,7 @@
+<template>
+    <h1 class="text-4xl font-bold text-primary-500">Tableau de bord</h1>
+</template>
+
 <script setup lang="ts">

 </script>
-
-<template>
-  $END$
-</template>
-
-<style scoped>
-
-</style>
--- a/frontend/pages/login.vue
+++ b/frontend/pages/login.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="mx-auto w-full max-w-lg">
+    <span
+      class="flex items-center justify-center bg-white text-xl font-bold uppercase text-primary-500 p-4"
+    >
+      LOGO
+    </span>
+    <form
+      class="mt-8 space-y-6 rounded-lg border border-neutral-200 bg-white p-6 shadow-sm"
+      @submit.prevent="handleSubmit"
+    >
+      <div>
+        <label class="text-sm font-semibold text-neutral-700" for="username">
+          Nom d'utilisateur
+        </label>
+        <input
+          id="username"
+          v-model="username"
+          type="text"
+          autocomplete="username"
+          class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-200"
+        />
+      </div>
+
+      <div>
+        <label class="text-sm font-semibold text-neutral-700" for="password">
+          Mot de passe
+        </label>
+        <input
+          id="password"
+          v-model="password"
+          type="password"
+          autocomplete="current-password"
+          class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-200"
+        />
+      </div>
+
+      <button
+        type="submit"
+        class="w-full rounded-md bg-primary-500 px-4 py-2 text-base font-semibold text-white transition hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-60"
+        :disabled="isSubmitting"
+      >
+        Se connecter
+      </button>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: 'auth' })
+
+const router = useRouter()
+const auth = useAuthStore()
+
+const username = ref('')
+const password = ref('')
+const isSubmitting = ref(false)
+
+const handleSubmit = async () => {
+  if (isSubmitting.value) return
+
+  isSubmitting.value = true
+  try {
+      console.log(useRuntimeConfig().public.apiBase)
+    await auth.login(username.value, password.value)
+
+    await router.push('/')
+  } finally {
+    isSubmitting.value = false
+  }
+}
+</script>
--- a/frontend/public/favicon.ico
+++ b/frontend/public/favicon.ico
--- a/frontend/public/malio.png
+++ b/frontend/public/malio.png
--- a/frontend/public/robots.txt
+++ b/frontend/public/robots.txt
@@ -0,0 +1,2 @@
+User-Agent: *
+Disallow:
--- a/frontend/services/absence-types.ts
+++ b/frontend/services/absence-types.ts
@@ -0,0 +1,38 @@
+import type { AbsenceType } from './dto/absence-type'
+import { extractItems } from '~/utils/api'
+
+export const listAbsenceTypes = async () => {
+  const api = useApi()
+  const data = await api.get<AbsenceType[] | { 'hydra:member'?: AbsenceType[] }>(
+    '/absence_types',
+    {},
+    { toast: false }
+  )
+  return extractItems<AbsenceType>(data)
+}
+
+export const createAbsenceType = async (
+  payload: Pick<AbsenceType, 'code' | 'label' | 'color'>
+) => {
+  const api = useApi()
+  return api.post<AbsenceType>('/absence_types', payload, {
+    toastSuccessMessage: 'Type créé.'
+  })
+}
+
+export const updateAbsenceType = async (
+  id: number,
+  payload: Pick<AbsenceType, 'code' | 'label' | 'color'>
+) => {
+  const api = useApi()
+  return api.patch<AbsenceType>(`/absence_types/${id}`, payload, {
+    toastSuccessMessage: 'Type mis à jour.'
+  })
+}
+
+export const deleteAbsenceType = async (id: number) => {
+  const api = useApi()
+  return api.delete(`/absence_types/${id}`, {}, {
+    toastSuccessMessage: 'Type supprimé.'
+  })
+}
--- a/frontend/services/absences.ts
+++ b/frontend/services/absences.ts
@@ -0,0 +1,58 @@
+import type { Absence } from './dto/absence'
+import { extractItems } from '~/utils/api'
+
+export const listAbsences = async () => {
+  const api = useApi()
+  const data = await api.get<Absence[] | { 'hydra:member'?: Absence[] }>(
+    '/absences',
+    {},
+    { toast: false }
+  )
+  return extractItems<Absence>(data)
+}
+
+export const createAbsence = async (payload: {
+  employeeId: number
+  typeId: number
+  startDate: string
+  endDate: string
+  comment?: string
+}) => {
+  const api = useApi()
+  return api.post<Absence>('/absences', {
+    employee: `/api/employees/${payload.employeeId}`,
+    type: `/api/absence_types/${payload.typeId}`,
+    startDate: payload.startDate,
+    endDate: payload.endDate,
+    comment: payload.comment
+  }, {
+    toastSuccessMessage: 'Absence créée.'
+  })
+}
+
+export const updateAbsence = async (payload: {
+  id: number
+  employeeId: number
+  typeId: number
+  startDate: string
+  endDate: string
+  comment?: string
+}) => {
+  const api = useApi()
+  return api.patch<Absence>(`/absences/${payload.id}`, {
+    employee: `/api/employees/${payload.employeeId}`,
+    type: `/api/absence_types/${payload.typeId}`,
+    startDate: payload.startDate,
+    endDate: payload.endDate,
+    comment: payload.comment
+  }, {
+    toastSuccessMessage: 'Absence mise à jour.'
+  })
+}
+
+export const deleteAbsence = async (id: number) => {
+  const api = useApi()
+  return api.delete(`/absences/${id}`, {}, {
+    toastSuccessMessage: 'Absence supprimée.'
+  })
+}
--- a/frontend/services/auth.ts
+++ b/frontend/services/auth.ts
@@ -0,0 +1,21 @@
+import type { UserData } from './dto/user-data'
+
+export const getCurrentUser = () => {
+  const api = useApi()
+  return api.get<UserData>('/me', {}, { toastErrorKey: 'errors.auth.session' })
+}
+
+export const login = (username: string, password: string) => {
+  const api = useApi()
+  return api.post('/login_check', { username, password }, {
+    toastErrorKey: 'errors.auth.login'
+  })
+}
+
+export const logout = () => {
+  const api = useApi()
+  return api.post('/logout', {}, {
+    toastErrorKey: 'errors.auth.logout',
+    toastSuccessKey: 'success.auth.logout'
+  })
+}
--- a/frontend/services/dto/absence-type.ts
+++ b/frontend/services/dto/absence-type.ts
@@ -0,0 +1,6 @@
+export type AbsenceType = {
+  id: number
+  code: string
+  label: string
+  color: string
+}
--- a/frontend/services/dto/absence.ts
+++ b/frontend/services/dto/absence.ts
@@ -0,0 +1,11 @@
+import type { Employee } from './employee'
+import type { AbsenceType } from './absence-type'
+
+export type Absence = {
+  id: number
+  startDate: string
+  endDate: string
+  comment?: string | null
+  employee: Employee
+  type: AbsenceType
+}
--- a/frontend/services/dto/employee.ts
+++ b/frontend/services/dto/employee.ts
@@ -0,0 +1,5 @@
+export type Employee = {
+  id: number
+  firstName: string
+  lastName: string
+}
--- a/frontend/services/dto/user-data.ts
+++ b/frontend/services/dto/user-data.ts
@@ -0,0 +1,4 @@
+export type UserData = {
+  id: number
+  username: string
+}
--- a/frontend/services/employees.ts
+++ b/frontend/services/employees.ts
@@ -0,0 +1,36 @@
+import type { Employee } from './dto/employee'
+import { extractItems } from '~/utils/api'
+
+export const listEmployees = async () => {
+  const api = useApi()
+  const data = await api.get<Employee[] | { 'hydra:member'?: Employee[] }>(
+    '/employees',
+    {},
+    { toast: false }
+  )
+  return extractItems<Employee>(data)
+}
+
+export const createEmployee = async (payload: Pick<Employee, 'firstName' | 'lastName'>) => {
+  const api = useApi()
+  return api.post<Employee>('/employees', payload, {
+    toastSuccessMessage: 'Employé créé.'
+  })
+}
+
+export const updateEmployee = async (
+  id: number,
+  payload: Pick<Employee, 'firstName' | 'lastName'>
+) => {
+  const api = useApi()
+  return api.patch<Employee>(`/employees/${id}`, payload, {
+    toastSuccessMessage: 'Employé mis à jour.'
+  })
+}
+
+export const deleteEmployee = async (id: number) => {
+  const api = useApi()
+  return api.delete(`/employees/${id}`, {}, {
+    toastSuccessMessage: 'Employé supprimé.'
+  })
+}
--- a/frontend/stores/auth.ts
+++ b/frontend/stores/auth.ts
@@ -0,0 +1,63 @@
+import { defineStore } from 'pinia'
+import type { UserData } from '~/services/dto/user-data'
+import { getCurrentUser, login, logout } from '~/services/auth'
+
+export const useAuthStore = defineStore('auth', {
+    state: () => ({
+        user: null as UserData | null,
+        isLoading: false,
+        checked: false
+    }),
+    getters: {
+        isAuthenticated: (state) => Boolean(state.user)
+    },
+    actions: {
+        clearSession() {
+            this.user = null
+            this.checked = true
+            this.isLoading = false
+        },
+        async ensureSession() {
+            if (this.checked) {
+                return this.user
+            }
+
+            this.checked = true
+
+            try {
+                const me = await getCurrentUser()
+                this.user = me
+                return me
+            } catch {
+                this.user = null
+                return null
+            }
+        },
+        async login(username: string, password: string) {
+            this.isLoading = true
+
+            try {
+                await login(username, password)
+                const me = await getCurrentUser()
+                this.user = me
+                this.checked = true
+                return me
+            } finally {
+                this.isLoading = false
+            }
+        },
+        async logout() {
+            this.isLoading = true
+
+            try {
+                await logout()
+            } catch {
+                // Ignore logout errors so we can still clear local auth state.
+            } finally {
+                this.user = null
+                this.checked = true
+                this.isLoading = false
+            }
+        }
+    }
+})
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -1,25 +1,22 @@
-import type { Config } from 'tailwindcss'
+import type {Config} from 'tailwindcss'

 export default <Partial<Config>>{
-  theme: {
-    extend: {
-      fontFamily: {
-        sans: ['"Helvetica Neue"', 'Helvetica', 'Arial', 'sans-serif']
-      },
-      colors: {
-        primary: {
-          50: '#f6f9ea',
-          100: '#eaf2cf',
-          200: '#d6e3a4',
-          300: '#c1d47a',
-          400: '#afc85a',
-          500: '#9ebb43',
-          600: '#7e9735',
-          700: '#607228',
-          800: '#414d1a',
-          900: '#24290d'
+    theme: {
+        extend: {
+            fontFamily: {
+                sans: ['"Helvetica Neue"', 'Helvetica', 'Arial', 'sans-serif']
+            },
+            colors: {
+                primary: {
+                    500: '#222783',
+                },
+                secondary: {
+                    500: '#304998'
+                },
+                tertiary: {
+                    500: '#F3F4F8'
+                }
+            }
        }
-      }
    }
-  }
 }
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "files": [],
+  "references": [
+    {
+      "path": "./.nuxt/tsconfig.app.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.server.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.shared.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.node.json"
+    }
+  ]
+}
--- a/frontend/utils/api.ts
+++ b/frontend/utils/api.ts
@@ -0,0 +1,7 @@
+export type HydraCollection<T> = {
+  'hydra:member'?: T[]
+}
+
+export const extractItems = <T>(data: HydraCollection<T> | T[]): T[] => {
+  return Array.isArray(data) ? data : data['hydra:member'] ?? []
+}
--- a/frontend/utils/date.ts
+++ b/frontend/utils/date.ts
@@ -0,0 +1,22 @@
+export const toYmd = (year: number, month: number, day: number) => {
+  const mm = String(month + 1).padStart(2, '0')
+  const dd = String(day).padStart(2, '0')
+  return `${year}-${mm}-${dd}`
+}
+
+export const normalizeDate = (value: string) => value.slice(0, 10)
+
+export const getDaysInMonth = (year: number, month: number) => {
+  const total = new Date(year, month + 1, 0).getDate()
+  const weekdays = ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam']
+
+  return Array.from({ length: total }, (_, index) => {
+    const day = index + 1
+    const dateObj = new Date(year, month, day)
+    return {
+      date: toYmd(year, month, day),
+      label: String(day),
+      weekday: weekdays[dateObj.getDay()]
+    }
+  })
+}