feat : Ajout d'un onglet Observation sur la page employé + fonctionnalité de verrouillage utilisateur

frontend/components/employees/ObservationTab.vue

@@ -0,0 +1,187 @@
+<template>
+    <section class="mt-8">
+        <div class="overflow-hidden bg-white">
+            <div
+                class="grid grid-cols-2 border border-black bg-tertiary-500 px-6 py-3 text-[20px] font-semibold text-black rounded-t-md">
+                <p>Mois</p>
+                <p>Observation</p>
+            </div>
+            <div v-if="observations.length === 0" class="px-6 py-4 text-[20px] font-bold text-primary-500 border-x border-b border-primary-500 rounded-b-md">
+                Aucune observation.
+            </div>
+            <div v-else class="border-x border-b border-primary-500 rounded-b-md">
+                <div
+                    v-for="item in observations"
+                    :key="item.id"
+                    class="grid grid-cols-2 border-b border-primary-500 px-6 py-3 text-md font-bold text-primary-500 last:border-b-0 cursor-pointer hover:bg-tertiary-500"
+                    @click="onOpenEditDrawer(item)"
+                >
+                    <p>{{ formatMonth(item.month) }}</p>
+                    <p class="truncate">{{ item.content }}</p>
+                </div>
+            </div>
+        </div>
+        <div class="flex justify-center mb-4 mt-8">
+            <button
+                type="button"
+                class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md text-white disabled:cursor-not-allowed disabled:opacity-50"
+                @click="onOpenCreateDrawer"
+            >
+                + Ajouter
+            </button>
+        </div>
+
+        <AppDrawer v-model="isDrawerOpen" :title="isEditing ? 'Modification observation' : 'Nouvelle observation'">
+            <form class="space-y-4" @submit.prevent="onSubmit">
+                <div>
+                    <label class="text-md font-semibold text-neutral-700" for="observation-month">
+                        Mois <span class="text-red-600">*</span>
+                    </label>
+                    <input
+                        id="observation-month"
+                        v-model="form.month"
+                        type="month"
+                        class="capitalize 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-secondary-500/20"
+                    />
+                </div>
+
+                <div>
+                    <label class="text-md font-semibold text-neutral-700" for="observation-content">
+                        Observation <span class="text-red-600">*</span>
+                    </label>
+                    <textarea
+                        id="observation-content"
+                        v-model="form.content"
+                        rows="5"
+                        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-secondary-500/20"
+                        placeholder="Observation..."
+                    />
+                </div>
+
+                <div v-if="isEditing" class="grid grid-cols-2 gap-3 pt-2">
+                    <button
+                        type="button"
+                        class="flex items-center justify-center rounded-md bg-red-500 px-4 py-2 text-md font-semibold text-white hover:bg-red-600"
+                        @click="onDelete"
+                    >
+                        Supprimer
+                    </button>
+                    <button
+                        type="submit"
+                        class="flex items-center justify-center rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
+                        :disabled="!isFormValid"
+                    >
+                        Modifier
+                    </button>
+                </div>
+                <div v-else 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 disabled:cursor-not-allowed disabled:opacity-50"
+                        :disabled="!isFormValid"
+                    >
+                        + Ajouter
+                    </button>
+                </div>
+            </form>
+        </AppDrawer>
+    </section>
+</template>
+
+<script setup lang="ts">
+import type { Observation } from '~/services/dto/observation'
+import AppDrawer from '~/components/AppDrawer.vue'
+
+const props = defineProps<{
+    observations: Observation[]
+}>()
+
+const emit = defineEmits<{
+    (event: 'create', data: { month: string; content: string }): void
+    (event: 'update', id: number, data: { month: string; content: string }): void
+    (event: 'delete', id: number): void
+}>()
+
+const isDrawerOpen = ref(false)
+const isEditing = ref(false)
+const editingItem = ref<Observation | null>(null)
+
+const currentYearMonth = () => {
+    const now = new Date()
+    return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`
+}
+
+const form = reactive({
+    month: currentYearMonth(),
+    content: ''
+})
+
+const isFormValid = computed(() => {
+    return form.month && form.content.trim().length > 0
+})
+
+const monthLabels: Record<number, string> = {
+    1: 'Janvier',
+    2: 'Février',
+    3: 'Mars',
+    4: 'Avril',
+    5: 'Mai',
+    6: 'Juin',
+    7: 'Juillet',
+    8: 'Août',
+    9: 'Septembre',
+    10: 'Octobre',
+    11: 'Novembre',
+    12: 'Décembre'
+}
+
+const formatMonth = (dateStr: string): string => {
+    const date = new Date(dateStr)
+    if (Number.isNaN(date.getTime())) return dateStr
+    const month = date.getMonth() + 1
+    const year = date.getFullYear()
+    return `${monthLabels[month]} ${year}`
+}
+
+const resetForm = () => {
+    form.month = currentYearMonth()
+    form.content = ''
+}
+
+const onOpenCreateDrawer = () => {
+    isEditing.value = false
+    editingItem.value = null
+    resetForm()
+    isDrawerOpen.value = true
+}
+
+const onOpenEditDrawer = (item: Observation) => {
+    isEditing.value = true
+    editingItem.value = item
+    form.month = item.month.substring(0, 7)
+    form.content = item.content
+    isDrawerOpen.value = true
+}
+
+const onSubmit = () => {
+    const data = {
+        month: `${form.month}-01`,
+        content: form.content
+    }
+
+    if (isEditing.value && editingItem.value) {
+        emit('update', editingItem.value.id, data)
+    } else {
+        emit('create', data)
+    }
+    isDrawerOpen.value = false
+}
+
+const onDelete = () => {
+    if (!editingItem.value) return
+    const ok = window.confirm('Supprimer cette observation ?')
+    if (!ok) return
+    emit('delete', editingItem.value.id)
+    isDrawerOpen.value = false
+}
+</script>

frontend/composables/useEmployeeDetailPage.ts

@@ -6,7 +6,7 @@ export const useEmployeeDetailPage = () => {
   const route = useRoute()
   const employee = ref<Employee | null>(null)
   const isLoading = ref(false)
-  const activeTab = ref<'contract' | 'leave' | 'rtt' | 'mileage' | 'bonus'>('contract')
+  const activeTab = ref<'contract' | 'leave' | 'rtt' | 'mileage' | 'bonus' | 'observation'>('contract')
 
   const showLeaveTab = computed(() => employee.value?.currentContractNature !== 'INTERIM')
   const showRttTab = computed(() => employee.value?.contract?.type !== CONTRACT_TYPES.FORFAIT)
@@ -40,6 +40,7 @@ export const useEmployeeDetailPage = () => {
       rtt.resetLoaded()
       mileage.resetLoaded()
       bonus.resetLoaded()
+      observation.resetLoaded()
 
       if (activeTab.value === 'leave' && showLeaveTab.value) {
         await leave.loadLeaveData()
@@ -49,6 +50,8 @@ export const useEmployeeDetailPage = () => {
         await mileage.loadMileageData()
       } else if (activeTab.value === 'bonus') {
         await bonus.loadBonusData()
+      } else if (activeTab.value === 'observation') {
+        await observation.loadObservationData()
       }
     } finally {
       isLoading.value = false
@@ -60,6 +63,7 @@ export const useEmployeeDetailPage = () => {
   const rtt = useEmployeeRtt(employee, loadEmployee)
   const mileage = useEmployeeMileage(employee, loadEmployee)
   const bonus = useEmployeeBonus(employee, loadEmployee)
+  const observation = useEmployeeObservation(employee, loadEmployee)
 
   watch(activeTab, (tab) => {
     if (tab === 'leave' && !leave.leaveDataLoaded.value && showLeaveTab.value) {
@@ -70,6 +74,8 @@ export const useEmployeeDetailPage = () => {
       mileage.loadMileageData()
     } else if (tab === 'bonus' && !bonus.bonusDataLoaded.value) {
       bonus.loadBonusData()
+    } else if (tab === 'observation' && !observation.observationDataLoaded.value) {
+      observation.loadObservationData()
     }
   })
 
@@ -89,6 +95,7 @@ export const useEmployeeDetailPage = () => {
     ...leave,
     ...rtt,
     ...mileage,
-    ...bonus
+    ...bonus,
+    ...observation
   }
 }

frontend/composables/useEmployeeObservation.ts

@@ -0,0 +1,61 @@
+import type { Ref } from 'vue'
+import type { Observation } from '~/services/dto/observation'
+import type { Employee } from '~/services/dto/employee'
+import {
+  listObservations,
+  createObservation,
+  updateObservation,
+  deleteObservation
+} from '~/services/observations'
+
+export const useEmployeeObservation = (employee: Ref<Employee | null>, reloadEmployee: () => Promise<void>) => {
+  const observations = ref<Observation[]>([])
+  const isObservationLoading = ref(false)
+  const observationDataLoaded = ref(false)
+
+  const loadObservationData = async () => {
+    if (!employee.value || isObservationLoading.value) return
+    isObservationLoading.value = true
+    try {
+      observations.value = await listObservations(employee.value.id)
+      observationDataLoaded.value = true
+    } finally {
+      isObservationLoading.value = false
+    }
+  }
+
+  const resetLoaded = () => {
+    observationDataLoaded.value = false
+  }
+
+  const submitCreateObservation = async (data: { month: string; content: string }) => {
+    if (!employee.value) return
+    await createObservation({
+      employeeId: employee.value.id,
+      month: data.month,
+      content: data.content
+    })
+    await reloadEmployee()
+  }
+
+  const submitUpdateObservation = async (id: number, data: { month: string; content: string }) => {
+    await updateObservation(id, data)
+    await reloadEmployee()
+  }
+
+  const submitDeleteObservation = async (id: number) => {
+    await deleteObservation(id)
+    await reloadEmployee()
+  }
+
+  return {
+    observations,
+    isObservationLoading,
+    observationDataLoaded,
+    loadObservationData,
+    resetLoaded,
+    submitCreateObservation,
+    submitUpdateObservation,
+    submitDeleteObservation
+  }
+}

frontend/i18n/locales/fr.json

@@ -46,6 +46,11 @@
             "create": "Impossible de créer la prime.",
             "update": "Impossible de mettre à jour la prime.",
             "delete": "Impossible de supprimer la prime."
+        },
+        "observation": {
+            "create": "Impossible de créer l'observation.",
+            "update": "Impossible de mettre à jour l'observation.",
+            "delete": "Impossible de supprimer l'observation."
         }
     },
     "success": {
@@ -87,6 +92,11 @@
             "create": "Prime créée.",
             "update": "Prime mise à jour.",
             "delete": "Prime supprimée."
+        },
+        "observation": {
+            "create": "Observation créée.",
+            "update": "Observation mise à jour.",
+            "delete": "Observation supprimée."
         }
     }
 }

frontend/pages/employees/[id].vue

@@ -84,6 +84,16 @@
                         <Icon name="mdi:money-100" size="24" class="align-self"/>
                         Prime
                     </button>
+                    <button
+                        class="pb-2 border-b-2 flex items-center gap-3"
+                        :class="activeTab === 'observation'
+                            ? 'border-primary-500 text-primary-500'
+                            : 'border-transparent text-primary-500/50 hover:text-primary-500'"
+                        @click="activeTab = 'observation'"
+                    >
+                        <Icon name="mdi:note-text-outline" size="24" class="align-self"/>
+                        Observation
+                    </button>
                 </div>
             </div>
             <div class="min-h-0 flex-1">
@@ -173,6 +183,19 @@
                         @delete="submitDeleteBonus"
                     />
                 </div>
+                <div v-else-if="activeTab === 'observation'" class="h-full">
+                    <div v-if="isObservationLoading" class="mt-6 rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600">
+                        Chargement...
+                    </div>
+                    <EmployeesObservationTab
+                        v-else
+                        class="h-full"
+                        :observations="observations"
+                        @create="submitCreateObservation"
+                        @update="submitUpdateObservation"
+                        @delete="submitDeleteObservation"
+                    />
+                </div>
             </div>
         </div>
 
@@ -254,7 +277,12 @@ const {
     isBonusLoading,
     submitCreateBonus,
     submitUpdateBonus,
-    submitDeleteBonus
+    submitDeleteBonus,
+    observations,
+    isObservationLoading,
+    submitCreateObservation,
+    submitUpdateObservation,
+    submitDeleteObservation
 } = useEmployeeDetailPage()
 
 const handleYearlyHoursPrint = async (year: number) => {

frontend/pages/users.vue

@@ -19,11 +19,12 @@
     </div>
 
     <div v-else class="min-h-0 overflow-auto rounded-md bg-white">
-      <div class="grid grid-cols-4 gap-4 border border-black bg-tertiary-500 px-6 py-3 text-[20px] font-semibold text-black rounded-t-md sticky top-0 z-10">
+      <div class="grid grid-cols-5 gap-4 border border-black bg-tertiary-500 px-6 py-3 text-[20px] font-semibold text-black rounded-t-md sticky top-0 z-10">
         <span class="text-left">Utilisateur</span>
         <span class="text-left">Employé</span>
         <span class="text-left">Accès</span>
         <span class="text-left">Sites</span>
+        <span class="text-left">Statut</span>
       </div>
       <div v-if="isLoading" class="px-6 py-4 text-md text-neutral-500">
         Chargement...
@@ -32,7 +33,7 @@
         <div
           v-for="user in users"
           :key="user.id"
-          class="grid grid-cols-4 items-center gap-4 border-b border-primary-500 px-6 py-3 text-md font-bold text-primary-500 last:border-b-0 cursor-pointer hover:bg-tertiary-500"
+          class="grid grid-cols-5 items-center gap-4 border-b border-primary-500 px-6 py-3 text-md font-bold text-primary-500 last:border-b-0 cursor-pointer hover:bg-tertiary-500"
           @click="openEdit(user)"
         >
           <span>{{ user.username }}</span>
@@ -41,6 +42,16 @@
           </span>
           <span>{{ getAccessLabel(user) }}</span>
           <span>{{ getSiteLabels(user) }}</span>
+          <span>
+            <span
+              v-if="user.isLocked"
+              class="inline-block rounded-full bg-red-100 px-3 py-1 text-sm font-semibold text-red-700"
+            >Verrouillé</span>
+            <span
+              v-else
+              class="inline-block rounded-full bg-green-100 px-3 py-1 text-sm font-semibold text-green-700"
+            >Actif</span>
+          </span>
         </div>
       </div>
     </div>
@@ -164,6 +175,20 @@
           </p>
         </div>
 
+        <div>
+          <label class="flex items-center gap-2 cursor-pointer">
+            <input
+              v-model="form.isLocked"
+              type="checkbox"
+              class="cursor-pointer"
+            />
+            <span class="text-md font-semibold text-neutral-700">Verrouiller le compte</span>
+          </label>
+          <p class="mt-1 text-sm text-neutral-500">
+            Un compte verrouillé ne peut plus se connecter.
+          </p>
+        </div>
+
         <div class="flex justify-center pt-2">
           <button
             type="submit"
@@ -207,7 +232,8 @@ const form = reactive({
   password: '',
   accessMode: 'admin' as 'admin' | 'self' | 'sites',
   employeeId: '' as number | '',
-  siteIds: [] as number[]
+  siteIds: [] as number[],
+  isLocked: false
 })
 
 const validationTouched = reactive({
@@ -318,6 +344,7 @@ const resetForm = () => {
   form.employeeId = ''
   form.accessMode = 'admin'
   form.siteIds = []
+  form.isLocked = false
   editingUser.value = null
   validationTouched.username = false
   validationTouched.password = false
@@ -345,6 +372,7 @@ const openEdit = (user: User) => {
   }
 
   form.employeeId = user.employee?.id ?? ''
+  form.isLocked = user.isLocked
 
   const siteRoles = userAccessById.value.get(user.id) ?? []
   form.siteIds = siteRoles.map((role) => role.site?.id).filter((id): id is number => typeof id === 'number')
@@ -398,7 +426,8 @@ const handleSubmit = async () => {
         username: form.username,
         plainPassword: form.password.trim() ? form.password : undefined,
         roles,
-        employeeId
+        employeeId,
+        isLocked: form.isLocked
       })
 
       const existingSiteRoles = userAccessById.value.get(editingUser.value.id) ?? []
@@ -422,7 +451,8 @@ const handleSubmit = async () => {
         username: form.username,
         plainPassword: form.password,
         roles,
-        employeeId
+        employeeId,
+        isLocked: form.isLocked
       })
 
       if (form.accessMode === 'sites' && form.siteIds.length > 0) {

frontend/services/dto/observation.ts

@@ -0,0 +1,6 @@
+export type Observation = {
+  id: number
+  month: string
+  content: string
+  createdAt: string
+}

frontend/services/dto/user.ts

@@ -4,5 +4,6 @@ export type User = {
   id: number
   username: string
   roles: string[]
+  isLocked: boolean
   employee?: Employee | null
 }

frontend/services/observations.ts

@@ -0,0 +1,50 @@
+import type { Observation } from './dto/observation'
+import { extractItems } from '~/utils/api'
+
+export const listObservations = async (employeeId: number) => {
+  const api = useApi()
+  const data = await api.get<Observation[] | { 'hydra:member'?: Observation[] }>(
+    '/observations',
+    { employee: `/api/employees/${employeeId}` },
+    { toast: false }
+  )
+  return extractItems<Observation>(data)
+}
+
+export const createObservation = async (data: {
+  employeeId: number
+  month: string
+  content: string
+}) => {
+  const api = useApi()
+  return api.post<Observation>('/observations', {
+    employee: `/api/employees/${data.employeeId}`,
+    month: data.month,
+    content: data.content
+  }, {
+    toastSuccessKey: 'success.observation.create',
+    toastErrorKey: 'errors.observation.create'
+  })
+}
+
+export const updateObservation = async (id: number, data: {
+  month: string
+  content: string
+}) => {
+  const api = useApi()
+  return api.patch<Observation>(`/observations/${id}`, {
+    month: data.month,
+    content: data.content
+  }, {
+    toastSuccessKey: 'success.observation.update',
+    toastErrorKey: 'errors.observation.update'
+  })
+}
+
+export const deleteObservation = async (id: number) => {
+  const api = useApi()
+  return api.delete(`/observations/${id}`, {}, {
+    toastSuccessKey: 'success.observation.delete',
+    toastErrorKey: 'errors.observation.delete'
+  })
+}

frontend/services/users.ts

@@ -16,6 +16,7 @@ export const createUser = async (payload: {
   plainPassword: string
   roles: string[]
   employeeId?: number | null
+  isLocked?: boolean
 }) => {
   const api = useApi()
   return api.post<User>(
@@ -24,7 +25,8 @@ export const createUser = async (payload: {
       username: payload.username,
       plainPassword: payload.plainPassword,
       roles: payload.roles,
-      employee: payload.employeeId ? `/api/employees/${payload.employeeId}` : null
+      employee: payload.employeeId ? `/api/employees/${payload.employeeId}` : null,
+      isLocked: payload.isLocked ?? false
     },
     {
       toastSuccessKey: 'success.user.create',
@@ -38,12 +40,14 @@ export const updateUser = async (id: number, payload: {
   plainPassword?: string
   roles: string[]
   employeeId?: number | null
+  isLocked?: boolean
 }) => {
   const api = useApi()
   const body: Record<string, unknown> = {
     username: payload.username,
     roles: payload.roles,
-    employee: payload.employeeId ? `/api/employees/${payload.employeeId}` : null
+    employee: payload.employeeId ? `/api/employees/${payload.employeeId}` : null,
+    isLocked: payload.isLocked ?? false
   }
 
   if (payload.plainPassword) {