create-crm-tmp 2.0.0 → 2.1.0

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

@@ -0,0 +1,680 @@
+'use client';
+
+import { useEffect, useMemo, useState, useCallback } from 'react';
+import {
+  X,
+  Link2,
+  FileText,
+  Settings2,
+  ExternalLink,
+  Save,
+  Loader2,
+  Plus,
+  Trash2,
+  ArrowRight,
+} from 'lucide-react';
+import { cn, devToast } from '@/lib/utils';
+import { useAppToast } from '@/contexts/app-toast-context';
+import { IntegrationLogsTable } from './IntegrationLogsTable';
+import { StatusSelect } from '@/components/ui/status-select';
+
+type MonitoringTab = 'logs' | 'tableau' | 'modifier';
+
+type MappingAction = 'map' | 'note' | 'ignore';
+
+interface ColumnMapping {
+  id: string;
+  columnName: string;
+  action: MappingAction;
+  crmField?: string;
+}
+
+interface MonitoringConfig {
+  id: string;
+  name: string;
+  spreadsheetId: string;
+  sheetName: string;
+  headerRow: number;
+  active: boolean;
+  defaultStatusId: string | null;
+  defaultAssignedUserId: string | null;
+  phoneColumn?: string;
+  firstNameColumn?: string | null;
+  lastNameColumn?: string | null;
+  emailColumn?: string | null;
+  cityColumn?: string | null;
+  postalCodeColumn?: string | null;
+  originColumn?: string | null;
+  columnMappings?: ColumnMapping[];
+}
+
+interface GoogleSheetConfigMonitoringModalProps {
+  open: boolean;
+  onClose: () => void;
+  config: MonitoringConfig | null;
+  statuses: Array<{ id: string; name: string; color: string }>;
+  users: Array<{ id: string; name: string; email: string }>;
+  onSaved: () => Promise<void> | void;
+}
+
+function buildMappingsFromConfig(c: MonitoringConfig): ColumnMapping[] {
+  if (c.columnMappings && Array.isArray(c.columnMappings) && c.columnMappings.length > 0) {
+    return c.columnMappings.map((m) => ({
+      ...m,
+      id: m.id || `mapping-${Date.now()}-${Math.random()}`,
+    }));
+  }
+  const mappings: ColumnMapping[] = [];
+  const legacy = [
+    { column: c.phoneColumn, field: 'phone' },
+    { column: c.firstNameColumn, field: 'firstName' },
+    { column: c.lastNameColumn, field: 'lastName' },
+    { column: c.emailColumn, field: 'email' },
+    { column: c.cityColumn, field: 'city' },
+    { column: c.postalCodeColumn, field: 'postalCode' },
+    { column: c.originColumn, field: 'origin' },
+  ];
+  legacy.forEach(({ column, field }) => {
+    if (column) {
+      mappings.push({
+        id: `mapping-${Date.now()}-${Math.random()}`,
+        columnName: column,
+        action: 'map',
+        crmField: field,
+      });
+    }
+  });
+  return mappings;
+}
+
+export function GoogleSheetConfigMonitoringModal({
+  open,
+  onClose,
+  config,
+  statuses,
+  users,
+  onSaved,
+}: Readonly<GoogleSheetConfigMonitoringModalProps>) {
+  const toast = useAppToast();
+  const [activeTab, setActiveTab] = useState<MonitoringTab>('logs');
+  const [saving, setSaving] = useState(false);
+  const [formData, setFormData] = useState({
+    name: '',
+    active: true,
+    sheetUrl: '',
+    sheetName: '',
+    headerRow: '1',
+    defaultStatusId: null as string | null,
+    defaultAssignedUserId: null as string | null,
+  });
+  const [mappings, setMappings] = useState<ColumnMapping[]>([]);
+  const [tableauRawRows, setTableauRawRows] = useState<string[][]>([]);
+  const [tableauLoading, setTableauLoading] = useState(false);
+  const [tableauError, setTableauError] = useState<string | null>(null);
+
+  const fetchTableauData = useCallback(async () => {
+    if (!config?.spreadsheetId || !config?.sheetName) return;
+    setTableauLoading(true);
+    setTableauError(null);
+    try {
+      const sheetUrl = `https://docs.google.com/spreadsheets/d/${config.spreadsheetId}/edit`;
+      const res = await fetch('/api/settings/google-sheet/preview', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ sheetUrl, sheetName: config.sheetName }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || 'Erreur');
+      setTableauRawRows(data.rawRows || []);
+    } catch (err: unknown) {
+      setTableauError(err instanceof Error ? err.message : 'Impossible de charger le tableau');
+      setTableauRawRows([]);
+    } finally {
+      setTableauLoading(false);
+    }
+  }, [config?.spreadsheetId, config?.sheetName]);
+
+  useEffect(() => {
+    if (!open || !config) return;
+    setActiveTab('logs');
+    setFormData({
+      name: config.name,
+      active: config.active,
+      sheetUrl: `https://docs.google.com/spreadsheets/d/${config.spreadsheetId}/edit`,
+      sheetName: config.sheetName,
+      headerRow: String(config.headerRow),
+      defaultStatusId: config.defaultStatusId,
+      defaultAssignedUserId: config.defaultAssignedUserId,
+    });
+    setMappings(buildMappingsFromConfig(config));
+  }, [open, config]);
+
+  const spreadsheetPublicUrl = useMemo(() => {
+    if (!config?.spreadsheetId) return '';
+    return `https://docs.google.com/spreadsheets/d/${config.spreadsheetId}`;
+  }, [config?.spreadsheetId]);
+
+  useEffect(() => {
+    if (open && config && activeTab === 'tableau') {
+      fetchTableauData();
+    }
+  }, [open, config, activeTab, fetchTableauData]);
+
+  const updateMappingColumnName = (id: string, value: string) => {
+    setMappings((prev) =>
+      prev.map((m) => (m.id === id ? { ...m, columnName: value } : m)),
+    );
+  };
+  const updateMappingAction = (id: string, action: MappingAction) => {
+    setMappings((prev) =>
+      prev.map((m) =>
+        m.id === id
+          ? { ...m, action, crmField: action === 'map' ? (m.crmField || 'firstName') : undefined }
+          : m,
+      ),
+    );
+  };
+  const updateMappingCrmField = (id: string, value: string) => {
+    setMappings((prev) =>
+      prev.map((m) => (m.id === id ? { ...m, crmField: value } : m)),
+    );
+  };
+  const removeMapping = (id: string) => {
+    setMappings((prev) => prev.filter((m) => m.id !== id));
+  };
+
+  const handleSave = async () => {
+    if (!config) return;
+    const phoneMapping = mappings.find(
+      (m) => m.action === 'map' && m.crmField === 'phone' && m.columnName.trim() !== '',
+    );
+    if (!phoneMapping) {
+      toast.error('Le mapping du téléphone est obligatoire');
+      return;
+    }
+    setSaving(true);
+    try {
+      const res = await fetch(`/api/settings/google-sheet/${config.id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ ...formData, columnMappings: mappings }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || 'Erreur lors de la sauvegarde');
+      toast.success('Configuration Google Sheets mise à jour');
+      await onSaved();
+      onClose();
+    } catch (error: unknown) {
+      toast.error(devToast('Impossible de mettre à jour la configuration. Veuillez réessayer.', error));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (!open || !config) return null;
+
+  const tabs: Array<{
+    id: MonitoringTab;
+    label: string;
+    icon: React.ComponentType<{ className?: string }>;
+  }> = [
+    { id: 'logs', label: 'Logs', icon: FileText },
+    { id: 'tableau', label: 'Tableau', icon: Link2 },
+    { id: 'modifier', label: 'Modifier', icon: Settings2 },
+  ];
+
+  return (
+    <div className="ui-fade-in fixed inset-0 z-50 flex min-h-dvh flex-col items-stretch justify-stretch bg-gray-500/20 p-0 backdrop-blur-sm sm:p-4">
+      <div className="flex flex-1 flex-col overflow-hidden rounded-none bg-white shadow-2xl sm:mx-auto sm:max-h-[90vh] sm:w-full sm:max-w-[min(1100px,90vw)] sm:rounded-2xl overscroll-contain">
+        {/* Header + Tabs */}
+        <div className="shrink-0 border-b border-slate-200 bg-white px-4 py-4 sm:px-6">
+          <div className="flex items-start justify-between gap-4">
+            <div className="min-w-0 flex-1">
+              <p className="text-[11px] font-semibold uppercase tracking-widest text-slate-500">
+                Monitoring Google Sheets
+              </p>
+              <h3 className="mt-1 truncate text-xl font-semibold text-slate-900">{config.name}</h3>
+              <p className="mt-0.5 text-sm text-slate-600">
+                Logs, tableau et édition complète de la configuration.
+              </p>
+            </div>
+            <button
+              type="button"
+              onClick={onClose}
+              className="shrink-0 rounded-xl p-2 text-slate-400 transition-colors duration-200 hover:bg-slate-100 hover:text-slate-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+              aria-label="Fermer"
+            >
+              <X className="h-5 w-5" />
+            </button>
+          </div>
+
+          {/* Lien du tableau (intégré dans l'en-tête) */}
+          <div className="mt-4">
+            <p className="text-[11px] font-semibold uppercase tracking-widest text-slate-500">
+              Lien du tableau
+            </p>
+            <p className="mt-1.5 break-all rounded-xl border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm text-slate-800">
+              {spreadsheetPublicUrl}
+            </p>
+            <p className="mt-1.5 text-xs text-slate-500">
+              Ouvrez le tableau dans un nouvel onglet pour visualiser ou modifier les données.
+            </p>
+          </div>
+
+          {/* Tabs: toute la largeur disponible */}
+          <div className="mt-4 flex w-full gap-1 rounded-xl bg-slate-100/80 p-1">
+            {tabs.map((tab) => {
+              const Icon = tab.icon;
+              const isActive = activeTab === tab.id;
+              return (
+                <button
+                  key={tab.id}
+                  type="button"
+                  onClick={() => setActiveTab(tab.id)}
+                  className={cn(
+                    'flex min-w-0 flex-1 items-center justify-center gap-2 rounded-lg px-3 py-2.5 text-sm font-medium transition-[color,background-color,box-shadow] duration-200',
+                    isActive
+                      ? 'bg-white text-blue-700 shadow-sm ring-1 ring-slate-200/80'
+                      : 'text-slate-600 hover:bg-white/60 hover:text-slate-900',
+                  )}
+                >
+                  <Icon className="h-4 w-4 shrink-0" />
+                  <span className="truncate">{tab.label}</span>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Content: full space, no centered box */}
+        <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+          <div className="flex-1 overflow-auto">
+            {activeTab === 'logs' && (
+              <div className="h-full p-4 sm:p-6 ui-fade-in">
+                <IntegrationLogsTable
+                  integrationType="google_sheet"
+                  configId={config.id}
+                  enabled={open && activeTab === 'logs'}
+                />
+              </div>
+            )}
+
+            {activeTab === 'tableau' && (
+              <div className="flex h-full min-h-0 flex-1 flex-col overflow-auto p-4 sm:p-6 ui-fade-in">
+                <h3 className="mb-2 text-base font-semibold text-slate-900">
+                  Contenu du tableau
+                </h3>
+                <p className="mb-4 text-sm text-slate-600">
+                  Aperçu des données de la feuille «&nbsp;{config.sheetName}&nbsp;» (ligne d&apos;en-tête : {config.headerRow}).
+                </p>
+                {(() => {
+                  if (tableauLoading) {
+                    return (
+                      <div className="flex flex-1 items-center justify-center py-12">
+                        <Loader2 className="h-8 w-8 animate-spin text-slate-400" role="status" aria-label="Chargement" />
+                      </div>
+                    );
+                  }
+                  if (tableauError) {
+                    return (
+                      <div className="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">
+                        {tableauError}
+                      </div>
+                    );
+                  }
+                  if (tableauRawRows.length === 0) {
+                    return (
+                      <p className="text-sm text-slate-500">Aucune donnée disponible.</p>
+                    );
+                  }
+                  return (
+                    <div className="overflow-x-auto rounded-xl border border-slate-200 bg-white">
+                      <table className="min-w-full divide-y divide-slate-200">
+                        <thead className="bg-slate-50">
+                          <tr>
+                            <th className="px-3 py-2 text-left text-xs font-medium text-slate-500">
+                              #
+                            </th>
+                            {tableauRawRows[0]?.map((_, colIdx) => (
+                              <th
+                                key={`col-${colIdx}`}
+                                className="px-3 py-2 text-left text-xs font-medium text-slate-500"
+                              >
+                                Col {colIdx + 1}
+                              </th>
+                            ))}
+                          </tr>
+                        </thead>
+                        <tbody className="divide-y divide-slate-100 bg-white">
+                          {tableauRawRows.map((row, rowIdx) => {
+                            const isHeaderRow = rowIdx + 1 === config.headerRow;
+                            return (
+                              <tr
+                                key={`tableau-row-${rowIdx}`}
+                                className={cn(
+                                  isHeaderRow
+                                    ? 'bg-blue-50 ring-2 ring-blue-500 ring-inset'
+                                    : 'hover:bg-slate-50/70',
+                                )}
+                              >
+                                <td className="px-3 py-2 text-xs font-medium text-slate-500">
+                                  {rowIdx + 1}
+                                </td>
+                                {row.map((cell, colIdx) => (
+                                  <td
+                                    key={`tableau-cell-${rowIdx}-${colIdx}`}
+                                    className={cn(
+                                      'max-w-[200px] truncate px-3 py-2 text-xs text-slate-900',
+                                      isHeaderRow && 'font-semibold text-blue-700',
+                                    )}
+                                  >
+                                    {cell || <span className="text-slate-300">—</span>}
+                                  </td>
+                                ))}
+                              </tr>
+                            );
+                          })}
+                        </tbody>
+                      </table>
+                    </div>
+                  );
+                })()}
+              </div>
+            )}
+
+            {activeTab === 'modifier' && (
+              <div className="p-4 sm:p-6 ui-fade-in">
+                <form
+                  id="monitoring-modifier-form"
+                  onSubmit={(e) => {
+                    e.preventDefault();
+                    handleSave();
+                  }}
+                  className="space-y-6"
+                >
+                  <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <div>
+                      <label
+                        htmlFor="gs-monitoring-name"
+                        className="block text-sm font-medium text-slate-700"
+                      >
+                        Nom de la configuration
+                      </label>
+                      <input
+                        id="gs-monitoring-name"
+                        value={formData.name}
+                        onChange={(e) =>
+                          setFormData((prev) => ({ ...prev, name: e.target.value }))
+                        }
+                        autoComplete="off"
+                        className="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2.5 text-sm text-slate-900 focus-visible:border-blue-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                      />
+                    </div>
+                    <div>
+                      <label
+                        htmlFor="gs-monitoring-header-row"
+                        className="block text-sm font-medium text-slate-700"
+                      >
+                        Ligne d&apos;en-tête
+                      </label>
+                      <input
+                        id="gs-monitoring-header-row"
+                        value={formData.headerRow}
+                        onChange={(e) =>
+                          setFormData((prev) => ({ ...prev, headerRow: e.target.value }))
+                        }
+                        autoComplete="off"
+                        className="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2.5 text-sm text-slate-900 focus-visible:border-blue-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                      />
+                    </div>
+                  </div>
+
+                  <div>
+                    <label
+                      htmlFor="gs-monitoring-url"
+                      className="block text-sm font-medium text-slate-700"
+                    >
+                      Lien Google Sheet
+                    </label>
+                    <input
+                      id="gs-monitoring-url"
+                      value={formData.sheetUrl}
+                      onChange={(e) =>
+                        setFormData((prev) => ({ ...prev, sheetUrl: e.target.value }))
+                      }
+                      placeholder="https://docs.google.com/spreadsheets/d/..."
+                      autoComplete="url"
+                      className="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2.5 text-sm text-slate-900 focus-visible:border-blue-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                    />
+                  </div>
+
+                  <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <div>
+                      <label
+                        htmlFor="gs-monitoring-sheet-name"
+                        className="block text-sm font-medium text-slate-700"
+                      >
+                        Nom de l&apos;onglet
+                      </label>
+                      <input
+                        id="gs-monitoring-sheet-name"
+                        value={formData.sheetName}
+                        onChange={(e) =>
+                          setFormData((prev) => ({ ...prev, sheetName: e.target.value }))
+                        }
+                        autoComplete="off"
+                        className="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2.5 text-sm text-slate-900 focus-visible:border-blue-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                      />
+                    </div>
+                    <div className="flex items-end pb-2">
+                      <label className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-slate-700">
+                        <input
+                          type="checkbox"
+                          checked={formData.active}
+                          onChange={(e) =>
+                            setFormData((prev) => ({ ...prev, active: e.target.checked }))
+                          }
+                          className="h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500"
+                        />
+                        <span className="ml-2">Intégration active</span>
+                      </label>
+                    </div>
+                  </div>
+
+                  <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <div>
+                      <label
+                        htmlFor="gs-monitoring-user"
+                        className="block text-sm font-medium text-slate-700"
+                      >
+                        Utilisateur par défaut
+                      </label>
+                      <select
+                        id="gs-monitoring-user"
+                        value={formData.defaultAssignedUserId || ''}
+                        onChange={(e) =>
+                          setFormData((prev) => ({
+                            ...prev,
+                            defaultAssignedUserId: e.target.value || null,
+                          }))
+                        }
+                        className="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2.5 text-sm text-slate-900 focus-visible:border-blue-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                      >
+                        <option value="">Aucun utilisateur par défaut</option>
+                        {users.map((user) => (
+                          <option key={user.id} value={user.id}>
+                            {user.name} ({user.email})
+                          </option>
+                        ))}
+                      </select>
+                    </div>
+                    <div>
+                      <label
+                        htmlFor="gs-monitoring-status"
+                        className="block text-sm font-medium text-slate-700"
+                      >
+                        Statut par défaut
+                      </label>
+                      <StatusSelect
+                        id="gs-monitoring-status"
+                        statuses={statuses}
+                        value={formData.defaultStatusId || ''}
+                        onChange={(v) =>
+                          setFormData((prev) => ({ ...prev, defaultStatusId: v || null }))
+                        }
+                        placeholder="Aucun statut par défaut"
+                        className="mt-1"
+                      />
+                    </div>
+                  </div>
+
+                  {/* Correspondance des champs - édition complète */}
+                  <div className="border-t border-slate-200 pt-6">
+                    <div className="flex flex-wrap items-center justify-between gap-2">
+                      <h4 className="text-base font-semibold text-slate-900">
+                        Correspondance des champs
+                      </h4>
+                      <button
+                        type="button"
+                        onClick={() =>
+                          setMappings((prev) => [
+                            ...prev,
+                            {
+                              id: `mapping-${Date.now()}-${Math.random()}`,
+                              columnName: '',
+                              action: 'ignore',
+                            },
+                          ])
+                        }
+                        className="inline-flex items-center gap-1.5 rounded-xl border border-blue-600 bg-white px-3 py-2 text-sm font-medium text-blue-600 transition-colors hover:bg-blue-50"
+                      >
+                        <Plus className="h-4 w-4" />
+                        Ajouter un champ
+                      </button>
+                    </div>
+                    <p className="mt-1 text-xs text-slate-500">
+                      Le champ Téléphone est obligatoire. Vous pouvez ajouter, modifier ou
+                      supprimer des lignes.
+                    </p>
+                    <div className="mt-4 space-y-3">
+                      {mappings.map((mapping) => (
+                        <div
+                          key={mapping.id}
+                          className="flex flex-wrap items-center gap-2 rounded-xl border border-slate-200 bg-slate-50/50 p-3 sm:gap-3"
+                        >
+                          <input
+                            type="text"
+                            value={mapping.columnName}
+                            onChange={(e) => updateMappingColumnName(mapping.id, e.target.value)}
+                            placeholder="Nom de la colonne Google Sheets"
+                            className="min-w-[120px] flex-1 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 focus-visible:border-blue-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                          />
+                          <ArrowRight className="h-4 w-4 shrink-0 text-slate-400" />
+                          <select
+                            value={mapping.action}
+                            onChange={(e) =>
+                              updateMappingAction(
+                                mapping.id,
+                                e.target.value as MappingAction,
+                              )
+                            }
+                            className="min-w-[160px] flex-1 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 focus-visible:border-blue-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                          >
+                            <option value="map">Mapper vers un champ</option>
+                            <option value="note">Ajouter comme note</option>
+                            <option value="ignore">Ne pas importer</option>
+                          </select>
+                          {mapping.action === 'map' && (
+                            <>
+                              <ArrowRight className="h-4 w-4 shrink-0 text-slate-400" />
+                              <select
+                                value={mapping.crmField || ''}
+                                onChange={(e) =>
+                                  updateMappingCrmField(mapping.id, e.target.value)
+                                }
+                                className="min-w-[140px] flex-1 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 focus-visible:border-blue-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                              >
+                                <option value="" disabled>Sélectionner un champ</option>
+                                <option value="phone">Téléphone *</option>
+                                <option value="firstName">Prénom</option>
+                                <option value="lastName">Nom</option>
+                                <option value="email">Email</option>
+                                <option value="civility">Civilité</option>
+                                <option value="secondaryPhone">Téléphone secondaire</option>
+                                <option value="address">Adresse</option>
+                                <option value="city">Ville</option>
+                                <option value="postalCode">Code postal</option>
+                                <option value="companyName">Société</option>
+                                <option value="origin">Origine</option>
+                                <option value="website">Site internet</option>
+                                <option value="jobTitle">Intitulé du poste</option>
+                                <option value="createdAt">Date de création</option>
+                                <option value="linkedin">LinkedIn</option>
+                                <option value="facebook">Facebook</option>
+                                <option value="twitter">Twitter</option>
+                                <option value="instagram">Instagram</option>
+                              </select>
+                            </>
+                          )}
+                          <button
+                            type="button"
+                            onClick={() => removeMapping(mapping.id)}
+                            className="rounded-lg p-2 text-slate-400 transition-colors hover:bg-rose-100 hover:text-rose-600"
+                            aria-label="Supprimer le mapping"
+                          >
+                            <Trash2 className="h-4 w-4" />
+                          </button>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </form>
+              </div>
+            )}
+          </div>
+
+          {/* Sticky footer */}
+          <div className="shrink-0 border-t border-slate-200 bg-white px-4 py-3 sm:px-6">
+            <div className="flex flex-wrap items-center justify-between gap-3">
+              <button
+                type="button"
+                onClick={onClose}
+                className="rounded-xl border border-slate-300 bg-white px-4 py-2.5 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50"
+              >
+                Fermer
+              </button>
+              <div className="flex gap-2">
+                {activeTab === 'tableau' && (
+                  <a
+                    href={spreadsheetPublicUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="inline-flex items-center gap-2 rounded-xl bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-blue-700"
+                  >
+                    Ouvrir le tableau
+                    <ExternalLink className="h-4 w-4" />
+                  </a>
+                )}
+                {activeTab === 'modifier' && (
+                  <button
+                    type="submit"
+                    form="monitoring-modifier-form"
+                    disabled={saving}
+                    className="inline-flex items-center gap-2 rounded-xl bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-blue-700 disabled:opacity-60"
+                  >
+                    {saving ? (
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                    ) : (
+                      <Save className="h-4 w-4" />
+                    )}
+                    {saving ? 'Enregistrement...' : 'Enregistrer les modifications'}
+                  </button>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}