Merge pull request #98 from GTBitsOfGood/johnny/destructive-action-safeguards

Safeguards for Destructive Actions

Author: chrisgoggins

src/app/admin/ConfirmActionModal.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import React from "react";
+import BogModal from "@/components/BogModal/BogModal";
+import BogButton from "@/components/BogButton/BogButton";
+
+type ConfirmActionModalProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: () => void | Promise<void>;
+  /** Modal heading, e.g. "Cancel this ride?" */
+  title: string;
+  /** Body copy explaining what the action does. */
+  description: React.ReactNode;
+  /** Label for the destructive confirm button, e.g. "Cancel ride". */
+  confirmLabel: string;
+  /** Label shown on the confirm button while the request is in flight. */
+  confirmingLabel?: string;
+  /** Label for the dismiss button. */
+  cancelLabel?: string;
+  /** True while the confirmed request is running — disables the buttons and
+   *  prevents the modal from being dismissed. */
+  confirming?: boolean;
+};
+
+/**
+ * Confirmation dialog for destructive admin actions (ride cancellation,
+ * user/vehicle deletion). Built on BogModal with the standard palette:
+ * navy dismiss button, red confirm button.
+ */
+export default function ConfirmActionModal({
+  open,
+  onOpenChange,
+  onConfirm,
+  title,
+  description,
+  confirmLabel,
+  confirmingLabel,
+  cancelLabel = "Nevermind",
+  confirming = false,
+}: ConfirmActionModalProps) {
+  // While the request is in flight, don't let the modal be dismissed
+  // (Escape, outside click, or the close button).
+  const setOpen = (value: React.SetStateAction<boolean>) => {
+    const next = typeof value === "function" ? value(open) : value;
+    if (confirming && !next) return;
+    onOpenChange(next);
+  };
+
+  return (
+    <BogModal
+      size="medium"
+      modal
+      openState={{ open, setOpen }}
+      trigger={
+        <button
+          type="button"
+          aria-hidden
+          tabIndex={-1}
+          style={{ display: "none" }}
+        />
+      }
+      title={<h3>{title}</h3>}
+    >
+      <div className="flex flex-col gap-[2.4rem]">
+        <p className="m-0 text-paragraph-1 text-[var(--color-grey-text-strong)]">
+          {description}
+        </p>
+        <div className="flex flex-wrap justify-end gap-[1.2rem]">
+          <BogButton
+            variant="secondary"
+            size="medium"
+            disabled={confirming}
+            onClick={() => setOpen(false)}
+            style={{ borderRadius: "0.5rem" }}
+          >
+            {cancelLabel}
+          </BogButton>
+          <BogButton
+            variant="primary"
+            size="medium"
+            disabled={confirming}
+            onClick={() => void onConfirm()}
+            style={
+              {
+                "--color-brand-text": "var(--color-status-red-text)",
+                "--color-brand-hover": "var(--color-status-red-stroke-strong)",
+                borderRadius: "0.5rem",
+              } as React.CSSProperties
+            }
+          >
+            {confirming ? (confirmingLabel ?? confirmLabel) : confirmLabel}
+          </BogButton>
+        </div>
+      </div>
+    </BogModal>
+  );
+}

src/app/admin/RidesTable.tsx

@@ -6,6 +6,7 @@ import BogDropdown from "@/components/BogDropdown/BogDropdown";
 import BogButton from "@/components/BogButton/BogButton";
 import { RIDE_COLUMNS } from "./admin-table-data";
 import type { TableRow } from "@/components/BogTable/BogTable";
+import ConfirmActionModal from "./ConfirmActionModal";
 
 type RouteEntry = {
   _id: string;
@@ -45,6 +46,7 @@ export default function RidesTable() {
   const [assignErrors, setAssignErrors] = useState<Record<string, string>>({});
   const [canceling, setCanceling] = useState<Set<string>>(new Set());
   const [cancelErrors, setCancelErrors] = useState<Record<string, string>>({});
+  const [pendingCancelId, setPendingCancelId] = useState<string | null>(null);
 
   useEffect(() => {
     let cancelled = false;
@@ -272,7 +274,7 @@ export default function RidesTable() {
                   variant="secondary"
                   size="small"
                   disabled={isCanceling || isAssigning}
-                  onClick={() => handleCancel(route._id)}
+                  onClick={() => setPendingCancelId(route._id)}
                 >
                   {isCanceling ? "Canceling…" : "Cancel"}
                 </BogButton>
@@ -297,7 +299,34 @@ export default function RidesTable() {
   if (routes.length === 0)
     return <p className="text-gray-600">No requested rides.</p>;
 
+  const pendingCancelRoute = pendingCancelId
+    ? routes.find((r) => r._id === pendingCancelId)
+    : undefined;
+
   return (
-    <BogTable columnHeaders={RIDE_COLUMNS} rows={rows} selectable={false} />
+    <>
+      <BogTable columnHeaders={RIDE_COLUMNS} rows={rows} selectable={false} />
+      <ConfirmActionModal
+        open={pendingCancelId !== null}
+        onOpenChange={(o) => {
+          if (!o) setPendingCancelId(null);
+        }}
+        onConfirm={async () => {
+          if (!pendingCancelId) return;
+          await handleCancel(pendingCancelId);
+          setPendingCancelId(null);
+        }}
+        title="Cancel this ride?"
+        description={
+          pendingCancelRoute
+            ? `This cancels the requested ride for ${pendingCancelRoute.student.firstName} ${pendingCancelRoute.student.lastName}. This action cannot be undone.`
+            : "This cancels the requested ride. This action cannot be undone."
+        }
+        confirmLabel="Cancel ride"
+        confirmingLabel="Canceling…"
+        cancelLabel="Keep ride"
+        confirming={pendingCancelId !== null && canceling.has(pendingCancelId)}
+      />
+    </>
   );
 }

src/app/admin/VehicleDetailsPanel.tsx

@@ -6,6 +6,7 @@ import BogIcon from "@/components/BogIcon/BogIcon";
 import BogTextInput from "@/components/BogTextInput/BogTextInput";
 import BogDropdown from "@/components/BogDropdown/BogDropdown";
 import { ProfileRidesTab } from "@/app/profile/ProfileRidesTab";
+import ConfirmActionModal from "./ConfirmActionModal";
 
 const VEHICLE_ACCESSIBILITY_OPTIONS = ["None", "Wheelchair"] as const;
 
@@ -48,6 +49,7 @@ export default function VehicleDetailsPanel({
   const [saving, setSaving] = useState(false);
   const [saveError, setSaveError] = useState<string | null>(null);
   const [deleting, setDeleting] = useState(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
 
   useEffect(() => {
     setLoadingVehicle(true);
@@ -132,6 +134,7 @@ export default function VehicleDetailsPanel({
       onDeleted();
     } catch {
       setDeleting(false);
+      setShowDeleteConfirm(false);
     }
   };
 
@@ -156,7 +159,7 @@ export default function VehicleDetailsPanel({
           variant="secondary"
           size="medium"
           disabled={deleting}
-          onClick={handleDelete}
+          onClick={() => setShowDeleteConfirm(true)}
           style={
             {
               "--color-brand-stroke-strong": "var(--color-status-red-text)",
@@ -389,6 +392,21 @@ export default function VehicleDetailsPanel({
         </h2>
         <ProfileRidesTab userId={vehicleId} userType="Vehicle" />
       </div>
+
+      <ConfirmActionModal
+        open={showDeleteConfirm}
+        onOpenChange={(o) => {
+          if (!o) setShowDeleteConfirm(false);
+        }}
+        onConfirm={handleDelete}
+        title="Delete this vehicle?"
+        description={`Are you sure you want to delete ${
+          vehicle?.name ? `vehicle ${vehicle.name}` : "this vehicle"
+        }? This action cannot be undone.`}
+        confirmLabel="Delete vehicle"
+        confirmingLabel="Deleting…"
+        confirming={deleting}
+      />
     </div>
   );
 }

src/app/admin/page.tsx

@@ -8,6 +8,7 @@ import BogDropdown from "@/components/BogDropdown/BogDropdown";
 import React, { useState, useEffect, Suspense } from "react";
 import AccommodationsPanel from "./AccommodationsPanel";
 import VehicleDetailsPanel from "./VehicleDetailsPanel";
+import ConfirmActionModal from "./ConfirmActionModal";
 
 const VEHICLE_ACCESSIBILITY_OPTIONS = ["None", "Wheelchair"] as const;
 import { useAdminTableData, type AdminTableType } from "./useAdminTableData";
@@ -31,6 +32,7 @@ function AdminContent() {
     useAdminTableData(table);
   const [selectedRows, setSelectedRows] = useState<Set<number>>(new Set());
   const [deleting, setDeleting] = useState(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const [studentAccessibilityNeeds, setStudentAccessibilityNeeds] = useState<
     string[]
   >([]);
@@ -68,6 +70,7 @@ function AdminContent() {
   useEffect(() => {
     setSelectedRows(new Set());
     setShowForm(false);
+    setShowDeleteConfirm(false);
     setSelectedVehicleId(null);
     setSubmitError(null);
     setStudentAccessibilityNeeds([]);
@@ -89,11 +92,19 @@ function AdminContent() {
       setSelectedRows(new Set());
     } finally {
       setDeleting(false);
+      setShowDeleteConfirm(false);
     }
   };
 
   const canDelete = selectedRows.size > 0 && rowIds.length > 0;
 
+  const deleteNoun =
+    table === "Vehicles"
+      ? "vehicle"
+      : table === "Locations"
+        ? "location"
+        : "user";
+
   const handleAddStudent = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setSubmitError(null);
@@ -918,7 +929,7 @@ function AdminContent() {
                         <BogButton
                           variant="secondary"
                           size="medium"
-                          onClick={handleDelete}
+                          onClick={() => setShowDeleteConfirm(true)}
                           disabled={deleting}
                           style={
                             {
@@ -958,6 +969,23 @@ function AdminContent() {
           )}
         </>
       )}
+
+      <ConfirmActionModal
+        open={showDeleteConfirm}
+        onOpenChange={(o) => {
+          if (!o) setShowDeleteConfirm(false);
+        }}
+        onConfirm={handleDelete}
+        title={`Delete ${deleteNoun}${selectedRows.size === 1 ? "" : "s"}?`}
+        description={
+          selectedRows.size === 1
+            ? `Are you sure you want to delete this ${deleteNoun}? This action cannot be undone.`
+            : `Are you sure you want to delete these ${selectedRows.size} ${deleteNoun}s? This action cannot be undone.`
+        }
+        confirmLabel={deleteLabel}
+        confirmingLabel="Deleting…"
+        confirming={deleting}
+      />
     </div>
   );
 }