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 | 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 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 2x 2x 2x 2x 4x 4x 4x 4x 4x 4x 8x 8x 8x 4x 4x 4x 4x 4x 4x | /**
* @file QuantityAdjustSupplierSelect.tsx
* @module dialogs/QuantityAdjustDialog/QuantityAdjustSupplierSelect
*
* @summary
* Specialized component for supplier selection step.
* Pure presentation component with no business logic.
*
* @enterprise
* - Single responsibility: render supplier dropdown only
* - Accepts supplier options and callbacks as props
* - Handles loading state gracefully
*/
import * as React from 'react';
import { FormControl, InputLabel, Select, MenuItem, Box, Typography } from '@mui/material';
import { useTranslation } from 'react-i18next';
import type { SupplierOption } from '../../../../api/analytics/types';
/**
* Props for QuantityAdjustSupplierSelect component.
*
* @interface QuantityAdjustSupplierSelectProps
* @property {SupplierOption | null} selectedSupplier - Currently selected supplier
* @property {(supplier: SupplierOption | null) => void} onSupplierChange - Supplier selection handler
* @property {SupplierOption[] | undefined} suppliers - Available suppliers
* @property {boolean} loading - Whether suppliers are loading
*/
interface QuantityAdjustSupplierSelectProps {
selectedSupplier: SupplierOption | null;
onSupplierChange: (supplier: SupplierOption | null) => void;
suppliers: SupplierOption[] | undefined;
loading: boolean;
}
/**
* Step 1: Supplier selection component.
*
* Renders a dropdown for selecting the supplier to filter items.
* Disables selection while suppliers are loading.
*
* @component
* @param props - Component props
* @returns JSX element for supplier selection dropdown
*
* @example
* ```tsx
* <QuantityAdjustSupplierSelect
* selectedSupplier={form.selectedSupplier}
* onSupplierChange={form.setSelectedSupplier}
* suppliers={form.suppliers}
* loading={form.suppliersLoading}
* />
* ```
*/
export const QuantityAdjustSupplierSelect: React.FC<QuantityAdjustSupplierSelectProps> = ({
selectedSupplier,
onSupplierChange,
suppliers,
loading,
}) => {
const { t } = useTranslation(['common', 'inventory']);
return (
<Box>
<Typography variant="subtitle2" gutterBottom color="primary">
{t('inventory:steps.selectSupplier', 'Step 1: Select Supplier')}
</Typography>
<FormControl fullWidth size="small">
<InputLabel>{t('inventory:table.supplier', 'Supplier')}</InputLabel>
<Select
value={selectedSupplier?.id || ''}
label={t('inventory:table.supplier', 'Supplier')}
onChange={(e) => {
const supplierId = e.target.value;
const supplier = suppliers?.find((s) => String(s.id) === String(supplierId)) || null;
onSupplierChange(supplier);
}}
disabled={loading}
>
<MenuItem value="">
<em>{t('common:selectOption', 'Select an option')}</em>
</MenuItem>
{suppliers?.map((supplier) => (
<MenuItem key={supplier.id} value={supplier.id}>
{supplier.label}
</MenuItem>
))}
</Select>
</FormControl>
</Box>
);
};
|