create-snapify-app 0.0.0-stage → 1.1.1

package/template/src/admin/settings/SecurityTab.tsx

@@ -0,0 +1,172 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import React from 'react';
+import { AlertTriangle, KeyRound, Plus, ShieldCheck } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+import { TagInput } from '../ui/TagInput';
+import { Alert, Button, Field, Section, Segmented, Switch } from '../ui/primitives';
+import { NumberField, ipInList, isIpRule, type TabProps } from './controls';
+
+const TWO_FACTOR: Record<'optional' | 'superadmins' | 'all', string> = {
+  optional: 'Chaque utilisateur choisit d’activer ou non la double authentification depuis son profil.',
+  superadmins: 'Les super administrateurs doivent configurer une application d’authentification à leur prochaine connexion.',
+  all: 'Tous les comptes doivent configurer une application d’authentification à leur prochaine connexion.',
+};
+
+export function SecurityTab({ v, set, meta }: TabProps) {
+  const { user, isSuper } = useAuth();
+  const sec = v.security;
+  const allowlist = sec.adminIpAllowlist;
+  const selfBlocked = allowlist.length > 0 && !meta.ipBypass && !ipInList(meta.clientIp, allowlist);
+  const twoFaAppliesToMe = sec.twoFactor === 'all' || (sec.twoFactor === 'superadmins' && isSuper);
+
+  return (
+    <div className="grid gap-6 xl:grid-cols-2">
+      <div className="space-y-6">
+        <Section title="Politique de mots de passe" description="S’applique aux nouveaux mots de passe : création de compte, changement et réinitialisation.">
+          <NumberField
+            path="security.passwordMinLength"
+            label="Longueur minimale"
+            suffix="caractères"
+            value={sec.passwordMinLength}
+            onChange={(passwordMinLength) => set('security', { passwordMinLength })}
+            hint="12 caractères ou plus sont recommandés."
+          />
+          <Switch checked={sec.requireUppercase} onChange={(requireUppercase) => set('security', { requireUppercase })} label="Au moins une majuscule" />
+          <Switch checked={sec.requireNumber} onChange={(requireNumber) => set('security', { requireNumber })} label="Au moins un chiffre" />
+          <Switch checked={sec.requireSymbol} onChange={(requireSymbol) => set('security', { requireSymbol })} label="Au moins un caractère spécial" />
+          <NumberField
+            path="security.passwordExpiryDays"
+            label="Renouvellement obligatoire"
+            suffix="jours"
+            value={sec.passwordExpiryDays}
+            onChange={(passwordExpiryDays) => set('security', { passwordExpiryDays })}
+            hint="0 = jamais. Passé ce délai, l’utilisateur doit choisir un nouveau mot de passe à sa connexion."
+          />
+          <p className="text-xs leading-relaxed text-slate-500">
+            Les mots de passe trop simples (suites courantes, partie de l’adresse e-mail) sont toujours refusés. Ils sont stockés hachés avec scrypt.
+          </p>
+        </Section>
+
+        <Section title="Sessions" description="Durée de validité des connexions à l’administration.">
+          <div className="grid gap-4 sm:grid-cols-2">
+            <NumberField path="security.sessionHours" label="Durée d’une session" suffix="heures" value={sec.sessionHours} onChange={(sessionHours) => set('security', { sessionHours })} />
+            <NumberField
+              path="security.rememberDays"
+              label="Avec « Rester connecté »"
+              suffix="jours"
+              value={sec.rememberDays}
+              onChange={(rememberDays) => set('security', { rememberDays })}
+            />
+          </div>
+          <NumberField
+            path="security.idleMinutes"
+            label="Déconnexion après inactivité"
+            suffix="minutes"
+            value={sec.idleMinutes}
+            onChange={(idleMinutes) => set('security', { idleMinutes })}
+            hint="0 = désactivé. Contrôlé par le serveur : une session inactive est refusée même si l’onglet reste ouvert."
+          />
+        </Section>
+
+        <Section title="Protection contre les attaques par force brute">
+          <div className="grid gap-4 sm:grid-cols-2">
+            <NumberField
+              path="security.maxLoginAttempts"
+              label="Tentatives avant blocage"
+              value={sec.maxLoginAttempts}
+              onChange={(maxLoginAttempts) => set('security', { maxLoginAttempts })}
+            />
+            <NumberField path="security.lockoutMinutes" label="Durée du blocage" suffix="minutes" value={sec.lockoutMinutes} onChange={(lockoutMinutes) => set('security', { lockoutMinutes })} />
+          </div>
+          <p className="text-xs leading-relaxed text-slate-500">
+            Le compteur s’applique au couple adresse IP / e-mail ; une adresse IP est bloquée au bout de cinq fois plus d’échecs, tous comptes confondus. Les codes de double
+            authentification sont limités de la même façon, par compte.
+          </p>
+        </Section>
+      </div>
+
+      <div className="space-y-6">
+        <Section title="Double authentification (2FA)" description="Code à usage unique généré par une application (Google Authenticator, 1Password, Authy…).">
+          <Segmented
+            value={sec.twoFactor}
+            onChange={(twoFactor) => set('security', { twoFactor })}
+            options={[
+              { value: 'optional', label: 'Facultative' },
+              { value: 'superadmins', label: 'Super administrateurs' },
+              { value: 'all', label: 'Tous les comptes' },
+            ]}
+          />
+          <p className="text-[13px] leading-relaxed text-slate-600">{TWO_FACTOR[sec.twoFactor]}</p>
+          {twoFaAppliesToMe && !user?.totpEnabled ? (
+            <Alert
+              tone="warning"
+              icon={AlertTriangle}
+              title="Activez d’abord la 2FA sur votre compte"
+              action={
+                <Link to="/profile?tab=security">
+                  <Button size="sm" icon={KeyRound}>
+                    Configurer
+                  </Button>
+                </Link>
+              }
+            >
+              Cette règle vous concerne : l’enregistrement sera refusé tant que votre propre compte n’est pas protégé.
+            </Alert>
+          ) : null}
+        </Section>
+
+        <Section title="Accès à l’administration par adresse IP" description="Si la liste n’est pas vide, seules ces adresses (ou plages CIDR) peuvent se connecter et utiliser l’administration.">
+          <Field label="Adresses autorisées" hint="Exemples : 196.203.12.4, 10.0.0.0/8, 2001:db8::/32. Liste vide = aucune restriction.">
+            <TagInput value={allowlist} onChange={(adminIpAllowlist) => set('security', { adminIpAllowlist })} validate={isIpRule} placeholder="Adresse IP ou plage CIDR" />
+          </Field>
+          <div className="flex flex-wrap items-center gap-2 text-[13px] text-slate-500">
+            Votre adresse actuelle : <code className="rounded bg-slate-100 px-1.5 py-0.5 font-mono text-xs text-slate-700">{meta.clientIp}</code>
+            {!allowlist.includes(meta.clientIp) ? (
+              <Button size="sm" variant="ghost" icon={Plus} onClick={() => set('security', { adminIpAllowlist: [...allowlist, meta.clientIp] })}>
+                Ajouter mon adresse
+              </Button>
+            ) : null}
+          </div>
+          {selfBlocked ? (
+            <Alert tone="danger" icon={AlertTriangle} title="Vous perdriez l’accès">
+              Votre adresse actuelle n’est pas couverte par la liste : l’enregistrement sera refusé.
+            </Alert>
+          ) : null}
+          {meta.ipBypass ? (
+            <Alert tone="info">
+              Restriction suspendue par la variable <code className="font-mono text-xs">SNAPIFY_ADMIN_IP_BYPASS=true</code> (procédure de secours).
+            </Alert>
+          ) : (
+            <p className="text-xs leading-relaxed text-slate-500">
+              En cas de blocage, définissez <code className="font-mono">SNAPIFY_ADMIN_IP_BYPASS=true</code> dans le fichier .env du serveur puis redémarrez-le.
+            </p>
+          )}
+        </Section>
+
+        <Section title="En-têtes et chiffrement">
+          <Switch
+            checked={sec.hsts}
+            onChange={(hsts) => set('security', { hsts })}
+            label="HSTS (Strict-Transport-Security)"
+            description="Impose HTTPS aux navigateurs pendant un an. N’activez qu’une fois le certificat HTTPS installé de manière durable."
+          />
+          {meta.dedicatedSecretKey === false ? (
+            <Alert tone="warning" icon={ShieldCheck} title="Clé de chiffrement dédiée recommandée">
+              Les secrets (mot de passe SMTP…) sont chiffrés avec la clé des sessions. Définissez <code className="font-mono text-xs">SNAPIFY_SECRET_KEY</code> dans le fichier .env pour les séparer.
+            </Alert>
+          ) : meta.dedicatedSecretKey ? (
+            <Alert tone="success" icon={ShieldCheck}>
+              Les secrets sont chiffrés avec une clé dédiée (SNAPIFY_SECRET_KEY).
+            </Alert>
+          ) : null}
+        </Section>
+      </div>
+    </div>
+  );
+}

package/template/src/admin/settings/controls.tsx

@@ -0,0 +1,133 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import React from 'react';
+import type { SystemMeta, SystemView } from '../lib/api';
+import { Field, Input } from '../ui/primitives';
+
+export type SystemForm = Omit<SystemView, 'smtp'> & { smtp: SystemView['smtp'] & { password: string; clearPassword: boolean } };
+
+export interface TabProps {
+  v: SystemForm;
+  set: <K extends keyof SystemForm>(key: K, patch: Partial<SystemForm[K]>) => void;
+  meta: SystemMeta;
+}
+
+/** Bornes identiques à la validation serveur : [min, max, libellé, minimum si non nul]. */
+const BOUNDS: Record<string, [number, number, string, number?]> = {
+  'smtp.port': [1, 65535, 'Port SMTP'],
+  'smtp.timeoutSec': [3, 120, 'Délai SMTP'],
+  'security.passwordMinLength': [8, 64, 'Longueur minimale du mot de passe'],
+  'security.passwordExpiryDays': [0, 730, 'Expiration du mot de passe'],
+  'security.sessionHours': [1, 168, 'Durée de session'],
+  'security.rememberDays': [1, 90, 'Durée « Rester connecté »'],
+  'security.idleMinutes': [0, 1440, 'Déconnexion après inactivité'],
+  'security.maxLoginAttempts': [3, 50, 'Tentatives de connexion'],
+  'security.lockoutMinutes': [1, 1440, 'Durée de blocage'],
+  'limits.publicApiPerMinute': [0, 100_000, 'API publique', 30],
+  'limits.adminApiPerMinute': [0, 100_000, 'API administration', 60],
+  'limits.formSubmissions.max': [1, 10_000, 'Formulaires (nombre)'],
+  'limits.formSubmissions.windowMinutes': [1, 1440, 'Formulaires (durée)'],
+  'limits.newsletter.max': [1, 10_000, 'Newsletter (nombre)'],
+  'limits.newsletter.windowMinutes': [1, 1440, 'Newsletter (durée)'],
+  'limits.passwordReset.max': [1, 10_000, 'Mot de passe oublié (nombre)'],
+  'limits.passwordReset.windowMinutes': [1, 1440, 'Mot de passe oublié (durée)'],
+  'uploads.maxSizeMb': [1, 100, 'Taille maximale des fichiers'],
+  'privacy.analyticsRetentionDays': [30, 3650, 'Conservation des statistiques'],
+  'privacy.submissionsRetentionDays': [0, 3650, 'Conservation des messages'],
+  'privacy.auditRetentionDays': [30, 3650, 'Conservation du journal d’activité'],
+  'privacy.mailLogRetentionDays': [7, 3650, 'Conservation du journal des e-mails'],
+  'performance.publicCacheSeconds': [0, 3600, 'Cache public'],
+};
+
+const at = (obj: unknown, path: string): unknown => path.split('.').reduce<unknown>((o, k) => (o as Record<string, unknown> | undefined)?.[k], obj);
+
+export function boundError(path: string, value: number): string | undefined {
+  const b = BOUNDS[path];
+  if (!b) return undefined;
+  const [min, max, , nonZeroMin] = b;
+  if (!Number.isInteger(value) || value < min || value > max) return `Valeur entière entre ${min} et ${max} attendue`;
+  if (nonZeroMin && value > 0 && value < nonZeroMin) return `${nonZeroMin} minimum (ou 0 pour illimité)`;
+  return undefined;
+}
+
+/** Première erreur de saisie du formulaire, au format « Libellé : message ». */
+export function firstFormError(v: SystemForm): string | null {
+  for (const [path, [, , label]] of Object.entries(BOUNDS)) {
+    const err = boundError(path, Number(at(v, path)));
+    if (err) return `${label} : ${err.charAt(0).toLowerCase()}${err.slice(1)}`;
+  }
+  return null;
+}
+
+export function NumberField({
+  path,
+  label,
+  hint,
+  value,
+  onChange,
+  suffix,
+  className,
+}: {
+  path: string;
+  label: React.ReactNode;
+  hint?: React.ReactNode;
+  value: number;
+  onChange: (v: number) => void;
+  suffix?: string;
+  className?: string;
+}) {
+  const err = boundError(path, value);
+  const [min, max] = BOUNDS[path] ?? [undefined, undefined];
+  return (
+    <Field label={label} hint={hint} error={err} className={className}>
+      <div className="flex items-center gap-2">
+        <div className="w-28 shrink-0">
+          <Input
+            type="number"
+            inputMode="numeric"
+            min={min}
+            max={max}
+            step={1}
+            value={Number.isFinite(value) ? value : ''}
+            invalid={!!err}
+            onChange={(e) => onChange(e.target.value === '' ? Number.NaN : Number(e.target.value))}
+            className="tabular-nums"
+          />
+        </div>
+        {suffix ? <span className="text-sm text-slate-500">{suffix}</span> : null}
+      </div>
+    </Field>
+  );
+}
+
+const IPV4 = /^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/;
+
+export function isIpRule(rule: string): boolean {
+  const [ip, bits, extra] = rule.split('/');
+  if (extra !== undefined) return false;
+  const m = IPV4.exec(ip);
+  if (m) return m.slice(1).every((x) => Number(x) <= 255) && (bits === undefined || (/^\d{1,2}$/.test(bits) && Number(bits) <= 32));
+  return /^[0-9a-f:]+$/i.test(ip) && ip.includes(':') && (bits === undefined || (/^\d{1,3}$/.test(bits) && Number(bits) <= 128));
+}
+
+const v4 = (ip: string) => {
+  const m = IPV4.exec(ip);
+  return m ? m.slice(1).reduce((n, x) => n * 256 + Number(x), 0) : null;
+};
+
+/** Indique si l'adresse est couverte par la liste (adresse exacte ou plage IPv4). */
+export function ipInList(ip: string, rules: string[]): boolean {
+  return rules.some((r) => {
+    if (r === ip) return true;
+    const [base, bits] = r.split('/');
+    const a = v4(ip);
+    const b = v4(base);
+    if (a === null || b === null || bits === undefined) return false;
+    const size = 2 ** (32 - Number(bits));
+    return Math.floor(a / size) === Math.floor(b / size);
+  });
+}

package/template/src/admin/ui/Pagination.tsx

@@ -0,0 +1,170 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { cx } from './primitives';
+
+export const PAGE_SIZES = [10, 25, 50, 100] as const;
+
+function storedSize(id: string, fallback: number): number {
+  try {
+    const v = Number(localStorage.getItem(`snapify.pageSize.${id}`));
+    return (PAGE_SIZES as readonly number[]).includes(v) ? v : fallback;
+  } catch {
+    return fallback;
+  }
+}
+
+/** Page courante + taille de page mémorisée par liste ; la page revient à 1 quand `resetKey` change (filtres, recherche). */
+export function usePaging(id: string, { defaultSize = 25, resetKey }: { defaultSize?: number; resetKey?: unknown } = {}) {
+  const [pageSize, setSize] = useState(() => storedSize(id, defaultSize));
+  const [page, setPage] = useState(1);
+  const key = JSON.stringify(resetKey ?? null);
+  const first = useRef(true);
+  useEffect(() => {
+    if (first.current) {
+      first.current = false;
+      return;
+    }
+    setPage(1);
+  }, [key]);
+  const setPageSize = (n: number) => {
+    try {
+      localStorage.setItem(`snapify.pageSize.${id}`, String(n));
+    } catch {
+      /* stockage indisponible : la taille reste valable pour la session */
+    }
+    setSize(n);
+    setPage(1);
+  };
+  return { page, setPage, pageSize, setPageSize };
+}
+
+/** Pagination côté navigateur d'une liste déjà chargée. */
+export function usePagination<T>(items: readonly T[], id: string, opts: { defaultSize?: number; resetKey?: unknown } = {}) {
+  const { page, setPage, pageSize, setPageSize } = usePaging(id, opts);
+  const total = items.length;
+  const pages = Math.max(1, Math.ceil(total / pageSize));
+  const current = Math.min(page, pages);
+  const pageItems = useMemo(() => items.slice((current - 1) * pageSize, current * pageSize), [items, current, pageSize]);
+  return {
+    pageItems,
+    /** Position de la première ligne affichée dans la liste complète. */
+    offset: (current - 1) * pageSize,
+    setPage,
+    props: { page: current, pageSize, total, onPage: setPage, onPageSize: setPageSize },
+  };
+}
+
+function pageList(page: number, pages: number): (number | 'gap')[] {
+  if (pages <= 7) return Array.from({ length: pages }, (_, i) => i + 1);
+  const set = new Set([1, pages, page - 1, page, page + 1].filter((p) => p >= 1 && p <= pages));
+  if (page <= 3) [2, 3, 4].forEach((p) => set.add(p));
+  if (page >= pages - 2) [pages - 3, pages - 2, pages - 1].forEach((p) => set.add(p));
+  const sorted = [...set].sort((a, b) => a - b);
+  const out: (number | 'gap')[] = [];
+  sorted.forEach((p, i) => {
+    if (i && p - sorted[i - 1] > 1) out.push('gap');
+    out.push(p);
+  });
+  return out;
+}
+
+export interface PaginationProps {
+  page: number;
+  pageSize: number;
+  total: number;
+  onPage: (page: number) => void;
+  onPageSize?: (size: number) => void;
+  /** Libellé des éléments comptés, au pluriel en « s » (ex. « pages », « abonnés ») ; le singulier en est déduit. */
+  noun?: string;
+  /** Sans marge latérale, pour une liste déjà placée dans un bloc avec marges. */
+  flush?: boolean;
+  className?: string;
+}
+
+export function Pagination({ page, pageSize, total, onPage, onPageSize, noun = 'éléments', flush, className }: PaginationProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  if (total <= 0) return null;
+  const pages = Math.max(1, Math.ceil(total / pageSize));
+  const current = Math.min(page, pages);
+  const from = (current - 1) * pageSize + 1;
+  const to = Math.min(total, current * pageSize);
+
+  const go = (p: number) => {
+    onPage(Math.min(Math.max(1, p), pages));
+    const list = ref.current?.parentElement;
+    if (list && list.getBoundingClientRect().top < 0) list.scrollIntoView({ block: 'start', behavior: 'smooth' });
+  };
+
+  const btn = 'flex h-8 min-w-8 items-center justify-center rounded-lg px-2 text-[13px] font-medium tabular-nums transition disabled:pointer-events-none disabled:opacity-40';
+
+  return (
+    <div ref={ref} className={cx('flex flex-wrap items-center justify-between gap-x-4 gap-y-2 border-t border-slate-100 text-[13px] text-slate-500', flush ? 'pt-3' : 'px-4 py-2.5', className)}>
+      <div className="flex items-center gap-4">
+        <span className="tabular-nums">
+          {pages > 1 ? (
+            <>
+              <span className="font-medium text-slate-700">
+                {from.toLocaleString('fr-FR')}–{to.toLocaleString('fr-FR')}
+              </span>{' '}
+              sur {total.toLocaleString('fr-FR')} {noun}
+            </>
+          ) : (
+            <>
+              <span className="font-medium text-slate-700">{total.toLocaleString('fr-FR')}</span> {total === 1 ? noun.replace(/s$/, '') : noun}
+            </>
+          )}
+        </span>
+        {onPageSize && total > PAGE_SIZES[0] ? (
+          <label className="flex items-center gap-2">
+            <span className="hidden sm:inline">Par page</span>
+            <select
+              value={pageSize}
+              onChange={(e) => onPageSize(Number(e.target.value))}
+              className="h-8 rounded-lg border border-slate-200 bg-white pl-2 pr-7 text-[13px] text-slate-700 outline-none transition focus:border-brand-500 focus:ring-2 focus:ring-brand-500/15"
+              aria-label="Éléments par page"
+            >
+              {PAGE_SIZES.map((n) => (
+                <option key={n} value={n}>
+                  {n}
+                </option>
+              ))}
+            </select>
+          </label>
+        ) : null}
+      </div>
+      {pages > 1 ? (
+        <nav className="flex items-center gap-1" aria-label="Pagination">
+          <button type="button" className={cx(btn, 'text-slate-500 hover:bg-slate-100 hover:text-slate-900')} disabled={current <= 1} onClick={() => go(current - 1)} aria-label="Page précédente">
+            <ChevronLeft className="h-4 w-4" />
+          </button>
+          {pageList(current, pages).map((p, i) =>
+            p === 'gap' ? (
+              <span key={`gap-${i}`} className="px-1 text-slate-400">
+                …
+              </span>
+            ) : (
+              <button
+                key={p}
+                type="button"
+                onClick={() => go(p)}
+                aria-current={p === current ? 'page' : undefined}
+                className={cx(btn, p === current ? 'bg-slate-900 text-white' : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900')}
+              >
+                {p}
+              </button>
+            )
+          )}
+          <button type="button" className={cx(btn, 'text-slate-500 hover:bg-slate-100 hover:text-slate-900')} disabled={current >= pages} onClick={() => go(current + 1)} aria-label="Page suivante">
+            <ChevronRight className="h-4 w-4" />
+          </button>
+        </nav>
+      ) : null}
+    </div>
+  );
+}

package/template/src/admin/ui/SaveBar.tsx

@@ -0,0 +1,77 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import React from 'react';
+import type { Blocker } from 'react-router-dom';
+import { Button, Kbd } from './primitives';
+import { Modal } from './overlays';
+
+/** Barre flottante affichée dès qu'il y a des modifications non enregistrées. */
+export function SaveBar({
+  dirty,
+  saving,
+  onSave,
+  onReset,
+  blocker,
+}: {
+  dirty: boolean;
+  saving: boolean;
+  onSave: () => Promise<boolean> | void;
+  onReset: () => void;
+  blocker?: Blocker;
+}) {
+  return (
+    <>
+      <div
+        className={`pointer-events-none fixed inset-x-0 bottom-5 z-40 flex justify-center px-4 transition-all duration-200 lg:pl-64 ${
+          dirty ? 'translate-y-0 opacity-100' : 'translate-y-6 opacity-0'
+        }`}
+      >
+        <div className="pointer-events-auto flex items-center gap-4 rounded-2xl bg-navy-900 py-2 pl-5 pr-2 text-white shadow-2xl ring-1 ring-white/10">
+          <span className="flex items-center gap-2 text-sm">
+            <span className="h-2 w-2 animate-pulse rounded-full bg-amber-400" />
+            Modifications non enregistrées
+            <span className="hidden text-slate-400 sm:inline">
+              · <Kbd>Ctrl</Kbd> + <Kbd>S</Kbd>
+            </span>
+          </span>
+          <Button variant="ghost" size="sm" className="text-slate-300 hover:bg-white/10 hover:text-white" onClick={onReset} disabled={saving}>
+            Annuler
+          </Button>
+          <Button variant="secondary" size="sm" loading={saving} onClick={() => void onSave()}>
+            Enregistrer
+          </Button>
+        </div>
+      </div>
+
+      {blocker ? (
+        <Modal
+          open={blocker.state === 'blocked'}
+          onClose={() => blocker.reset?.()}
+          size="sm"
+          title="Quitter sans enregistrer ?"
+          footer={
+            <>
+              <Button onClick={() => blocker.proceed?.()}>Quitter sans enregistrer</Button>
+              <Button
+                variant="primary"
+                loading={saving}
+                onClick={async () => {
+                  const ok = await onSave();
+                  if (ok !== false) blocker.proceed?.();
+                }}
+              >
+                Enregistrer et quitter
+              </Button>
+            </>
+          }
+        >
+          <p className="text-sm text-slate-600">Vos modifications sur cette page seront perdues si vous la quittez maintenant.</p>
+        </Modal>
+      ) : null}
+    </>
+  );
+}

package/template/src/admin/ui/TagInput.tsx

@@ -0,0 +1,54 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import React, { useState } from 'react';
+import { X } from 'lucide-react';
+
+export function TagInput({
+  value,
+  onChange,
+  placeholder = 'Ajouter puis Entrée',
+  validate,
+}: {
+  value: string[];
+  onChange: (v: string[]) => void;
+  placeholder?: string;
+  validate?: (v: string) => boolean;
+}) {
+  const [draft, setDraft] = useState('');
+  const add = () => {
+    const t = draft.trim().replace(/,$/, '');
+    if (t && !value.includes(t) && (!validate || validate(t))) onChange([...value, t]);
+    else if (t && validate && !validate(t)) return;
+    setDraft('');
+  };
+  const invalid = !!draft.trim() && !!validate && !validate(draft.trim());
+  return (
+    <div className={`flex min-h-9 flex-wrap items-center gap-1.5 rounded-lg border ${invalid ? 'border-rose-400' : 'border-slate-200'} bg-white px-2 py-1.5 shadow-xs focus-within:border-brand-500 focus-within:ring-3 focus-within:ring-brand-500/15`}>
+      {value.map((t) => (
+        <span key={t} className="inline-flex items-center gap-1 rounded-md bg-slate-100 py-0.5 pl-2 pr-1 text-xs font-medium text-slate-700">
+          {t}
+          <button type="button" onClick={() => onChange(value.filter((x) => x !== t))} className="rounded p-0.5 text-slate-400 hover:bg-slate-200 hover:text-slate-700" aria-label={`Retirer ${t}`}>
+            <X className="h-3 w-3" />
+          </button>
+        </span>
+      ))}
+      <input
+        value={draft}
+        onChange={(e) => setDraft(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ',') {
+            e.preventDefault();
+            add();
+          } else if (e.key === 'Backspace' && !draft && value.length) onChange(value.slice(0, -1));
+        }}
+        onBlur={add}
+        placeholder={value.length ? '' : placeholder}
+        className="min-w-[120px] flex-1 bg-transparent px-1 text-sm outline-none placeholder:text-slate-400"
+      />
+    </div>
+  );
+}