feat: add reusable confirmation dialogs for destructive actions

job-tracker-ui/src/confirm.tsx

@@ -0,0 +1,79 @@
+import React, { createContext, useCallback, useContext, useMemo, useState } from "react";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@mui/material";
+
+type ConfirmOptions = {
+  title?: string;
+  message: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  destructive?: boolean;
+};
+
+type ConfirmContextValue = {
+  confirm: (options: ConfirmOptions) => Promise<boolean>;
+};
+
+type ConfirmState = ConfirmOptions & {
+  open: boolean;
+  resolver?: (value: boolean) => void;
+};
+
+const ConfirmContext = createContext<ConfirmContextValue | null>(null);
+
+export function ConfirmProvider({ children }: { children: React.ReactNode }) {
+  const [state, setState] = useState<ConfirmState>({
+    open: false,
+    message: "",
+    title: "Confirm action",
+    confirmLabel: "Confirm",
+    cancelLabel: "Cancel",
+    destructive: false,
+  });
+
+  const closeWith = useCallback((value: boolean) => {
+    setState((prev) => {
+      prev.resolver?.(value);
+      return { ...prev, open: false, resolver: undefined };
+    });
+  }, []);
+
+  const confirm = useCallback((options: ConfirmOptions) => {
+    return new Promise<boolean>((resolve) => {
+      setState({
+        open: true,
+        title: options.title ?? "Confirm action",
+        message: options.message,
+        confirmLabel: options.confirmLabel ?? "Confirm",
+        cancelLabel: options.cancelLabel ?? "Cancel",
+        destructive: options.destructive ?? false,
+        resolver: resolve,
+      });
+    });
+  }, []);
+
+  const value = useMemo(() => ({ confirm }), [confirm]);
+
+  return (
+    <ConfirmContext.Provider value={value}>
+      {children}
+      <Dialog open={state.open} onClose={() => closeWith(false)} fullWidth maxWidth="xs">
+        <DialogTitle>{state.title}</DialogTitle>
+        <DialogContent>
+          <Typography sx={{ color: "text.secondary" }}>{state.message}</Typography>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => closeWith(false)}>{state.cancelLabel}</Button>
+          <Button color={state.destructive ? "error" : "primary"} variant="contained" onClick={() => closeWith(true)}>
+            {state.confirmLabel}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </ConfirmContext.Provider>
+  );
+}
+
+export function useConfirm() {
+  const ctx = useContext(ConfirmContext);
+  if (!ctx) throw new Error("useConfirm must be used within ConfirmProvider");
+  return ctx;
+}