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 | 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 8x 8x 8x 8x 8x 8x 8x 2x 2x 2x 2x 2x 2x 6x 8x 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 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x | /**
* @file SystemPreferencesSection.tsx
* @module app/settings/sections/SystemPreferencesSection
*
* @summary
* System information and preferences display section component.
* Shows database, environment, version, status, and build date information.
*
* @enterprise
* - Displays read-only system information
* - Loading state with spinner
* - Color-coded environment badge (production vs others)
* - Graceful fallback for unavailable system info
* - i18n support for labels
* - Full TypeDoc coverage for system preferences display
*/
import {
Box,
Typography,
CircularProgress,
Stack,
Chip,
} from '@mui/material';
import { useTranslation } from 'react-i18next';
interface SystemInfo {
database: string;
environment: string;
version: string;
status: string;
buildDate: string;
}
interface SystemPreferencesSectionProps {
/** System information data */
systemInfo: SystemInfo | null;
/** Whether system info is currently loading */
isLoading: boolean;
}
/**
* System preferences section component.
*
* Displays read-only system information including database, environment,
* version, status, and build date. Shows loading spinner while fetching.
*
* @param props - Component props
* @returns JSX element rendering system information display
*
* @example
* ```tsx
* <SystemPreferencesSection
* systemInfo={{ database: 'Oracle', environment: 'production', ... }}
* isLoading={false}
* />
* ```
*/
export default function SystemPreferencesSection({
systemInfo,
isLoading,
}: SystemPreferencesSectionProps) {
const { t } = useTranslation(['common']);
if (isLoading) {
return (
<Box sx={{ display: 'flex', justifyContent: 'center', py: 2 }}>
<CircularProgress size={24} />
</Box>
);
}
if (!systemInfo) {
return (
<Typography variant="body2" color="text.secondary">
{t('settings.systemInfoUnavailable', 'System information unavailable')}
</Typography>
);
}
return (
<Stack spacing={1.5}>
{/* Database Information */}
<Box>
<Typography variant="caption" color="text.secondary" sx={{ fontWeight: 600 }}>
{t('settings.database', 'Database')}
</Typography>
<Typography variant="body2">{systemInfo.database}</Typography>
</Box>
{/* Environment Information */}
<Box>
<Typography variant="caption" color="text.secondary" sx={{ fontWeight: 600 }}>
{t('settings.environment', 'Environment')}
</Typography>
<Box sx={{ mt: 0.5 }}>
<Chip
label={systemInfo.environment}
size="small"
color={systemInfo.environment === 'production' ? 'error' : 'success'}
variant="outlined"
/>
</Box>
</Box>
{/* Version Information */}
<Box>
<Typography variant="caption" color="text.secondary" sx={{ fontWeight: 600 }}>
{t('settings.version', 'Version')}
</Typography>
<Typography variant="body2">{systemInfo.version}</Typography>
</Box>
{/* Status Information */}
<Box>
<Typography variant="caption" color="text.secondary" sx={{ fontWeight: 600 }}>
{t('settings.status', 'Status')}
</Typography>
<Typography variant="body2">{systemInfo.status}</Typography>
</Box>
{/* Build Date Information */}
<Box>
<Typography variant="caption" color="text.secondary" sx={{ fontWeight: 600 }}>
{t('settings.buildDate', 'Build Date')}
</Typography>
<Typography variant="body2">{systemInfo.buildDate}</Typography>
</Box>
</Stack>
);
}
|