WP-03: employee records and contracts on real data

Replaces the demo module behind the team directory and the employee
record with scoped queries, and adds contracts, amendments, work
permits and the forfait-jours fields.

Writing the end-to-end test exposed a modelling error worth naming:
first and last names lived only on User, so an employee without an
application account had no name at all — the directory rendered
"— Salarié E0007". Most sales staff never sign in, and the personnel
register requires their name, so the name belongs to the record, not
to the login. Moved to EmployeeProfile with a data migration that
carries the existing names down from User.

Contract rules are pure functions tested at the boundaries. The case
that matters is an open-ended contract: a CDI with no end date overlaps
every later period, which a naive comparison of two date pairs misses,
and two overlapping active contracts would count one employee twice in
payroll. The check runs inside the transaction, not only in the form.

Forfait jours is refused without a written individual agreement and a
dated employee consent: without them the arrangement is unenforceable,
and enabling it would also switch off every weekly-duration control.

Salary and bank details are not merely hidden when the capability is
missing — they are never loaded. A field absent from the response
cannot leak through HTML, a log or an error message.

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

src/app/(app)/equipe/AddEmployeeForm.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { useActionState } from 'react';
+
+import { Field, FormError, SubmitButton } from '@/components/ui/Form';
+import {
+  createEmployeeAction,
+  type ActionState,
+} from '@/server/employees/actions';
+
+export function AddEmployeeForm() {
+  const [state, formAction] = useActionState<ActionState, FormData>(
+    createEmployeeAction,
+    {},
+  );
+
+  return (
+    <form action={formAction} className="flex flex-col gap-3">
+      <div className="flex flex-wrap gap-3">
+        <Field label="Prénom" name="firstName" required />
+        <Field label="Nom" name="lastName" required />
+        <Field label="Matricule" name="employeeNumber" required />
+      </div>
+
+      <Field
+        label="Adresse électronique"
+        name="email"
+        type="email"
+        hint="Facultative. Un salarié sans adresse reste plannifiable et déclarable ; il n'aura simplement pas d'accès à l'application."
+      />
+
+      <FormError>{state.error}</FormError>
+
+      <div className="flex items-center gap-3">
+        <SubmitButton>Ajouter</SubmitButton>
+        {state.ok ? (
+          <span className="text-xs text-ok-soft-ink">Salarié ajouté.</span>
+        ) : null}
+      </div>
+    </form>
+  );
+}

src/app/(app)/equipe/[id]/page.tsx

@@ -2,20 +2,12 @@ import { notFound } from 'next/navigation';
 
 import { PageBody, PageHeader } from '@/components/shell/PageHeader';
 import { Badge } from '@/components/ui/Badge';
-import { Button } from '@/components/ui/Button';
-import { Card, CardHeader } from '@/components/ui/Card';
-import { POSTE_LABELS, posteShort, posteTokens } from '@/lib/design/postes';
-import { EMPLOYEES, findEmployee } from '@/lib/demo/equipe';
-import {
-  FICHE_COUNTERS,
-  FICHE_DOCUMENTS,
-  FICHE_SHIFTS,
-} from '@/lib/demo/fiche';
-import { fullName, initials } from '@/lib/demo/types';
+import { Card, CardHeader, EmptyState } from '@/components/ui/Card';
+import { getEmployee } from '@/server/employees/queries';
 
-export function generateStaticParams() {
-  return EMPLOYEES.map((employee) => ({ id: employee.id }));
-}
+export const dynamic = 'force-dynamic';
+
+const dateFormat = new Intl.DateTimeFormat('fr-FR', { dateStyle: 'long' });
 
 export default async function FichePage({
   params,
@@ -23,20 +15,24 @@ export default async function FichePage({
   params: Promise<{ id: string }>;
 }) {
   const { id } = await params;
-  const employee = findEmployee(id);
+  const employee = await getEmployee(id);
   if (!employee) notFound();
 
+  const active = employee.contracts.find(
+    (contract) => contract.status === 'ACTIVE',
+  );
+
   return (
     <PageBody>
       <PageHeader
-        title={fullName(employee)}
-        subtitle={`${employee.job} · Nantes Atlantis · entrée le ${employee.since}`}
-        actions={
-          <>
-            <Button>Documents</Button>
-            <Button variant="primary">Modifier le contrat</Button>
-          </>
-        }
+        title={`${employee.firstName} ${employee.lastName}`}
+        subtitle={[
+          employee.contract?.label,
+          employee.locationName,
+          `matricule ${employee.employeeNumber}`,
+        ]
+          .filter(Boolean)
+          .join(' · ')}
       />
 
       <div className="flex flex-wrap items-center gap-3 rounded-3 border border-line-1 bg-surface p-4">
@@ -44,104 +40,127 @@ export default async function FichePage({
           aria-hidden
           className="flex size-11 flex-none items-center justify-center rounded-full bg-surface-3 text-sm font-semibold text-ink-2"
         >
-          {initials(employee)}
+          {employee.firstName.charAt(0)}
+          {employee.lastName.charAt(0)}
         </span>
         <div className="min-w-0">
-          <p className="text-sm font-medium">{employee.contract}</p>
-          <p className="text-micro text-ink-3">
-            Poste principal · {POSTE_LABELS[employee.poste]}
+          <p className="text-sm font-medium">
+            {employee.email ?? 'Aucun compte applicatif'}
           </p>
+          <p className="text-micro text-ink-3">Rôle · {employee.roleName}</p>
         </div>
         <span className="flex-1" />
-        {employee.forfaitJours ? (
-          <Badge tone="accent">Forfait jours · 218 j</Badge>
+        {active?.forfaitJours ? (
+          <Badge tone="accent">
+            Forfait jours · {active.forfaitDaysPerYear ?? '—'} j
+          </Badge>
+        ) : active ? (
+          <Badge tone="neutral">{active.weeklyHours} h hebdomadaires</Badge>
+        ) : null}
+        {!employee.hasAccount ? (
+          <Badge tone="info">Sans accès applicatif</Badge>
         ) : null}
-        <ul className="flex flex-wrap items-center gap-2">
-          {FICHE_COUNTERS.map((counter) => (
-            <li
-              key={counter.label}
-              className="rounded-2 border border-line-1 bg-surface-2 px-3 py-1.5"
-            >
-              <span className="block text-micro text-ink-3">
-                {counter.label}
-              </span>
-              <span
-                className={`tnum block text-sm font-semibold ${
-                  counter.tone === 'warn' ? 'text-warn-soft-ink' : 'text-ink-1'
-                }`}
-              >
-                {counter.value}
-              </span>
-            </li>
-          ))}
-        </ul>
       </div>
 
-      <div className="grid gap-3 [grid-template-columns:repeat(auto-fit,minmax(400px,1fr))]">
-        <Card>
-          <CardHeader
-            title="Créneaux de la semaine"
-            action={
-              <Button size="sm" variant="ghost">
-                Voir le planning
-              </Button>
-            }
+      <Card>
+        <CardHeader
+          title="Contrats et avenants"
+          badge={<Badge tone="neutral">{employee.contracts.length}</Badge>}
+        />
+        {employee.contracts.length === 0 ? (
+          <EmptyState
+            title="Aucun contrat"
+            description="Ce salarié n’a pas encore de contrat. Il ne peut pas être planifié tant qu’aucune période n’est ouverte."
           />
+        ) : (
           <ul>
-            {FICHE_SHIFTS.map((shift, index) => {
-              const tokens = posteTokens(shift.poste);
-              return (
-                <li
-                  key={`${shift.day}-${index}`}
-                  className="flex items-center gap-3 border-b border-line-1 px-4 py-2.5 last:border-b-0"
-                >
-                  <span className="tnum w-28 flex-none text-xs text-ink-2">
-                    {shift.day}
-                  </span>
-                  <span
-                    className="flex-none rounded-2 px-1.5 py-0.5 text-micro font-semibold tracking-wide"
-                    style={{
-                      background: tokens.bg,
-                      color: tokens.fg,
-                      border: `1px solid ${tokens.edge}`,
-                    }}
-                    title={POSTE_LABELS[shift.poste]}
-                  >
-                    {posteShort(shift.poste)}
-                  </span>
-                  <span className="tnum flex-1 text-sm">{shift.time}</span>
-                  <span className="tnum flex-none text-xs text-ink-2">
-                    {shift.worked}
-                  </span>
-                  <Badge tone={shift.tone}>{shift.state}</Badge>
-                </li>
-              );
-            })}
-          </ul>
-        </Card>
-
-        <Card>
-          <CardHeader title="Documents" />
-          <ul>
-            {FICHE_DOCUMENTS.map((document) => (
+            {employee.contracts.map((contract) => (
               <li
-                key={document.label}
-                className="flex items-center gap-3 border-b border-line-1 px-4 py-3 last:border-b-0"
+                key={contract.id}
+                className="border-b border-line-1 px-4 py-3 last:border-b-0"
               >
-                <span className="min-w-0 flex-1">
-                  <span className="block truncate text-sm font-medium">
-                    {document.label}
+                <div className="flex flex-wrap items-center gap-2">
+                  <span className="font-medium">{contract.label}</span>
+                  {contract.forfaitJours ? (
+                    <Badge tone="accent">Forfait jours</Badge>
+                  ) : (
+                    <Badge tone="neutral">{contract.weeklyHours} h</Badge>
+                  )}
+                  <span className="tnum text-xs text-ink-2">
+                    {dateFormat.format(contract.startDate)}
+                    {contract.endDate
+                      ? ` → ${dateFormat.format(contract.endDate)}`
+                      : ' → en cours'}
                   </span>
-                  <span className="tnum block text-micro text-ink-3">
-                    {document.date}
-                  </span>
-                </span>
-                <Badge tone={document.tone}>{document.state}</Badge>
+                  <span className="flex-1" />
+                  {employee.canSeeSalary && contract.monthlySalary ? (
+                    <span className="tnum text-sm">
+                      {contract.monthlySalary} € brut
+                    </span>
+                  ) : null}
+                  <Badge
+                    tone={contract.status === 'ACTIVE' ? 'ok' : 'neutral'}
+                  >
+                    {contract.status === 'ACTIVE' ? 'En cours' : 'Terminé'}
+                  </Badge>
+                </div>
+
+                {contract.amendments.length > 0 ? (
+                  <ul className="mt-2 border-l-2 border-line-2 pl-3">
+                    {contract.amendments.map((amendment) => (
+                      <li
+                        key={amendment.id}
+                        className="py-1 text-xs text-ink-2"
+                      >
+                        <span className="tnum">
+                          {dateFormat.format(amendment.effectiveDate)}
+                        </span>{' '}
+                        — avenant{amendment.reason ? ` · ${amendment.reason}` : ''}
+                      </li>
+                    ))}
+                  </ul>
+                ) : null}
               </li>
             ))}
           </ul>
+        )}
+      </Card>
+
+      {employee.profile ? (
+        <Card>
+          <CardHeader title="Dossier personnel" />
+          <dl className="grid gap-x-8 gap-y-3 p-4 text-sm [grid-template-columns:repeat(auto-fit,minmax(200px,1fr))]">
+            <div>
+              <dt className="text-micro text-ink-3">Téléphone</dt>
+              <dd className="tnum">{employee.profile.phone ?? '—'}</dd>
+            </div>
+            <div>
+              <dt className="text-micro text-ink-3">Ville</dt>
+              <dd>{employee.profile.city ?? '—'}</dd>
+            </div>
+            <div>
+              <dt className="text-micro text-ink-3">
+                Numéro de sécurité sociale
+              </dt>
+              <dd className="tnum">
+                {/* Non chargé quand la capacité manque : un champ absent de la
+                    réponse ne peut fuiter ni par le HTML ni par un journal. */}
+                {employee.profile.socialSecurityNumber ?? (
+                  <span className="text-ink-3">Accès non autorisé</span>
+                )}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-micro text-ink-3">IBAN</dt>
+              <dd className="tnum">
+                {employee.profile.iban ?? (
+                  <span className="text-ink-3">Accès non autorisé</span>
+                )}
+              </dd>
+            </div>
+          </dl>
         </Card>
-      </div>
+      ) : null}
     </PageBody>
   );
 }

src/app/(app)/equipe/page.tsx

@@ -2,117 +2,128 @@ import Link from 'next/link';
 
 import { PageBody, PageHeader } from '@/components/shell/PageHeader';
 import { Badge, type Tone } from '@/components/ui/Badge';
-import { Button } from '@/components/ui/Button';
-import { POSTE_LABELS, posteShort, posteTokens } from '@/lib/design/postes';
-import { EMPLOYEES } from '@/lib/demo/equipe';
-import { fullName, initials } from '@/lib/demo/types';
+import { Card, CardHeader, EmptyState } from '@/components/ui/Card';
+import { AddEmployeeForm } from '@/app/(app)/equipe/AddEmployeeForm';
+import { listEmployees } from '@/server/employees/queries';
 
 export const metadata = { title: 'Équipe · PlanFlow' };
+export const dynamic = 'force-dynamic';
 
-const STATUS: Record<string, { label: string; tone: Tone }> = {
-  actif: { label: 'Actif', tone: 'ok' },
-  essai: { label: 'Période d’essai', tone: 'info' },
-  sortie: { label: 'Sortie prévue', tone: 'warn' },
+const STATUS_TONES: Record<string, { label: string; tone: Tone }> = {
+  ACTIVE: { label: 'Actif', tone: 'ok' },
+  INVITED: { label: 'Invitation en attente', tone: 'info' },
+  ARCHIVED: { label: 'Archivé', tone: 'neutral' },
 };
 
-export default function EquipePage() {
-  const actifs = EMPLOYEES.filter((e) => e.status !== 'sortie').length;
-  const essai = EMPLOYEES.filter((e) => e.status === 'essai').length;
+const dateFormat = new Intl.DateTimeFormat('fr-FR', { dateStyle: 'medium' });
+
+export default async function EquipePage() {
+  const employees = await listEmployees();
+  const withoutAccount = employees.filter((e) => !e.hasAccount).length;
 
   return (
     <PageBody>
       <PageHeader
         title="Équipe"
-        subtitle={`Nantes Atlantis · ${actifs} salariés actifs, ${essai} en période d’essai`}
-        actions={
-          <>
-            <Button>Registre unique du personnel</Button>
-            <Button variant="primary">Nouvelle embauche</Button>
-          </>
-        }
+        subtitle={`${employees.length} salarié${employees.length > 1 ? 's' : ''}${
+          withoutAccount > 0 ? ` · ${withoutAccount} sans compte applicatif` : ''
+        }`}
       />
 
-      <div className="overflow-x-auto rounded-3 border border-line-1 bg-surface">
-        <table className="w-full min-w-[880px] border-collapse text-sm">
-          <thead>
-            <tr className="border-b border-line-2 bg-surface-2 text-left text-micro font-semibold tracking-[0.06em] text-ink-3 uppercase">
-              <th scope="col" className="px-4 py-2.5">
-                Collaborateur
-              </th>
-              <th scope="col" className="px-4 py-2.5">
-                Poste principal
-              </th>
-              <th scope="col" className="px-4 py-2.5">
-                Contrat
-              </th>
-              <th scope="col" className="px-4 py-2.5">
-                Entrée
-              </th>
-              <th scope="col" className="px-4 py-2.5">
-                Statut
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {EMPLOYEES.map((employee) => {
-              const tokens = posteTokens(employee.poste);
-              const status = STATUS[employee.status] ?? STATUS.actif!;
-              return (
-                <tr
-                  key={employee.id}
-                  className="border-b border-line-1 last:border-b-0 hover:bg-surface-2"
-                >
-                  <td className="px-4 py-2.5">
-                    <Link
-                      href={`/equipe/${employee.id}`}
-                      className="flex items-center gap-2.5 rounded-2"
-                    >
-                      <span
-                        aria-hidden
-                        className="flex size-7 flex-none items-center justify-center rounded-full bg-surface-3 text-micro font-semibold text-ink-2"
-                      >
-                        {initials(employee)}
-                      </span>
-                      <span className="min-w-0">
-                        <span className="block truncate font-medium">
-                          {fullName(employee)}
-                        </span>
-                        <span className="block truncate text-micro text-ink-3">
-                          {employee.job}
-                        </span>
-                      </span>
-                    </Link>
-                  </td>
-                  <td className="px-4 py-2.5">
-                    <span
-                      className="inline-flex items-center gap-1.5 rounded-2 px-2 py-0.5 text-micro"
-                      style={{
-                        background: tokens.bg,
-                        color: tokens.fg,
-                        border: `1px solid ${tokens.edge}`,
-                      }}
-                    >
-                      <span className="font-semibold tracking-wide">
-                        {posteShort(employee.poste)}
-                      </span>
-                      {POSTE_LABELS[employee.poste]}
-                    </span>
-                  </td>
-                  <td className="tnum px-4 py-2.5 text-ink-2">
-                    {employee.contract}
-                  </td>
-                  <td className="tnum px-4 py-2.5 text-ink-2">
-                    {employee.since}
-                  </td>
-                  <td className="px-4 py-2.5">
-                    <Badge tone={status.tone}>{status.label}</Badge>
-                  </td>
+      <Card>
+        <CardHeader title="Effectif" />
+        {employees.length === 0 ? (
+          <EmptyState
+            title="Aucun salarié"
+            description="Ajoutez un premier salarié pour commencer à planifier."
+          />
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full min-w-[880px] border-collapse text-sm">
+              <thead>
+                <tr className="border-b border-line-2 bg-surface-2 text-left text-micro font-semibold tracking-[0.06em] text-ink-3 uppercase">
+                  <th className="px-4 py-2.5">Collaborateur</th>
+                  <th className="px-4 py-2.5">Matricule</th>
+                  <th className="px-4 py-2.5">Contrat</th>
+                  <th className="px-4 py-2.5">Établissement</th>
+                  <th className="px-4 py-2.5">Rôle</th>
+                  <th className="px-4 py-2.5">Statut</th>
                 </tr>
-              );
-            })}
-          </tbody>
-        </table>
-      </div>
+              </thead>
+              <tbody>
+                {employees.map((employee) => {
+                  const status =
+                    STATUS_TONES[employee.status] ?? STATUS_TONES.ACTIVE!;
+                  return (
+                    <tr
+                      key={employee.id}
+                      className="border-b border-line-1 last:border-b-0 hover:bg-surface-2"
+                    >
+                      <td className="px-4 py-2.5">
+                        <Link
+                          href={`/equipe/${employee.id}`}
+                          className="flex items-center gap-2.5 rounded-2"
+                        >
+                          <span
+                            aria-hidden
+                            className="flex size-7 flex-none items-center justify-center rounded-full bg-surface-3 text-micro font-semibold text-ink-2"
+                          >
+                            {employee.firstName.charAt(0)}
+                            {employee.lastName.charAt(0)}
+                          </span>
+                          <span className="min-w-0">
+                            <span className="block truncate font-medium">
+                              {employee.firstName} {employee.lastName}
+                            </span>
+                            <span className="block truncate text-micro text-ink-3">
+                              {employee.email ?? 'Sans compte applicatif'}
+                            </span>
+                          </span>
+                        </Link>
+                      </td>
+                      <td className="tnum px-4 py-2.5 text-ink-2">
+                        {employee.employeeNumber}
+                      </td>
+                      <td className="px-4 py-2.5">
+                        {employee.contract ? (
+                          <span className="flex flex-wrap items-center gap-1.5">
+                            <span>{employee.contract.label}</span>
+                            {employee.contract.forfaitJours ? (
+                              <Badge tone="accent">Forfait jours</Badge>
+                            ) : null}
+                            <span className="tnum text-micro text-ink-3">
+                              depuis le{' '}
+                              {dateFormat.format(employee.contract.since)}
+                            </span>
+                          </span>
+                        ) : (
+                          <Badge tone="warn">Sans contrat</Badge>
+                        )}
+                      </td>
+                      <td className="px-4 py-2.5 text-ink-2">
+                        {employee.locationName ?? '—'}
+                      </td>
+                      <td className="px-4 py-2.5 text-ink-2">
+                        {employee.roleName}
+                      </td>
+                      <td className="px-4 py-2.5">
+                        <Badge tone={status.tone}>{status.label}</Badge>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </Card>
+
+      <Card>
+        <CardHeader title="Ajouter un salarié" />
+        <div className="p-4">
+          <AddEmployeeForm />
+        </div>
+      </Card>
     </PageBody>
   );
 }