feat : ajout d'un champ commentaire sur les contrats + correction de plusieurs bugs

frontend/components/employees/LeaveTab.vue

@@ -41,9 +41,9 @@
                             >
                                 <div
                                     class="h-6 w-6"
-                                    :class="getDayClass(day.leave)"
-                                    :style="getDayStyle(day.leave)"
-                                    :title="getDayTitle(day.leave)"
+                                    :class="getDayClass(day)"
+                                    :style="getDayStyle(day)"
+                                    :title="getDayTitle(day)"
                                 >
                                     {{ getDayText(day) }}
                                 </div>
@@ -65,13 +65,13 @@ type DayLeaveState = {
     am: boolean
     pm: boolean
     labels: string[]
-    hasCongeTypeC: boolean
-    hasOtherTypes: boolean
+    colors: string[]
 }
 
 const props = defineProps<{
     absences: Absence[]
     summary: EmployeeLeaveSummary | null
+    publicHolidays: Record<string, string>
 }>()
 
 const monthLabels = [
@@ -124,8 +124,7 @@ const dayLeaveMap = computed(() => {
                 am: false,
                 pm: false,
                 labels: [] as string[],
-                hasCongeTypeC: false,
-                hasOtherTypes: false
+                colors: [] as string[]
             }
 
             const isStart = ymd === startYmd
@@ -150,18 +149,21 @@ const dayLeaveMap = computed(() => {
             }
 
             const typeLabel = absence.type?.label ?? absence.type?.code ?? 'Absence'
-            const typeCode = (absence.type?.code ?? '').toUpperCase()
+            const typeColor = absence.type?.color ?? '#222783'
             const halfSuffix = am && !pm ? ' (Matin)' : (!am && pm ? ' (Apres-midi)' : '')
             const hoverLabel = `${typeLabel}${halfSuffix}`
 
+            const colors = existing.colors.includes(typeColor)
+                ? existing.colors
+                : [...existing.colors, typeColor]
+
             map.set(ymd, {
                 am: existing.am || am,
                 pm: existing.pm || pm,
                 labels: existing.labels.includes(hoverLabel)
                     ? existing.labels
                     : [...existing.labels, hoverLabel],
-                hasCongeTypeC: existing.hasCongeTypeC || typeCode === 'C',
-                hasOtherTypes: existing.hasOtherTypes || typeCode !== 'C'
+                colors
             })
         }
     }
@@ -180,7 +182,7 @@ const months = computed(() => {
         const daysInMonth = new Date(monthYear, monthIndex + 1, 0).getDate()
         const mondayBasedFirstDay = (first.getDay() + 6) % 7
 
-        const cells: Array<{ ymd: string; label: string; leave: DayLeaveState | null } | null> = []
+        const cells: Array<{ ymd: string; label: string; leave: DayLeaveState | null; isHoliday: boolean } | null> = []
 
         for (let i = 0; i < mondayBasedFirstDay; i += 1) {
             cells.push(null)
@@ -191,7 +193,8 @@ const months = computed(() => {
             cells.push({
                 ymd,
                 label: String(day),
-                leave: dayLeaveMap.value.get(ymd) ?? null
+                leave: dayLeaveMap.value.get(ymd) ?? null,
+                isHoliday: ymd in props.publicHolidays
             })
         }
 
@@ -206,37 +209,37 @@ const months = computed(() => {
     })
 })
 
-const getDayClass = (leave: DayLeaveState | null) => {
-    if (!leave) return 'text-primary-500'
-    if (leave.am && leave.pm) {
-        return leave.hasOtherTypes
-            ? 'bg-red-600 text-white rounded font-semibold'
-            : 'bg-primary-500 text-white rounded font-semibold'
+const getDayClass = (day: { leave: DayLeaveState | null; isHoliday: boolean }) => {
+    if (day.leave) {
+        return 'rounded font-semibold text-white'
     }
-    return 'rounded text-primary-700 font-semibold text-white'
+    if (day.isHoliday) return 'text-primary-500 rounded font-semibold'
+    return 'text-primary-500'
 }
 
-const getDayStyle = (leave: DayLeaveState | null) => {
-    if (!leave || (leave.am && leave.pm)) return undefined
-
-    const color = leave.hasOtherTypes ? '#dc2626' : '#222783'
-    const backgroundImage = leave.am
-        ? `linear-gradient(135deg, ${color} 0 50%, transparent 50% 100%)`
-        : `linear-gradient(135deg, transparent 0 50%, ${color} 50% 100%)`
-
-    return {
-        backgroundImage,
-        backgroundColor: 'transparent'
+const getDayStyle = (day: { leave: DayLeaveState | null; isHoliday: boolean }) => {
+    if (day.leave) {
+        const color = day.leave.colors[0] ?? '#222783'
+        if (day.leave.am && day.leave.pm) {
+            return { backgroundColor: color }
+        }
+        const backgroundImage = day.leave.am
+            ? `linear-gradient(135deg, ${color} 0 50%, transparent 50% 100%)`
+            : `linear-gradient(135deg, transparent 0 50%, ${color} 50% 100%)`
+        return { backgroundImage, backgroundColor: 'transparent' }
     }
+    if (day.isHoliday) return { backgroundColor: 'rgb(179, 229, 252)' }
+    return undefined
 }
 
 const getDayText = (day: { label: string; leave: DayLeaveState | null }) => {
     return day.label
 }
 
-const getDayTitle = (leave: DayLeaveState | null) => {
-    if (!leave || leave.labels.length === 0) return ''
-    return leave.labels.join(' / ')
+const getDayTitle = (day: { leave: DayLeaveState | null; isHoliday: boolean; ymd: string }) => {
+    if (day.leave && day.leave.labels.length > 0) return day.leave.labels.join(' / ')
+    if (day.isHoliday) return props.publicHolidays[day.ymd] ?? 'Jour férié'
+    return ''
 }
 
 const formatCount = (value: number | null | undefined) => {