feat: add confirmation modal for event deletion in Calendar component

frontend/src/components/ConfirmDeleteModal/ConfirmDeleteModal.css

@@ -0,0 +1,66 @@
+.confirm-delete-modal {
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    max-width: 400px;
+    width: 90%;
+    animation: modalFadeIn 0.2s ease-out;
+}
+
+@keyframes modalFadeIn {
+    from {
+        opacity: 0;
+        transform: scale(0.9);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+.confirm-delete-modal .modal-header {
+    padding: 20px;
+    border-bottom: 1px solid #e5e7eb;
+}
+
+.confirm-delete-modal .modal-header h2 {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: #1f2937;
+}
+
+.confirm-delete-modal .modal-body {
+    padding: 20px;
+}
+
+.confirm-delete-modal .modal-body p {
+    margin: 12px 0;
+    font-size: 14px;
+    color: #374151;
+    line-height: 1.5;
+}
+
+.confirm-delete-modal .modal-body strong {
+    font-weight: 600;
+    color: #1f2937;
+}
+
+.confirm-delete-modal .warning-text {
+    color: #dc2626;
+    font-size: 13px;
+    font-style: italic;
+}
+
+.confirm-delete-modal .modal-footer {
+    display: flex;
+    gap: 10px;
+    padding: 20px;
+    border-top: 1px solid #e5e7eb;
+    justify-content: flex-end;
+}
+
+.confirm-delete-modal .modal-footer button {
+    flex: 1;
+    max-width: 130px;
+}

frontend/src/components/ConfirmDeleteModal/ConfirmDeleteModal.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import "./ConfirmDeleteModal.css";
+import Bouton from "../Bouton/Bouton";
+import { useModalManager } from "../../hooks/useModalManager";
+
+interface ConfirmDeleteModalProps {
+    isOpen: boolean;
+    eventTitle: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+
+const ConfirmDeleteModal = ({ isOpen, eventTitle, onConfirm, onCancel }: ConfirmDeleteModalProps) => {
+    const { handleClose, handleBackdropClick } = useModalManager({
+        isOpen,
+        onClose: onCancel,
+    });
+
+    if (!isOpen) return null;
+
+    return (
+        <div className="modal-backdrop" onClick={handleBackdropClick}>
+            <div className="confirm-delete-modal" role="dialog" aria-modal="true" aria-label="Confirmation de suppression">
+                <div className="modal-body">
+                    <p>
+                        Êtes-vous sûr de vouloir supprimer : <strong>{eventTitle}</strong> ?
+                    </p>
+                    <p className="warning-text">Cette action ne peut pas être annulée.</p>
+                </div>
+                <div className="modal-footer">
+                    <Bouton
+                        component_type="cancel"
+                        label="Non"
+                        onClick={handleClose}
+                    />
+                    <Bouton
+                        component_type="accept"
+                        label="Oui"
+                        onClick={onConfirm}
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ConfirmDeleteModal;

frontend/src/pages/Calendar/Calendar.tsx

@@ -13,10 +13,14 @@ import { useCalendarApi } from "../../hooks/useCalendarApi";
 import { useEventActions } from "../../hooks/useEventActions";
 import { calendarConfig } from "./constants";
 import { CalendarEvent, CalendarEventData, EventReceiveInfo } from "../../types/globalTypes";
+import ConfirmDeleteModal from "../../components/ConfirmDeleteModal/ConfirmDeleteModal";
 
 const Calendar = ({ card_id, setIsAdmin, setRefreshEvents }: CalendarEvent) => {
     const { userData, events, getProfile, fetchEvents, saveEvent } = useCalendarApi();
     const { handleDelete } = useEventActions({ onEventRemoved: fetchEvents });
+    const [isDeleteConfirmOpen, setIsDeleteConfirmOpen] = React.useState(false);
+    const [deleteEventId, setDeleteEventId] = React.useState<string | null>(null);
+    const [deleteEventTitle, setDeleteEventTitle] = React.useState<string>("");
 
     useEffect(() => {
         setRefreshEvents(() => fetchEvents);
@@ -90,11 +94,14 @@ const Calendar = ({ card_id, setIsAdmin, setRefreshEvents }: CalendarEvent) => {
         const onDeleteClick = (event: React.MouseEvent<HTMLButtonElement>) => {
             event.preventDefault();
             event.stopPropagation();
-            handleDelete(eventInfo.event.id);
+            setDeleteEventId(eventInfo.event.id);
+            setDeleteEventTitle(eventInfo.event.title);
+            setIsDeleteConfirmOpen(true);
         };
 
         return (
             <div className="calendar-event-content">
+                {userData?.admin && (
                 <button
                     type="button"
                     className="calendar-event-delete"
@@ -103,13 +110,29 @@ const Calendar = ({ card_id, setIsAdmin, setRefreshEvents }: CalendarEvent) => {
                 >
                     ×
                 </button>
+                )}
                 <div className="calendar-event-text">
                     {eventInfo.timeText && <div className="fc-event-time">{eventInfo.timeText}</div>}
                     <div className="fc-event-title">{eventInfo.event.title}</div>
                 </div>
             </div>
         );
-    }, [handleDelete]);
+    }, [userData?.admin]);
+
+    const handleConfirmDelete = async () => {
+        if (deleteEventId) {
+            await handleDelete(deleteEventId);
+            setIsDeleteConfirmOpen(false);
+            setDeleteEventId(null);
+            setDeleteEventTitle("");
+        }
+    };
+
+    const handleCancelDelete = () => {
+        setIsDeleteConfirmOpen(false);
+        setDeleteEventId(null);
+        setDeleteEventTitle("");
+    };
 
     return (
         <>
@@ -134,6 +157,13 @@ const Calendar = ({ card_id, setIsAdmin, setRefreshEvents }: CalendarEvent) => {
                     eventContent={renderEventContent}
                 />
             </div>
+
+            <ConfirmDeleteModal
+                isOpen={isDeleteConfirmOpen}
+                eventTitle={deleteEventTitle}
+                onConfirm={handleConfirmDelete}
+                onCancel={handleCancelDelete}
+            />
         </>
     );
 };