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 | 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 4x 4x 4x 4x 4x 4x 4x 1x 1x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 1x 2x 1x 1x 1x 4x 4x 4x 4x 4x 4x | /**
* @file QuantityAdjustItemDetails.tsx
* @module dialogs/QuantityAdjustDialog/QuantityAdjustItemDetails
*
* @summary
* Specialized component displaying current item details.
* Shows selected item name, current quantity, and current price in a formatted panel.
*
* @enterprise
* - Isolated component for single responsibility
* - Only renders when item is selected (conditional)
* - Accepts state as object for cleaner prop drilling
* - Handles loading states elegantly
*/
import * as React from 'react';
import { Box, Typography, CircularProgress } from '@mui/material';
import type { ItemOption } from '../../../../api/analytics/types';
/**
* Props for QuantityAdjustItemDetails component.
*
* @interface QuantityAdjustItemDetailsProps
* @property {ItemOption | null} item - Selected item (null if not selected)
* @property {number} currentQty - Current item quantity
* @property {number | null} currentPrice - Current item price
* @property {boolean} loading - Whether details are loading
*/
interface QuantityAdjustItemDetailsProps {
item: ItemOption | null;
currentQty: number;
currentPrice: number | null;
loading: boolean;
}
/**
* Details panel for selected inventory item.
*
* Displays:
* - Selected item name
* - Current quantity (with loading state)
* - Current price (with loading state)
*
* Only renders when item is selected to keep UI clean and focused.
*
* @component
* @param props - Component props
* @returns Details panel or null if no item selected
*
* @example
* ```tsx
* <QuantityAdjustItemDetails
* item={selectedItem}
* currentQty={effectiveCurrentQty}
* currentPrice={effectiveCurrentPrice}
* loading={itemDetailsLoading}
* />
* ```
*/
export const QuantityAdjustItemDetails: React.FC<QuantityAdjustItemDetailsProps> = ({
item,
currentQty,
currentPrice,
loading,
}) => {
// Only render when item is selected
if (!item) {
return null;
}
return (
<Box sx={{ display: 'grid', gap: 1, p: 2, bgcolor: 'grey.50', borderRadius: 1, mb: 2 }}>
<Typography variant="subtitle2" color="primary">
Selected Item: {item.name}
</Typography>
{/* Current Quantity */}
<Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
<Typography variant="body2" color="text.secondary">
Current Quantity:
</Typography>
<Typography variant="body2" fontWeight="medium">
{loading ? <CircularProgress size={16} /> : currentQty}
</Typography>
</Box>
{/* Current Price */}
<Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
<Typography variant="body2" color="text.secondary">
Current Price:
</Typography>
<Typography variant="body2" fontWeight="medium">
{loading ? (
<CircularProgress size={16} />
) : currentPrice !== null && currentPrice !== undefined ? (
`$${currentPrice.toFixed(2)}`
) : (
`$${(item?.price ?? 0).toFixed(2)}`
)}
</Typography>
</Box>
</Box>
);
};
|