confirm before delete!

components/ConfirmationModal.tsx

@@ -1,10 +1,12 @@
+import zIndex from "@mui/material/styles/zIndex";
+
 export default function ConfirmationModal({ isOpen, onClose, onConfirm, message }) {
   //export default function ConfirmationModal({ isOpen, onClose, onConfirm, message })
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 flex items-center justify-center z-50">
+    <div className="opacity-100 fixed inset-0 flex items-center justify-center z-1002" >
-      <div className="bg-white p-4 rounded-md shadow-lg modal-content">
+      <div className="bg-white p-4 rounded-md shadow-lg modal-content" style={{ zIndex: 1002 }}>
         <p className="mb-4">{message}</p>
         <button
           className="bg-red-500 text-white px-4 py-2 rounded mr-2"

components/publisher/PublisherCard.js

@@ -6,6 +6,7 @@ import toast from "react-hot-toast";
 
 import axiosInstance from '../../src/axiosSecure';
 import ProtectedRoute, { serverSideAuth } from "../../components/protectedRoute";
+import ConfirmationModal from "../../components/ConfirmationModal";
 
 //add months to date. works with negative numbers and numbers > 12
 export function addMonths(numOfMonths, date) {
@@ -41,6 +42,7 @@ export function IsDateInXMonths(date, monthsFrom, monthsTo) {
 export default function PublisherCard({ publisher }) {
 
   const [isCardVisible, setIsCardVisible] = useState(true);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleDelete = async (id) => {
     try {
@@ -74,7 +76,7 @@ export default function PublisherCard({ publisher }) {
 
   return isCardVisible ? (
     // className="block p-6 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 mb-3"
-    <div id={`publisher-card-${publisher.id}`} className={`relative block p-6 max-w-sm rounded-lg border border-gray-200 shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 mb-3
+    <div id={`publisher-card-${publisher.id}`} className={`relative block p-6 max-w-sm rounded-lg border border-gray-200 shadow-md z-50 hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 mb-3
     ${!publisher.isActive ? "opacity-50 bg-gray-200 border-gray-300 text-gray-400" : (publisher.isImported ? "bg-orange-50" : (publisher.isTrained ? "bg-white" : "bg-red-50"))}`}
     >
       <a
@@ -95,7 +97,7 @@ export default function PublisherCard({ publisher }) {
         </div>
       </a>
       <div className="absolute bottom-2 right-2">
-        <button onClick={() => handleDelete(publisher.id)} aria-label="Изтрий Publisher">
+        <button onClick={() => { setIsModalOpen(true) }} aria-label="Изтрий Publisher">
           <svg className="w-5 h-6 text-red-500 hover:text-red-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
             <path d="M10 11V17" stroke="#000000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
             <path d="M14 11V17" stroke="#000000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
@@ -107,6 +109,12 @@ export default function PublisherCard({ publisher }) {
             <path fillRule="evenodd" d="M4.293 4.293A1 1 0 015.707 3.707L10 8l4.293-4.293a1 1 0 111.414 1.414L11.414 9l4.293 4.293a1 1 0 01-1.414 1.414L10 10.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 9 4.293 4.707a1 1 0 010-1.414z" clipRule="evenodd" /> */}
           </svg>
         </button>
+        <ConfirmationModal
+          isOpen={isModalOpen}
+          onClose={() => setIsModalOpen(false)}
+          onConfirm={() => handleDelete(publisher.id)}
+          message="Сигурни ли сте, че искате да изтриете този профил? Това действие не може да бъде отменено."
+        />
         <ProtectedRoute>
 
           <button onClick={() => handleLoginAs(publisher.id)}>Login as</button>

components/publisher/PublisherForm.js

@@ -7,13 +7,13 @@ import axiosInstance from '../../src/axiosSecure';
 //import { getDate } from "date-fns";
 
 import PwaManager from "../PwaManager";
+import common from "../../src/helpers/common";
+import ProtectedRoute from '../../components/protectedRoute';
 import { monthNamesBG, GetTimeFormat, GetDateFormat } from "../../src/helpers/const"
 import PublisherSearchBox from './PublisherSearchBox';
 import AvailabilityList from "../availability/AvailabilityList";
 import ShiftsList from "../publisher/ShiftsList.tsx";
-import common from "../../src/helpers/common";
+import ConfirmationModal from "../ConfirmationModal";
-
-import ProtectedRoute from '../../components/protectedRoute';
 import { UserRole } from "@prisma/client";
 
 // import { Tabs, List } from 'tw-elements'
@@ -66,6 +66,8 @@ export default function PublisherForm({ item, me }) {
   }
 
   const [helpers, setHelper] = useState(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
   const fetchModules = async () => {
     const h = (await import("../../src/helpers/const.js")).default;
     //console.log("fetchModules: " + JSON.stringify(h));
@@ -312,9 +314,17 @@ export default function PublisherForm({ item, me }) {
             <div className="panel-actions">
               <Link href={urls.indexUrl} className="action-button"> Отмени </Link>
               {/* delete */}
-              <button className="button bg-red-500 hover:bg-red-700 focus:outline-none focus:shadow-outline" type="button" onClick={handleDelete}>
+              <button className="button bg-red-500 hover:bg-red-700 focus:outline-none focus:shadow-outline" type="button" onClick={() => setIsModalOpen(true)}>
                 Изтрий
               </button>
+              <ConfirmationModal
+                isOpen={isModalOpen}
+                onClose={() => setIsModalOpen(false)}
+                onConfirm={handleDelete}
+                message="Сигурни ли сте, че искате да изтриете този профил? Това действие не може да бъде отменено."
+              />
+
+              {/* save */}
               <button className="button bg-blue-500 hover:bg-blue-700 focus:outline-none focus:shadow-outline" type="submit">
                 {router.query?.id ? "Update" : "Create"}
               </button>