feat: Développer le composant Datepicker (#52)

| 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é

Co-authored-by: matthieu <matthieu@yuno.malio.fr>
Co-authored-by: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr>
Reviewed-on: #52
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

app/components/malio/date/composables/dateFormat.test.ts

@@ -0,0 +1,62 @@
+import {describe, expect, it} from 'vitest'
+import {formatIsoToDisplay, isDateInRange, isValidIso, parseDisplayToIso} from './dateFormat'
+
+describe('dateFormat', () => {
+  describe('isValidIso', () => {
+    it('accepts a real ISO date', () => {
+      expect(isValidIso('2026-05-19')).toBe(true)
+    })
+    it('rejects a malformed string', () => {
+      expect(isValidIso('19/05/2026')).toBe(false)
+      expect(isValidIso('2026-5-9')).toBe(false)
+      expect(isValidIso('')).toBe(false)
+    })
+    it('rejects an impossible date', () => {
+      expect(isValidIso('2026-02-30')).toBe(false)
+      expect(isValidIso('2026-13-01')).toBe(false)
+    })
+    it('accepts Feb 29 on a leap year and rejects it otherwise', () => {
+      expect(isValidIso('2024-02-29')).toBe(true)
+      expect(isValidIso('2026-02-29')).toBe(false)
+    })
+  })
+
+  describe('formatIsoToDisplay', () => {
+    it('formats ISO to DD/MM/YYYY', () => {
+      expect(formatIsoToDisplay('2026-05-19')).toBe('19/05/2026')
+    })
+    it('returns empty string for null or invalid input', () => {
+      expect(formatIsoToDisplay(null)).toBe('')
+      expect(formatIsoToDisplay('nope')).toBe('')
+    })
+  })
+
+  describe('parseDisplayToIso', () => {
+    it('parses DD/MM/YYYY to ISO', () => {
+      expect(parseDisplayToIso('19/05/2026')).toBe('2026-05-19')
+    })
+    it('returns null for malformed or impossible input', () => {
+      expect(parseDisplayToIso('2026-05-19')).toBeNull()
+      expect(parseDisplayToIso('31/02/2026')).toBeNull()
+      expect(parseDisplayToIso('')).toBeNull()
+    })
+  })
+
+  describe('isDateInRange', () => {
+    it('returns true when no bounds are given', () => {
+      expect(isDateInRange('2026-05-19')).toBe(true)
+    })
+    it('respects the min bound (inclusive)', () => {
+      expect(isDateInRange('2026-05-19', '2026-05-19')).toBe(true)
+      expect(isDateInRange('2026-05-18', '2026-05-19')).toBe(false)
+    })
+    it('respects the max bound (inclusive)', () => {
+      expect(isDateInRange('2026-05-19', undefined, '2026-05-19')).toBe(true)
+      expect(isDateInRange('2026-05-20', undefined, '2026-05-19')).toBe(false)
+    })
+    it('respects both bounds', () => {
+      expect(isDateInRange('2026-05-15', '2026-05-10', '2026-05-20')).toBe(true)
+      expect(isDateInRange('2026-05-25', '2026-05-10', '2026-05-20')).toBe(false)
+    })
+  })
+})

app/components/malio/date/composables/dateFormat.ts

@@ -0,0 +1,26 @@
+export function isValidIso(iso: string): boolean {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(iso)) return false
+  const [y, m, d] = iso.split('-').map(Number)
+  const date = new Date(y, m - 1, d)
+  return date.getFullYear() === y && date.getMonth() === m - 1 && date.getDate() === d
+}
+
+export function formatIsoToDisplay(iso: string | null): string {
+  if (!iso || !isValidIso(iso)) return ''
+  const [y, m, d] = iso.split('-')
+  return `${d}/${m}/${y}`
+}
+
+export function parseDisplayToIso(display: string): string | null {
+  const match = /^(\d{2})\/(\d{2})\/(\d{4})$/.exec(display.trim())
+  if (!match) return null
+  const [, dd, mm, yyyy] = match
+  const iso = `${yyyy}-${mm}-${dd}`
+  return isValidIso(iso) ? iso : null
+}
+
+export function isDateInRange(iso: string, min?: string, max?: string): boolean {
+  if (min && iso < min) return false
+  if (max && iso > max) return false
+  return true
+}

app/components/malio/date/composables/dateRange.test.ts

@@ -0,0 +1,57 @@
+import {describe, expect, it} from 'vitest'
+import {dayRangeRole, normalizeRange, resolveRangeBounds} from './dateRange'
+
+describe('dateRange', () => {
+  describe('normalizeRange', () => {
+    it('keeps an already ordered pair', () => {
+      expect(normalizeRange('2026-05-19', '2026-05-25')).toEqual({start: '2026-05-19', end: '2026-05-25'})
+    })
+    it('swaps a reversed pair', () => {
+      expect(normalizeRange('2026-05-25', '2026-05-19')).toEqual({start: '2026-05-19', end: '2026-05-25'})
+    })
+    it('handles an equal pair', () => {
+      expect(normalizeRange('2026-05-19', '2026-05-19')).toEqual({start: '2026-05-19', end: '2026-05-19'})
+    })
+  })
+
+  describe('resolveRangeBounds', () => {
+    it('returns null without a start', () => {
+      expect(resolveRangeBounds(null, null, null)).toBeNull()
+    })
+    it('returns a single-point range when only start is set', () => {
+      expect(resolveRangeBounds('2026-05-19', null, null)).toEqual({lo: '2026-05-19', hi: '2026-05-19'})
+    })
+    it('orders start and committed end', () => {
+      expect(resolveRangeBounds('2026-05-19', '2026-05-25', null)).toEqual({lo: '2026-05-19', hi: '2026-05-25'})
+    })
+    it('uses preview when end is not set', () => {
+      expect(resolveRangeBounds('2026-05-19', null, '2026-05-22')).toEqual({lo: '2026-05-19', hi: '2026-05-22'})
+    })
+    it('inverts when preview is before start', () => {
+      expect(resolveRangeBounds('2026-05-19', null, '2026-05-10')).toEqual({lo: '2026-05-10', hi: '2026-05-19'})
+    })
+    it('prioritises committed end over preview', () => {
+      expect(resolveRangeBounds('2026-05-19', '2026-05-25', '2026-05-30')).toEqual({lo: '2026-05-19', hi: '2026-05-25'})
+    })
+  })
+
+  describe('dayRangeRole', () => {
+    const bounds = {lo: '2026-05-19', hi: '2026-05-25'}
+    it('returns none without bounds', () => {
+      expect(dayRangeRole('2026-05-20', null)).toBe('none')
+    })
+    it('returns single when lo === hi and matches', () => {
+      expect(dayRangeRole('2026-05-19', {lo: '2026-05-19', hi: '2026-05-19'})).toBe('single')
+      expect(dayRangeRole('2026-05-20', {lo: '2026-05-19', hi: '2026-05-19'})).toBe('none')
+    })
+    it('returns start, end and in-range', () => {
+      expect(dayRangeRole('2026-05-19', bounds)).toBe('start')
+      expect(dayRangeRole('2026-05-25', bounds)).toBe('end')
+      expect(dayRangeRole('2026-05-22', bounds)).toBe('in-range')
+    })
+    it('returns none outside the bounds', () => {
+      expect(dayRangeRole('2026-05-10', bounds)).toBe('none')
+      expect(dayRangeRole('2026-05-30', bounds)).toBe('none')
+    })
+  })
+})

app/components/malio/date/composables/dateRange.ts

@@ -0,0 +1,31 @@
+export type DateRangeValue = {start: string; end: string}
+
+export function normalizeRange(a: string, b: string): DateRangeValue {
+  return a <= b ? {start: a, end: b} : {start: b, end: a}
+}
+
+export function resolveRangeBounds(
+  start: string | null,
+  end: string | null,
+  preview: string | null,
+): {lo: string; hi: string} | null {
+  if (!start) return null
+  const other = end ?? preview
+  if (!other) return {lo: start, hi: start}
+  return start <= other ? {lo: start, hi: other} : {lo: other, hi: start}
+}
+
+export type DayRangeRole = 'none' | 'single' | 'start' | 'end' | 'in-range'
+
+export function dayRangeRole(
+  iso: string,
+  bounds: {lo: string; hi: string} | null,
+): DayRangeRole {
+  if (!bounds) return 'none'
+  const {lo, hi} = bounds
+  if (lo === hi) return iso === lo ? 'single' : 'none'
+  if (iso === lo) return 'start'
+  if (iso === hi) return 'end'
+  if (iso > lo && iso < hi) return 'in-range'
+  return 'none'
+}

app/components/malio/date/composables/dateWeek.test.ts

@@ -0,0 +1,74 @@
+import {describe, expect, it} from 'vitest'
+import {
+  formatWeekDisplay,
+  isValidIsoWeek,
+  isoWeekToMonday,
+  mondayOf,
+  sundayOf,
+  toIsoWeek,
+} from './dateWeek'
+
+describe('dateWeek', () => {
+  describe('mondayOf / sundayOf', () => {
+    it('returns Monday and Sunday of a midweek date', () => {
+      expect(mondayOf('2026-05-20')).toBe('2026-05-18') // mercredi
+      expect(sundayOf('2026-05-20')).toBe('2026-05-24')
+    })
+    it('keeps Monday on a Monday', () => {
+      expect(mondayOf('2026-05-18')).toBe('2026-05-18')
+    })
+    it('returns the preceding Monday for a Sunday', () => {
+      expect(mondayOf('2026-05-24')).toBe('2026-05-18')
+    })
+  })
+
+  describe('toIsoWeek', () => {
+    it('returns the ISO week of a date', () => {
+      expect(toIsoWeek('2026-05-20')).toBe('2026-W21')
+    })
+    it('handles year boundaries', () => {
+      expect(toIsoWeek('2026-01-01')).toBe('2026-W01')
+      expect(toIsoWeek('2025-12-31')).toBe('2026-W01')
+      expect(toIsoWeek('2027-01-01')).toBe('2026-W53')
+    })
+  })
+
+  describe('isoWeekToMonday', () => {
+    it('returns the Monday of a week string', () => {
+      expect(isoWeekToMonday('2026-W21')).toBe('2026-05-18')
+    })
+    it('round-trips with toIsoWeek', () => {
+      for (const w of ['2026-W01', '2026-W21', '2026-W53', '2024-W09']) {
+        const monday = isoWeekToMonday(w)
+        expect(monday).not.toBeNull()
+        expect(toIsoWeek(monday as string)).toBe(w)
+      }
+    })
+    it('returns null for invalid input', () => {
+      expect(isoWeekToMonday('2026-21')).toBeNull()
+      expect(isoWeekToMonday('2026-W00')).toBeNull()
+      expect(isoWeekToMonday('2026-W54')).toBeNull()
+      expect(isoWeekToMonday('2025-W53')).toBeNull() // 2025 n'a que 52 semaines ISO
+    })
+  })
+
+  describe('isValidIsoWeek', () => {
+    it('accepts a real ISO week', () => {
+      expect(isValidIsoWeek('2026-W21')).toBe(true)
+    })
+    it('rejects malformed or impossible weeks', () => {
+      expect(isValidIsoWeek('2026-21')).toBe(false)
+      expect(isValidIsoWeek('2026-W00')).toBe(false)
+      expect(isValidIsoWeek('2026-W54')).toBe(false)
+    })
+  })
+
+  describe('formatWeekDisplay', () => {
+    it('formats a week as a human label', () => {
+      expect(formatWeekDisplay('2026-W21')).toBe('Semaine 21 (18/05 → 24/05/2026)')
+    })
+    it('returns empty string for invalid input', () => {
+      expect(formatWeekDisplay('2026-W54')).toBe('')
+    })
+  })
+})

app/components/malio/date/composables/dateWeek.ts

@@ -0,0 +1,67 @@
+import {formatIsoToDisplay} from './dateFormat'
+
+const parseUtc = (iso: string): Date => {
+  const [y, m, d] = iso.split('-').map(Number)
+  return new Date(Date.UTC(y, m - 1, d))
+}
+
+const toIso = (d: Date): string => {
+  const y = d.getUTCFullYear()
+  const m = String(d.getUTCMonth() + 1).padStart(2, '0')
+  const day = String(d.getUTCDate()).padStart(2, '0')
+  return `${y}-${m}-${day}`
+}
+
+export function mondayOf(iso: string): string {
+  const d = parseUtc(iso)
+  const dayNum = d.getUTCDay() || 7 // dimanche = 7
+  d.setUTCDate(d.getUTCDate() - (dayNum - 1))
+  return toIso(d)
+}
+
+export function sundayOf(iso: string): string {
+  const d = parseUtc(mondayOf(iso))
+  d.setUTCDate(d.getUTCDate() + 6)
+  return toIso(d)
+}
+
+export function toIsoWeek(iso: string): string {
+  const d = parseUtc(iso)
+  const dayNum = d.getUTCDay() || 7
+  d.setUTCDate(d.getUTCDate() + 4 - dayNum) // jeudi de la semaine
+  const isoYear = d.getUTCFullYear()
+  const yearStart = new Date(Date.UTC(isoYear, 0, 1))
+  const week = Math.ceil((((d.getTime() - yearStart.getTime()) / 86400000) + 1) / 7)
+  return `${isoYear}-W${String(week).padStart(2, '0')}`
+}
+
+export function isoWeekToMonday(week: string): string | null {
+  const m = /^(\d{4})-W(\d{2})$/.exec(week)
+  if (!m) return null
+  const year = Number(m[1])
+  const w = Number(m[2])
+  if (w < 1 || w > 53) return null
+  // Lundi de la semaine 1 = lundi de la semaine contenant le 4 janvier
+  const jan4 = new Date(Date.UTC(year, 0, 4))
+  const jan4Day = jan4.getUTCDay() || 7
+  const monday = new Date(jan4)
+  monday.setUTCDate(jan4.getUTCDate() - (jan4Day - 1) + (w - 1) * 7)
+  const iso = toIso(monday)
+  // Garde-fou : la semaine 53 n'existe pas pour toutes les années
+  if (toIsoWeek(iso) !== week) return null
+  return iso
+}
+
+export function isValidIsoWeek(week: string): boolean {
+  return isoWeekToMonday(week) !== null
+}
+
+export function formatWeekDisplay(week: string): string {
+  const monday = isoWeekToMonday(week)
+  if (!monday) return ''
+  const sunday = sundayOf(monday)
+  const w = Number(week.slice(6))
+  const startDdMm = formatIsoToDisplay(monday).slice(0, 5) // "18/05"
+  const endFull = formatIsoToDisplay(sunday) // "24/05/2026"
+  return `Semaine ${w} (${startDdMm} → ${endFull})`
+}

app/components/malio/date/composables/datetimeFormat.test.ts

@@ -0,0 +1,61 @@
+import {describe, expect, it} from 'vitest'
+import {
+  composeDateTime,
+  formatIsoDateTimeToDisplay,
+  isValidIsoDateTime,
+  splitDateTime,
+} from './datetimeFormat'
+
+describe('datetimeFormat', () => {
+  describe('isValidIsoDateTime', () => {
+    it('accepte un datetime ISO complet valide', () => {
+      expect(isValidIsoDateTime('2026-05-20T14:30:00')).toBe(true)
+      expect(isValidIsoDateTime('2026-01-01T00:00:00')).toBe(true)
+      expect(isValidIsoDateTime('2026-12-31T23:59:59')).toBe(true)
+    })
+
+    it('rejette une date seule, des composants invalides ou une chaîne vide', () => {
+      expect(isValidIsoDateTime('2026-05-20')).toBe(false)
+      expect(isValidIsoDateTime('2026-13-01T00:00:00')).toBe(false)
+      expect(isValidIsoDateTime('2026-05-20T24:00:00')).toBe(false)
+      expect(isValidIsoDateTime('2026-05-20T14:60:00')).toBe(false)
+      expect(isValidIsoDateTime('2026-05-20T14:30:60')).toBe(false)
+      expect(isValidIsoDateTime('2026-05-20T14:30')).toBe(false)
+      expect(isValidIsoDateTime('')).toBe(false)
+    })
+  })
+
+  describe('formatIsoDateTimeToDisplay', () => {
+    it('formate un datetime valide en JJ/MM/AAAA HH:MM', () => {
+      expect(formatIsoDateTimeToDisplay('2026-05-20T14:30:00')).toBe('20/05/2026 14:30')
+    })
+
+    it('renvoie une chaîne vide pour nul ou invalide', () => {
+      expect(formatIsoDateTimeToDisplay(null)).toBe('')
+      expect(formatIsoDateTimeToDisplay('2026-05-20')).toBe('')
+      expect(formatIsoDateTimeToDisplay('nope')).toBe('')
+    })
+  })
+
+  describe('splitDateTime', () => {
+    it('découpe un datetime valide', () => {
+      expect(splitDateTime('2026-05-20T14:30:00')).toEqual({date: '2026-05-20', time: '14:30'})
+    })
+
+    it('renvoie date null et time vide pour nul, date seule ou invalide', () => {
+      expect(splitDateTime(null)).toEqual({date: null, time: ''})
+      expect(splitDateTime('2026-05-20')).toEqual({date: null, time: ''})
+      expect(splitDateTime('nope')).toEqual({date: null, time: ''})
+    })
+  })
+
+  describe('composeDateTime', () => {
+    it('recompose un datetime ISO avec secondes à 00', () => {
+      expect(composeDateTime('2026-05-20', '14:30')).toBe('2026-05-20T14:30:00')
+    })
+
+    it('utilise 00:00 quand l\'heure est vide', () => {
+      expect(composeDateTime('2026-05-20', '')).toBe('2026-05-20T00:00:00')
+    })
+  })
+})

app/components/malio/date/composables/datetimeFormat.ts

@@ -0,0 +1,33 @@
+import {isValidIso} from './dateFormat'
+
+const DATETIME_RE = /^(\d{4}-\d{2}-\d{2})T(\d{2}):(\d{2}):(\d{2})$/
+
+export function isValidIsoDateTime(s: string): boolean {
+  const m = DATETIME_RE.exec(s)
+  if (!m) return false
+  const [, date, hh, mm, ss] = m
+  if (!isValidIso(date)) return false
+  const h = Number(hh)
+  const min = Number(mm)
+  const sec = Number(ss)
+  return h >= 0 && h <= 23 && min >= 0 && min <= 59 && sec >= 0 && sec <= 59
+}
+
+export function formatIsoDateTimeToDisplay(s: string | null): string {
+  if (!s || !isValidIsoDateTime(s)) return ''
+  const [date, time] = s.split('T')
+  const [y, mo, d] = date.split('-')
+  const [hh, mm] = time.split(':')
+  return `${d}/${mo}/${y} ${hh}:${mm}`
+}
+
+export function splitDateTime(s: string | null): {date: string | null; time: string} {
+  if (!s || !isValidIsoDateTime(s)) return {date: null, time: ''}
+  const [date, time] = s.split('T')
+  return {date, time: time.slice(0, 5)}
+}
+
+export function composeDateTime(date: string, time: string): string {
+  const t = time || '00:00'
+  return `${date}T${t}:00`
+}

app/components/malio/date/composables/useCalendarPopover.test.ts

@@ -0,0 +1,64 @@
+import {describe, expect, it} from 'vitest'
+import {defineComponent, h, ref} from 'vue'
+import {mount} from '@vue/test-utils'
+import {useCalendarPopover} from './useCalendarPopover'
+
+const mountHost = () => {
+  const api: ReturnType<typeof useCalendarPopover> = {} as never
+  const Host = defineComponent({
+    setup() {
+      const root = ref<HTMLElement | null>(null)
+      Object.assign(api, useCalendarPopover(root))
+      return () => h('div', {ref: root}, 'host')
+    },
+  })
+  const wrapper = mount(Host, {attachTo: document.body})
+  return {wrapper, api}
+}
+
+describe('useCalendarPopover', () => {
+  it('starts closed in days view', () => {
+    const {api} = mountHost()
+    expect(api.isOpen.value).toBe(false)
+    expect(api.viewMode.value).toBe('days')
+  })
+
+  it('open() opens in days view', () => {
+    const {api} = mountHost()
+    api.open()
+    expect(api.isOpen.value).toBe(true)
+    expect(api.viewMode.value).toBe('days')
+  })
+
+  it('toggleView() switches between days and months', () => {
+    const {api} = mountHost()
+    api.open()
+    api.toggleView()
+    expect(api.viewMode.value).toBe('months')
+    api.toggleView()
+    expect(api.viewMode.value).toBe('days')
+  })
+
+  it('close() resets isOpen and viewMode', () => {
+    const {api} = mountHost()
+    api.open()
+    api.toggleView()
+    api.close()
+    expect(api.isOpen.value).toBe(false)
+    expect(api.viewMode.value).toBe('days')
+  })
+
+  it('closes on outside mousedown', () => {
+    const {api} = mountHost()
+    api.open()
+    document.body.dispatchEvent(new MouseEvent('mousedown', {bubbles: true}))
+    expect(api.isOpen.value).toBe(false)
+  })
+
+  it('stays open on inside mousedown', () => {
+    const {wrapper, api} = mountHost()
+    api.open()
+    wrapper.element.dispatchEvent(new MouseEvent('mousedown', {bubbles: true}))
+    expect(api.isOpen.value).toBe(true)
+  })
+})

app/components/malio/date/composables/useCalendarPopover.ts

@@ -0,0 +1,28 @@
+import {onBeforeUnmount, onMounted, ref, type Ref} from 'vue'
+
+export function useCalendarPopover(rootRef: Ref<HTMLElement | null>) {
+  const isOpen = ref(false)
+  const viewMode = ref<'days' | 'months'>('days')
+
+  const open = () => {
+    isOpen.value = true
+    viewMode.value = 'days'
+  }
+  const close = () => {
+    isOpen.value = false
+    viewMode.value = 'days'
+  }
+  const toggleView = () => {
+    viewMode.value = viewMode.value === 'days' ? 'months' : 'days'
+  }
+
+  const onMouseDown = (event: MouseEvent) => {
+    if (!isOpen.value || !rootRef.value) return
+    if (!rootRef.value.contains(event.target as Node)) close()
+  }
+
+  onMounted(() => document.addEventListener('mousedown', onMouseDown))
+  onBeforeUnmount(() => document.removeEventListener('mousedown', onMouseDown))
+
+  return {isOpen, viewMode, open, close, toggleView}
+}

app/components/malio/date/composables/useCalendarView.test.ts

@@ -0,0 +1,68 @@
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
+import {ref} from 'vue'
+import {useCalendarView} from './useCalendarView'
+
+describe('useCalendarView', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date(2026, 4, 19)) // 19 mai 2026
+  })
+  afterEach(() => vi.useRealTimers())
+
+  it('initialises to the current month and year', () => {
+    const {currentMonth, currentYear} = useCalendarView(ref('days'))
+    expect(currentMonth.value).toBe(4)
+    expect(currentYear.value).toBe(2026)
+  })
+
+  it('goToNext advances the month in days view', () => {
+    const {currentMonth, goToNext} = useCalendarView(ref('days'))
+    goToNext()
+    expect(currentMonth.value).toBe(5)
+  })
+
+  it('rolls December to January and bumps the year', () => {
+    const {currentMonth, currentYear, goToNext} = useCalendarView(ref('days'))
+    currentMonth.value = 11
+    goToNext()
+    expect(currentMonth.value).toBe(0)
+    expect(currentYear.value).toBe(2027)
+  })
+
+  it('rolls January to December backwards', () => {
+    const {currentMonth, currentYear, goToPrev} = useCalendarView(ref('days'))
+    currentMonth.value = 0
+    goToPrev()
+    expect(currentMonth.value).toBe(11)
+    expect(currentYear.value).toBe(2025)
+  })
+
+  it('navigates the year in months view', () => {
+    const {currentYear, goToNext, goToPrev} = useCalendarView(ref('months'))
+    goToNext()
+    expect(currentYear.value).toBe(2027)
+    goToPrev()
+    expect(currentYear.value).toBe(2026)
+  })
+
+  it('selectMonth sets the current month', () => {
+    const {currentMonth, selectMonth} = useCalendarView(ref('days'))
+    selectMonth(0)
+    expect(currentMonth.value).toBe(0)
+  })
+
+  it('syncToIso sets month/year from a valid ISO', () => {
+    const {currentMonth, currentYear, syncToIso} = useCalendarView(ref('days'))
+    syncToIso('2025-12-25')
+    expect(currentMonth.value).toBe(11)
+    expect(currentYear.value).toBe(2025)
+  })
+
+  it('syncToIso falls back to today for null/invalid', () => {
+    const {currentMonth, currentYear, syncToIso} = useCalendarView(ref('days'))
+    syncToIso('2025-12-25')
+    syncToIso(null)
+    expect(currentMonth.value).toBe(4)
+    expect(currentYear.value).toBe(2026)
+  })
+})

app/components/malio/date/composables/useCalendarView.ts

@@ -0,0 +1,51 @@
+import {ref, type Ref} from 'vue'
+import {isValidIso} from './dateFormat'
+
+export function useCalendarView(viewMode: Ref<'days' | 'months'>) {
+  const today = new Date()
+  const currentMonth = ref(today.getMonth())
+  const currentYear = ref(today.getFullYear())
+
+  const goToPrev = () => {
+    if (viewMode.value === 'months') {
+      currentYear.value -= 1
+      return
+    }
+    if (currentMonth.value === 0) {
+      currentMonth.value = 11
+      currentYear.value -= 1
+    } else {
+      currentMonth.value -= 1
+    }
+  }
+
+  const goToNext = () => {
+    if (viewMode.value === 'months') {
+      currentYear.value += 1
+      return
+    }
+    if (currentMonth.value === 11) {
+      currentMonth.value = 0
+      currentYear.value += 1
+    } else {
+      currentMonth.value += 1
+    }
+  }
+
+  const selectMonth = (m: number) => {
+    currentMonth.value = m
+  }
+
+  const syncToIso = (iso: string | null) => {
+    if (iso && isValidIso(iso)) {
+      currentMonth.value = Number(iso.slice(5, 7)) - 1
+      currentYear.value = Number(iso.slice(0, 4))
+    } else {
+      const now = new Date()
+      currentMonth.value = now.getMonth()
+      currentYear.value = now.getFullYear()
+    }
+  }
+
+  return {currentMonth, currentYear, goToPrev, goToNext, selectMonth, syncToIso}
+}

app/components/malio/date/composables/useMonthMatrix.test.ts

@@ -0,0 +1,69 @@
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
+import {ref} from 'vue'
+import {useMonthMatrix} from './useMonthMatrix'
+
+describe('useMonthMatrix', () => {
+  it('always produces 6 weeks of 7 days', () => {
+    const {weeks} = useMonthMatrix(ref(4), ref(2026)) // mai 2026
+    expect(weeks.value).toHaveLength(6)
+    weeks.value.forEach(week => expect(week.days).toHaveLength(7))
+  })
+
+  it('starts every week on a Monday', () => {
+    const {weeks} = useMonthMatrix(ref(4), ref(2026))
+    weeks.value.forEach(week => {
+      const first = new Date(`${week.days[0].isoDate}T00:00:00`)
+      expect(first.getDay()).toBe(1) // 1 = lundi
+    })
+  })
+
+  it('flags exactly the days of the current month', () => {
+    const {weeks} = useMonthMatrix(ref(4), ref(2026)) // mai = 31 jours
+    const currentMonthDays = weeks.value
+      .flatMap(w => w.days)
+      .filter(d => d.isCurrentMonth)
+    expect(currentMonthDays).toHaveLength(31)
+    expect(currentMonthDays.every(d => d.isoDate.startsWith('2026-05'))).toBe(true)
+  })
+
+  it('handles leap year February (29 days)', () => {
+    const {weeks} = useMonthMatrix(ref(1), ref(2024)) // février 2024
+    const days = weeks.value.flatMap(w => w.days).filter(d => d.isCurrentMonth)
+    expect(days).toHaveLength(29)
+  })
+
+  it('assigns ISO week 1 to the week containing Jan 4th', () => {
+    const {weeks} = useMonthMatrix(ref(0), ref(2026)) // janvier 2026
+    const weekWithJan4 = weeks.value.find(w =>
+      w.days.some(d => d.isoDate === '2026-01-04'),
+    )
+    expect(weekWithJan4?.weekNumber).toBe(1)
+  })
+
+  it('reacts to month/year changes', () => {
+    const month = ref(4)
+    const year = ref(2026)
+    const {weeks} = useMonthMatrix(month, year)
+    const mayCount = weeks.value.flatMap(w => w.days).filter(d => d.isCurrentMonth).length
+    month.value = 1 // février
+    year.value = 2024
+    const febCount = weeks.value.flatMap(w => w.days).filter(d => d.isCurrentMonth).length
+    expect(mayCount).toBe(31)
+    expect(febCount).toBe(29)
+  })
+
+  describe('isToday', () => {
+    beforeEach(() => {
+      vi.useFakeTimers()
+      vi.setSystemTime(new Date(2026, 4, 19)) // 19 mai 2026
+    })
+    afterEach(() => vi.useRealTimers())
+
+    it('flags only today', () => {
+      const {weeks} = useMonthMatrix(ref(4), ref(2026))
+      const todays = weeks.value.flatMap(w => w.days).filter(d => d.isToday)
+      expect(todays).toHaveLength(1)
+      expect(todays[0].isoDate).toBe('2026-05-19')
+    })
+  })
+})

app/components/malio/date/composables/useMonthMatrix.ts

@@ -0,0 +1,60 @@
+import {computed, type ComputedRef, type Ref} from 'vue'
+
+export type DayCell = {
+  isoDate: string
+  day: number
+  isCurrentMonth: boolean
+  isToday: boolean
+}
+export type WeekRow = {
+  weekNumber: number
+  days: DayCell[]
+}
+
+const toIso = (d: Date): string => {
+  const y = d.getFullYear()
+  const m = String(d.getMonth() + 1).padStart(2, '0')
+  const day = String(d.getDate()).padStart(2, '0')
+  return `${y}-${m}-${day}`
+}
+
+const isoWeek = (d: Date): number => {
+  const target = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()))
+  const dayNum = target.getUTCDay() || 7 // dimanche = 7
+  target.setUTCDate(target.getUTCDate() + 4 - dayNum) // jeudi de la semaine
+  const yearStart = new Date(Date.UTC(target.getUTCFullYear(), 0, 1))
+  return Math.ceil((((target.getTime() - yearStart.getTime()) / 86400000) + 1) / 7)
+}
+
+export function useMonthMatrix(
+  month: Ref<number>,
+  year: Ref<number>,
+): {weeks: ComputedRef<WeekRow[]>} {
+  const weeks = computed<WeekRow[]>(() => {
+    const todayIso = toIso(new Date())
+    const first = new Date(year.value, month.value, 1)
+    // recule jusqu'au lundi (getDay : 0 = dimanche)
+    const offset = (first.getDay() + 6) % 7
+    const start = new Date(year.value, month.value, 1 - offset)
+
+    const rows: WeekRow[] = []
+    const cursor = new Date(start)
+    for (let w = 0; w < 6; w++) {
+      const days: DayCell[] = []
+      for (let i = 0; i < 7; i++) {
+        const iso = toIso(cursor)
+        days.push({
+          isoDate: iso,
+          day: cursor.getDate(),
+          isCurrentMonth: cursor.getMonth() === month.value,
+          isToday: iso === todayIso,
+        })
+        cursor.setDate(cursor.getDate() + 1)
+      }
+      rows.push({weekNumber: isoWeek(new Date(`${days[0].isoDate}T00:00:00`)), days})
+    }
+    return rows
+  })
+
+  return {weeks}
+}