Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 1x 1x | /**
* DeleteItemDialog - Enterprise delete workflow dialog
*
* Two-dialog flow:
* 1. Form dialog: supplier → item search → reason selection
* 2. Confirmation dialog: shows item details + deletion warning
*
* Safety: Item quantity must be 0 before backend allows deletion
* Auth: ADMIN role required
*/
import * as React from 'react';
import {
Dialog,
DialogTitle,
DialogContent,
DialogActions,
Button,
IconButton,
Stack,
Box,
Tooltip,
CircularProgress,
} from '@mui/material';
import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
import { useTranslation } from 'react-i18next';
import { useHelp } from '../../../../hooks/useHelp';
import { DeleteItemContent } from './DeleteItemContent';
import { useDeleteItemDialog } from './useDeleteItemDialog';
export interface DeleteItemDialogProps {
open: boolean; // Dialog visibility state
onClose: () => void; // Callback when dialog closes
onItemDeleted: () => void; // Callback after successful deletion
readOnly?: boolean; // Demo mode: allow UI navigation but block actual deletion
}
export const DeleteItemDialog: React.FC<DeleteItemDialogProps> = ({
open,
onClose,
onItemDeleted,
readOnly = false,
}) => {
const { t } = useTranslation(['common', 'inventory', 'errors']);
const { openHelp } = useHelp();
const state = useDeleteItemDialog(open, onClose, onItemDeleted, readOnly);
return (
<>
{/* Form dialog: supplier → item → reason selection */}
<Dialog open={open && !state.showConfirmation} onClose={state.handleClose} fullWidth maxWidth="sm">
<DialogTitle>
<Stack direction="row" alignItems="center" justifyContent="space-between">
<Box>{t('inventory:dialogs.deleteItemTitle', 'Delete Item')}</Box>
<Tooltip title={t('actions.help', 'Help')}>
<IconButton size="small" onClick={() => openHelp('inventory.deleteItem')}>
<HelpOutlineIcon fontSize="small" />
</IconButton>
</Tooltip>
</Stack>
</DialogTitle>
<DialogContent dividers>
<DeleteItemContent state={state} showConfirmation={false} />
</DialogContent>
<DialogActions sx={{ gap: 1 }}>
<Button onClick={state.handleClose} disabled={state.isSubmitting}>
{t('inventory:buttons.cancel', 'Cancel')}
</Button>
{/* Delete button: disabled until item selected */}
<Button
onClick={state.onSubmit}
variant="contained"
color="error"
disabled={!state.selectedItem || state.isSubmitting}
>
{state.isSubmitting ? (
<>
<CircularProgress size={16} sx={{ mr: 1 }} />
{t('common:deleting', 'Deleting...')}
</>
) : (
t('inventory:toolbar.delete', 'Delete')
)}
</Button>
</DialogActions>
</Dialog>
{/* Confirmation dialog: warning + item details + final confirmation */}
<Dialog open={state.showConfirmation} onClose={state.handleCancelConfirmation} maxWidth="sm" fullWidth>
<DialogTitle>{t('inventory:dialogs.confirmDeleteTitle', 'Confirm Deletion')}</DialogTitle>
<DialogContent dividers>
<DeleteItemContent state={state} showConfirmation={true} />
</DialogContent>
<DialogActions sx={{ gap: 1 }}>
<Button onClick={state.handleCancelConfirmation} disabled={state.isSubmitting}>
{t('inventory:buttons.no', 'No')}
</Button>
{/* Final confirmation: executes deletion after warning */}
<Button
onClick={state.onConfirmedDelete}
variant="contained"
color="error"
disabled={state.isSubmitting}
>
{state.isSubmitting ? (
<>
<CircularProgress size={16} sx={{ mr: 1 }} />
{t('common:deleting')}
</>
) : (
t('inventory:buttons.yes', 'Yes')
)}
</Button>
</DialogActions>
</Dialog>
</>
);
};
export default DeleteItemDialog;
|