ui phase 1

2026-07-17 17:10:39 +03:30
parent f1cba6cf74
commit 370c1beefa
151 changed files with 4254 additions and 1840 deletions
@@ -0,0 +1,114 @@
+'use client';
+import { FunctionComponent, ReactNode, useState } from 'react';
+import {
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  TextField,
+} from '@mui/material';
+import AppButton from '../AppButton';
+
+export interface ConfirmDialogProps {
+  open: boolean;
+  /** Already-translated title. */
+  title: string;
+  /** Already-translated body (string or node). */
+  body?: ReactNode;
+  confirmLabel: string;
+  cancelLabel: string;
+  /** Called with the entered reason (undefined when `requireReason` is false). */
+  onConfirm: (reason?: string) => void;
+  onClose: () => void;
+  loading?: boolean;
+  /** When true a required reason field shows; confirm is disabled until it is non-empty. */
+  requireReason?: boolean;
+  reasonLabel?: string;
+  reasonPlaceholder?: string;
+  /** MUI color for the confirm button — `error` for a destructive action. */
+  confirmColor?: 'primary' | 'error' | 'secondary';
+}
+
+/**
+ * The shared confirmation dialog behind every audited/irreversible action — approve/reject a
+ * verification, run/retry a payout, save a config, resolve an alert, archive a patient, delete an
+ * address. Optionally collects a **required reason** (reject/hide/resolve) and disables confirm until it
+ * is provided. The dialog owns the reason field only; the caller owns the mutation and closes on success.
+ * `loading` disables the buttons and shows a spinner so a double-submit is impossible. Promoted from
+ * `components/admin` (kept there as a thin alias) — the contract is unchanged.
+ * @component ConfirmDialog
+ */
+const ConfirmDialog: FunctionComponent<ConfirmDialogProps> = ({
+  open,
+  title,
+  body,
+  confirmLabel,
+  cancelLabel,
+  onConfirm,
+  onClose,
+  loading = false,
+  requireReason = false,
+  reasonLabel,
+  reasonPlaceholder,
+  confirmColor = 'primary',
+}) => {
+  const [reason, setReason] = useState('');
+
+  const close = () => {
+    setReason('');
+    onClose();
+  };
+
+  const confirm = () => {
+    onConfirm(requireReason ? reason.trim() : undefined);
+    setReason('');
+  };
+
+  const confirmDisabled = loading || (requireReason && reason.trim().length === 0);
+
+  return (
+    <Dialog open={open} onClose={loading ? undefined : close} fullWidth maxWidth="xs">
+      <DialogTitle sx={{ fontWeight: 700 }}>{title}</DialogTitle>
+      <DialogContent>
+        {body ? (
+          typeof body === 'string' ? (
+            <DialogContentText sx={{ color: 'text.secondary' }}>{body}</DialogContentText>
+          ) : (
+            body
+          )
+        ) : null}
+        {requireReason ? (
+          <TextField
+            autoFocus
+            fullWidth
+            multiline
+            minRows={2}
+            value={reason}
+            onChange={(e) => setReason(e.target.value)}
+            label={reasonLabel}
+            placeholder={reasonPlaceholder}
+            sx={{ mt: 2 }}
+          />
+        ) : null}
+      </DialogContent>
+      <DialogActions sx={{ px: 3, pb: 2 }}>
+        <AppButton variant="text" color="inherit" onClick={close} disabled={loading}>
+          {cancelLabel}
+        </AppButton>
+        <AppButton
+          variant="contained"
+          color={confirmColor}
+          onClick={confirm}
+          disabled={confirmDisabled}
+          startIcon={loading ? <CircularProgress size={16} color="inherit" /> : undefined}
+        >
+          {confirmLabel}
+        </AppButton>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default ConfirmDialog;