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 | 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 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 6x 6x 6x 6x 6x 1x 1x 1x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x | /**
* @file QuantityAdjustForm.tsx
* @module dialogs/QuantityAdjustDialog/QuantityAdjustForm
*
* @summary
* Form view component for quantity adjustment workflow.
* Implements 3-step guided workflow: supplier selection → item selection → quantity adjustment.
*
* @enterprise
* - Pure presentation component with zero business logic
* - Accepts state object instead of individual props (cleaner interfaces)
* - Conditional step rendering based on selection state
* - Comprehensive validation error display
* - Accessibility: proper labels, error states, keyboard navigation
* - Internationalization: complete i18n support
*/
import * as React from 'react';
import { Alert, Box, Divider } from '@mui/material';
import { QuantityAdjustSupplierSelect } from './QuantityAdjustSupplierSelect';
import { QuantityAdjustItemSelect } from './QuantityAdjustItemSelect';
import { QuantityAdjustItemDetails } from './QuantityAdjustItemDetails';
import { QuantityAdjustQuantityInput } from './QuantityAdjustQuantityInput';
import type { UseQuantityAdjustFormReturn } from './useQuantityAdjustForm';
/**
* Props for QuantityAdjustForm component.
*
* @interface QuantityAdjustFormProps
* @property {UseQuantityAdjustFormReturn} form - Complete form interface from orchestrator hook
*/
interface QuantityAdjustFormProps {
form: UseQuantityAdjustFormReturn;
}
/**
* Form view component for quantity adjustment workflow.
*
* Implements 3-step workflow:
* 1. **Supplier Selection** - Choose supplier from dropdown
* 2. **Item Selection** - Search and select specific item
* 3. **Quantity Adjustment** - Enter new quantity and reason
*
* Features:
* - Delegates each step to specialized components
* - Error display at top of form
* - Current item details panel (shows name, current qty, price)
* - Comprehensive form with all validations
*
* @component
* @param props - Component props containing form interface
* @returns JSX element rendering the complete form
*
* @example
* ```tsx
* const form = useQuantityAdjustForm(open, onClose, onAdjusted);
* <QuantityAdjustForm form={form} />
* ```
*/
export const QuantityAdjustForm: React.FC<QuantityAdjustFormProps> = ({ form }) => {
return (
<Box sx={{ display: 'grid', gap: 2.5, mt: 1 }}>
{/* Error Display */}
{form.formError && (
<Alert severity="error" onClose={() => form.setFormError('')}>
{form.formError}
</Alert>
)}
{/* Step 1: Supplier Selection */}
<QuantityAdjustSupplierSelect
selectedSupplier={form.selectedSupplier}
onSupplierChange={form.setSelectedSupplier}
suppliers={form.suppliers}
loading={form.suppliersLoading}
/>
{/* Step 2: Item Selection */}
<QuantityAdjustItemSelect
selectedItem={form.selectedItem}
onItemChange={form.setSelectedItem}
searchQuery={form.itemQuery}
onSearchChange={form.setItemQuery}
items={form.items}
loading={form.itemsLoading}
selectedSupplier={form.selectedSupplier}
/>
{/* Selected Item Details - Only show AFTER item is selected */}
<QuantityAdjustItemDetails
item={form.selectedItem}
currentQty={form.effectiveCurrentQty}
currentPrice={form.effectiveCurrentPrice}
loading={form.itemDetailsLoading}
/>
<Divider />
{/* Step 3: Quantity Adjustment */}
<QuantityAdjustQuantityInput
control={form.control}
errors={form.formState.errors}
disabled={!form.selectedItem}
currentQty={form.effectiveCurrentQty}
/>
</Box>
);
};
|