@nightkatana/kronosys-app 1.0.0-beta.0

package/components/dashboard/DashboardLangGateModal.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+
+import type { Lang } from "@/lib/dashboardCopy";
+
+/**
+ * Premier écran obligatoire : section française (texte + bouton), séparation horizontale, section anglaise idem.
+ */
+export function DashboardLangGateModal({
+  open,
+  onSelect,
+}: {
+  open: boolean;
+  onSelect: (lang: Lang) => void;
+}) {
+  const frBtnRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const t = globalThis.setTimeout(() => frBtnRef.current?.focus(), 50);
+    return () => globalThis.clearTimeout(t);
+  }, [open]);
+
+  if (!open || typeof document === "undefined") {
+    return null;
+  }
+
+  const btnClass =
+    "flex min-h-12 w-full max-w-sm items-center justify-center rounded-xl border-2 border-zinc-300 bg-white px-4 text-base font-semibold text-zinc-900 shadow-sm transition hover:border-violet-500 hover:bg-violet-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500/45 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:border-violet-400 dark:hover:bg-violet-950/40";
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-[220] flex items-center justify-center bg-gradient-to-b from-zinc-900/75 via-black/60 to-zinc-900/80 p-4 backdrop-blur-[3px]"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="kronosys-lang-gate-brand kronosys-lang-gate-title"
+      aria-describedby="kronosys-lang-gate-desc"
+    >
+      <div className="w-full max-w-lg rounded-2xl border border-violet-200/80 bg-white p-6 shadow-2xl ring-1 ring-violet-500/10 dark:border-violet-900/40 dark:bg-zinc-900 dark:ring-violet-400/10 sm:p-8">
+        <p
+          id="kronosys-lang-gate-brand"
+          className="text-center text-3xl font-semibold tracking-tight text-violet-700 dark:text-violet-300"
+        >
+          Kronosys
+        </p>
+        <h1
+          id="kronosys-lang-gate-title"
+          className="mt-3 text-center text-lg font-semibold leading-snug text-zinc-900 dark:text-zinc-50"
+        >
+          Bienvenue<span className="mx-2 text-zinc-300 dark:text-zinc-600" aria-hidden>·</span>Welcome
+        </h1>
+        <p className="mt-2 text-center text-xs font-medium text-zinc-500 dark:text-zinc-400">
+          Choisissez votre langue · Choose your language
+        </p>
+
+        <div id="kronosys-lang-gate-desc" className="mt-6 flex flex-col">
+          {/* Section française — au-dessus */}
+          <section
+            lang="fr"
+            aria-labelledby="kronosys-lang-gate-fr-heading"
+            className="flex flex-col items-center gap-4 pb-6"
+          >
+            <h2
+              id="kronosys-lang-gate-fr-heading"
+              className="text-center text-sm font-semibold uppercase tracking-wide text-violet-800 dark:text-violet-200"
+            >
+              Français
+            </h2>
+            <p className="text-center text-sm leading-relaxed text-zinc-700 dark:text-zinc-300">
+              Nous sommes ravis de vous accueillir. Merci de choisir la langue souhaitée pour le tableau de bord et la
+              visite guidée — cela ne prend qu’un instant, puis vous pourrez poursuivre.
+            </p>
+            <p className="text-center text-xs leading-relaxed text-zinc-500 dark:text-zinc-400">
+              Toutes les légendes et la visite suivent ce choix. Vous pourrez le modifier plus tard via le menu langue
+              dans l’en-tête.
+            </p>
+            <button ref={frBtnRef} type="button" className={btnClass} onClick={() => onSelect("fr")}>
+              Continuer en français
+            </button>
+          </section>
+
+          {/* Séparation horizontale */}
+          <hr className="m-0 border-0 border-t border-zinc-200 dark:border-zinc-600" />
+
+          {/* Section anglaise — en dessous */}
+          <section
+            lang="en"
+            aria-labelledby="kronosys-lang-gate-en-heading"
+            className="flex flex-col items-center gap-4 pt-6"
+          >
+            <h2
+              id="kronosys-lang-gate-en-heading"
+              className="text-center text-sm font-semibold uppercase tracking-wide text-violet-800 dark:text-violet-200"
+            >
+              English
+            </h2>
+            <p className="text-center text-sm leading-relaxed text-zinc-700 dark:text-zinc-300">
+              We are glad you are here. Thank you for choosing the language you want for the dashboard and the guided
+              tour — it only takes a moment, then you can continue.
+            </p>
+            <p className="text-center text-xs leading-relaxed text-zinc-500 dark:text-zinc-400">
+              All captions and the tour follow this choice. You can change it later from the language menu in the
+              header.
+            </p>
+            <button type="button" className={btnClass} onClick={() => onSelect("en")}>
+              Continue in English
+            </button>
+          </section>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+}

package/components/dashboard/DashboardLoadingOverlay.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { Loader2 } from "lucide-react";
+
+/**
+ * Voile plein écran avec spinner circulaire (premier chargement du payload API).
+ */
+export function DashboardLoadingOverlay({
+  ariaLabel,
+  message,
+  hydrationTolerant,
+}: {
+  ariaLabel: string;
+  /** Absent : réserve l’espace du libellé sans afficher de texte (évite un flash dans une autre langue). */
+  message?: string;
+  /** Réduit les avertissements d’hydratation quand le SSR et le client diffèrent (ex. fallback Suspense). */
+  hydrationTolerant?: boolean;
+}) {
+  return (
+    <div
+      className="fixed inset-0 z-[60] flex items-center justify-center bg-zinc-200/55 backdrop-blur-sm dark:bg-black/45"
+      role="status"
+      aria-live="polite"
+      aria-busy="true"
+      aria-label={ariaLabel}
+      suppressHydrationWarning={hydrationTolerant === true}
+    >
+      <div className="flex min-h-[10.5rem] max-w-sm flex-col items-center justify-center gap-4 rounded-2xl border border-zinc-200/90 bg-white/95 px-10 py-9 shadow-2xl dark:border-zinc-600/60 dark:bg-zinc-900/95">
+        <Loader2
+          className="size-12 shrink-0 animate-spin text-violet-600 dark:text-violet-400"
+          strokeWidth={2}
+          aria-hidden
+        />
+        {message !== undefined ? (
+          <p className="min-h-[2.75rem] text-center text-sm leading-snug text-zinc-600 dark:text-zinc-300">{message}</p>
+        ) : (
+          <div className="min-h-[2.75rem] shrink-0" aria-hidden />
+        )}
+      </div>
+    </div>
+  );
+}

package/components/dashboard/DashboardSimpleModal.tsx

@@ -0,0 +1,337 @@
+"use client";
+
+import { useEffect, useId, useState, type ReactNode } from "react";
+import { tbModalDanger, tbModalPrimary } from "@/lib/translucentButtonClasses";
+
+function useEscapeClose(open: boolean, onClose: () => void) {
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+}
+
+/** Message seul, bouton OK (remplace `alert()`). */
+export function DashboardAlertModal({
+  open,
+  title,
+  message,
+  okLabel,
+  onClose,
+}: {
+  open: boolean;
+  title?: string;
+  message: string;
+  okLabel: string;
+  onClose: () => void;
+}) {
+  const titleId = useId();
+  const messageId = useId();
+  useEscapeClose(open, onClose);
+
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <div
+      className="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 p-4"
+      role="alertdialog"
+      aria-modal="true"
+      aria-labelledby={title ? titleId : messageId}
+      aria-describedby={title ? messageId : undefined}
+    >
+      <div className="max-h-[90vh] w-full max-w-md overflow-y-auto rounded-xl border border-zinc-200 bg-white p-5 shadow-xl dark:border-zinc-700 dark:bg-zinc-900">
+        {title ? (
+          <h2 id={titleId} className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
+            {title}
+          </h2>
+        ) : null}
+        <p
+          id={messageId}
+          className={`whitespace-pre-wrap text-sm leading-relaxed text-zinc-600 dark:text-zinc-300 ${title ? "mt-3" : ""}`}
+        >
+          {message}
+        </p>
+        <div className="mt-6 flex justify-end">
+          <button
+            type="button"
+            className={tbModalPrimary}
+            onClick={onClose}
+          >
+            {okLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export type DashboardConfirmTypeToConfirm = {
+  /** Texte exact que l’utilisateur doit saisir (ex. tout en majuscules). */
+  expected: string;
+  /** Court paragraphe d’instructions (peut mentionner le mot à taper). */
+  instruction: string;
+  /** Libellé du champ de saisie. */
+  label: string;
+  /** `aria-label` du champ. */
+  inputAriaLabel: string;
+};
+
+/** Confirmation avec Annuler / Confirmer (remplace `confirm()`). */
+export function DashboardConfirmModal({
+  open,
+  title,
+  message,
+  cancelLabel,
+  confirmLabel,
+  confirmVariant = "neutral",
+  dismissCheckbox,
+  typeToConfirm,
+  extra,
+  pending = false,
+  onCancel,
+  onConfirm,
+}: {
+  open: boolean;
+  title?: string;
+  message: string;
+  cancelLabel: string;
+  confirmLabel: string;
+  confirmVariant?: "neutral" | "danger";
+  /** Case « ne plus afficher » entre le message et les boutons. */
+  dismissCheckbox?: {
+    label: string;
+    checked: boolean;
+    onChange: (next: boolean) => void;
+  };
+  /** Saisie obligatoire (mot exact) avant d’activer Confirmer. */
+  typeToConfirm?: DashboardConfirmTypeToConfirm;
+  /** Contenu additionnel (formulaire, etc.) entre le message et la saisie obligatoire. */
+  extra?: ReactNode;
+  /** Désactive saisie et boutons (ex. action asynchrone en cours). */
+  pending?: boolean;
+  onCancel: () => void;
+  onConfirm: () => void | Promise<void>;
+}) {
+  const titleId = useId();
+  const messageId = useId();
+  const typeFieldId = useId();
+  const [typeDraft, setTypeDraft] = useState("");
+  useEscapeClose(open, () => {
+    if (pending) {
+      return;
+    }
+    onCancel();
+  });
+
+  useEffect(() => {
+    if (open) {
+      setTypeDraft("");
+    }
+  }, [open]);
+
+  if (!open) {
+    return null;
+  }
+
+  const typedOk = !typeToConfirm || typeDraft === typeToConfirm.expected;
+  const confirmClass = confirmVariant === "danger" ? tbModalDanger : tbModalPrimary;
+
+  return (
+    <div
+      className="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 p-4"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={title ? titleId : messageId}
+      aria-describedby={title ? messageId : undefined}
+    >
+      <div className="max-h-[90vh] w-full max-w-md overflow-y-auto rounded-xl border border-zinc-200 bg-white p-5 shadow-xl dark:border-zinc-700 dark:bg-zinc-900">
+        {title ? (
+          <h2 id={titleId} className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
+            {title}
+          </h2>
+        ) : null}
+        <p
+          id={messageId}
+          className={`whitespace-pre-wrap text-sm leading-relaxed text-zinc-600 dark:text-zinc-300 ${title ? "mt-3" : ""}`}
+        >
+          {message}
+        </p>
+        {dismissCheckbox ? (
+          <label className="mt-4 flex cursor-pointer items-start gap-2.5 text-sm text-zinc-600 dark:text-zinc-400">
+            <input
+              type="checkbox"
+              className="mt-0.5 size-4 shrink-0 rounded border-zinc-300 bg-white text-violet-600 focus:ring-2 focus:ring-violet-500/50 dark:border-zinc-600 dark:bg-zinc-950"
+              checked={dismissCheckbox.checked}
+              disabled={pending}
+              onChange={(e) => dismissCheckbox.onChange(e.target.checked)}
+            />
+            <span className="leading-snug">{dismissCheckbox.label}</span>
+          </label>
+        ) : null}
+        {extra ? <div className="mt-4">{extra}</div> : null}
+        {typeToConfirm ? (
+          <div className="mt-4 space-y-2">
+            <p className="text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">{typeToConfirm.instruction}</p>
+            <label htmlFor={typeFieldId} className="block text-xs font-semibold uppercase tracking-wide text-zinc-500">
+              {typeToConfirm.label}
+            </label>
+            <input
+              id={typeFieldId}
+              type="text"
+              value={typeDraft}
+              onChange={(e) => setTypeDraft(e.target.value)}
+              placeholder={typeToConfirm.expected}
+              disabled={pending}
+              className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 font-mono text-sm text-zinc-900 outline-none ring-violet-500/30 focus:ring-2 disabled:opacity-50 dark:border-zinc-600 dark:bg-zinc-950 dark:text-zinc-100"
+              autoComplete="off"
+              spellCheck={false}
+              aria-label={typeToConfirm.inputAriaLabel}
+            />
+          </div>
+        ) : null}
+        <div className="mt-6 flex flex-wrap justify-end gap-2">
+          <button
+            type="button"
+            className="rounded-lg border border-zinc-300 px-4 py-2 text-sm text-zinc-700 hover:bg-zinc-100 disabled:opacity-50 dark:border-zinc-600 dark:text-zinc-300 dark:hover:bg-zinc-800"
+            disabled={pending}
+            onClick={onCancel}
+          >
+            {cancelLabel}
+          </button>
+          <button
+            type="button"
+            className={`${confirmClass} disabled:cursor-not-allowed disabled:opacity-40`}
+            disabled={!typedOk || pending}
+            onClick={() => {
+              if (!typedOk || pending) {
+                return;
+              }
+              void onConfirm();
+            }}
+          >
+            {confirmLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/** Dialogue avec trois actions (ex. annuler / option secondaire / option principale). */
+export function DashboardTriActionModal({
+  open,
+  title,
+  message,
+  dismissLabel,
+  tertiaryLabel,
+  secondaryLabel,
+  primaryLabel,
+  primaryVariant = "danger",
+  dismissCheckbox,
+  onDismiss,
+  onTertiary,
+  onSecondary,
+  onPrimary,
+}: {
+  open: boolean;
+  title?: string;
+  message: string;
+  dismissLabel: string;
+  /** Quatrième action (ex. démarrage en parallèle) — entre Annuler et l’option secondaire. */
+  tertiaryLabel?: string;
+  secondaryLabel: string;
+  primaryLabel: string;
+  primaryVariant?: "danger" | "neutral";
+  /** Case « ne plus afficher » (mémorisation gérée par le parent). */
+  dismissCheckbox?: {
+    label: string;
+    checked: boolean;
+    onChange: (next: boolean) => void;
+  };
+  onDismiss: () => void;
+  onTertiary?: () => void | Promise<void>;
+  onSecondary: () => void | Promise<void>;
+  onPrimary: () => void | Promise<void>;
+}) {
+  const titleId = useId();
+  const messageId = useId();
+  useEscapeClose(open, onDismiss);
+
+  if (!open) {
+    return null;
+  }
+
+  const primaryClass = primaryVariant === "danger" ? tbModalDanger : tbModalPrimary;
+
+  return (
+    <div
+      className="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 p-4"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={title ? titleId : messageId}
+      aria-describedby={title ? messageId : undefined}
+    >
+      <div className="max-h-[90vh] w-full max-w-md overflow-y-auto rounded-xl border border-zinc-200 bg-white p-5 shadow-xl dark:border-zinc-700 dark:bg-zinc-900">
+        {title ? (
+          <h2 id={titleId} className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
+            {title}
+          </h2>
+        ) : null}
+        <p
+          id={messageId}
+          className={`whitespace-pre-wrap text-sm leading-relaxed text-zinc-600 dark:text-zinc-300 ${title ? "mt-3" : ""}`}
+        >
+          {message}
+        </p>
+        {dismissCheckbox ? (
+          <label className="mt-4 flex cursor-pointer items-start gap-2.5 text-sm text-zinc-600 dark:text-zinc-400">
+            <input
+              type="checkbox"
+              className="mt-0.5 size-4 shrink-0 rounded border-zinc-300 bg-white text-violet-600 focus:ring-2 focus:ring-violet-500/50 dark:border-zinc-600 dark:bg-zinc-950"
+              checked={dismissCheckbox.checked}
+              onChange={(e) => dismissCheckbox.onChange(e.target.checked)}
+            />
+            <span className="leading-snug">{dismissCheckbox.label}</span>
+          </label>
+        ) : null}
+        <div className="mt-6 flex flex-wrap justify-end gap-2">
+          <button
+            type="button"
+            className="rounded-lg border border-zinc-300 px-4 py-2 text-sm text-zinc-700 hover:bg-zinc-100 dark:border-zinc-600 dark:text-zinc-300 dark:hover:bg-zinc-800"
+            onClick={onDismiss}
+          >
+            {dismissLabel}
+          </button>
+          {tertiaryLabel && onTertiary ? (
+            <button
+              type="button"
+              className="rounded-lg border border-violet-400/60 bg-violet-500/10 px-4 py-2 text-sm font-medium text-violet-900 hover:bg-violet-500/16 dark:border-violet-400/45 dark:bg-violet-950/45 dark:text-violet-100 dark:hover:bg-violet-950/70"
+              onClick={() => void onTertiary()}
+            >
+              {tertiaryLabel}
+            </button>
+          ) : null}
+          <button
+            type="button"
+            className={tbModalPrimary}
+            onClick={() => void onSecondary()}
+          >
+            {secondaryLabel}
+          </button>
+          <button type="button" className={primaryClass} onClick={() => void onPrimary()}>
+            {primaryLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/dashboard/DashboardSuspenseFallback.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { DashboardLoadingOverlay } from "@/components/dashboard/DashboardLoadingOverlay";
+import { dashboardStrings, type Lang } from "@/lib/dashboardCopy";
+import { readStoredDashboardLang } from "@/lib/dashboardLangStorage";
+
+const ELLIPSIS = "\u2026";
+
+function inferSplashLang(): Lang {
+  if (globalThis.window === undefined) {
+    return "en";
+  }
+  const stored = readStoredDashboardLang();
+  if (stored) {
+    return stored;
+  }
+  try {
+    const nav = globalThis.navigator?.language?.toLowerCase() ?? "";
+    if (nav.startsWith("fr")) {
+      return "fr";
+    }
+  } catch {
+    /* ignore */
+  }
+  return "en";
+}
+
+/**
+ * Contenu du `fallback` Suspense à la racine : langue alignée sur le stockage ou le navigateur.
+ * Côté serveur : ellipse + aria minimal (pas de phrase figée en anglais). Côté client : libellés
+ * complets calculés de façon synchrone pour qu’un chargement très bref affiche quand même le texte.
+ */
+export function DashboardSuspenseFallback() {
+  if (globalThis.window === undefined) {
+    return (
+      <div className="min-h-screen bg-zinc-100 dark:bg-zinc-900">
+        <DashboardLoadingOverlay hydrationTolerant ariaLabel="Kronosys" message={ELLIPSIS} />
+      </div>
+    );
+  }
+
+  const dt = dashboardStrings(inferSplashLang());
+  return (
+    <div className="min-h-screen bg-zinc-100 dark:bg-zinc-900">
+      <DashboardLoadingOverlay
+        hydrationTolerant
+        ariaLabel={dt.dashboardLoadingAriaLabel}
+        message={dt.dashboardLoadingMessage}
+      />
+    </div>
+  );
+}

package/components/dashboard/DashboardToastProvider.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+
+type ToastItem = { id: number; message: string };
+
+const ToastContext = createContext<{ pushToast: (message: string) => void } | null>(null);
+
+const TOAST_MS = 5500;
+
+export function DashboardToastProvider({ children }: { children: ReactNode }) {
+  const [toasts, setToasts] = useState<ToastItem[]>([]);
+  const idRef = useRef(0);
+
+  const pushToast = useCallback((message: string) => {
+    const text = message.trim();
+    if (!text) {
+      return;
+    }
+    const id = ++idRef.current;
+    setToasts((prev) => [...prev, { id, message: text }]);
+    window.setTimeout(() => {
+      setToasts((prev) => prev.filter((t) => t.id !== id));
+    }, TOAST_MS);
+  }, []);
+
+  const value = useMemo(() => ({ pushToast }), [pushToast]);
+
+  return (
+    <ToastContext.Provider value={value}>
+      {children}
+      <div
+        className="pointer-events-none fixed bottom-4 right-4 z-[100] flex w-[min(calc(100vw-2rem),22rem)] flex-col gap-2"
+        aria-live="polite"
+      >
+        {toasts.map((t) => (
+          <div
+            key={t.id}
+            className="pointer-events-auto rounded-lg border border-zinc-200 bg-white/95 px-4 py-3 text-sm leading-snug text-zinc-800 shadow-lg dark:border-zinc-600 dark:bg-zinc-900/95 dark:text-zinc-100"
+          >
+            {t.message}
+          </div>
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+}
+
+/** Retourne `pushToast` ; sans fournisseur, les appels sont ignorés (no-op). */
+export function useDashboardToast(): { pushToast: (message: string) => void } {
+  const ctx = useContext(ToastContext);
+  if (!ctx) {
+    return { pushToast: () => {} };
+  }
+  return ctx;
+}