Manual Decision Node Editor

<Paper
  onClick={() => router.push(`/admin/approvals/${process.id}`)}
  sx={{
    cursor: 'pointer',
    border: '1px solid',
    borderColor: 'divider',
    borderRadius: '10px',
    overflow: 'hidden',
    '&:hover': { borderColor: 'primary.main', boxShadow: 1 },
  }}
>
  <Box sx={{ height: 4, backgroundColor: process.color }} />
  <Box sx={{ p: 2.5, display: 'flex', justifyContent: 'space-between' }}>
    <Box>
      <Typography variant="h4">{process.name}</Typography>
      <Typography variant="body2" color="text.secondary">
        {process.decision}
      </Typography>
    </Box>
    <Avatar sx={{ bgcolor: process.color }}>{process.pending}</Avatar>
  </Box>
</Paper>

// Columns merge core (always present) with workflow.contextVariables
const coreColumns = [
  { field: 'select', width: 44, renderCell: SelectCheckbox },
  { field: 'created', headerName: 'Created', width: 120 },
  { field: 'user', headerName: 'User', flex: 1, renderCell: UserCell },
];

const dynamicColumns = workflow.contextVariables.map((v) => ({
  field: v,
  headerName: humanize(v),
  flex: 1,
  valueGetter: (params) => params.row.context[v] ?? '—',
}));

const actionColumn = {
  field: 'action',
  headerName: 'Action',
  width: 100,
  renderCell: (params) => (
    <Button size="small" variant="outlined" onClick={() => decide(params.row)}>
      Decide
    </Button>
  ),
};

<DataGrid
  rows={pendingItems}
  columns={[...coreColumns, ...dynamicColumns, actionColumn]}
  checkboxSelection
  onSelectionModelChange={setSelected}
/>

<Dialog open={!!decisionRow} onClose={() => setDecisionRow(null)} maxWidth="sm" fullWidth>
  <DialogTitle>Review application</DialogTitle>
  <DialogContent dividers>
    <RadioGroup
      value={decision}
      onChange={(e) => setDecision(e.target.value)}
    >
      <FormControlLabel value="approve" control={<Radio />} label="Approve" />
      <FormControlLabel value="decline" control={<Radio />} label="Decline" />
    </RadioGroup>
    <TextField
      label="Comment (optional)"
      value={comment}
      onChange={(e) => setComment(e.target.value)}
      multiline
      minRows={3}
      fullWidth
      sx={{ mt: 2 }}
    />
  </DialogContent>
  <DialogActions>
    <Button onClick={() => setDecisionRow(null)} variant="outlined">Cancel</Button>
    <Button onClick={handleSubmit} variant="contained" disabled={!decision}>
      Submit
    </Button>
  </DialogActions>
</Dialog>