@creezio/shell-ui 0.22.0

package/ui/search-input.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import { FormEvent, useEffect, useRef, useState, useTransition, type ChangeEvent } from "react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { Input } from "./primitives/input";
+import { Button } from "./primitives/button";
+import { cn } from "@creezio/shell-ui";
+import { aidProps } from "./lib/aid";
+
+export const SEARCH_DEBOUNCE_MS = 300;
+
+type SearchInputProps = {
+  searchKey?: string;
+  placeholder?: string;
+  className?: string;
+  inputClassName?: string;
+  /** Affiche un bouton submit optionnel (défaut : masqué, debounce suffit). */
+  showSubmit?: boolean;
+  submitLabel?: string;
+  debounceMs?: number;
+  /**
+   * Mode filtre client (données déjà en props) : met à jour l’URL sans
+   * `router.refresh()` — évite un re-fetch RSC/SQLite à chaque frappe.
+   */
+  skipRefresh?: boolean;
+};
+
+/**
+ * Champ de recherche URL-driven avec debounce (replace, sans empiler l’historique).
+ * Centralisé pour les listes ops (clients, véhicules, assurances, etc.).
+ *
+ * Next.js 14 : `router.replace` met à jour l’URL ; `router.refresh()` force le
+ * re-fetch RSC (sinon soft-nav peut laisser le tableau stale). Un seul refresh
+ * après replace — pas de history.replaceState seul (refresh ignore alors le `q`).
+ */
+export function SearchInput({
+  searchKey = "q",
+  placeholder = "Rechercher…",
+  className,
+  inputClassName,
+  showSubmit = false,
+  submitLabel = "Filtrer",
+  debounceMs = SEARCH_DEBOUNCE_MS,
+  skipRefresh = false,
+}: SearchInputProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const params = useSearchParams();
+  const urlSearch = params.get(searchKey) || "";
+  const [searchValue, setSearchValue] = useState(urlSearch);
+  const [, startTransition] = useTransition();
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const paramsRef = useRef(params);
+  const pathnameRef = useRef(pathname);
+  const navSeqRef = useRef(0);
+  /** Dernière valeur poussée vers l’URL (ou reçue de l’extérieur). */
+  const appliedRef = useRef(urlSearch);
+  /** true tant que l’utilisateur tape et que le debounce n’a pas appliqué. */
+  const dirtyRef = useRef(false);
+  paramsRef.current = params;
+  pathnameRef.current = pathname;
+
+  // Sync input ← URL (back/forward, lien, clear externe) sans écraser une frappe en cours.
+  useEffect(() => {
+    if (dirtyRef.current) {
+      if (urlSearch === searchValue.trim()) {
+        dirtyRef.current = false;
+        appliedRef.current = urlSearch;
+      }
+      return;
+    }
+    if (urlSearch !== appliedRef.current) {
+      appliedRef.current = urlSearch;
+      setSearchValue(urlSearch);
+    }
+  }, [urlSearch, searchValue]);
+
+  function applySearch(raw: string) {
+    const q = raw.trim();
+    const next = new URLSearchParams(paramsRef.current.toString());
+    const current = next.get(searchKey) || "";
+    if (q === current) {
+      dirtyRef.current = false;
+      appliedRef.current = q;
+      return;
+    }
+    if (q) next.set(searchKey, q);
+    else next.delete(searchKey);
+    next.delete("page");
+    const qs = next.toString();
+    const href = qs ? `${pathnameRef.current}?${qs}` : pathnameRef.current;
+    const seq = ++navSeqRef.current;
+    dirtyRef.current = false;
+    appliedRef.current = q;
+    startTransition(() => {
+      if (seq !== navSeqRef.current) return;
+      router.replace(href, { scroll: false });
+      if (!skipRefresh) router.refresh();
+    });
+  }
+
+  useEffect(() => {
+    if (searchValue.trim() === urlSearch && !dirtyRef.current) return;
+    if (searchValue.trim() === appliedRef.current && !dirtyRef.current) return;
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => {
+      applySearch(searchValue);
+    }, debounceMs);
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- debounce sur la frappe uniquement
+  }, [searchValue, urlSearch, searchKey, debounceMs]);
+
+  function onSubmit(e: FormEvent) {
+    e.preventDefault();
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    applySearch(searchValue);
+  }
+
+  return (
+    <form onSubmit={onSubmit} className={cn("flex min-w-[200px] flex-1 gap-2", className)}>
+      <Input
+        name={searchKey}
+        value={searchValue}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => {
+          dirtyRef.current = true;
+          setSearchValue(e.target.value);
+        }}
+        placeholder={placeholder}
+        {...aidProps(`search.${searchKey}`)}
+        className={cn("max-w-sm", inputClassName)}
+        autoComplete="off"
+      />
+      {showSubmit ? (
+        <Button type="submit" variant="secondary">
+          {submitLabel}
+        </Button>
+      ) : (
+        <button type="submit" className="sr-only">
+          Rechercher
+        </button>
+      )}
+    </form>
+  );
+}

package/ui/settings/account-settings.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import { getShellDesktopApi, getShellUiBrand } from "@creezio/shell-ui";
+
+/**
+ * Compte local desktop : identifiant + changement de mot de passe
+ * (écrit local-config + redémarre Next, comme BYOK).
+ */
+
+import { FormEvent, useEffect, useState } from "react";
+import { toast } from "sonner";
+import { Loader2, UserRound } from "lucide-react";
+import { Button } from "../primitives/button";
+import { Input } from "../primitives/input";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../primitives/card";
+
+export function AccountSettings() {
+  const [desktop, setDesktop] = useState(false);
+  const [username, setUsername] = useState<string | null>(null);
+  const [currentPassword, setCurrentPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [newPassword2, setNewPassword2] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    const api = getShellDesktopApi();
+    if (!api?.getAccount) {
+      // Hors desktop : afficher le user session si possible
+      void fetch("/api/v1/auth/me")
+        .then((r) => (r.ok ? r.json() : null))
+        .then((d: { user?: string } | null) => {
+          if (d?.user) setUsername(d.user);
+        })
+        .catch(() => {});
+      return;
+    }
+    setDesktop(true);
+    void api.getAccount().then((a: { username: string }) => setUsername(a.username));
+  }, []);
+
+  async function onChangePassword(e: FormEvent) {
+    e.preventDefault();
+    const api = getShellDesktopApi();
+    if (!api?.changePassword) {
+      toast.error("Changement de mot de passe disponible dans l'app desktop");
+      return;
+    }
+    if (newPassword.length < 6) {
+      toast.error("Nouveau mot de passe trop court (min. 6 caractères)");
+      return;
+    }
+    if (newPassword !== newPassword2) {
+      toast.error("Les mots de passe ne correspondent pas");
+      return;
+    }
+    setBusy(true);
+    try {
+      const r = await api.changePassword({ currentPassword, newPassword });
+      if (!r.ok) {
+        toast.error(r.error || "Échec du changement de mot de passe");
+        return;
+      }
+      setCurrentPassword("");
+      setNewPassword("");
+      setNewPassword2("");
+      toast.success("Mot de passe mis à jour — serveur local redémarré");
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Erreur");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2 text-base">
+          <UserRound className="h-4 w-4" /> Compte
+        </CardTitle>
+        <CardDescription>
+          Identifiant local de cette installation. Le mot de passe est stocké de façon sécurisée
+          sur cet ordinateur.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div>
+          <p className="mb-1 text-[13px] font-medium text-slate-700">Identifiant</p>
+          <p className="rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-900">
+            {username || "—"}
+          </p>
+        </div>
+        {desktop ? (
+          <form onSubmit={(e) => void onChangePassword(e)} className="space-y-3">
+            <p className="text-[13px] font-medium text-slate-700">Changer le mot de passe</p>
+            <Input
+              type="password"
+              autoComplete="current-password"
+              placeholder="Mot de passe actuel"
+              value={currentPassword}
+              onChange={(e) => setCurrentPassword(e.target.value)}
+              required
+              disabled={busy}
+            />
+            <Input
+              type="password"
+              autoComplete="new-password"
+              placeholder="Nouveau mot de passe"
+              value={newPassword}
+              onChange={(e) => setNewPassword(e.target.value)}
+              required
+              disabled={busy}
+            />
+            <Input
+              type="password"
+              autoComplete="new-password"
+              placeholder="Confirmer le nouveau mot de passe"
+              value={newPassword2}
+              onChange={(e) => setNewPassword2(e.target.value)}
+              required
+              disabled={busy}
+            />
+            <Button type="submit" disabled={busy} variant="outline">
+              {busy ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Mise à jour…
+                </>
+              ) : (
+                "Enregistrer le mot de passe"
+              )}
+            </Button>
+          </form>
+        ) : (
+          <p className="text-sm text-slate-500">
+            Le changement de mot de passe se fait dans l&apos;application desktop.
+          </p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/ui/settings/agent-profile-settings.tsx

@@ -0,0 +1,184 @@
+"use client";
+
+/**
+ * Profil d'agent Work (D3) — par utilisateur.
+ * `company` : Hermes embarqué de l'app Serveur (skills creezio-*).
+ * `personal` : le Hermes personnel de l'utilisateur (URL + clé API),
+ * utilisé à la place du moteur entreprise pour SES sessions Work.
+ */
+
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { AlertTriangle, Bot, KeyRound } from "lucide-react";
+import { Button } from "../primitives/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../primitives/card";
+import { Input } from "../primitives/input";
+import { Label } from "../primitives/label";
+import { aidProps } from "../lib/aid";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../primitives/select";
+
+type AgentProfile = {
+  kind: "company" | "personal";
+  apiUrl: string | null;
+  hasKey: boolean;
+  incomplete?: boolean;
+};
+
+export function AgentProfileSettings() {
+  const [loaded, setLoaded] = useState(false);
+  const [kind, setKind] = useState<"company" | "personal">("company");
+  const [apiUrl, setApiUrl] = useState("");
+  const [apiKey, setApiKey] = useState("");
+  const [hasKey, setHasKey] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    let alive = true;
+    void fetch("/api/v1/assistant/agent-profile")
+      .then((r) => (r.ok ? (r.json() as Promise<AgentProfile>) : null))
+      .then((p) => {
+        if (!alive || !p) return;
+        setKind(p.kind);
+        setApiUrl(p.apiUrl || "");
+        setHasKey(p.hasKey);
+      })
+      .finally(() => alive && setLoaded(true));
+    return () => {
+      alive = false;
+    };
+  }, []);
+
+  const save = async () => {
+    setSaving(true);
+    try {
+      const res = await fetch("/api/v1/assistant/agent-profile", {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          kind,
+          apiUrl,
+          // Champ vide = conserver la clé déjà enregistrée.
+          ...(apiKey ? { apiKey } : {}),
+        }),
+      });
+      const data = (await res.json()) as AgentProfile & { error?: string };
+      if (!res.ok) {
+        toast.error(data.error || "Enregistrement impossible");
+        return;
+      }
+      setHasKey(data.hasKey);
+      setApiKey("");
+      if (data.incomplete) {
+        toast.warning(
+          "Profil enregistré mais incomplet : sans URL et clé, l'agent de l'entreprise reste utilisé.",
+        );
+      } else {
+        toast.success(
+          data.kind === "personal"
+            ? "Mode Work → votre agent personnel"
+            : "Mode Work → agent de l'entreprise",
+        );
+      }
+    } catch {
+      toast.error("Enregistrement impossible");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (!loaded) return null;
+
+  return (
+    <Card {...aidProps("agent-profile-settings")}>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2 text-base">
+          <Bot className="h-4 w-4" />
+          Agent (mode Work)
+        </CardTitle>
+        <CardDescription>
+          Choisissez quel agent exécute vos missions Work : celui de
+          l&apos;entreprise (accès CRM, n8n, modules) ou votre agent Hermes
+          personnel.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Label>Agent utilisé</Label>
+          <Select
+            value={kind}
+            onValueChange={(v) => setKind(v === "personal" ? "personal" : "company")}
+          >
+            <SelectTrigger className="w-full sm:w-80">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="company">
+                Agent de l&apos;entreprise (recommandé)
+              </SelectItem>
+              <SelectItem value="personal">Mon agent personnel</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        {kind === "personal" && (!apiUrl.trim() || (!hasKey && !apiKey)) ? (
+          <div className="flex items-start gap-2 rounded-lg border border-amber-300 bg-amber-50 p-3 text-sm text-amber-900">
+            <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
+            <span>
+              Profil incomplet : renseignez l&apos;URL et la clé API, sinon vos
+              missions Work continueront d&apos;utiliser l&apos;agent de
+              l&apos;entreprise.
+            </span>
+          </div>
+        ) : null}
+
+        {kind === "personal" ? (
+          <div className="space-y-3 rounded-lg border p-3">
+            <div className="space-y-2">
+              <Label htmlFor="agent-personal-url">URL de l&apos;API Hermes</Label>
+              <Input
+                id="agent-personal-url"
+                placeholder="https://mon-hermes.exemple.com"
+                value={apiUrl}
+                onChange={(e) => setApiUrl(e.target.value)}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="agent-personal-key" className="flex items-center gap-1.5">
+                <KeyRound className="h-3.5 w-3.5" />
+                Clé API
+              </Label>
+              <Input
+                id="agent-personal-key"
+                type="password"
+                placeholder={hasKey ? "•••••••• (enregistrée — laisser vide pour conserver)" : "hermes-…"}
+                value={apiKey}
+                onChange={(e) => setApiKey(e.target.value)}
+              />
+            </div>
+            <p className="text-xs text-muted-foreground">
+              Votre agent personnel n&apos;a pas accès aux données Creezio
+              (CRM, n8n, modules) : pour ces missions, repassez sur l&apos;agent
+              de l&apos;entreprise.
+            </p>
+          </div>
+        ) : null}
+
+        <Button onClick={() => void save()} disabled={saving}>
+          {saving ? "Enregistrement…" : "Enregistrer"}
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}