create-crm-tmp 2.0.0 → 2.1.0

package/template/src/components/settings/integrations/ImportResultDialog.tsx

@@ -0,0 +1,124 @@
+'use client';
+
+import { X } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export interface ImportResultItem {
+  configId: string;
+  configName: string;
+  imported: number;
+  updated?: number;
+  skipped?: number;
+  duplicates?: number;
+  error?: string;
+}
+
+interface ImportResultDialogProps {
+  open: boolean;
+  onClose: () => void;
+  configName?: string;
+  results: ImportResultItem[];
+  totalImported?: number;
+  totalUpdated?: number;
+  totalSkipped?: number;
+}
+
+export function ImportResultDialog({
+  open,
+  onClose,
+  configName,
+  results,
+  totalImported = 0,
+  totalUpdated = 0,
+  totalSkipped = 0,
+}: Readonly<ImportResultDialogProps>) {
+  if (!open) return null;
+
+  const hasSingleResult = results.length === 1;
+  const single = hasSingleResult ? results[0] : null;
+  const totalDuplicates = results.reduce((acc, r) => acc + (r.duplicates ?? 0), 0);
+  const totalErrors = results.reduce((acc, r) => acc + (r.error ? 1 : 0), 0);
+
+  const imported = hasSingleResult && single ? single.imported : totalImported;
+  const duplicates = hasSingleResult && single ? (single.duplicates ?? 0) : totalDuplicates;
+  const updated = hasSingleResult && single ? (single.updated ?? 0) : totalUpdated;
+  let ignoredOrErrors: number;
+  if (hasSingleResult && single) {
+    ignoredOrErrors = (single.skipped ?? 0) + (single.error ? 1 : 0);
+  } else {
+    ignoredOrErrors = totalSkipped + totalErrors;
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex min-h-dvh items-center justify-center bg-gray-500/20 p-4 backdrop-blur-sm">
+      <div className="w-full max-w-md overflow-hidden rounded-lg bg-white shadow-xl overscroll-contain">
+        <div className="flex items-center justify-between border-b border-gray-100 px-5 py-4">
+          <h2 className="text-lg font-bold text-gray-900">Résultat de l&apos;import</h2>
+          <button
+            type="button"
+            onClick={onClose}
+            className="rounded-lg p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-600"
+            aria-label="Fermer"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+        <div className="px-5 py-4">
+          {configName && (
+            <p className="mb-4 text-sm text-gray-600">
+              Configuration : <span className="font-medium text-gray-900">{configName}</span>
+            </p>
+          )}
+          <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm text-gray-700">
+            <span><strong className="text-gray-900">{imported}</strong> importés</span>
+            <span><strong className="text-gray-900">{duplicates}</strong> doublons</span>
+            <span><strong className="text-gray-900">{updated}</strong> mis à jour</span>
+            <span><strong className="text-gray-900">{ignoredOrErrors}</strong> ignorés / erreurs</span>
+          </div>
+          {hasSingleResult && single?.error && (
+            <div className="mt-4 rounded-lg border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-800">
+              {single.error}
+            </div>
+          )}
+          {!hasSingleResult && results.length > 0 && totalErrors > 0 && (
+            <p className="mt-4 text-sm text-red-600">
+              {totalErrors} configuration(s) en erreur
+            </p>
+          )}
+          {!hasSingleResult && results.length > 1 && (
+            <ul className="mt-4 space-y-1.5 border-t border-gray-100 pt-3 text-sm text-gray-600">
+              {results.map((r) => (
+                <li
+                  key={r.configId}
+                  className={cn(
+                    'flex justify-between gap-2',
+                    r.error && 'text-red-600',
+                  )}
+                >
+                  <span className="font-medium text-gray-900">{r.configName}</span>
+                  <span>
+                    {r.imported} importés
+                    {(r.duplicates ?? 0) > 0 && ` · ${r.duplicates} doublons`}
+                    {r.error && ` · ${r.error}`}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          )}
+          {results.length === 0 && (
+            <p className="text-sm text-gray-500">Aucun résultat à afficher.</p>
+          )}
+        </div>
+        <div className="flex justify-end border-t border-gray-100 px-5 py-3">
+          <button
+            type="button"
+            onClick={onClose}
+            className="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
+          >
+            Fermer
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/src/components/settings/integrations/IntegrationLogPanel.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { X, FileText } from 'lucide-react';
+import { IntegrationLogsTable, type IntegrationType } from './IntegrationLogsTable';
+
+interface IntegrationLogPanelProps {
+  open: boolean;
+  onClose: () => void;
+  integrationType: IntegrationType;
+  configId?: string;
+  configName?: string;
+}
+
+const TYPE_LABELS: Record<string, string> = {
+  google_sheet: 'Google Sheets',
+  meta_lead: 'Meta Lead Ads',
+  google_ads: 'Google Ads',
+};
+
+export function IntegrationLogPanel({
+  open,
+  onClose,
+  integrationType,
+  configId,
+  configName,
+}: IntegrationLogPanelProps) {
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-500/20 backdrop-blur-sm">
+      <div className="flex h-[85vh] w-full max-w-4xl flex-col rounded-lg border border-gray-200 bg-white shadow-xl overscroll-contain">
+        <div className="flex items-center justify-between border-b border-gray-100 px-5 py-4">
+          <div className="flex items-center gap-2">
+            <FileText className="h-5 w-5 text-gray-500" />
+            <h3 className="text-lg font-semibold text-gray-900">
+              Logs {TYPE_LABELS[integrationType] ?? integrationType}
+              {configName && (
+                <span className="ml-2 font-normal text-gray-600">— {configName}</span>
+              )}
+            </h3>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="rounded p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-600"
+            aria-label="Fermer"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+        <div className="flex-1 overflow-auto px-5 py-4">
+          <IntegrationLogsTable integrationType={integrationType} configId={configId} />
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/src/components/settings/integrations/IntegrationLogsTable.tsx

@@ -0,0 +1,186 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import { RefreshCw } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export type IntegrationType = 'google_sheet' | 'meta_lead' | 'google_ads';
+
+export interface IntegrationLogEntry {
+  id: string;
+  integrationType: string;
+  configId: string;
+  configName: string;
+  action: string;
+  actorId: string | null;
+  actor: { id: string; name: string; email: string } | null;
+  totalImported: number;
+  totalDuplicates: number;
+  totalUpdated: number;
+  totalErrors: number;
+  errorDetails: unknown;
+  createdAt: string;
+}
+
+const ACTION_LABELS: Record<string, string> = {
+  created: 'Création',
+  updated: 'Modification',
+  synced: 'Synchronisation',
+  synced_manual: 'Synchronisation manuelle',
+  synced_auto: 'Synchronisation automatique',
+  deleted: 'Suppression',
+};
+
+interface IntegrationLogsTableProps {
+  integrationType: IntegrationType;
+  configId?: string;
+  pageSize?: number;
+  enabled?: boolean;
+  className?: string;
+}
+
+export function IntegrationLogsTable({
+  integrationType,
+  configId,
+  pageSize = 20,
+  enabled = true,
+  className,
+}: Readonly<IntegrationLogsTableProps>) {
+  const [logs, setLogs] = useState<IntegrationLogEntry[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!enabled) return;
+    setPage(1);
+  }, [enabled, integrationType, configId]);
+
+  useEffect(() => {
+    if (!enabled) return;
+    let cancelled = false;
+    setLoading(true);
+
+    const params = new URLSearchParams({
+      integrationType,
+      page: String(page),
+      pageSize: String(pageSize),
+    });
+    if (configId) params.set('configId', configId);
+
+    fetch(`/api/settings/integrations/logs?${params}`)
+      .then((res) => res.json())
+      .then((data) => {
+        if (cancelled) return;
+        setLogs(data.logs ?? []);
+        setTotal(data.total ?? 0);
+      })
+      .catch(() => {
+        if (!cancelled) setLogs([]);
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [enabled, integrationType, configId, page, pageSize]);
+
+  const totalPages = useMemo(() => Math.ceil(total / pageSize), [total, pageSize]);
+
+  if (!enabled) return null;
+
+  return (
+    <div className={cn('flex h-full flex-col', className)}>
+      <div className="flex-1 overflow-auto">
+        {loading ? (
+          <div className="flex items-center justify-center py-12">
+            <RefreshCw className="h-8 w-8 animate-spin text-gray-400" role="status" aria-label="Chargement" />
+          </div>
+        ) : logs.length === 0 ? (
+          <p className="py-12 text-center text-sm text-gray-500">Aucun log pour le moment.</p>
+        ) : (
+          <div className="overflow-x-auto rounded-xl border border-slate-200 bg-white/80">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b border-slate-200 text-left text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+                  <th className="pb-2 pr-4 pl-4">Date / Heure</th>
+                  <th className="pb-2 pr-4">Action</th>
+                  <th className="pb-2 pr-4 text-right">Importés</th>
+                  <th className="pb-2 pr-4 text-right">Doublons</th>
+                  <th className="pb-2 pr-4 text-right">Mis à jour</th>
+                  <th className="pb-2 pr-4 text-right">Échoués</th>
+                </tr>
+              </thead>
+              <tbody>
+                {logs.map((log) => (
+                  <tr key={log.id} className="border-b border-slate-100 hover:bg-slate-50/70">
+                    <td className="whitespace-nowrap py-2.5 pr-4 pl-4 text-slate-700">
+                      {new Date(log.createdAt).toLocaleString('fr-FR', {
+                        day: '2-digit',
+                        month: '2-digit',
+                        year: 'numeric',
+                        hour: '2-digit',
+                        minute: '2-digit',
+                      })}
+                    </td>
+                    <td className="py-2.5 pr-4">
+                      <span className="rounded-md border border-slate-200 bg-slate-100 px-2 py-0.5 text-slate-700">
+                        {ACTION_LABELS[log.action] ?? log.action}
+                      </span>
+                    </td>
+                    <td className="py-2.5 pr-4 text-right font-semibold text-slate-900">
+                      {log.totalImported}
+                    </td>
+                    <td className="py-2.5 pr-4 text-right font-medium text-amber-600">
+                      {log.totalDuplicates}
+                    </td>
+                    <td className="py-2.5 pr-4 text-right text-slate-700">{log.totalUpdated}</td>
+                    <td
+                      className={cn(
+                        'py-2.5 pr-4 text-right',
+                        log.totalErrors > 0 ? 'font-medium text-rose-600' : 'text-slate-700',
+                      )}
+                    >
+                      {log.totalErrors}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+
+      {totalPages > 1 && (
+        <div className="mt-3 flex items-center justify-between border-t border-slate-100 pt-3">
+          <p className="text-sm text-slate-500">{total} entrée(s)</p>
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              aria-label="Page precedente"
+              onClick={() => setPage((p) => Math.max(1, p - 1))}
+              disabled={page <= 1}
+              className="rounded-lg border border-slate-200 px-3 py-1.5 text-sm text-slate-700 disabled:opacity-50"
+            >
+              Précédent
+            </button>
+            <span className="px-1 text-sm text-slate-600">
+              {page} / {totalPages}
+            </span>
+            <button
+              type="button"
+              aria-label="Page suivante"
+              onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+              disabled={page >= totalPages}
+              className="rounded-lg border border-slate-200 px-3 py-1.5 text-sm text-slate-700 disabled:opacity-50"
+            >
+              Suivant
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}