Donner aux indicateurs RH leur profondeur temporelle

Le tableau de bord montrait un mois. Un effectif, un taux de rotation ou un
absentéisme lus sur un seul mois ne disent rien : c'est la pente qui informe, et
elle demande une série.

Trois analyses sur douze mois glissants — effectifs, heures, absences — servies
par une seule requête. C'est ce qui garantit que l'effectif moyen affiché en
« effectifs » soit exactement le dénominateur du taux d'absentéisme affiché en
« absences ». Trois calculs séparés finiraient par diverger d'un arrondi, et
l'écart se plaide mal devant un CSE.

Les mois se découpent en mémoire après une lecture par nature, pas en douze
requêtes par indicateur : sur une année glissante, la seconde approche rend
l'écran inutilisable.

Le graphique est en HTML. Douze barres ne justifient pas 90 ko de dépendance, et
la CSP interdit de toute façon toute origine tierce. La hauteur ne porte jamais
l'information seule — chaque barre affiche sa valeur, et le tableau reste la
source. Une valeur non calculable s'y dessine en gris plutôt qu'à zéro : « 0 %
de rotation » sur un établissement vide est une affirmation fausse, pas une
absence de mouvement.

Le mois de chaque ligne mène à ses lignes sources. Un indicateur qu'on ne peut
pas ouvrir ne se corrige pas, il se conteste.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/app/(app)/rh/analyses/AnalysisShell.tsx

@@ -0,0 +1,105 @@
+import Link from 'next/link';
+
+import { PageBody, PageHeader } from '@/components/shell/PageHeader';
+import { Card, CardHeader } from '@/components/ui/Card';
+import type { AnalyticsSeries } from '@/server/hr/analytics';
+
+/**
+ * Cadre commun aux trois analyses.
+ *
+ * Même en-tête, même sélecteur d'établissement, mêmes onglets : trois écrans
+ * qui répondent à trois questions sur le même jeu de données n'ont pas de
+ * raison de se présenter différemment.
+ */
+
+export const ANALYSES = [
+  { key: 'effectifs', href: '/rh/analyses/effectifs', label: 'Effectifs' },
+  { key: 'heures', href: '/rh/analyses/heures', label: 'Heures' },
+  { key: 'absences', href: '/rh/analyses/absences', label: 'Absences' },
+] as const;
+
+export type AnalysisKey = (typeof ANALYSES)[number]['key'];
+
+export function AnalysisShell({
+  current,
+  title,
+  subtitle,
+  series,
+  children,
+  footnote,
+}: {
+  current: AnalysisKey;
+  title: string;
+  subtitle: string;
+  series: AnalyticsSeries;
+  children: React.ReactNode;
+  footnote: string;
+}) {
+  const withLocation = (href: string) =>
+    series.location ? `${href}?etablissement=${series.location.id}` : href;
+
+  return (
+    <PageBody>
+      <PageHeader
+        title={title}
+        subtitle={`${series.location?.name ?? 'Tous établissements'} · ${subtitle}`}
+        actions={
+          <nav aria-label="Analyses" className="flex gap-1">
+            {ANALYSES.map((analysis) => (
+              <Link
+                key={analysis.key}
+                href={withLocation(analysis.href)}
+                aria-current={analysis.key === current ? 'page' : undefined}
+                className={
+                  analysis.key === current
+                    ? 'flex h-8 items-center rounded-2 border border-line-3 bg-surface-2 px-3 text-sm font-medium text-ink-1'
+                    : 'flex h-8 items-center rounded-2 px-3 text-sm text-ink-2 hover:bg-surface-2'
+                }
+              >
+                {analysis.label}
+              </Link>
+            ))}
+          </nav>
+        }
+      />
+
+      {series.locations.length > 1 ? (
+        <Card>
+          <CardHeader title="Établissement" />
+          <div className="flex flex-wrap gap-1 px-4 py-3">
+            {series.locations.map((location) => (
+              <Link
+                key={location.id}
+                href={`${ANALYSES.find((a) => a.key === current)?.href}?etablissement=${location.id}`}
+                aria-current={
+                  location.id === series.location?.id ? 'page' : undefined
+                }
+                className={
+                  location.id === series.location?.id
+                    ? 'flex h-7 items-center rounded-2 border border-line-3 bg-surface-2 px-2.5 text-xs font-medium text-ink-1'
+                    : 'flex h-7 items-center rounded-2 px-2.5 text-xs text-ink-2 hover:bg-surface-2'
+                }
+              >
+                {location.name}
+              </Link>
+            ))}
+          </div>
+        </Card>
+      ) : null}
+
+      {children}
+
+      <p className="max-w-[70ch] text-xs leading-[var(--lh-prose)] text-ink-3">
+        {footnote}
+      </p>
+    </PageBody>
+  );
+}
+
+/** Mois abrégé, pour l'axe du graphique. « septembre 2026 » → « sept. 26 ». */
+export function shortMonth(label: string): string {
+  const [name, year] = label.split(' ');
+  if (!name || !year) return label;
+  const abbreviated = name.length > 4 ? `${name.slice(0, 4)}.` : name;
+  return `${abbreviated} ${year.slice(2)}`;
+}

src/app/(app)/rh/analyses/absences/page.tsx

@@ -0,0 +1,100 @@
+import Link from 'next/link';
+
+import {
+  AnalysisShell,
+  shortMonth,
+} from '@/app/(app)/rh/analyses/AnalysisShell';
+import { SeriesChart } from '@/components/hr/SeriesChart';
+import { Card, CardHeader } from '@/components/ui/Card';
+import { monthOf } from '@/domain/planning/month';
+import { getAnalyticsSeries } from '@/server/hr/analytics';
+
+export const metadata = { title: 'Analyse des absences · PlanFlow' };
+export const dynamic = 'force-dynamic';
+
+interface PageProps {
+  searchParams: Promise<{ etablissement?: string }>;
+}
+
+export default async function AbsencesAnalysePage({ searchParams }: PageProps) {
+  const { etablissement } = await searchParams;
+  const series = await getAnalyticsSeries(monthOf(new Date()), 12, etablissement);
+  const last = series.points[series.points.length - 1];
+
+  return (
+    <AnalysisShell
+      current="absences"
+      title="Absences"
+      subtitle={
+        last?.absenteeismRate === null || last === undefined
+          ? 'Taux non calculable'
+          : `${last.absenteeismRate} % d’absentéisme ce mois`
+      }
+      series={series}
+      footnote="Le taux rapporte les jours d’absence aux jours théoriquement travaillés, pas aux jours calendaires : rapporter à trente donnerait un taux artificiellement bas et ferait passer un problème réel pour du bruit. La colonne « dont arrêts » agrège les absences relevant de la Sécurité sociale sans jamais nommer de salarié — un taux ne doit pas devenir un moyen d’identifier qui est malade."
+    >
+      <Card>
+        <CardHeader title="Taux d’absentéisme mensuel" />
+        <SeriesChart
+          tone="warn"
+          points={series.points.map((point) => ({
+            label: point.label,
+            short: shortMonth(point.label),
+            value: point.absenteeismRate,
+          }))}
+          format={(value) => `${value} %`}
+        />
+      </Card>
+
+      <Card>
+        <CardHeader title="Détail mensuel" />
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-line-1 text-left">
+                {[
+                  'Mois',
+                  'Jours d’absence',
+                  'dont arrêts',
+                  'Jours théoriques',
+                  'Taux',
+                ].map((heading) => (
+                  <th
+                    key={heading}
+                    className="px-4 py-2 text-micro font-semibold tracking-[0.06em] text-ink-3 uppercase"
+                  >
+                    {heading}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-line-1">
+              {[...series.points].reverse().map((point) => (
+                <tr key={point.param}>
+                  <td className="px-4 py-2">
+                    <Link
+                      href={`/?mois=${point.param}&liste=absences${series.location ? `&etablissement=${series.location.id}` : ''}`}
+                      className="hover:underline"
+                    >
+                      {point.label}
+                    </Link>
+                  </td>
+                  <td className="px-4 py-2 tnum">{point.absenceDays}</td>
+                  <td className="px-4 py-2 tnum">{point.sickDays}</td>
+                  <td className="px-4 py-2 tnum">
+                    {point.theoreticalWorkedDays}
+                  </td>
+                  <td className="px-4 py-2 tnum">
+                    {point.absenteeismRate === null
+                      ? '—'
+                      : `${point.absenteeismRate} %`}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </Card>
+    </AnalysisShell>
+  );
+}

src/app/(app)/rh/analyses/effectifs/page.tsx

@@ -0,0 +1,93 @@
+import Link from 'next/link';
+
+import {
+  AnalysisShell,
+  shortMonth,
+} from '@/app/(app)/rh/analyses/AnalysisShell';
+import { SeriesChart } from '@/components/hr/SeriesChart';
+import { Card, CardHeader } from '@/components/ui/Card';
+import { monthOf } from '@/domain/planning/month';
+import { getAnalyticsSeries } from '@/server/hr/analytics';
+
+export const metadata = { title: 'Analyse des effectifs · PlanFlow' };
+export const dynamic = 'force-dynamic';
+
+interface PageProps {
+  searchParams: Promise<{ etablissement?: string }>;
+}
+
+export default async function EffectifsPage({ searchParams }: PageProps) {
+  const { etablissement } = await searchParams;
+  const series = await getAnalyticsSeries(monthOf(new Date()), 12, etablissement);
+  const last = series.points[series.points.length - 1];
+
+  return (
+    <AnalysisShell
+      current="effectifs"
+      title="Effectifs"
+      subtitle={`${last?.closingHeadcount ?? 0} salariés en fin de mois`}
+      series={series}
+      footnote="Le taux de rotation rapporte la moyenne des entrées et des sorties à l’effectif moyen : ne compter que les départs sous-estimerait une équipe qui recrute autant qu’elle perd. Sur un effectif nul il n’est pas calculé — « 0 % » y serait une affirmation fausse, pas une absence de mouvement."
+    >
+      <Card>
+        <CardHeader title="Effectif en fin de mois" />
+        <SeriesChart
+          points={series.points.map((point) => ({
+            label: point.label,
+            short: shortMonth(point.label),
+            value: point.closingHeadcount,
+          }))}
+          format={(value) => String(value)}
+        />
+      </Card>
+
+      <Card>
+        <CardHeader title="Détail mensuel" />
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-line-1 text-left">
+                {['Mois', 'Fin de mois', 'Moyen', 'Entrées', 'Sorties', 'Rotation'].map(
+                  (heading) => (
+                    <th
+                      key={heading}
+                      className="px-4 py-2 text-micro font-semibold tracking-[0.06em] text-ink-3 uppercase"
+                    >
+                      {heading}
+                    </th>
+                  ),
+                )}
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-line-1">
+              {[...series.points].reverse().map((point) => (
+                <tr key={point.param}>
+                  <td className="px-4 py-2">
+                    {/* Chaque chiffre mène à ses lignes sources : un indicateur
+                        qu'on ne peut pas ouvrir ne se corrige pas, il se
+                        conteste. */}
+                    <Link
+                      href={`/?mois=${point.param}&liste=entrees${series.location ? `&etablissement=${series.location.id}` : ''}`}
+                      className="hover:underline"
+                    >
+                      {point.label}
+                    </Link>
+                  </td>
+                  <td className="px-4 py-2 tnum">{point.closingHeadcount}</td>
+                  <td className="px-4 py-2 tnum">{point.averageHeadcount}</td>
+                  <td className="px-4 py-2 tnum">{point.entries}</td>
+                  <td className="px-4 py-2 tnum">{point.exits}</td>
+                  <td className="px-4 py-2 tnum">
+                    {point.turnoverRate === null
+                      ? '—'
+                      : `${point.turnoverRate} %`}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </Card>
+    </AnalysisShell>
+  );
+}

src/app/(app)/rh/analyses/heures/page.tsx

@@ -0,0 +1,99 @@
+import {
+  AnalysisShell,
+  shortMonth,
+} from '@/app/(app)/rh/analyses/AnalysisShell';
+import { SeriesChart } from '@/components/hr/SeriesChart';
+import { Badge } from '@/components/ui/Badge';
+import { Card, CardHeader } from '@/components/ui/Card';
+import { formatMinutes } from '@/domain/counters/week';
+import { monthOf } from '@/domain/planning/month';
+import { getAnalyticsSeries } from '@/server/hr/analytics';
+
+export const metadata = { title: 'Analyse des heures · PlanFlow' };
+export const dynamic = 'force-dynamic';
+
+interface PageProps {
+  searchParams: Promise<{ etablissement?: string }>;
+}
+
+export default async function HeuresPage({ searchParams }: PageProps) {
+  const { etablissement } = await searchParams;
+  const series = await getAnalyticsSeries(monthOf(new Date()), 12, etablissement);
+  const last = series.points[series.points.length - 1];
+
+  return (
+    <AnalysisShell
+      current="heures"
+      title="Heures"
+      subtitle={
+        last ? `${formatMinutes(last.plannedMinutes)} planifiées ce mois` : '—'
+      }
+      series={series}
+      footnote="Le prévu et le réalisé sont deux états distincts du temps, et l’écart entre les deux est ce qu’un contrôle demande à justifier. Quand aucune heure réelle n’a été saisie sur un créneau, le prévu fait foi : laisser un zéro creuserait un écart qui n’existe pas."
+    >
+      <Card>
+        <CardHeader title="Heures planifiées par mois" />
+        <SeriesChart
+          points={series.points.map((point) => ({
+            label: point.label,
+            short: shortMonth(point.label),
+            value: Math.round(point.plannedMinutes / 60),
+          }))}
+          format={(value) => `${value} h`}
+        />
+      </Card>
+
+      <Card>
+        <CardHeader
+          title="Prévu et réalisé"
+          badge={<Badge tone="neutral">12 mois</Badge>}
+        />
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-line-1 text-left">
+                {['Mois', 'Planifié', 'Réalisé', 'Écart', 'Effectif moyen'].map(
+                  (heading) => (
+                    <th
+                      key={heading}
+                      className="px-4 py-2 text-micro font-semibold tracking-[0.06em] text-ink-3 uppercase"
+                    >
+                      {heading}
+                    </th>
+                  ),
+                )}
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-line-1">
+              {[...series.points].reverse().map((point) => {
+                const delta = point.actualMinutes - point.plannedMinutes;
+                return (
+                  <tr key={point.param}>
+                    <td className="px-4 py-2">{point.label}</td>
+                    <td className="px-4 py-2 tnum">
+                      {formatMinutes(point.plannedMinutes)}
+                    </td>
+                    <td className="px-4 py-2 tnum">
+                      {formatMinutes(point.actualMinutes)}
+                    </td>
+                    <td className="px-4 py-2 tnum">
+                      {delta === 0 ? (
+                        '—'
+                      ) : (
+                        <Badge tone={delta > 0 ? 'warn' : 'info'}>
+                          {delta > 0 ? '+' : '−'}
+                          {formatMinutes(Math.abs(delta))}
+                        </Badge>
+                      )}
+                    </td>
+                    <td className="px-4 py-2 tnum">{point.averageHeadcount}</td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      </Card>
+    </AnalysisShell>
+  );
+}