feat: add the closure periods page

Create a period with a start, an end and a label, see the twelve months
ahead at a glance, delete one. The label is required and trimmed: it
goes straight onto the shop window.

Overlapping periods are refused, and the message names the one they
collide with. Two rows covering the same day would both be "in effect"
with no way to say which, and silently merging them would lose whichever
label the owner meant. Periods that merely touch — one ending the 10th,
the next starting the 11th — are fine.

The year view exists because a list of date ranges is precise and hard
to picture, while "have I left a gap in August?" is the question people
actually ask. It renders on the server; it only changes when the data
does.

A vacation period stays a source of truth and is never expanded into
exception rows, so a one-off exception placed inside one still wins and
nothing is overwritten. The page says so rather than leaving it to be
discovered.

The first version of the calendar built the months but never applied the
periods to them, so no closure would ever have shown. Caught before
commit.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012cSY9pVhZmJUKNN7wf1Myd

app/admin/vacances/VacationManager.tsx

@@ -0,0 +1,168 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+
+import { countDays } from '@/lib/schedule/vacations';
+
+import { createVacation, deleteVacation } from './actions';
+
+export type VacationRow = {
+  id: string;
+  startDate: string;
+  endDate: string;
+  labelFr: string;
+  labelEn: string | null;
+  isCurrent: boolean;
+};
+
+export default function VacationManager({
+  canEdit,
+  periods,
+}: {
+  canEdit: boolean;
+  periods: VacationRow[];
+}) {
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState('');
+  const [labelFr, setLabelFr] = useState('');
+  const [pending, startTransition] = useTransition();
+  const [message, setMessage] = useState<{ kind: 'ok' | 'error'; text: string } | null>(null);
+
+  function run(work: () => Promise<{ ok: true } | { ok: false; error: string }>, success: string) {
+    setMessage(null);
+    startTransition(async () => {
+      const result = await work();
+      if (result.ok) {
+        setMessage({ kind: 'ok', text: success });
+        setStartDate('');
+        setEndDate('');
+        setLabelFr('');
+      } else {
+        setMessage({ kind: 'error', text: result.error });
+      }
+    });
+  }
+
+  return (
+    <div className="mt-8 space-y-8">
+      {message ? (
+        <p
+          role="status"
+          className={`rounded-[var(--radius-md)] px-4 py-3 text-sm ${
+            message.kind === 'ok'
+              ? 'bg-[var(--success-tint)] text-[var(--success)]'
+              : 'bg-[var(--danger-tint)] text-[var(--danger)]'
+          }`}
+        >
+          {message.text}
+        </p>
+      ) : null}
+
+      {canEdit ? (
+        <section className="rounded-[var(--radius-md)] border border-[var(--line)] bg-[var(--surface)] p-5">
+          <h2 className="text-lg">Nouvelle période de fermeture</h2>
+
+          <div className="mt-4 flex flex-wrap items-end gap-3">
+            <label className="text-sm">
+              <span className="block text-[var(--ink-muted)]">Du</span>
+              <input
+                type="date"
+                value={startDate}
+                onChange={(event) => {
+                  setStartDate(event.target.value);
+                  if (!endDate) {
+                    setEndDate(event.target.value);
+                  }
+                }}
+                className="mt-1 rounded-[var(--radius-sm)] border border-[var(--line-strong)] bg-[var(--surface)] px-2 py-2 text-base"
+              />
+            </label>
+            <label className="text-sm">
+              <span className="block text-[var(--ink-muted)]">Au (inclus)</span>
+              <input
+                type="date"
+                value={endDate}
+                onChange={(event) => setEndDate(event.target.value)}
+                className="mt-1 rounded-[var(--radius-sm)] border border-[var(--line-strong)] bg-[var(--surface)] px-2 py-2 text-base"
+              />
+            </label>
+            <label className="min-w-56 flex-1 text-sm">
+              <span className="block text-[var(--ink-muted)]">Libellé affiché sur l’écran</span>
+              <input
+                type="text"
+                value={labelFr}
+                maxLength={80}
+                placeholder="Congés d’été"
+                onChange={(event) => setLabelFr(event.target.value)}
+                className="mt-1 w-full rounded-[var(--radius-sm)] border border-[var(--line-strong)] bg-[var(--surface)] px-2 py-2 text-base"
+              />
+            </label>
+          </div>
+
+          <div className="mt-4 flex flex-wrap items-center gap-3">
+            <button
+              type="button"
+              disabled={pending || !startDate || !endDate || labelFr.trim().length === 0}
+              onClick={() =>
+                run(
+                  () => createVacation({ startDate, endDate, labelFr }),
+                  'Période de fermeture enregistrée.',
+                )
+              }
+              className="rounded-[var(--radius-md)] bg-[var(--accent)] px-4 py-2.5 font-medium text-[var(--on-accent)] transition-colors hover:bg-[var(--accent-hover)] disabled:opacity-40"
+            >
+              {pending ? 'Enregistrement…' : 'Ajouter'}
+            </button>
+
+            {startDate && endDate && startDate <= endDate ? (
+              <p className="text-sm text-[var(--ink-muted)]">
+                {countDays({ startDate, endDate })} jour
+                {countDays({ startDate, endDate }) > 1 ? 's' : ''} de fermeture.
+              </p>
+            ) : null}
+          </div>
+        </section>
+      ) : null}
+
+      <section>
+        <h2 className="text-lg">Périodes enregistrées</h2>
+        {periods.length === 0 ? (
+          <p className="mt-3 text-sm text-[var(--ink-muted)]">Aucune fermeture prévue.</p>
+        ) : (
+          <ul className="mt-3 divide-y divide-[var(--line)] overflow-hidden rounded-[var(--radius-md)] border border-[var(--line)] bg-[var(--surface)]">
+            {periods.map((period) => (
+              <li key={period.id} className="flex flex-wrap items-center gap-x-3 gap-y-1 px-4 py-3">
+                <span className="font-medium">{period.labelFr}</span>
+                <span className="text-sm text-[var(--ink-muted)]">
+                  du {period.startDate} au {period.endDate} ·{' '}
+                  {countDays({ startDate: period.startDate, endDate: period.endDate })} jours
+                </span>
+                {period.isCurrent ? (
+                  <span className="rounded-[var(--radius-sm)] bg-[var(--accent-tint)] px-2 py-0.5 text-xs text-[var(--accent-ink)]">
+                    en cours
+                  </span>
+                ) : null}
+                {period.labelEn ? (
+                  <span className="text-sm text-[var(--ink-muted)]">« {period.labelEn} »</span>
+                ) : (
+                  <span className="text-xs text-[var(--ink-muted)]">traduction à venir</span>
+                )}
+
+                {canEdit ? (
+                  <button
+                    type="button"
+                    disabled={pending}
+                    onClick={() => run(() => deleteVacation(period.id), 'Période supprimée.')}
+                    className="ml-auto text-sm text-[var(--ink-muted)] underline-offset-2 hover:text-[var(--danger)] hover:underline disabled:opacity-40"
+                  >
+                    Supprimer
+                  </button>
+                ) : null}
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+    </div>
+  );
+}