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 | 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 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x | /**
* @file SuppliersToolbar.tsx
* @module pages/suppliers/components/SuppliersToolbar
*
* @summary
* Toolbar component for suppliers board.
* Displays title and action buttons (Create, Edit, Delete).
*
* @enterprise
* - Pure presentation component, no business logic
* - Action buttons disabled based on selection state
* - Responsive layout with MUI Stack
* - i18n support for all labels
*/
import * as React from 'react';
import { Box, Typography, Button, Stack } from '@mui/material';
import { useTranslation } from 'react-i18next';
/**
* Suppliers Toolbar component props.
*
* @interface SuppliersToolbarProps
*/
export interface SuppliersToolbarProps {
/** Whether Create action is enabled */
onCreateClick: () => void;
/** Whether Edit action is enabled (requires selection) */
editEnabled: boolean;
onEditClick: () => void;
/** Whether Delete action is enabled (requires selection) */
deleteEnabled: boolean;
onDeleteClick: () => void;
}
/**
* Toolbar for suppliers board.
*
* Displays title and action buttons:
* - Add Supplier (always enabled)
* - Edit Supplier (enabled when supplier selected)
* - Delete Supplier (enabled when supplier selected)
*
* @component
* @example
* ```tsx
* <SuppliersToolbar
* onCreateClick={() => setOpenCreate(true)}
* editEnabled={selectedId !== null}
* onEditClick={() => setOpenEdit(true)}
* deleteEnabled={selectedId !== null}
* onDeleteClick={() => setOpenDelete(true)}
* />
* ```
*/
export const SuppliersToolbar: React.FC<SuppliersToolbarProps> = ({
onCreateClick,
editEnabled,
onEditClick,
deleteEnabled,
onDeleteClick,
}) => {
const { t } = useTranslation(['common', 'suppliers']);
return (
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
mb: 2,
p: 2,
}}
>
<Typography variant="h5" sx={{ fontWeight: 600 }}>
{t('suppliers:title', 'Supplier Management')}
</Typography>
<Stack direction="row" spacing={1}>
<Button
variant="outlined"
color="error"
disabled={!deleteEnabled}
onClick={onDeleteClick}
>
{t('suppliers:actions.delete', 'Delete Supplier')}
</Button>
<Button
variant="outlined"
color="primary"
disabled={!editEnabled}
onClick={onEditClick}
>
{t('suppliers:actions.edit', 'Edit Supplier')}
</Button>
<Button
variant="contained"
color="primary"
onClick={onCreateClick}
>
{t('suppliers:actions.create', 'Add Supplier')}
</Button>
</Stack>
</Box>
);
};
|