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 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 1x 1x 1x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 1x 1x 1x 1x 1x 1x 3x 3x 3x 3x 3x 3x 3x 3x 3x 1x 1x 1x 1x 1x 1x 3x 3x 3x 3x 3x 3x 3x 3x 1x 1x 1x 3x 3x 3x 3x | /**
* DeleteFormView - Form presentation component
*
* Renders: 4-step form (supplier → item → reason → preview)
* Responsibility: Layout and field composition with inline commenting
* Props: state object from useDeleteItemDialog hook
*/
import { Box, Alert, Typography } from '@mui/material';
import { useTranslation } from 'react-i18next';
import {
SupplierSelectField,
ItemSelectField,
DeletionReasonField,
ItemInfoDisplay,
} from './DeleteFormFields';
/**
* StepSection - Reusable step indicator and content wrapper
* Renders: Numbered badge with title + indented content
*/
function StepSection({
title,
number,
children,
}: {
title: string;
number: number;
children: React.ReactNode;
}) {
return (
<Box>
{/* Step header: numbered badge + title */}
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
<Box
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: 24,
height: 24,
borderRadius: '50%',
bgcolor: 'primary.main',
color: 'white',
fontSize: '0.75rem',
fontWeight: 700,
}}
>
{number}
</Box>
<Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
{title}
</Typography>
</Box>
{/* Step content: indented to show hierarchy */}
<Box sx={{ pl: 4 }}>{children}</Box>
</Box>
);
}
import type { UseDeleteItemDialogReturn } from './DeleteItemDialog.types';
export function DeleteFormView({ state }: { state: UseDeleteItemDialogReturn }) {
const { t } = useTranslation(['inventory']);
return (
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
{/*
STEP 1: Supplier Selection
- Always visible - user must choose supplier first
- Enables subsequent item search by filtering supplier context
- Required before item selection is possible
*/}
<StepSection
title={t('inventory:deleteFlow.step1', 'Step 1: Select Supplier')}
number={1}
>
<SupplierSelectField state={state} />
</StepSection>
{/*
STEP 2: Item Search
- Only visible after supplier selected
- Autocomplete with 2+ character minimum search requirement
- Filters items to selected supplier using search API
*/}
{state.selectedSupplier && (
<StepSection
title={t('inventory:deleteFlow.step2', 'Step 2: Select Item')}
number={2}
>
<ItemSelectField state={state} />
</StepSection>
)}
{/*
STEP 3: Deletion Reason
- Only visible after item selected
- Predefined business reasons: SCRAPPED, DESTROYED, DAMAGED, etc.
- Required for audit trail and inventory accounting
*/}
{state.selectedItem && (
<StepSection
title={t('inventory:deleteFlow.step3', 'Step 3: Deletion Reason')}
number={3}
>
<DeletionReasonField state={state} />
</StepSection>
)}
{/*
STEP 4: Item Information Preview
- Only visible after item details are loaded from API
- Shows name and on-hand quantity for final confirmation
- Helps user verify they're deleting the correct item
*/}
{state.selectedItem && state.itemDetailsQuery.data && (
<StepSection
title={t('inventory:deleteFlow.step4', 'Step 4: Item Information')}
number={4}
>
<ItemInfoDisplay state={state} />
</StepSection>
)}
{/*
Form-level error display
- Shows validation errors from form submission attempt
- Prevents proceeding to confirmation without valid selections
*/}
{state.formError && (
<Alert severity="error" sx={{ mt: 1 }}>
{state.formError}
</Alert>
)}
</Box>
);
}
|