Suppression contrat staff/contrats

BULK_DELETE_CONTRATS.md

@@ -0,0 +1,65 @@
+# Suppression groupée de contrats - Page Staff/Contrats
+
+## Résumé des modifications
+
+Cette fonctionnalité permet au staff de supprimer plusieurs contrats en une seule opération depuis la page `/staff/contrats`.
+
+## Fichiers modifiés
+
+### 1. `components/staff/ContractsGrid.tsx`
+
+#### Ajouts :
+- **État du modal** : `showDeleteModal` pour contrôler l'affichage du modal de confirmation
+- **Bouton dans le menu actions groupées** : Ajout d'une option "Supprimer les contrats" en rouge dans le menu déroulant
+- **Modal de confirmation** : `DeleteConfirmModal` - nouveau composant inline qui :
+  - Affiche un avertissement en rouge sur l'irréversibilité de l'action
+  - Liste les contrats qui seront supprimés
+  - Demande à l'utilisateur de taper "supprimer" pour confirmer
+  - Appelle l'API `/api/staff/contracts/bulk-delete`
+  - Gère les erreurs et affiche des notifications toast
+
+### 2. `app/api/staff/contracts/bulk-delete/route.ts` (nouveau fichier)
+
+Endpoint API POST qui :
+- Vérifie l'authentification et les permissions staff
+- Valide les IDs de contrats reçus
+- Supprime les contrats de la table `cddu_contracts`
+- Retourne la liste des IDs supprimés
+- Gère les erreurs avec des messages appropriés
+
+## Fonctionnement
+
+1. L'utilisateur sélectionne un ou plusieurs contrats via les checkboxes
+2. Clique sur "Action groupée" → "Supprimer les contrats"
+3. Un modal s'ouvre avec :
+   - Un avertissement en rouge
+   - La liste des contrats à supprimer
+   - Un champ de confirmation où il faut taper "supprimer"
+4. Une fois confirmé, les contrats sont supprimés de la base de données
+5. La liste est automatiquement mise à jour et un toast de succès s'affiche
+6. La sélection est réinitialisée
+
+## Sécurité
+
+- ✅ Vérification de l'authentification
+- ✅ Vérification du statut staff
+- ✅ Confirmation explicite requise (taper "supprimer")
+- ✅ Avertissement visuel sur l'irréversibilité
+- ✅ Séparation visuelle dans le menu (ligne de séparation + couleur rouge)
+
+## UX/UI
+
+- Bouton en rouge pour signaler le danger
+- Modal avec fond rouge pour les avertissements
+- Champ de confirmation obligatoire
+- Toast de succès avec le nombre de contrats supprimés
+- Mise à jour immédiate de la liste sans rechargement
+
+## Tests recommandés
+
+1. Tester avec 1 contrat
+2. Tester avec plusieurs contrats
+3. Tester l'annulation
+4. Tester sans taper "supprimer" correctement
+5. Vérifier les permissions (utilisateur non-staff)
+6. Vérifier que les contrats sont bien supprimés de la BDD

app/(app)/minima-ccn/ccnsvp/annexe5-data.tsx

@@ -0,0 +1,299 @@
+"use client";
+
+import React, { useState } from 'react';
+
+const euro = (n: number) => new Intl.NumberFormat('fr-FR', {
+  minimumFractionDigits: Number.isInteger(n) ? 0 : 2,
+  maximumFractionDigits: 2
+}).format(n) + '€';
+
+interface Annexe5ContentProps {}
+
+export default function Annexe5Content({}: Annexe5ContentProps) {
+  const [activeSection, setActiveSection] = useState<'artistes' | 'techniciens'>('artistes');
+
+  return (
+    <div className="space-y-6">
+      {/* En-tête */}
+      <div className="rounded-xl border bg-gradient-to-br from-orange-50 to-red-50 p-4">
+        <h2 className="text-lg font-semibold text-orange-900 mb-1">
+          Annexe 5 - Spectacles de cirque
+        </h2>
+        <p className="text-sm text-orange-700">
+          Producteurs ou diffuseurs de spectacles de cirque
+        </p>
+        <p className="text-xs text-orange-600 mt-2">
+          En application du titre VI des clauses communes et des articles 3.4, 3.5 et 4.3 de l'annexe 5
+        </p>
+      </div>
+
+      {/* Navigation */}
+      <div className="flex gap-3 border-b pb-2 flex-wrap">
+        <button
+          onClick={() => setActiveSection('artistes')}
+          className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
+            activeSection === 'artistes'
+              ? 'bg-gradient-to-r from-orange-500 to-red-600 text-white shadow-md'
+              : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
+          }`}
+        >
+          🎪 Artistes-interprètes
+        </button>
+        <button
+          onClick={() => setActiveSection('techniciens')}
+          className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
+            activeSection === 'techniciens'
+              ? 'bg-gradient-to-r from-orange-500 to-red-600 text-white shadow-md'
+              : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
+          }`}
+        >
+          🔧 Personnel technique
+        </button>
+      </div>
+
+      {/* Section Artistes-interprètes */}
+      {activeSection === 'artistes' && (
+        <div className="space-y-6">
+          {/* Exploitation des spectacles */}
+          <div className="rounded-xl border bg-white p-5">
+            <h3 className="text-base font-bold text-orange-900 mb-4 flex items-center gap-2">
+              <span className="inline-block w-2 h-2 rounded-full bg-orange-500"></span>
+              Artistes-interprètes du cirque et musiciens(nnes) - Exploitation des spectacles
+            </h3>
+            
+            <div className="mb-4 text-sm text-slate-700 bg-orange-50 border border-orange-200 rounded-lg p-3">
+              La grille des salaires concerne l'ensemble des contrats de travail : <span className="font-bold">CDI, CDD, CDDU</span>
+            </div>
+
+            <div className="space-y-6">
+              {/* En situation d'itinérance */}
+              <div>
+                <h4 className="text-sm font-semibold text-orange-700 mb-3 px-3 py-2 bg-orange-50 rounded-lg inline-block">
+                  🚐 En situation d'itinérance (spectacles sous chapiteau)
+                </h4>
+                <div className="overflow-x-auto">
+                  <table className="w-full text-xs border-collapse">
+                    <thead>
+                      <tr className="bg-orange-50">
+                        <th className="text-left p-3 text-orange-900 font-bold border border-orange-200">Type</th>
+                        <th className="text-center p-3 text-orange-900 font-bold border border-orange-200">Cachet</th>
+                        <th className="text-center p-3 text-orange-900 font-bold border border-orange-200">1/2 cachet<br/>(demi-représentation)</th>
+                        <th className="text-center p-3 text-orange-900 font-bold border border-orange-200 bg-orange-100">Mensuel</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr className="hover:bg-orange-50/30">
+                        <td className="p-3 border border-orange-200 font-semibold">Rémunération</td>
+                        <td className="text-center p-3 font-semibold border border-orange-200">{euro(117.23)}</td>
+                        <td className="text-center p-3 font-semibold border border-orange-200">{euro(106.75)}</td>
+                        <td className="text-center p-3 font-bold text-orange-900 border border-orange-200 bg-orange-50">{euro(1915.29)}</td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+
+              {/* En tournée (hors chapiteau) */}
+              <div>
+                <h4 className="text-sm font-semibold text-red-700 mb-3 px-3 py-2 bg-red-50 rounded-lg inline-block">
+                  🎭 En tournée (hors chapiteau)
+                </h4>
+                <div className="overflow-x-auto">
+                  <table className="w-full text-xs border-collapse">
+                    <thead>
+                      <tr className="bg-red-50">
+                        <th className="text-left p-3 text-red-900 font-bold border border-red-200">Type</th>
+                        <th className="text-center p-3 text-red-900 font-bold border border-red-200">Cachet</th>
+                        <th className="text-center p-3 text-red-900 font-bold border border-red-200">1/2 cachet<br/>(demi-représentation)</th>
+                        <th className="text-center p-3 text-red-900 font-bold border border-red-200 bg-red-100">Mensuel</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr className="hover:bg-red-50/30">
+                        <td className="p-3 border border-red-200 font-semibold">Rémunération</td>
+                        <td className="text-center p-3 font-semibold border border-red-200">{euro(128.59)}</td>
+                        <td className="text-center p-3 font-semibold border border-red-200">{euro(114.42)}</td>
+                        <td className="text-center p-3 font-bold text-red-900 border border-red-200 bg-red-50">{euro(1992.04)}</td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Répétitions / Création */}
+          <div className="rounded-xl border bg-white p-5">
+            <h3 className="text-base font-bold text-amber-900 mb-4 flex items-center gap-2">
+              <span className="inline-block w-2 h-2 rounded-full bg-amber-500"></span>
+              Répétitions - Création
+            </h3>
+            
+            <div className="overflow-x-auto">
+              <table className="w-full text-xs border-collapse">
+                <thead>
+                  <tr className="bg-amber-50">
+                    <th className="text-left p-3 text-amber-900 font-bold border border-amber-200">Type de cachet</th>
+                    <th className="text-center p-3 text-amber-900 font-bold border border-amber-200">Montant</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr className="hover:bg-amber-50/30">
+                    <td className="p-3 border border-amber-200">Cachet de base par jour</td>
+                    <td className="text-center p-3 font-bold text-amber-900 border border-amber-200">{euro(106.75)}</td>
+                  </tr>
+                  <tr className="hover:bg-amber-50/30">
+                    <td className="p-3 border border-amber-200">Cachet de répétition en cas de service isolé pour les artistes de cirque</td>
+                    <td className="text-center p-3 font-bold text-amber-900 border border-amber-200">{euro(62.42)}</td>
+                  </tr>
+                  <tr className="hover:bg-amber-50/30">
+                    <td className="p-3 border border-amber-200 font-semibold">Salaire mensuel</td>
+                    <td className="text-center p-3 font-bold text-amber-900 border border-amber-200 bg-amber-50">{euro(1775.78)}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+
+            <div className="mt-4 text-xs text-slate-600 bg-amber-50 border border-amber-200 rounded-lg p-3">
+              <span className="font-semibold">Note :</span> La rémunération mensuelle est entendue pour <span className="font-bold">151,67 heures</span>, pour un contrat d'une durée minimale d'un mois de date à date, sur une durée de 5 jours par semaine.
+            </div>
+          </div>
+
+          {/* Note informative */}
+          <div className="rounded-xl border bg-gradient-to-br from-blue-50 to-cyan-50 p-4">
+            <h4 className="text-sm font-bold text-blue-900 mb-2 flex items-center gap-2">
+              💡 Informations importantes
+            </h4>
+            <div className="text-sm text-blue-800 space-y-2">
+              <p>
+                Les minima salariaux présentés s'appliquent aux artistes-interprètes du cirque et aux musiciens(nnes) engagés dans le cadre de spectacles de cirque.
+              </p>
+              <p className="text-xs text-blue-700">
+                Ces tarifs sont applicables que l'artiste soit en situation d'itinérance sous chapiteau ou en tournée dans des lieux fixes.
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Section Personnel technique */}
+      {activeSection === 'techniciens' && (
+        <div className="space-y-6">
+          <div className="rounded-xl border bg-white p-5">
+            <h3 className="text-base font-bold text-slate-900 mb-4 flex items-center gap-2">
+              <span className="inline-block w-2 h-2 rounded-full bg-slate-500"></span>
+              Grille de salaires minimaux - Personnel technique
+            </h3>
+            
+            <div className="overflow-x-auto">
+              <table className="w-full text-xs border-collapse">
+                <thead>
+                  <tr className="bg-slate-50">
+                    <th className="text-left p-3 text-slate-900 font-bold border border-slate-200">Classification</th>
+                    <th className="text-center p-3 text-slate-900 font-bold border border-slate-200">Mensuel</th>
+                    <th className="text-center p-3 text-slate-900 font-bold border border-slate-200 bg-slate-100">Taux horaire</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr className="bg-indigo-100/30">
+                    <td colSpan={3} className="p-2 pl-3 font-bold text-indigo-900 border border-slate-200">
+                      CADRES
+                    </td>
+                  </tr>
+                  <tr className="hover:bg-indigo-50/30">
+                    <td className="p-3 border border-slate-200">Cadres Groupe 1</td>
+                    <td className="text-center p-3 font-bold text-indigo-900 border border-slate-200">{euro(3547.66)}</td>
+                    <td className="text-center p-3 font-semibold border border-slate-200 bg-indigo-50">{euro(23.39)}</td>
+                  </tr>
+                  <tr className="hover:bg-indigo-50/30">
+                    <td className="p-3 border border-slate-200">Cadres Groupe 2</td>
+                    <td className="text-center p-3 font-bold text-indigo-900 border border-slate-200">{euro(2923.27)}</td>
+                    <td className="text-center p-3 font-semibold border border-slate-200 bg-indigo-50">{euro(19.27)}</td>
+                  </tr>
+                  <tr className="hover:bg-indigo-50/30">
+                    <td className="p-3 border border-slate-200">Cadres Groupe 3</td>
+                    <td className="text-center p-3 font-bold text-indigo-900 border border-slate-200">{euro(2287.32)}</td>
+                    <td className="text-center p-3 font-semibold border border-slate-200 bg-indigo-50">{euro(15.08)}</td>
+                  </tr>
+
+                  <tr className="bg-cyan-100/30">
+                    <td colSpan={3} className="p-2 pl-3 font-bold text-cyan-900 border border-slate-200">
+                      AGENTS DE MAÎTRISE
+                    </td>
+                  </tr>
+                  <tr className="hover:bg-cyan-50/30">
+                    <td className="p-3 border border-slate-200">Agents de maîtrise</td>
+                    <td className="text-center p-3 font-bold text-cyan-900 border border-slate-200">{euro(2142.14)}</td>
+                    <td className="text-center p-3 font-semibold border border-slate-200 bg-cyan-50">{euro(14.12)}</td>
+                  </tr>
+
+                  <tr className="bg-blue-100/30">
+                    <td colSpan={3} className="p-2 pl-3 font-bold text-blue-900 border border-slate-200">
+                      EMPLOYÉS QUALIFIÉS
+                    </td>
+                  </tr>
+                  <tr className="hover:bg-blue-50/30">
+                    <td className="p-3 border border-slate-200">Employés qualifiés Groupe 1</td>
+                    <td className="text-center p-3 font-bold text-blue-900 border border-slate-200">{euro(1911.36)}</td>
+                    <td className="text-center p-3 font-semibold border border-slate-200 bg-blue-50">{euro(12.60)}</td>
+                  </tr>
+                  <tr className="hover:bg-blue-50/30">
+                    <td className="p-3 border border-slate-200">Employés qualifiés Groupe 2</td>
+                    <td className="text-center p-3 font-bold text-blue-900 border border-slate-200">{euro(1812.13)}</td>
+                    <td className="text-center p-3 font-semibold border border-slate-200 bg-blue-50">{euro(11.94)}</td>
+                  </tr>
+
+                  <tr className="bg-slate-100/50">
+                    <td colSpan={3} className="p-2 pl-3 font-bold text-slate-900 border border-slate-200">
+                      EMPLOYÉS
+                    </td>
+                  </tr>
+                  <tr className="hover:bg-slate-50/30">
+                    <td className="p-3 border border-slate-200">Employés</td>
+                    <td className="text-center p-3 font-bold text-slate-900 border border-slate-200">{euro(1777.90)}</td>
+                    <td className="text-center p-3 font-semibold border border-slate-200 bg-slate-100">{euro(11.72)}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+
+            <div className="mt-4 text-xs text-slate-600 bg-slate-50 border border-slate-200 rounded-lg p-3">
+              <p className="font-semibold mb-2">Note importante :</p>
+              <p>
+                Les salaires mensuels sont calculés sur la base de <span className="font-bold">151,67 heures</span> pour un contrat d'une durée minimale d'un mois de date à date, sur une durée de 5 jours par semaine.
+              </p>
+            </div>
+          </div>
+
+          {/* Détails des fonctions par catégorie */}
+          <div className="rounded-xl border bg-gradient-to-br from-purple-50 to-pink-50 p-4">
+            <h4 className="text-sm font-bold text-purple-900 mb-3">
+              📋 Exemples de fonctions par catégorie
+            </h4>
+            <div className="space-y-3 text-xs">
+              <div className="bg-white rounded-lg p-3 border border-purple-200">
+                <div className="font-semibold text-purple-900 mb-1">Cadres Groupe 1</div>
+                <div className="text-slate-700">Directeur(trice) technique, régisseur(euse) général(e), directeur(trice) de production</div>
+              </div>
+              <div className="bg-white rounded-lg p-3 border border-purple-200">
+                <div className="font-semibold text-purple-900 mb-1">Cadres Groupe 2</div>
+                <div className="text-slate-700">Concepteur(trice) lumière, concepteur(trice) du son, scénographe</div>
+              </div>
+              <div className="bg-white rounded-lg p-3 border border-purple-200">
+                <div className="font-semibold text-purple-900 mb-1">Agents de maîtrise</div>
+                <div className="text-slate-700">Régisseur(euse), chef électricien(ne), chef machiniste, opérateur(trice) son</div>
+              </div>
+              <div className="bg-white rounded-lg p-3 border border-purple-200">
+                <div className="font-semibold text-purple-900 mb-1">Employés qualifiés</div>
+                <div className="text-slate-700">Technicien(ne) son, technicien(ne) lumière, électricien(ne), machiniste, constructeur(trice)</div>
+              </div>
+            </div>
+            <div className="mt-3 text-xs text-purple-700">
+              <span className="font-semibold">💡 Remarque :</span> Pour la liste exhaustive des fonctions, se référer au titre VI des clauses communes de la convention collective.
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

app/(app)/minima-ccn/ccnsvp/page.tsx

@@ -9,6 +9,7 @@ import ClausesCommunesContent from './clauses-communes-data';
 import Annexe2Content from './annexe2-data';
 import Annexe3Content from './annexe3-data';
 import Annexe4Content from './annexe4-data';
+import Annexe5Content from './annexe5-data';
 
 export default function CCNSVPPage() {
   usePageTitle("Minima CCNSVP");
@@ -474,7 +475,7 @@ export default function CCNSVPPage() {
             aria-selected="false"
             aria-controls="ccnsvp-a5"
             tabIndex={-1}
-            data-tip="Producteurs, diffuseurs, organisateurs occasionnels (y compris les particuliers) de spectacles de bals avec ou sans orchestre"
+            data-tip="Producteurs ou diffuseurs de spectacles de cirque"
           >
             Annexe 5
           </button>
@@ -483,7 +484,7 @@ export default function CCNSVPPage() {
             aria-selected="false"
             aria-controls="ccnsvp-a6"
             tabIndex={-1}
-            data-tip="Producteurs ou diffuseurs de spectacles de cirque"
+            data-tip="Producteurs, diffuseurs, organisateurs occasionnels (y compris les particuliers) de spectacles de bals avec ou sans orchestre"
           >
             Annexe 6
           </button>
@@ -519,14 +520,12 @@ export default function CCNSVPPage() {
         </div>
 
         <div id="ccnsvp-a5" className="ccnsvp-panel" role="tabpanel" hidden>
-          <div className="text-center py-12">
-            <p className="text-slate-500">Contenu de l'Annexe 5 à venir</p>
-          </div>
+          <Annexe5Content />
         </div>
 
         <div id="ccnsvp-a6" className="ccnsvp-panel" role="tabpanel" hidden>
           <div className="text-center py-12">
-            <p className="text-slate-500">Contenu de l'Annexe 6 à venir</p>
+            <p className="text-slate-500">Contenu de l'Annexe 6 (Bals avec ou sans orchestre) à venir</p>
           </div>
         </div>
 

app/api/staff/contracts/bulk-delete/route.ts

@@ -0,0 +1,41 @@
+import { NextResponse } from "next/server";
+import { createSbServer } from "@/lib/supabaseServer";
+
+export async function POST(req: Request) {
+  try {
+    const sb = createSbServer();
+    const { data: { user } } = await sb.auth.getUser();
+    if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+    const { data: me } = await sb.from("staff_users").select("is_staff").eq("user_id", user.id).maybeSingle();
+    if (!me?.is_staff) return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+
+    const { contractIds } = await req.json();
+
+    if (!contractIds || !Array.isArray(contractIds) || contractIds.length === 0) {
+      return NextResponse.json({ error: "Contract IDs are required" }, { status: 400 });
+    }
+
+    // Supprimer tous les contrats sélectionnés
+    const { data: deletedContracts, error } = await sb
+      .from("cddu_contracts")
+      .delete()
+      .in("id", contractIds)
+      .select("id");
+
+    if (error) {
+      console.error("Error deleting contracts:", error);
+      return NextResponse.json({ error: "Failed to delete contracts" }, { status: 500 });
+    }
+
+    return NextResponse.json({ 
+      success: true, 
+      deletedIds: deletedContracts?.map(c => c.id) || [],
+      message: `${deletedContracts?.length || 0} contrat(s) supprimé(s)` 
+    });
+
+  } catch (err: any) {
+    console.error("Bulk delete error:", err);
+    return NextResponse.json({ error: "Internal server error" }, { status: 500 });
+  }
+}

components/staff/ContractsGrid.tsx

@@ -171,6 +171,7 @@ export default function ContractsGrid({ initialData, activeOrgId }: { initialDat
   const [showEtatPaieModal, setShowEtatPaieModal] = useState(false);
   const [showSalaryModal, setShowSalaryModal] = useState(false);
   const [showActionMenu, setShowActionMenu] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
   
   // PDF generation state
   const [isGeneratingPdfs, setIsGeneratingPdfs] = useState(false);
@@ -1088,6 +1089,16 @@ export default function ContractsGrid({ initialData, activeOrgId }: { initialDat
                         >
                           Modifier État Paie
                         </button>
+                        <div className="border-t border-gray-200 my-1"></div>
+                        <button
+                          onClick={() => {
+                            setShowDeleteModal(true);
+                            setShowActionMenu(false);
+                          }}
+                          className="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors"
+                        >
+                          Supprimer les contrats
+                        </button>
                       </div>
                     </div>
                   </>
@@ -1420,6 +1431,29 @@ export default function ContractsGrid({ initialData, activeOrgId }: { initialDat
         successCount={contractsESignProgress.filter(c => c.status === 'success').length}
         errorCount={contractsESignProgress.filter(c => c.status === 'error').length}
       />
+
+      {/* Modal de confirmation de suppression */}
+      {showDeleteModal && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg p-6 w-full max-w-md">
+            <h3 className="text-lg font-semibold mb-4 text-red-600">Confirmation de suppression</h3>
+            <p className="text-sm text-gray-600 mb-4">
+              Êtes-vous sûr de vouloir supprimer {selectedContractIds.size} contrat{selectedContractIds.size > 1 ? 's' : ''} ?
+            </p>
+            <DeleteConfirmModal
+              selectedContracts={selectedContracts}
+              onClose={() => setShowDeleteModal(false)}
+              onSuccess={(deletedIds) => {
+                // Retirer les contrats supprimés de la liste
+                setRows(prev => prev.filter(row => !deletedIds.includes(row.id)));
+                setShowDeleteModal(false);
+                setSelectedContractIds(new Set());
+                toast.success(`${deletedIds.length} contrat${deletedIds.length > 1 ? 's' : ''} supprimé${deletedIds.length > 1 ? 's' : ''}`);
+              }}
+            />
+          </div>
+        </div>
+      )}
     </div>
   );
 }
@@ -1788,3 +1822,102 @@ function SalaryInputModal({
     </>
   );
 }
+
+// Modal pour confirmer la suppression des contrats
+function DeleteConfirmModal({ 
+  selectedContracts, 
+  onClose, 
+  onSuccess 
+}: { 
+  selectedContracts: Contract[]; 
+  onClose: () => void; 
+  onSuccess: (deletedIds: string[]) => void; 
+}) {
+  const [loading, setLoading] = useState(false);
+  const [confirmText, setConfirmText] = useState('');
+
+  const handleSubmit = async () => {
+    if (confirmText.toLowerCase() !== 'supprimer') {
+      toast.error('Veuillez taper "supprimer" pour confirmer');
+      return;
+    }
+    
+    setLoading(true);
+    try {
+      const response = await fetch('/api/staff/contracts/bulk-delete', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          contractIds: selectedContracts.map(c => c.id)
+        })
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || 'Erreur lors de la suppression');
+      }
+      
+      const result = await response.json();
+      onSuccess(result.deletedIds);
+    } catch (error) {
+      console.error('Erreur:', error);
+      toast.error(error instanceof Error ? error.message : 'Erreur lors de la suppression des contrats');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <div className="space-y-4">
+        <div className="bg-red-50 border border-red-200 rounded-lg p-4">
+          <p className="text-sm text-red-800 font-medium">
+            ⚠️ Attention : Cette action est irréversible !
+          </p>
+          <p className="text-xs text-red-700 mt-2">
+            Les contrats suivants seront définitivement supprimés de la base de données.
+          </p>
+        </div>
+
+        <div className="border rounded-lg p-3 max-h-40 overflow-y-auto">
+          <p className="text-sm font-medium text-gray-700 mb-2">Contrats à supprimer :</p>
+          {selectedContracts.map(contract => (
+            <div key={contract.id} className="text-sm text-gray-600 py-1">
+              • {contract.contract_number || contract.id} - {formatEmployeeName(contract)}
+            </div>
+          ))}
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            Pour confirmer, tapez <span className="font-bold text-red-600">supprimer</span>
+          </label>
+          <input
+            type="text"
+            value={confirmText}
+            onChange={(e) => setConfirmText(e.target.value)}
+            placeholder="supprimer"
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500"
+          />
+        </div>
+      </div>
+
+      <div className="flex justify-end gap-2 mt-6">
+        <button
+          onClick={onClose}
+          className="px-4 py-2 text-sm text-gray-600 border border-gray-300 rounded hover:bg-gray-50"
+          disabled={loading}
+        >
+          Annuler
+        </button>
+        <button
+          onClick={handleSubmit}
+          disabled={confirmText.toLowerCase() !== 'supprimer' || loading}
+          className="px-4 py-2 text-sm bg-red-600 text-white rounded hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {loading ? 'Suppression...' : 'Supprimer définitivement'}
+        </button>
+      </div>
+    </>
+  );
+}