Add confirmation dialog for user deletion with warning suppression

frontend/src/pages/Users.jsx

@@ -18,6 +18,8 @@ import UserForm from '../components/forms/User';
 import useAuthStore from '../store/auth';
 import API from '../api';
 import { USER_LEVELS, USER_LEVEL_LABELS } from '../constants';
+import ConfirmationDialog from '../components/ConfirmationDialog';
+import useWarningsStore from '../store/warnings';
 
 const UsersPage = () => {
   const theme = useMantineTheme();
@@ -27,6 +29,12 @@ const UsersPage = () => {
 
   const [selectedUser, setSelectedUser] = useState(null);
   const [userModalOpen, setUserModalOpen] = useState(false);
+  const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
+  const [deleteTarget, setDeleteTarget] = useState(null);
+  const [userToDelete, setUserToDelete] = useState(null);
+
+  const isWarningSuppressed = useWarningsStore((s) => s.isWarningSuppressed);
+  const suppressWarning = useWarningsStore((s) => s.suppressWarning);
 
   console.log(authUser);
 
@@ -34,14 +42,28 @@ const UsersPage = () => {
     setSelectedUser(null);
     setUserModalOpen(false);
   };
-
   const editUser = (user) => {
     setSelectedUser(user);
     setUserModalOpen(true);
   };
 
   const deleteUser = (id) => {
-    API.deleteUser(id);
+    // Get user details for the confirmation dialog
+    const user = users.find((u) => u.id === id);
+    setUserToDelete(user);
+    setDeleteTarget(id);
+
+    // Skip warning if it's been suppressed
+    if (isWarningSuppressed('delete-user')) {
+      return executeDeleteUser(id);
+    }
+
+    setConfirmDeleteOpen(true);
+  };
+
+  const executeDeleteUser = async (id) => {
+    await API.deleteUser(id);
+    setConfirmDeleteOpen(false);
   };
 
   return (
@@ -118,13 +140,38 @@ const UsersPage = () => {
               })}
           </Stack>
         </Paper>
-      </Center>
-
-      <UserForm
+      </Center>      <UserForm
         user={selectedUser}
         isOpen={userModalOpen}
         onClose={closeUserModal}
       />
+
+      <ConfirmationDialog
+        opened={confirmDeleteOpen}
+        onClose={() => setConfirmDeleteOpen(false)}
+        onConfirm={() => executeDeleteUser(deleteTarget)}
+        title="Confirm User Deletion"
+        message={
+          userToDelete ? (
+            <div style={{ whiteSpace: 'pre-line' }}>
+              {`Are you sure you want to delete the following user?
+
+Username: ${userToDelete.username}
+Email: ${userToDelete.email}
+User Level: ${USER_LEVEL_LABELS[userToDelete.user_level]}
+
+This action cannot be undone.`}
+            </div>
+          ) : (
+            'Are you sure you want to delete this user? This action cannot be undone.'
+          )
+        }
+        confirmLabel="Delete"
+        cancelLabel="Cancel"
+        actionKey="delete-user"
+        onSuppressChange={suppressWarning}
+        size="md"
+      />
     </>
   );
 };