Faire de la fiche salarié un dossier à onglets, et le rendre saisissable

La fiche empilait tout sur une page, en lecture seule. Le dossier personnel existait pourtant en base — date et lieu de naissance, nationalité, adresse, contact d'urgence, NIR et IBAN chiffrés — sans qu'aucun écran ne l'écrive : un salarié créé restait un dossier vide que rien ne permettait de remplir. Cinq onglets, cinq routes : une fiche s'envoie par lien et se rouvre au même endroit. Le bandeau porte ce qui ne change pas d'un onglet à l'autre, et le gabarit le tient une fois pour toutes. Deux points d'écriture et non un seul. L'état civil et les coordonnées demandent `members.edit` ; le NIR, l'IBAN et le BIC exigent en plus de pouvoir les lire. Fondus dans un même formulaire, un profil habilité à modifier mais pas à lire aurait renvoyé des champs vides — et effacé ce qui ne lui avait jamais été montré. Le journal retient qu'ils ont été renseignés, jamais leur valeur. Les parcours qui déposaient une pièce ou ouvraient un accès passent désormais par l'onglet qui les porte. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-08-10 11:20:18 +02:00
1 parent 5a05fda2f9
commit c6abbaadc5
@@ -0,0 +1,66 @@
+import type { ReactNode } from 'react';
+
+/**
+ * Carte de consultation du dossier.
+ *
+ * Deux colonnes par ligne — l'intitulé, puis la valeur — et un filet entre
+ * chaque : c'est la forme d'un état civil, qui se parcourt du regard en
+ * cherchant un champ précis plutôt qu'en lisant de haut en bas.
+ */
+export function InfoCard({
+  title,
+  children,
+}: {
+  title: string;
+  children: ReactNode;
+}) {
+  return (
+    <section className="rounded-3 border border-line-1 bg-surface p-5">
+      <header className="flex items-center gap-2.5">
+        <span
+          aria-hidden
+          className="size-7 flex-none rounded-2 border border-accent bg-accent-soft"
+        />
+        <h2 className="text-md font-semibold">{title}</h2>
+      </header>
+      <dl className="mt-4">{children}</dl>
+    </section>
+  );
+}
+
+export function InfoRow({
+  label,
+  value,
+  tnum = false,
+}: {
+  label: string;
+  value: string | null | undefined;
+  /** Chiffres alignés : dates, téléphones, numéros. */
+  tnum?: boolean;
+}) {
+  return (
+    <div className="flex flex-wrap items-baseline gap-x-4 gap-y-1 border-b border-line-1 py-3 last:border-b-0">
+      <dt className="min-w-[11rem] flex-none text-sm font-medium text-ink-1">
+        {label}
+      </dt>
+      <dd
+        className={
+          value
+            ? `text-sm text-ink-2${tnum ? ' tnum' : ''}`
+            : 'text-sm text-ink-3'
+        }
+      >
+        {value || 'Non renseigné'}
+      </dd>
+    </div>
+  );
+}
+
+/** Grille à deux colonnes des cartes du dossier. */
+export function InfoGrid({ children }: { children: ReactNode }) {
+  return (
+    <div className="grid items-start gap-5 [grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))]">
+      {children}
+    </div>
+  );
+}
@@ -0,0 +1,58 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+import { cx } from '@/lib/cx';
+
+/**
+ * Onglets de la fiche salarié.
+ *
+ * Chaque onglet est une **route**, pas un état de composant : une fiche
+ * s'envoie par lien, se rouvre au même endroit, et le retour arrière ramène à
+ * l'onglet précédent plutôt qu'à la liste.
+ */
+
+const TABS = [
+  { segment: '', label: 'Informations personnelles' },
+  { segment: 'contrats', label: 'Contrats' },
+  { segment: 'planification', label: 'Planification et accès' },
+  { segment: 'absences', label: 'Congés et Absences' },
+  { segment: 'documents', label: 'Documents' },
+] as const;
+
+export function MemberTabs({ id }: { id: string }) {
+  const pathname = usePathname();
+  const base = `/equipe/${id}`;
+
+  return (
+    <nav
+      aria-label="Sections de la fiche"
+      className="flex gap-1 overflow-x-auto rounded-3 border border-line-1 bg-surface p-1.5"
+    >
+      {TABS.map((tab) => {
+        const href = tab.segment ? `${base}/${tab.segment}` : base;
+        const active = tab.segment
+          ? pathname.startsWith(href)
+          : pathname === base;
+
+        return (
+          <Link
+            key={tab.segment}
+            href={href}
+            aria-current={active ? 'page' : undefined}
+            className={cx(
+              'shrink-0 rounded-full px-3.5 py-1.5 text-sm font-medium whitespace-nowrap',
+              'transition-colors duration-[var(--d-1)] ease-organic',
+              active
+                ? 'bg-surface-3 text-ink-1'
+                : 'text-ink-2 hover:bg-surface-2 hover:text-ink-1',
+            )}
+          >
+            {tab.label}
+          </Link>
+        );
+      })}
+    </nav>
+  );
+}
@@ -0,0 +1,272 @@
+'use client';
+
+import { useActionState, useState } from 'react';
+
+import { InfoCard, InfoGrid, InfoRow } from '@/app/(app)/equipe/[id]/InfoCard';
+import { Button } from '@/components/ui/Button';
+import { Field, FormError, SubmitButton } from '@/components/ui/Form';
+import {
+  updateProfileAction,
+  updateSensitiveAction,
+  type ProfileActionState,
+} from '@/server/employees/profile-actions';
+
+/**
+ * Dossier personnel : consultation, puis saisie.
+ *
+ * Un seul écran et deux modes, plutôt qu'une page de lecture et une page de
+ * formulaire. Le dossier se corrige champ par champ, souvent au téléphone avec
+ * la personne concernée : la faire changer de page pour changer un chiffre
+ * ferait perdre le reste de vue.
+ */
+
+export interface ProfileFields {
+  firstName: string;
+  lastName: string;
+  birthDate: string;
+  birthPlace: string;
+  nationality: string;
+  personalEmail: string;
+  phone: string;
+  addressLine1: string;
+  postalCode: string;
+  city: string;
+  country: string;
+  emergencyContactName: string;
+  emergencyContactPhone: string;
+}
+
+export interface SensitiveFields {
+  socialSecurityNumber: string;
+  iban: string;
+  bic: string;
+}
+
+const empty: ProfileActionState = {};
+
+const dateFormat = new Intl.DateTimeFormat('fr-FR', { dateStyle: 'long' });
+
+function readableDate(value: string): string {
+  if (!value) return '';
+  const parsed = new Date(`${value}T00:00:00Z`);
+  return Number.isNaN(parsed.getTime()) ? value : dateFormat.format(parsed);
+}
+
+export function PersonalInfoPanel({
+  membershipId,
+  profile,
+  sensitive,
+  canEdit,
+}: {
+  membershipId: string;
+  profile: ProfileFields;
+  /** Absent quand la capacité de lecture manque : la carte n'est pas rendue. */
+  sensitive: SensitiveFields | null;
+  canEdit: boolean;
+}) {
+  const [editing, setEditing] = useState(false);
+  const [state, save] = useActionState(updateProfileAction, empty);
+  const [acknowledged, setAcknowledged] = useState<ProfileActionState>(empty);
+
+  // L'enregistrement referme le mode saisie, mais seulement après la réponse :
+  // refermer à l'envoi ferait disparaître le message d'erreur avec le
+  // formulaire, et avec lui ce que la personne venait de taper.
+  //
+  // La réponse est **acquittée** une fois pour toutes : sans cela, un succès
+  // resté en mémoire refermerait aussitôt le formulaire à la prochaine
+  // ouverture, et le dossier ne serait plus jamais modifiable.
+  if (state !== acknowledged && state.ok) {
+    setAcknowledged(state);
+    setEditing(false);
+  }
+
+  return (
+    <div className="flex flex-col gap-5">
+      {editing ? (
+        <form action={save} className="flex flex-col gap-5">
+          <input type="hidden" name="membershipId" value={membershipId} />
+
+          <InfoGrid>
+            <InfoCard title="État civil">
+              <div className="flex flex-col gap-3 pt-1">
+                <Field label="Prénom" name="firstName" required defaultValue={profile.firstName} />
+                <Field label="Nom de famille" name="lastName" required defaultValue={profile.lastName} />
+                <Field
+                  label="Date de naissance"
+                  name="birthDate"
+                  type="date"
+                  defaultValue={profile.birthDate}
+                />
+                <Field
+                  label="Lieu de naissance"
+                  name="birthPlace"
+                  defaultValue={profile.birthPlace}
+                  hint="Commune, et département pour la France."
+                />
+                <Field label="Nationalité" name="nationality" defaultValue={profile.nationality} />
+              </div>
+            </InfoCard>
+
+            <InfoCard title="Coordonnées">
+              <div className="flex flex-col gap-3 pt-1">
+                <Field
+                  label="Adresse électronique personnelle"
+                  name="personalEmail"
+                  type="email"
+                  defaultValue={profile.personalEmail}
+                />
+                <Field label="Téléphone mobile" name="phone" type="tel" defaultValue={profile.phone} />
+                <Field label="Adresse" name="addressLine1" defaultValue={profile.addressLine1} />
+                <div className="flex flex-wrap gap-3">
+                  <Field label="Code postal" name="postalCode" defaultValue={profile.postalCode} />
+                  <Field label="Ville" name="city" defaultValue={profile.city} />
+                </div>
+                <Field label="Pays" name="country" defaultValue={profile.country} />
+              </div>
+            </InfoCard>
+
+            <InfoCard title="Contact d’urgence">
+              <div className="flex flex-col gap-3 pt-1">
+                <Field
+                  label="Nom"
+                  name="emergencyContactName"
+                  defaultValue={profile.emergencyContactName}
+                />
+                <Field
+                  label="Téléphone"
+                  name="emergencyContactPhone"
+                  type="tel"
+                  defaultValue={profile.emergencyContactPhone}
+                />
+              </div>
+            </InfoCard>
+          </InfoGrid>
+
+          <FormError>{state.error}</FormError>
+
+          {/* Barre collante : le dossier est long, et le bouton d'enregistrement
+              ne doit pas se trouver hors de l'écran au moment où l'on finit de
+              corriger un champ du haut. */}
+          <div className="sticky bottom-4 flex flex-wrap items-center justify-center gap-3 rounded-3 border border-line-1 bg-surface p-3 shadow-[var(--shadow-1,0_1px_2px_rgba(0,0,0,0.06))]">
+            <Button type="button" onClick={() => setEditing(false)}>
+              Annuler
+            </Button>
+            <SubmitButton>Enregistrer les modifications</SubmitButton>
+          </div>
+        </form>
+      ) : (
+        <>
+          <InfoGrid>
+            <InfoCard title="État civil">
+              <InfoRow label="Prénom" value={profile.firstName} />
+              <InfoRow label="Nom de famille" value={profile.lastName} />
+              <InfoRow label="Date de naissance" value={readableDate(profile.birthDate)} tnum />
+              <InfoRow label="Lieu de naissance" value={profile.birthPlace} />
+              <InfoRow label="Nationalité" value={profile.nationality} />
+            </InfoCard>
+
+            <InfoCard title="Coordonnées">
+              <InfoRow label="Adresse électronique personnelle" value={profile.personalEmail} />
+              <InfoRow label="Téléphone mobile" value={profile.phone} tnum />
+              <InfoRow label="Adresse" value={profile.addressLine1} />
+              <InfoRow label="Code postal" value={profile.postalCode} tnum />
+              <InfoRow label="Ville" value={profile.city} />
+              <InfoRow label="Pays" value={profile.country} />
+            </InfoCard>
+
+            <InfoCard title="Contact d’urgence">
+              <InfoRow label="Nom" value={profile.emergencyContactName} />
+              <InfoRow label="Téléphone" value={profile.emergencyContactPhone} tnum />
+            </InfoCard>
+          </InfoGrid>
+
+          {canEdit ? (
+            <div className="flex justify-center">
+              <Button variant="primary" onClick={() => setEditing(true)}>
+                Modifier les informations personnelles
+              </Button>
+            </div>
+          ) : null}
+        </>
+      )}
+
+      {sensitive ? (
+        <SensitivePanel
+          membershipId={membershipId}
+          sensitive={sensitive}
+          canEdit={canEdit}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+/**
+ * NIR, IBAN et BIC.
+ *
+ * Séparés du reste, et pas seulement à l'écran : ils sont chiffrés au repos,
+ * leur lecture demande sa propre capacité, et leur écriture passe par une autre
+ * action. Les mêler au formulaire commun ferait dépendre leur sort d'un droit
+ * qui ne les concerne pas.
+ */
+function SensitivePanel({
+  membershipId,
+  sensitive,
+  canEdit,
+}: {
+  membershipId: string;
+  sensitive: SensitiveFields;
+  canEdit: boolean;
+}) {
+  const [editing, setEditing] = useState(false);
+  const [state, save] = useActionState(updateSensitiveAction, empty);
+  const [acknowledged, setAcknowledged] = useState<ProfileActionState>(empty);
+
+  if (state !== acknowledged && state.ok) {
+    setAcknowledged(state);
+    setEditing(false);
+  }
+
+  return (
+    <InfoCard title="Données protégées">
+      {editing ? (
+        <form action={save} className="flex flex-col gap-3 pt-1">
+          <input type="hidden" name="membershipId" value={membershipId} />
+          <Field
+            label="Numéro de sécurité sociale"
+            name="socialSecurityNumber"
+            inputMode="numeric"
+            defaultValue={sensitive.socialSecurityNumber}
+            hint="Quinze chiffres. Conservé chiffré ; jamais écrit au journal."
+          />
+          <Field label="IBAN" name="iban" defaultValue={sensitive.iban} />
+          <Field label="BIC" name="bic" defaultValue={sensitive.bic} />
+
+          <FormError>{state.error}</FormError>
+
+          <div className="flex items-center gap-3">
+            <SubmitButton>Enregistrer</SubmitButton>
+            <Button type="button" onClick={() => setEditing(false)}>
+              Annuler
+            </Button>
+          </div>
+        </form>
+      ) : (
+        <>
+          <InfoRow
+            label="Numéro de sécurité sociale"
+            value={sensitive.socialSecurityNumber}
+            tnum
+          />
+          <InfoRow label="IBAN" value={sensitive.iban} tnum />
+          <InfoRow label="BIC" value={sensitive.bic} tnum />
+          {canEdit ? (
+            <div className="pt-3">
+              <Button onClick={() => setEditing(true)}>Modifier</Button>
+            </div>
+          ) : null}
+        </>
+      )}
+    </InfoCard>
+  );
+}
@@ -0,0 +1,99 @@
+import { Badge, type Tone } from '@/components/ui/Badge';
+import { Card, CardHeader, EmptyState } from '@/components/ui/Card';
+import { listMemberAbsences, statusLabel } from '@/server/absences/queries';
+
+export const dynamic = 'force-dynamic';
+
+const dateFormat = new Intl.DateTimeFormat('fr-FR', { dateStyle: 'medium' });
+
+const STATUS_TONES: Record<string, Tone> = {
+  PENDING: 'warn',
+  ACCEPTED: 'ok',
+  DECLINED: 'danger',
+  CANCELLED: 'neutral',
+  EXPIRED: 'neutral',
+};
+
+const readable = (iso: string) => dateFormat.format(new Date(`${iso}T00:00:00Z`));
+
+export default async function AbsencesTab({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  const absences = await listMemberAbsences(id);
+
+  if (!absences) {
+    return (
+      <EmptyState
+        title="Absences non consultables"
+        description="Votre rôle ne donne pas accès aux congés des autres salariés."
+      />
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-5">
+      <Card>
+        <CardHeader title="Compteurs" />
+        {absences.counters.length === 0 ? (
+          <EmptyState
+            title="Aucun compteur"
+            description="Les compteurs s’ouvrent à la première acquisition de la période."
+          />
+        ) : (
+          <div className="grid gap-x-8 gap-y-4 p-4 [grid-template-columns:repeat(auto-fit,minmax(170px,1fr))]">
+            {absences.counters.map((counter) => (
+              <div key={`${counter.membershipId}-${counter.counterType}`}>
+                <p className="text-micro font-semibold text-ink-1">
+                  {counter.counterType}
+                </p>
+                <p className="tnum mt-1 text-lg font-semibold">
+                  {counter.balance}
+                </p>
+                <p className="tnum text-micro text-ink-3">
+                  {counter.accrued} acquis · {counter.taken} pris
+                </p>
+              </div>
+            ))}
+          </div>
+        )}
+      </Card>
+
+      <Card>
+        <CardHeader
+          title="Congés et absences"
+          badge={<Badge tone="neutral">{absences.requests.length}</Badge>}
+        />
+        {absences.requests.length === 0 ? (
+          <EmptyState title="Aucune absence enregistrée" />
+        ) : (
+          <ul>
+            {absences.requests.map((request) => (
+              <li
+                key={request.id}
+                className="flex flex-wrap items-center gap-2 border-b border-line-1 px-4 py-3 last:border-b-0"
+              >
+                <span className="font-medium">{request.typeLabel}</span>
+                <span className="tnum text-xs text-ink-2">
+                  {readable(request.startDate)}
+                  {request.endDate !== request.startDate
+                    ? ` → ${readable(request.endDate)}`
+                    : ''}
+                </span>
+                <span className="tnum text-xs text-ink-3">
+                  {request.days} j
+                </span>
+                <span className="flex-1" />
+                <Badge tone={STATUS_TONES[request.status] ?? 'neutral'}>
+                  {statusLabel(request.status)}
+                </Badge>
+              </li>
+            ))}
+          </ul>
+        )}
+      </Card>
+    </div>
+  );
+}
@@ -0,0 +1,122 @@
+import { notFound } from 'next/navigation';
+
+import { InfoCard, InfoRow } from '@/app/(app)/equipe/[id]/InfoCard';
+import { Badge } from '@/components/ui/Badge';
+import { Card, CardHeader, EmptyState } from '@/components/ui/Card';
+import { getEmployee } from '@/server/employees/queries';
+
+export const dynamic = 'force-dynamic';
+
+const dateFormat = new Intl.DateTimeFormat('fr-FR', { dateStyle: 'long' });
+
+export default async function ContractsTab({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  const employee = await getEmployee(id);
+  if (!employee) notFound();
+
+  const active = employee.contracts.find(
+    (contract) => contract.status === 'ACTIVE',
+  );
+  const past = employee.contracts.filter(
+    (contract) => contract.id !== active?.id,
+  );
+
+  return (
+    <div className="flex flex-col gap-5">
+      {active ? (
+        <InfoCard title="Contrat en cours">
+          <InfoRow label="Type" value={active.label} />
+          <InfoRow label="Début du contrat" value={dateFormat.format(active.startDate)} tnum />
+          <InfoRow
+            label="Fin du contrat"
+            value={active.endDate ? dateFormat.format(active.endDate) : ''}
+            tnum
+          />
+          <InfoRow label="Emploi" value={employee.headline.jobTitle} />
+          <InfoRow
+            label="Organisation du temps"
+            value={
+              active.forfaitJours
+                ? `Forfait jours · ${active.forfaitDaysPerYear ?? '—'} jours par an`
+                : `${active.weeklyHours} heures hebdomadaires`
+            }
+          />
+          {employee.canSeeSalary ? (
+            <InfoRow
+              label="Rémunération mensuelle brute"
+              value={active.monthlySalary ? `${active.monthlySalary} €` : ''}
+              tnum
+            />
+          ) : null}
+          <InfoRow label="Établissement" value={employee.locationName} />
+        </InfoCard>
+      ) : (
+        <EmptyState
+          title="Aucun contrat en cours"
+          description="Ce salarié ne peut être ni planifié ni déclaré tant qu’aucune période n’est ouverte."
+        />
+      )}
+
+      <Card>
+        <CardHeader
+          title="Tous les contrats et avenants"
+          badge={<Badge tone="neutral">{employee.contracts.length}</Badge>}
+        />
+        {employee.contracts.length === 0 ? (
+          <EmptyState title="Aucun contrat enregistré" />
+        ) : (
+          <ul>
+            {[...(active ? [active] : []), ...past].map((contract) => (
+              <li
+                key={contract.id}
+                className="border-b border-line-1 px-4 py-3 last:border-b-0"
+              >
+                <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="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>
+    </div>
+  );
+}
@@ -0,0 +1,59 @@
+import { notFound } from 'next/navigation';
+
+import { DocumentsPanel } from '@/app/(app)/equipe/[id]/DocumentsPanel';
+import { InvitationPanel } from '@/app/(app)/equipe/[id]/InvitationPanel';
+import { Badge } from '@/components/ui/Badge';
+import { Card, CardHeader, EmptyState } from '@/components/ui/Card';
+import { listDocuments } from '@/server/documents/queries';
+import { getEmployee } from '@/server/employees/queries';
+
+export const dynamic = 'force-dynamic';
+
+export default async function DocumentsTab({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  const employee = await getEmployee(id);
+  if (!employee) notFound();
+
+  // `members.documents.view` peut manquer là où `members.view` est accordée :
+  // la section disparaît alors, plutôt que d'échouer sur toute la page.
+  const documents = await listDocuments(id).catch(() => null);
+
+  return (
+    <div className="flex flex-col gap-5">
+      {documents ? (
+        <Card>
+          <CardHeader
+            title="Pièces du dossier"
+            badge={<Badge tone="neutral">{documents.documents.length}</Badge>}
+          />
+          <DocumentsPanel
+            membershipId={employee.id}
+            documents={documents.documents}
+            canManage={documents.canManage}
+          />
+        </Card>
+      ) : (
+        <EmptyState
+          title="Documents non consultables"
+          description="Votre rôle ne donne pas accès aux pièces du dossier."
+        />
+      )}
+
+      {employee.canInvite ? (
+        <Card>
+          <CardHeader title="Accès à l’application" />
+          <InvitationPanel
+            membershipId={employee.id}
+            defaultEmail={employee.email ?? employee.profile?.personalEmail ?? ''}
+            hasAccount={employee.hasAccount}
+            invitation={employee.invitation}
+          />
+        </Card>
+      ) : null}
+    </div>
+  );
+}
@@ -0,0 +1,118 @@
+import { notFound } from 'next/navigation';
+import type { ReactNode } from 'react';
+
+import { MemberTabs } from '@/app/(app)/equipe/[id]/MemberTabs';
+import { PageBody } from '@/components/shell/PageHeader';
+import { Badge } from '@/components/ui/Badge';
+import { getEmployee, getMemberPlacement } from '@/server/employees/queries';
+
+export const dynamic = 'force-dynamic';
+
+const dateFormat = new Intl.DateTimeFormat('fr-FR', { dateStyle: 'full' });
+
+/**
+ * Gabarit de la fiche salarié.
+ *
+ * Le bandeau et les onglets sont tenus ici, et non répétés dans chaque onglet :
+ * ils ne changent pas d'un onglet à l'autre, et les rejouer ferait clignoter
+ * l'identité de la personne consultée à chaque navigation.
+ */
+export default async function MemberLayout({
+  children,
+  params,
+}: {
+  children: ReactNode;
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  const employee = await getEmployee(id);
+  if (!employee) notFound();
+
+  const placement = await getMemberPlacement(id);
+  const primaryTeam =
+    placement?.teams.find((team) => team.isPrimary) ?? placement?.teams[0];
+
+  return (
+    <PageBody>
+      <header className="rounded-3 bg-surface-2 p-6">
+        <div className="flex flex-wrap items-start gap-4">
+          <span
+            aria-hidden
+            className="flex size-14 flex-none items-center justify-center rounded-full bg-accent-soft text-md font-semibold text-accent-soft-ink"
+          >
+            {employee.firstName.charAt(0)}
+            {employee.lastName.charAt(0)}
+          </span>
+          <div className="min-w-0">
+            <h1 className="text-2xl font-semibold tracking-[-0.018em]">
+              {employee.firstName} {employee.lastName}
+            </h1>
+            <p className="mt-0.5 text-sm text-ink-2">
+              {employee.headline.jobTitle ??
+                `Matricule ${employee.employeeNumber}`}
+            </p>
+          </div>
+          <span className="flex-1" />
+          <div className="flex flex-wrap items-center gap-2">
+            {!employee.hasAccount ? (
+              <Badge tone="info">Sans accès applicatif</Badge>
+            ) : null}
+            <Badge tone="accent">{employee.roleName}</Badge>
+          </div>
+        </div>
+
+        <dl className="mt-6 grid gap-x-6 gap-y-4 [grid-template-columns:repeat(auto-fit,minmax(150px,1fr))]">
+          <HeadlineItem
+            label="Début du contrat"
+            value={
+              employee.contract
+                ? dateFormat.format(employee.contract.since)
+                : null
+            }
+          />
+          <HeadlineItem
+            label="Fin du contrat"
+            value={
+              employee.headline.contractEnd
+                ? dateFormat.format(employee.headline.contractEnd)
+                : null
+            }
+          />
+          <HeadlineItem
+            label="Type de contrat"
+            value={employee.contract?.label ?? null}
+          />
+          <HeadlineItem
+            label="Établissement"
+            value={employee.locationName}
+          />
+          <HeadlineItem label="Équipe" value={primaryTeam?.name ?? null} />
+          <HeadlineItem
+            label="Responsable hiérarchique"
+            value={employee.headline.lineManagerName}
+          />
+        </dl>
+      </header>
+
+      <MemberTabs id={id} />
+
+      {children}
+    </PageBody>
+  );
+}
+
+/** Un tiret, et non « non renseigné » : le bandeau se lit d'un balayage. */
+function HeadlineItem({
+  label,
+  value,
+}: {
+  label: string;
+  value: string | null;
+}) {
+  return (
+    <div className="min-w-0">
+      <dt className="text-micro font-semibold text-ink-1">{label}</dt>
+      <dd className="mt-1 truncate text-sm text-ink-2">{value ?? '—'}</dd>
+    </div>
+  );
+}
@@ -1,18 +1,20 @@
 import { notFound } from 'next/navigation';

-import { DocumentsPanel } from '@/app/(app)/equipe/[id]/DocumentsPanel';
-import { InvitationPanel } from '@/app/(app)/equipe/[id]/InvitationPanel';
-import { PageBody, PageHeader } from '@/components/shell/PageHeader';
-import { Badge } from '@/components/ui/Badge';
-import { Card, CardHeader, EmptyState } from '@/components/ui/Card';
-import { listDocuments } from '@/server/documents/queries';
+import {
+  PersonalInfoPanel,
+  type ProfileFields,
+  type SensitiveFields,
+} from '@/app/(app)/equipe/[id]/PersonalInfoPanel';
+import { EmptyState } from '@/components/ui/Card';
 import { getEmployee } from '@/server/employees/queries';

 export const dynamic = 'force-dynamic';

-const dateFormat = new Intl.DateTimeFormat('fr-FR', { dateStyle: 'long' });
+/** `null` et `undefined` deviennent la chaîne vide : un `<input>` non contrôlé
+ *  affiche « null » sinon. */
+const text = (value: string | null | undefined): string => value ?? '';

-export default async function FichePage({
+export default async function PersonalTab({
  params,
 }: {
  params: Promise<{ id: string }>;
@@ -21,181 +23,49 @@ export default async function FichePage({
  const employee = await getEmployee(id);
  if (!employee) notFound();

-  // `members.documents.view` peut manquer là où `members.view` est accordée :
-  // la section disparaît alors, plutôt que d'échouer sur toute la page.
-  const documents = await listDocuments(id).catch(() => null);
+  if (!employee.profile) {
+    return (
+      <EmptyState
+        title="Aucun dossier personnel"
+        description="Ce salarié n’a pas de dossier. Il a probablement été créé hors de l’application ; reprenez sa création depuis la liste de l’équipe."
+      />
+    );
+  }

-  const active = employee.contracts.find(
-    (contract) => contract.status === 'ACTIVE',
-  );
+  const profile: ProfileFields = {
+    firstName: text(employee.profile.firstName),
+    lastName: text(employee.profile.lastName),
+    birthDate: employee.profile.birthDate
+      ? employee.profile.birthDate.toISOString().slice(0, 10)
+      : '',
+    birthPlace: text(employee.profile.birthPlace),
+    nationality: text(employee.profile.nationality),
+    personalEmail: text(employee.profile.personalEmail),
+    phone: text(employee.profile.phone),
+    addressLine1: text(employee.profile.addressLine1),
+    postalCode: text(employee.profile.postalCode),
+    city: text(employee.profile.city),
+    country: text(employee.profile.country),
+    emergencyContactName: text(employee.profile.emergencyContactName),
+    emergencyContactPhone: text(employee.profile.emergencyContactPhone),
+  };
+
+  const sensitive: SensitiveFields | null = employee.profile.sensitive
+    ? {
+        socialSecurityNumber: text(
+          employee.profile.sensitive.socialSecurityNumber,
+        ),
+        iban: text(employee.profile.sensitive.iban),
+        bic: text(employee.profile.sensitive.bic),
+      }
+    : null;

  return (
-    <PageBody>
-      <PageHeader
-        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">
-        <span
-          aria-hidden
-          className="flex size-11 flex-none items-center justify-center rounded-full bg-surface-3 text-sm font-semibold text-ink-2"
-        >
-          {employee.firstName.charAt(0)}
-          {employee.lastName.charAt(0)}
-        </span>
-        <div className="min-w-0">
-          <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" />
-        {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}
-      </div>
-
-      {documents ? (
-        <Card>
-          <CardHeader
-            title="Pièces du dossier"
-            badge={<Badge tone="neutral">{documents.documents.length}</Badge>}
-          />
-          <DocumentsPanel
-            membershipId={employee.id}
-            documents={documents.documents}
-            canManage={documents.canManage}
-          />
-        </Card>
-      ) : null}
-
-      {employee.canInvite ? (
-        <Card>
-          <CardHeader title="Accès à l’application" />
-          <InvitationPanel
-            membershipId={employee.id}
-            defaultEmail={
-              employee.email ?? employee.profile?.personalEmail ?? ''
-            }
-            hasAccount={employee.hasAccount}
-            invitation={employee.invitation}
-          />
-        </Card>
-      ) : null}
-
-      <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>
-            {employee.contracts.map((contract) => (
-              <li
-                key={contract.id}
-                className="border-b border-line-1 px-4 py-3 last:border-b-0"
-              >
-                <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="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>
-      ) : null}
-    </PageBody>
+    <PersonalInfoPanel
+      membershipId={employee.id}
+      profile={profile}
+      sensitive={sensitive}
+      canEdit={employee.canEdit}
+    />
  );
 }
@@ -0,0 +1,82 @@
+import { notFound } from 'next/navigation';
+
+import { InfoCard, InfoGrid, InfoRow } from '@/app/(app)/equipe/[id]/InfoCard';
+import { Badge } from '@/components/ui/Badge';
+import { getEmployee, getMemberPlacement } from '@/server/employees/queries';
+
+export const dynamic = 'force-dynamic';
+
+/**
+ * Rattachement et périmètre.
+ *
+ * L'établissement de rattachement est en lecture seule : il est porté par le
+ * contrat, et le changer sans avenant ferait diverger le planning du document
+ * opposable.
+ */
+export default async function PlacementTab({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  const employee = await getEmployee(id);
+  if (!employee) notFound();
+
+  const placement = await getMemberPlacement(id);
+
+  return (
+    <InfoGrid>
+      <InfoCard title="Rattachement">
+        <InfoRow
+          label="Établissement"
+          value={placement?.contractLocationName ?? employee.locationName}
+        />
+        <InfoRow
+          label="Équipes"
+          value={
+            placement && placement.teams.length > 0
+              ? placement.teams
+                  .map((team) =>
+                    team.isPrimary ? `${team.name} (principale)` : team.name,
+                  )
+                  .join(', ')
+              : ''
+          }
+        />
+        <InfoRow label="Matricule" value={employee.employeeNumber} tnum />
+        <InfoRow
+          label="Responsable hiérarchique"
+          value={employee.headline.lineManagerName}
+        />
+      </InfoCard>
+
+      <InfoCard title="Périmètre d’accès">
+        <div className="flex flex-wrap items-baseline gap-x-4 gap-y-1 border-b border-line-1 py-3">
+          <dt className="min-w-[11rem] flex-none text-sm font-medium text-ink-1">
+            Accès généralisé
+          </dt>
+          <dd className="text-sm">
+            {placement?.allLocations ? (
+              <Badge tone="ok">Tous les établissements</Badge>
+            ) : (
+              <Badge tone="neutral">Limité</Badge>
+            )}
+          </dd>
+        </div>
+        <InfoRow
+          label="Établissements"
+          value={
+            placement?.allLocations
+              ? 'Tous, ouvertures futures comprises'
+              : (placement?.scopedLocations.join(', ') ?? '')
+          }
+        />
+        <InfoRow
+          label="Équipes"
+          value={placement?.scopedTeams.join(', ') ?? ''}
+        />
+        <InfoRow label="Rôle" value={employee.roleName} />
+      </InfoCard>
+    </InfoGrid>
+  );
+}