@creezio/shell-ui 0.22.0

package/ui/lib/n8n-ui.ts

@@ -0,0 +1,115 @@
+import { getShellDesktopApi, getShellUiBrand } from "@creezio/shell-ui";
+/**
+ * Ouverture n8n UI dans un onglet workspace.
+ * Contrat : n8n est déjà installé + démarré au splash Héberger.
+ * Aucun download / ensure / start au clic.
+ */
+
+/** Partition Electron stable (catalogue outils ≥ 900000). Aligné EMBED_TOOL_SITE_IDS.n8nUi. */
+export const N8N_UI_SITE_ID = 900097;
+
+export const N8N_UI_TAB_TITLE = "n8n";
+
+export type N8nUiOpenTarget = {
+  url: string;
+  siteId: number;
+  title: string;
+};
+
+export type N8nUiOpenFail = {
+  ok: false;
+  error: string;
+  needsConfig?: boolean;
+  installing?: boolean;
+};
+
+/** Résout l’URL n8n déjà prête (splash) — pas de bootstrap. */
+export async function resolveN8nUiOpenTarget(): Promise<
+  N8nUiOpenTarget | N8nUiOpenFail
+> {
+  const api = typeof window !== "undefined" ? getShellDesktopApi() : undefined;
+  if (!api?.getN8nStatus) {
+    return {
+      ok: false,
+      error: "n8n disponible uniquement dans l’app desktop.",
+    };
+  }
+  try {
+    const st = await api.getN8nStatus();
+    const url = (st.uiUrl || "").trim();
+    if (!url) {
+      if (st.status === "skipped-remote-client") {
+        return {
+          ok: false,
+          error:
+            "Client distant — URL n8n introuvable. Rejoignez un hôte via {slug}." + getShellUiBrand().publicHostSuffix + " (sous-domaine n8n.{slug}…).",
+        };
+      }
+      return {
+        ok: false,
+        error:
+          "n8n n’est pas prêt. Redémarrez " + getShellUiBrand().productName + " et attendez la fin du splash (install automatique).",
+      };
+    }
+    return {
+      url,
+      siteId: N8N_UI_SITE_ID,
+      title: N8N_UI_TAB_TITLE,
+    };
+  } catch (e) {
+    return {
+      ok: false,
+      error: e instanceof Error ? e.message : "Statut n8n indisponible",
+    };
+  }
+}
+
+export function isN8nUiOpenTarget(
+  v: N8nUiOpenTarget | N8nUiOpenFail,
+): v is N8nUiOpenTarget {
+  return Boolean(v && "url" in v && typeof v.url === "string");
+}
+
+/** Ouvre l’onglet n8n — URL déjà connue, cookie session optionnel. */
+export async function openN8nUiInWorkspace(opts: {
+  openExternalSite?: (o: {
+    siteId: number;
+    url: string;
+    title: string;
+  }) => void;
+  openTab?: (siteId: number, url: string) => Promise<unknown>;
+  onProgress?: (msg: string) => void;
+}): Promise<{ ok: true } | N8nUiOpenFail> {
+  const api = typeof window !== "undefined" ? getShellDesktopApi() : undefined;
+  const target = await resolveN8nUiOpenTarget();
+  if (!isN8nUiOpenTarget(target)) {
+    return target;
+  }
+  if (api?.prepareN8nSession) {
+    try {
+      const prep = await api.prepareN8nSession();
+      if (!prep.ok) {
+        console.warn("[n8n] prepareN8nSession:", prep.detail);
+      }
+    } catch (e) {
+      console.warn(
+        "[n8n] prepareN8nSession failed",
+        e instanceof Error ? e.message : e,
+      );
+    }
+  }
+  if (opts.openExternalSite) {
+    opts.openExternalSite({
+      siteId: target.siteId,
+      url: target.url,
+      title: target.title,
+    });
+    return { ok: true };
+  }
+  if (opts.openTab) {
+    await opts.openTab(target.siteId, target.url);
+    return { ok: true };
+  }
+  window.open(target.url, "_blank", "noreferrer");
+  return { ok: true };
+}

package/ui/lib/use-creezio-resource.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { useRouter } from "next/navigation";
+import {
+  subscribeDataChanged,
+  type CreezioDataChangedDetail,
+} from "@creezio/shell-ui";
+import { usePaneActive } from "../workspace/keep-alive";
+
+export type UseCreezioResourceOptions = {
+  /**
+   * Appelé à chaque mutation de la resource (pane active ou non).
+   * Utile pour rafraîchir un store client (badge, provider…).
+   */
+  onChange?: (detail: CreezioDataChangedDetail) => void;
+  /**
+   * Si true (défaut), `router.refresh()` quand la pane est active et qu'une
+   * mutation arrive — couvre les pages RSC keep-alive (Next 14 ne refetch
+   * jamais à la réactivation d'onglet seule).
+   */
+  refreshOnChange?: boolean;
+  /**
+   * Si true (défaut), au moment où la pane redevient active, refresh s'il y a
+   * eu des mutations pendant l'absence (compteur module-scope).
+   */
+  refreshOnActivate?: boolean;
+};
+
+const seqByResource = new Map<string, number>();
+const seenByResource = new Map<string, number>();
+
+function bump(resource: string): void {
+  seqByResource.set(resource, (seqByResource.get(resource) || 0) + 1);
+}
+
+function consume(resource: string): boolean {
+  const seq = seqByResource.get(resource) || 0;
+  const seen = seenByResource.get(resource) || 0;
+  if (seen === seq) return false;
+  seenByResource.set(resource, seq);
+  return true;
+}
+
+/**
+ * Déclare qu'une page / composant dépend d'une resource métier.
+ * Toute mutation émise via `emitDataChanged` (API header, MCP/chat, UI)
+ * rafraîchit l'UI si la pane est ouverte — pattern app moderne, pas panier-only.
+ */
+export function useCreezioResource(
+  resource: string,
+  opts?: UseCreezioResourceOptions,
+): void {
+  const router = useRouter();
+  const active = usePaneActive();
+  const activeRef = useRef(active);
+  activeRef.current = active;
+  const onChangeRef = useRef(opts?.onChange);
+  onChangeRef.current = opts?.onChange;
+  const refreshOnChange = opts?.refreshOnChange !== false;
+  const refreshOnActivate = opts?.refreshOnActivate !== false;
+  const res = String(resource || "").trim();
+
+  useEffect(() => {
+    if (!res) return;
+    if (refreshOnActivate && active && consume(res)) {
+      router.refresh();
+    }
+  }, [active, res, refreshOnActivate, router]);
+
+  useEffect(() => {
+    if (!res) return;
+    return subscribeDataChanged(
+      (detail) => {
+        bump(detail.resource);
+        onChangeRef.current?.(detail);
+        if (refreshOnChange && activeRef.current && consume(detail.resource)) {
+          router.refresh();
+        }
+      },
+      { resource: res },
+    );
+  }, [res, refreshOnChange, router]);
+}
+
+/** Version multi-resources (ex. page agrégée). */
+export function useCreezioResources(
+  resources: string[],
+  opts?: UseCreezioResourceOptions,
+): void {
+  const list = resources.map((r) => r.trim()).filter(Boolean);
+  const router = useRouter();
+  const active = usePaneActive();
+  const activeRef = useRef(active);
+  activeRef.current = active;
+  const onChangeRef = useRef(opts?.onChange);
+  onChangeRef.current = opts?.onChange;
+  const refreshOnChange = opts?.refreshOnChange !== false;
+  const refreshOnActivate = opts?.refreshOnActivate !== false;
+  const key = list.slice().sort().join(",");
+
+  useEffect(() => {
+    if (!list.length) return;
+    if (refreshOnActivate && active) {
+      let dirty = false;
+      for (const r of list) if (consume(r)) dirty = true;
+      if (dirty) router.refresh();
+    }
+  }, [active, key, refreshOnActivate, router]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    if (!list.length) return;
+    return subscribeDataChanged((detail) => {
+      bump(detail.resource);
+      onChangeRef.current?.(detail);
+      if (refreshOnChange && activeRef.current && consume(detail.resource)) {
+        router.refresh();
+      }
+    }, { resource: list });
+  }, [key, refreshOnChange, router]); // eslint-disable-line react-hooks/exhaustive-deps
+}

package/ui/lib/use-shell-ui-brand.ts

@@ -0,0 +1,22 @@
+"use client";
+
+/**
+ * Brand shell-ui réactive — CreezioUiBoot applique la marque en useEffect
+ * (après le 1er render) : lire la brand via ce hook (useSyncExternalStore)
+ * plutôt que getShellUiBrand() direct pour re-render à la configuration.
+ */
+
+import { useSyncExternalStore } from "react";
+import {
+  getShellUiBrand,
+  subscribeShellUiBrand,
+  type ShellUiBrand,
+} from "../../dist/brand.js";
+
+export function useShellUiBrand(): ShellUiBrand {
+  return useSyncExternalStore(
+    subscribeShellUiBrand,
+    getShellUiBrand,
+    getShellUiBrand,
+  );
+}

package/ui/list-toolbar.tsx

@@ -0,0 +1,309 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { usePathname, useSearchParams } from "next/navigation";
+import { Skeleton } from "./primitives/skeleton";
+import { cn } from "@creezio/shell-ui";
+
+/** Clés query effacées au changement de preset — injectables marque. */
+const DEFAULT_PRESET_CLEAR_KEYS = [
+  "status",
+  "alerts",
+  "alertType",
+  "platform",
+  "hasClient",
+  "fleet",
+  "risk",
+  "declaration",
+  "infraction",
+  "toDeclare",
+  "topic",
+  "type",
+  "declared",
+  "repaired",
+  "category",
+  "openOnly",
+  "settledOnly",
+  "company",
+  "coverage",
+  "hasAttestation",
+  "hasSub",
+  "year",
+  "month",
+  "productType",
+  "hasPdf",
+  "amountRange",
+  "pipeline",
+  "source",
+  "priceMin",
+  "priceMax",
+  "amountMin",
+  "amountMax",
+  "dateFrom",
+  "dateTo",
+  "payment_status",
+  "currency",
+  "invoiceMatched",
+  "sort",
+  "sens",
+  "period",
+  "varMin",
+  "varMax",
+  "deltaMin",
+  "deltaMax",
+  "docsIncomplete",
+] as const;
+
+let presetClearKeys: string[] = [...DEFAULT_PRESET_CLEAR_KEYS];
+
+/** Ajoute / remplace les clés métier marque (ex. TF: fournisseur, promo). */
+export function configureListToolbarClearKeys(keys: string[]): void {
+  presetClearKeys = Array.from(new Set([...DEFAULT_PRESET_CLEAR_KEYS, ...keys]));
+}
+
+export function getListToolbarClearKeys(): readonly string[] {
+  return presetClearKeys;
+}
+
+export type PresetDef = {
+  id: string;
+  label: string;
+  params: Record<string, string>;
+};
+
+export type ViewOption = {
+  /** Valeur logique (ex. table, company). */
+  id: string;
+  label: string;
+  /** Valeur du searchParam `view` ; omit/undefined = vue par défaut (param retiré). */
+  param?: string;
+};
+
+const DEFAULT_VIEW_OPTIONS: ViewOption[] = [
+  { id: "table", label: "Liste" },
+  { id: "kanban", label: "Kanban", param: "kanban" },
+];
+
+export function ViewToggle({
+  view,
+  tableLabel = "Liste",
+  kanbanLabel = "Kanban",
+  options,
+}: {
+  view: string;
+  tableLabel?: string;
+  kanbanLabel?: string;
+  /** Options custom (sinon Liste / Kanban classiques). */
+  options?: ViewOption[];
+}) {
+  const pathname = usePathname();
+  const params = useSearchParams();
+  const [pendingView, setPendingView] = useState<string | null>(null);
+  const activeView = pendingView ?? view;
+  const opts =
+    options ??
+    DEFAULT_VIEW_OPTIONS.map((o) =>
+      o.id === "table"
+        ? { ...o, label: tableLabel }
+        : o.id === "kanban"
+          ? { ...o, label: kanbanLabel }
+          : o,
+    );
+
+  useEffect(() => {
+    setPendingView(null);
+  }, [view]);
+
+  function hrefFor(opt: ViewOption) {
+    const sp = new URLSearchParams(params.toString());
+    if (!opt.param) sp.delete("view");
+    else sp.set("view", opt.param);
+    sp.delete("page");
+    const qs = sp.toString();
+    return qs ? `${pathname}?${qs}` : pathname;
+  }
+
+  return (
+    <div
+      className="flex flex-wrap gap-2 text-sm"
+      aria-busy={pendingView != null && pendingView !== view ? true : undefined}
+    >
+      {opts.map((opt) => {
+        const selected = activeView === opt.id;
+        const pending = pendingView === opt.id && pendingView !== view;
+        return (
+          <Link
+            key={opt.id}
+            href={hrefFor(opt)}
+            aria-current={selected ? "true" : undefined}
+            onClick={() => {
+              if (opt.id !== activeView) setPendingView(opt.id);
+            }}
+            className={cn(
+              "rounded-lg px-3 py-1.5 transition-colors",
+              selected ? "bg-slate-900 text-white" : "border bg-white hover:bg-slate-50",
+              pending && "ring-2 ring-sky-300 ring-offset-1",
+            )}
+          >
+            {opt.label}
+          </Link>
+        );
+      })}
+    </div>
+  );
+}
+
+/** Placeholder toggle pendant loading.tsx ou navigation lente. */
+export function ViewToggleSkeleton({
+  options,
+}: {
+  options?: readonly Pick<ViewOption, "label">[];
+}) {
+  const labels = options?.map((o) => o.label) ?? ["Liste", "Kanban"];
+  return (
+    <div className="flex flex-wrap gap-2 text-sm" aria-hidden>
+      {labels.map((label) => (
+        <Skeleton key={label} className="h-8 w-20 rounded-lg" />
+      ))}
+    </div>
+  );
+}
+
+export function PresetChips({
+  presets,
+  activeId,
+  clearHref,
+}: {
+  presets: PresetDef[];
+  activeId?: string | null;
+  clearHref?: string;
+}) {
+  const pathname = usePathname();
+  const params = useSearchParams();
+
+  function hrefFor(preset: PresetDef) {
+    const sp = new URLSearchParams(params.toString());
+    // Remplace les filtres métier courants, conserve view/q
+    for (const key of presetClearKeys) {
+      sp.delete(key);
+    }
+    Object.entries(preset.params).forEach(([k, v]) => {
+      if (!v) sp.delete(k);
+      else sp.set(k, v);
+    });
+    sp.set("preset", preset.id);
+    sp.delete("page");
+    return `${pathname}?${sp.toString()}`;
+  }
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      {presets.map((p) => (
+        <Link
+          key={p.id}
+          href={hrefFor(p)}
+          className={cn(
+            "rounded-full border px-3 py-1 text-xs font-medium transition",
+            activeId === p.id
+              ? "border-sky-700 bg-sky-50 text-sky-900"
+              : "border-slate-200 bg-white text-slate-600 hover:bg-slate-50",
+          )}
+        >
+          {p.label}
+        </Link>
+      ))}
+      {clearHref ? (
+        <Link
+          href={clearHref}
+          className="rounded-full border border-dashed border-slate-300 px-3 py-1 text-xs text-slate-500 hover:bg-slate-50"
+        >
+          Réinitialiser
+        </Link>
+      ) : null}
+    </div>
+  );
+}
+
+export function KpiStrip({
+  items,
+  columns = 4,
+}: {
+  items: {
+    label: string;
+    value: number;
+    /** Affichage custom (ex. montants €) — sinon `value` localisé. */
+    display?: string;
+    href: string;
+    tone?: "danger" | "warning" | "ok" | "neutral";
+  }[];
+  /** Nombre de colonnes desktop (défaut 4). */
+  columns?: 3 | 4 | 5 | 6;
+}) {
+  const colsClass =
+    columns === 6
+      ? "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-6"
+      : columns === 5
+        ? "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-5"
+        : columns === 3
+          ? "sm:grid-cols-2 lg:grid-cols-3"
+          : "sm:grid-cols-2 lg:grid-cols-4";
+
+  return (
+    <div className={cn("grid gap-3", colsClass)}>
+      {items.map((item) => {
+        const tone =
+          item.tone === "danger"
+            ? "border-red-200 bg-red-50/80 hover:bg-red-50"
+            : item.tone === "warning"
+              ? "border-amber-200 bg-amber-50/80 hover:bg-amber-50"
+              : item.tone === "ok"
+                ? "border-emerald-200 bg-emerald-50/60 hover:bg-emerald-50"
+                : "border-slate-200 bg-white hover:bg-slate-50";
+        return (
+          <Link
+            key={item.label}
+            href={item.href}
+            className={cn(
+              "rounded-xl border px-3 py-3 shadow-sm transition",
+              tone,
+            )}
+          >
+            <div className="text-[11px] font-medium uppercase tracking-wide text-slate-500">
+              {item.label}
+            </div>
+            <div className="mt-1 text-2xl font-semibold tabular-nums text-slate-900">
+              {item.display ?? item.value.toLocaleString("fr-FR")}
+            </div>
+          </Link>
+        );
+      })}
+    </div>
+  );
+}
+
+export function AlertChips({
+  chips,
+}: {
+  chips: { key: string; short: string; tone: "danger" | "warning" }[];
+}) {
+  if (!chips.length) {
+    return <span className="text-xs text-slate-400">—</span>;
+  }
+  return (
+    <div className="flex flex-wrap gap-1">
+      {chips.map((c) => (
+        <span
+          key={c.key}
+          className={
+            c.tone === "danger"
+              ? "rounded-full bg-red-50 px-2 py-0.5 text-xs font-medium text-red-700"
+              : "rounded-full bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-800"
+          }
+        >
+          {c.short}
+        </span>
+      ))}
+    </div>
+  );
+}