NeoScan_Radiologist/app/modules/Dashboard/components/DepartmentStats.tsx
2025-08-05 18:01:36 +05:30

102 lines
2.9 KiB
TypeScript

/*
* File: DepartmentStats.tsx
* Description: Department statistics component displaying patient counts per department
* Design & Developed by Tech4Biz Solutions
* Copyright (c) Spurrin Innovations. All rights reserved.
*/
import React from 'react';
import {
View,
Text,
StyleSheet,
} from 'react-native';
import { theme } from '../../../theme/theme';
import { DepartmentStats as DepartmentStatsType } from '../../../shared/types/dashboard';
interface DepartmentStatsProps {
stats: DepartmentStatsType;
}
export const DepartmentStats: React.FC<DepartmentStatsProps> = ({
stats,
}) => {
const departments = [
{ key: 'emergency', label: 'Emergency', color: theme.colors.primary },
{ key: 'trauma', label: 'Trauma', color: theme.colors.critical },
{ key: 'cardiac', label: 'Cardiac', color: theme.colors.warning },
{ key: 'neurology', label: 'Neurology', color: theme.colors.info },
{ key: 'pediatrics', label: 'Pediatrics', color: theme.colors.success },
{ key: 'icu', label: 'ICU', color: theme.colors.secondary },
];
return (
<View style={styles.container}>
<Text style={styles.title}>Department Overview</Text>
<View style={styles.statsGrid}>
{departments.map((dept) => (
<View key={dept.key} style={styles.statItem}>
<View style={[styles.colorIndicator, { backgroundColor: dept.color }]} />
<View style={styles.statContent}>
<Text style={styles.statValue}>
{stats[dept.key as keyof DepartmentStatsType]}
</Text>
<Text style={styles.statLabel}>{dept.label}</Text>
</View>
</View>
))}
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: theme.colors.background,
borderRadius: theme.borderRadius.large,
padding: theme.spacing.lg,
marginBottom: theme.spacing.lg,
...theme.shadows.medium,
},
title: {
fontSize: theme.typography.fontSize.displaySmall,
fontFamily: theme.typography.fontFamily.bold,
color: theme.colors.textPrimary,
marginBottom: theme.spacing.lg,
},
statsGrid: {
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-between',
},
statItem: {
flexDirection: 'row',
alignItems: 'center',
width: '48%',
marginBottom: theme.spacing.md,
},
colorIndicator: {
width: 12,
height: 12,
borderRadius: 6,
marginRight: theme.spacing.sm,
},
statContent: {
flex: 1,
},
statValue: {
fontSize: theme.typography.fontSize.bodyLarge,
fontFamily: theme.typography.fontFamily.bold,
color: theme.colors.textPrimary,
},
statLabel: {
fontSize: theme.typography.fontSize.bodySmall,
color: theme.colors.textSecondary,
},
});
/*
* End of File: DepartmentStats.tsx
* Design & Developed by Tech4Biz Solutions
* Copyright (c) Spurrin Innovations. All rights reserved.
*/