1043 lines
30 KiB
TypeScript
1043 lines
30 KiB
TypeScript
/*
|
|
* File: PatientDetailsScreen.tsx
|
|
* Description: Comprehensive patient details screen with DICOM image viewer
|
|
* Design & Developed by Tech4Biz Solutions
|
|
* Copyright (c) Spurrin Innovations. All rights reserved.
|
|
*/
|
|
|
|
import React, { useEffect, useState, useCallback, useMemo } from 'react';
|
|
import {
|
|
View,
|
|
Text,
|
|
StyleSheet,
|
|
ScrollView,
|
|
TouchableOpacity,
|
|
StatusBar,
|
|
Alert,
|
|
Dimensions,
|
|
Image,
|
|
FlatList,
|
|
RefreshControl,
|
|
} from 'react-native';
|
|
import { theme } from '../../../theme/theme';
|
|
import { useAppDispatch } from '../../../store/hooks';
|
|
import Icon from 'react-native-vector-icons/Feather';
|
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
|
|
// Import types
|
|
import { MedicalCase, PatientDetails, Series } from '../../../shared/types';
|
|
|
|
// Import components
|
|
import { ImageViewer } from '../components';
|
|
import { API_CONFIG } from '../../../shared/utils';
|
|
|
|
// Get screen dimensions
|
|
const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
|
|
|
|
// ============================================================================
|
|
// INTERFACES
|
|
// ============================================================================
|
|
|
|
interface PatientDetailsScreenProps {
|
|
navigation: any;
|
|
route: {
|
|
params: {
|
|
patientId: string;
|
|
patientName: string;
|
|
medicalCase: MedicalCase;
|
|
};
|
|
};
|
|
}
|
|
|
|
interface ParsedPatientData {
|
|
patientDetails: PatientDetails;
|
|
series: Series[];
|
|
}
|
|
|
|
// ============================================================================
|
|
// PATIENT DETAILS SCREEN COMPONENT
|
|
// ============================================================================
|
|
|
|
/**
|
|
* PatientDetailsScreen Component
|
|
*
|
|
* Purpose: Comprehensive patient details display with DICOM image viewer
|
|
*
|
|
* Features:
|
|
* - Full patient demographic information
|
|
* - Medical case details and status
|
|
* - DICOM series information
|
|
* - Image gallery with thumbnail previews
|
|
* - Real-time data updates
|
|
* - Emergency actions for critical cases
|
|
* - Medical history and notes
|
|
* - Modern healthcare-focused UI design
|
|
* - Responsive layout for different screen sizes
|
|
*/
|
|
const PatientDetailsScreen: React.FC<PatientDetailsScreenProps> = ({ navigation, route }) => {
|
|
// ============================================================================
|
|
// STATE MANAGEMENT
|
|
// ============================================================================
|
|
|
|
const dispatch = useAppDispatch();
|
|
|
|
// Route parameters
|
|
const { patientId, patientName, medicalCase } = route.params;
|
|
|
|
// Local state
|
|
const [isRefreshing, setIsRefreshing] = useState(false);
|
|
const [selectedImageIndex, setSelectedImageIndex] = useState(0);
|
|
const [showFullImage, setShowFullImage] = useState(false);
|
|
const [activeTab, setActiveTab] = useState<'overview' | 'images' | 'history'>('overview');
|
|
|
|
// ============================================================================
|
|
// DATA PARSING & PROCESSING
|
|
// ============================================================================
|
|
|
|
/**
|
|
* Parse Patient Data
|
|
*
|
|
* Purpose: Safely parse JSON strings from medical case data
|
|
*/
|
|
const parsedData: ParsedPatientData = useMemo(() => {
|
|
const parseJsonSafely = (jsonString: string | object) => {
|
|
if (typeof jsonString === 'object') {
|
|
return jsonString;
|
|
}
|
|
if (typeof jsonString === 'string') {
|
|
try {
|
|
return JSON.parse(jsonString);
|
|
} catch (error) {
|
|
console.warn('Failed to parse JSON:', error);
|
|
return {};
|
|
}
|
|
}
|
|
return {};
|
|
};
|
|
|
|
const patientDetails = parseJsonSafely(medicalCase.patientdetails);
|
|
const series = parseJsonSafely(patientDetails.series);
|
|
|
|
return {
|
|
patientDetails: patientDetails.patientdetails || patientDetails,
|
|
series: Array.isArray(series) ? series : [],
|
|
};
|
|
}, [medicalCase]);
|
|
|
|
// ============================================================================
|
|
// LIFECYCLE METHODS
|
|
// ============================================================================
|
|
|
|
/**
|
|
* Component Mount Effect
|
|
*
|
|
* Purpose: Initialize screen and set up navigation
|
|
*/
|
|
useEffect(() => {
|
|
// Set navigation title
|
|
navigation.setOptions({
|
|
title: patientName || 'Patient Details',
|
|
headerShown: false,
|
|
});
|
|
}, [navigation, patientName]);
|
|
|
|
// ============================================================================
|
|
// EVENT HANDLERS
|
|
// ============================================================================
|
|
|
|
/**
|
|
* Handle Refresh
|
|
*
|
|
* Purpose: Pull-to-refresh functionality
|
|
*/
|
|
const handleRefresh = useCallback(async () => {
|
|
setIsRefreshing(true);
|
|
// TODO: Implement refresh logic
|
|
setTimeout(() => {
|
|
setIsRefreshing(false);
|
|
}, 1000);
|
|
}, []);
|
|
|
|
/**
|
|
* Handle Image Press
|
|
*
|
|
* Purpose: Open full-screen image viewer for selected series
|
|
*
|
|
* @param seriesIndex - Index of the series
|
|
*/
|
|
const handleImagePress = useCallback((seriesIndex: number) => {
|
|
setSelectedImageIndex(seriesIndex);
|
|
setShowFullImage(true);
|
|
}, []);
|
|
|
|
/**
|
|
* Handle Close Image Viewer
|
|
*
|
|
* Purpose: Close full-screen image viewer
|
|
*/
|
|
const handleCloseImageViewer = useCallback(() => {
|
|
setShowFullImage(false);
|
|
}, []);
|
|
|
|
/**
|
|
* Get All Images from Series
|
|
*
|
|
* Purpose: Extract image paths from DICOM series pngpath
|
|
*/
|
|
const getAllImages = useCallback(() => {
|
|
const images: string[] = [];
|
|
parsedData.series.forEach(series => {
|
|
// Use pngpath for actual image display
|
|
if (series.pngpath && typeof series.pngpath === 'string') {
|
|
images.push(series.pngpath);
|
|
}
|
|
});
|
|
return images;
|
|
}, [parsedData.series]);
|
|
|
|
/**
|
|
* Get Series Info for Image Index
|
|
*
|
|
* Purpose: Get series information for a given image index
|
|
*/
|
|
const getSeriesInfoForImage = useCallback((imageIndex: number) => {
|
|
if (imageIndex >= 0 && imageIndex < parsedData.series.length) {
|
|
const series = parsedData.series[imageIndex];
|
|
return {
|
|
seriesNum: series.SeriesNum || '1',
|
|
seriesDesc: series.SerDes || 'Unnamed Series',
|
|
imageInSeries: 1,
|
|
totalInSeries: 1
|
|
};
|
|
}
|
|
return {
|
|
seriesNum: '1',
|
|
seriesDesc: 'Unknown Series',
|
|
imageInSeries: 1,
|
|
totalInSeries: 1
|
|
};
|
|
}, [parsedData.series]);
|
|
|
|
/**
|
|
* Handle Emergency Action
|
|
*
|
|
* Purpose: Handle emergency actions for critical patients
|
|
*/
|
|
const handleEmergencyAction = useCallback(() => {
|
|
Alert.alert(
|
|
'Emergency Action Required',
|
|
`Patient ${parsedData.patientDetails.Name} requires immediate attention`,
|
|
[
|
|
{
|
|
text: 'Call Code Blue',
|
|
style: 'destructive',
|
|
onPress: () => {
|
|
// TODO: Implement emergency code calling
|
|
Alert.alert('Emergency', 'Code Blue activated');
|
|
},
|
|
},
|
|
{
|
|
text: 'Alert Team',
|
|
onPress: () => {
|
|
// TODO: Implement team alerting
|
|
Alert.alert('Alert', 'Team notified');
|
|
},
|
|
},
|
|
{
|
|
text: 'Cancel',
|
|
style: 'cancel',
|
|
},
|
|
]
|
|
);
|
|
}, [parsedData.patientDetails.Name]);
|
|
|
|
/**
|
|
* Handle Back Navigation
|
|
*
|
|
* Purpose: Navigate back to previous screen
|
|
*/
|
|
const handleBackPress = useCallback(() => {
|
|
navigation.goBack();
|
|
}, [navigation]);
|
|
|
|
// ============================================================================
|
|
// RENDER HELPERS
|
|
// ============================================================================
|
|
|
|
/**
|
|
* Render Patient Header
|
|
*
|
|
* Purpose: Render patient identification and status section
|
|
*/
|
|
const renderPatientHeader = () => (
|
|
<View style={styles.patientHeader}>
|
|
<View style={styles.patientInfo}>
|
|
<View style={styles.patientAvatar}>
|
|
<Icon name="user" size={32} color={theme.colors.primary} />
|
|
</View>
|
|
<View style={styles.patientDetails}>
|
|
<Text style={styles.patientName}>
|
|
{parsedData.patientDetails.Name || 'Unknown Patient'}
|
|
</Text>
|
|
<Text style={styles.patientId}>
|
|
MRN: {parsedData.patientDetails.PatID || 'N/A'}
|
|
</Text>
|
|
<View style={styles.patientMeta}>
|
|
<Text style={styles.patientMetaText}>
|
|
{parsedData.patientDetails.PatAge || 'N/A'} • {parsedData.patientDetails.PatSex || 'N/A'}
|
|
</Text>
|
|
<View style={[
|
|
styles.statusBadge,
|
|
{ backgroundColor: getStatusColor(medicalCase.type) }
|
|
]}>
|
|
<Text style={styles.statusText}>{medicalCase.type}</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
{medicalCase.type === 'Critical' && (
|
|
<TouchableOpacity
|
|
style={styles.emergencyButton}
|
|
onPress={handleEmergencyAction}
|
|
>
|
|
<Icon name="alert-triangle" size={20} color={theme.colors.background} />
|
|
<Text style={styles.emergencyButtonText}>EMERGENCY</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
);
|
|
|
|
/**
|
|
* Render Tab Navigation
|
|
*
|
|
* Purpose: Render tab navigation for different sections
|
|
*/
|
|
const renderTabNavigation = () => (
|
|
<View style={styles.tabContainer}>
|
|
{[
|
|
{ key: 'overview', label: 'Overview', icon: 'info' },
|
|
{ key: 'images', label: 'Images', icon: 'image', count: parsedData.series.length },
|
|
{ key: 'history', label: 'History', icon: 'clock' },
|
|
].map((tab) => (
|
|
<TouchableOpacity
|
|
key={tab.key}
|
|
style={[
|
|
styles.tabButton,
|
|
activeTab === tab.key && styles.activeTabButton
|
|
]}
|
|
onPress={() => setActiveTab(tab.key as any)}
|
|
>
|
|
<Icon
|
|
name={tab.icon as any}
|
|
size={18}
|
|
color={activeTab === tab.key ? theme.colors.primary : theme.colors.textSecondary}
|
|
/>
|
|
<Text style={[
|
|
styles.tabLabel,
|
|
activeTab === tab.key && styles.activeTabLabel
|
|
]}>
|
|
{tab.label}
|
|
</Text>
|
|
{tab.count !== undefined && (
|
|
<View style={styles.tabCount}>
|
|
<Text style={styles.tabCountText}>{tab.count}</Text>
|
|
</View>
|
|
)}
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
);
|
|
|
|
/**
|
|
* Render Overview Tab
|
|
*
|
|
* Purpose: Render patient overview information
|
|
*/
|
|
const renderOverviewTab = () => (
|
|
<View style={styles.tabContent}>
|
|
{/* Medical Case Information */}
|
|
<View style={styles.section}>
|
|
<Text style={styles.sectionTitle}>Case Information</Text>
|
|
<View style={styles.infoGrid}>
|
|
<View style={styles.infoItem}>
|
|
<Text style={styles.infoLabel}>Case ID</Text>
|
|
<Text style={styles.infoValue}>{medicalCase.id}</Text>
|
|
</View>
|
|
<View style={styles.infoItem}>
|
|
<Text style={styles.infoLabel}>Type</Text>
|
|
<Text style={styles.infoValue}>{medicalCase.type}</Text>
|
|
</View>
|
|
<View style={styles.infoItem}>
|
|
<Text style={styles.infoLabel}>Created</Text>
|
|
<Text style={styles.infoValue}>
|
|
{new Date(medicalCase.created_at).toLocaleDateString()}
|
|
</Text>
|
|
</View>
|
|
<View style={styles.infoItem}>
|
|
<Text style={styles.infoLabel}>Updated</Text>
|
|
<Text style={styles.infoValue}>
|
|
{new Date(medicalCase.updated_at).toLocaleDateString()}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Patient Details */}
|
|
<View style={styles.section}>
|
|
<Text style={styles.sectionTitle}>Patient Details</Text>
|
|
<View style={styles.infoGrid}>
|
|
<View style={styles.infoItem}>
|
|
<Text style={styles.infoLabel}>Name</Text>
|
|
<Text style={styles.infoValue}>{parsedData.patientDetails.Name || 'N/A'}</Text>
|
|
</View>
|
|
<View style={styles.infoItem}>
|
|
<Text style={styles.infoLabel}>Age</Text>
|
|
<Text style={styles.infoValue}>{parsedData.patientDetails.PatAge || 'N/A'}</Text>
|
|
</View>
|
|
<View style={styles.infoItem}>
|
|
<Text style={styles.infoLabel}>Sex</Text>
|
|
<Text style={styles.infoValue}>{parsedData.patientDetails.PatSex || 'N/A'}</Text>
|
|
</View>
|
|
<View style={styles.infoItem}>
|
|
<Text style={styles.infoLabel}>Status</Text>
|
|
<Text style={styles.infoValue}>{parsedData.patientDetails.Status || 'N/A'}</Text>
|
|
</View>
|
|
<View style={styles.infoItem}>
|
|
<Text style={styles.infoLabel}>Institution</Text>
|
|
<Text style={styles.infoValue}>{parsedData.patientDetails.InstName || 'N/A'}</Text>
|
|
</View>
|
|
<View style={styles.infoItem}>
|
|
<Text style={styles.infoLabel}>Modality</Text>
|
|
<Text style={styles.infoValue}>{parsedData.patientDetails.Modality || 'N/A'}</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Series Information */}
|
|
{parsedData.series.length > 0 && (
|
|
<View style={styles.section}>
|
|
<Text style={styles.sectionTitle}>Imaging Series</Text>
|
|
<View style={styles.seriesInfo}>
|
|
<Text style={styles.seriesText}>
|
|
{parsedData.series.length} series available
|
|
</Text>
|
|
<Text style={styles.seriesText}>
|
|
Total series: {parsedData.series.length}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
)}
|
|
</View>
|
|
);
|
|
|
|
/**
|
|
* Render Images Tab
|
|
*
|
|
* Purpose: Render DICOM image gallery
|
|
*/
|
|
const renderImagesTab = () => (
|
|
<View style={styles.tabContent}>
|
|
{parsedData.series.length === 0 ? (
|
|
<View style={styles.emptyState}>
|
|
<Icon name="image" size={48} color={theme.colors.textMuted} />
|
|
<Text style={styles.emptyStateTitle}>No Images Available</Text>
|
|
<Text style={styles.emptyStateSubtitle}>
|
|
No DICOM images are currently available for this patient
|
|
</Text>
|
|
</View>
|
|
) : (
|
|
<View style={styles.imagesContainer}>
|
|
<Text style={styles.sectionTitle}>DICOM Images</Text>
|
|
|
|
{parsedData.series.map((series, seriesIndex) => (
|
|
<View key={seriesIndex} style={styles.seriesContainer}>
|
|
<View style={styles.seriesHeader}>
|
|
<Text style={styles.seriesTitle}>
|
|
Series {series.SeriesNum}: {series.SerDes || 'Unnamed Series'}
|
|
</Text>
|
|
<Text style={styles.seriesMeta}>
|
|
{series.ImgTotalinSeries || '0'} images in Path • {series.ViePos || 'Unknown position'}
|
|
</Text>
|
|
</View>
|
|
|
|
{/* Series Details */}
|
|
<View style={styles.seriesDetails}>
|
|
<View style={styles.seriesDetailItem}>
|
|
<Text style={styles.seriesDetailLabel}>Series Number:</Text>
|
|
<Text style={styles.seriesDetailValue}>
|
|
{series.SeriesNum || 'N/A'}
|
|
</Text>
|
|
</View>
|
|
<View style={styles.seriesDetailItem}>
|
|
<Text style={styles.seriesDetailLabel}>Total Images:</Text>
|
|
<Text style={styles.seriesDetailValue}>
|
|
{series.ImgTotalinSeries || '0'}
|
|
</Text>
|
|
</View>
|
|
<View style={styles.seriesDetailItem}>
|
|
<Text style={styles.seriesDetailLabel}>Description:</Text>
|
|
<Text style={styles.seriesDetailValue} numberOfLines={2}>
|
|
{series.SerDes || 'N/A'}
|
|
</Text>
|
|
</View>
|
|
{series.Path && Array.isArray(series.Path) && (
|
|
<View style={styles.seriesDetailItem}>
|
|
<Text style={styles.seriesDetailLabel}>Path Array:</Text>
|
|
<Text style={styles.seriesDetailValue} numberOfLines={2}>
|
|
{series.Path.length} URLs available
|
|
</Text>
|
|
</View>
|
|
)}
|
|
{series.ViePos && (
|
|
<View style={styles.seriesDetailItem}>
|
|
<Text style={styles.seriesDetailLabel}>View Position:</Text>
|
|
<Text style={styles.seriesDetailValue}>
|
|
{series.ViePos}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
|
|
{/* Series Image */}
|
|
{series.pngpath ? (
|
|
<TouchableOpacity
|
|
style={styles.imageThumbnail}
|
|
onPress={() => handleImagePress(seriesIndex)}
|
|
>
|
|
<Image
|
|
source={{ uri: API_CONFIG.DICOM_BASE_URL + series.pngpath }}
|
|
style={styles.thumbnailImage}
|
|
resizeMode="cover"
|
|
/>
|
|
<View style={styles.imageOverlay}>
|
|
<Text style={styles.imageNumber}>Series Image</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
) : (
|
|
<View style={styles.noImagePlaceholder}>
|
|
<Icon name="image" size={48} color={theme.colors.textMuted} />
|
|
<Text style={styles.noImageText}>No Image Available</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
))}
|
|
</View>
|
|
)}
|
|
</View>
|
|
);
|
|
|
|
/**
|
|
* Render History Tab
|
|
*
|
|
* Purpose: Render patient medical history
|
|
*/
|
|
const renderHistoryTab = () => (
|
|
<View style={styles.tabContent}>
|
|
<View style={styles.section}>
|
|
<Text style={styles.sectionTitle}>Medical History</Text>
|
|
<View style={styles.historyItem}>
|
|
<Icon name="calendar" size={16} color={theme.colors.textSecondary} />
|
|
<Text style={styles.historyText}>
|
|
Case created on {new Date(medicalCase.created_at).toLocaleDateString()}
|
|
</Text>
|
|
</View>
|
|
<View style={styles.historyItem}>
|
|
<Icon name="clock" size={16} color={theme.colors.textSecondary} />
|
|
<Text style={styles.historyText}>
|
|
Last updated on {new Date(medicalCase.updated_at).toLocaleDateString()}
|
|
</Text>
|
|
</View>
|
|
<View style={styles.historyItem}>
|
|
<Icon name="activity" size={16} color={theme.colors.textSecondary} />
|
|
<Text style={styles.historyText}>
|
|
Status: {medicalCase.type} case
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.section}>
|
|
<Text style={styles.sectionTitle}>Notes</Text>
|
|
<Text style={styles.notesText}>
|
|
No additional notes available for this patient case.
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
|
|
/**
|
|
* Get Status Color
|
|
*
|
|
* Purpose: Get appropriate color for patient status
|
|
*
|
|
* @param status - Patient status
|
|
*/
|
|
const getStatusColor = (status: string) => {
|
|
switch (status) {
|
|
case 'Critical':
|
|
return theme.colors.error;
|
|
case 'Emergency':
|
|
return theme.colors.warning;
|
|
case 'Routine':
|
|
return theme.colors.success;
|
|
default:
|
|
return theme.colors.info;
|
|
}
|
|
};
|
|
|
|
// ============================================================================
|
|
// MAIN RENDER
|
|
// ============================================================================
|
|
|
|
return (
|
|
<SafeAreaView style={styles.container}>
|
|
<StatusBar barStyle="dark-content" backgroundColor={theme.colors.background} />
|
|
|
|
{/* Header */}
|
|
<View style={styles.header}>
|
|
<TouchableOpacity
|
|
style={styles.backButton}
|
|
onPress={handleBackPress}
|
|
>
|
|
<Icon name="arrow-left" size={24} color={theme.colors.textPrimary} />
|
|
</TouchableOpacity>
|
|
<View style={styles.headerTitle}>
|
|
<Text style={styles.headerTitleText}>Patient Details</Text>
|
|
<Text style={styles.headerSubtitleText}>Emergency Department</Text>
|
|
</View>
|
|
<TouchableOpacity
|
|
style={styles.refreshButton}
|
|
onPress={handleRefresh}
|
|
disabled={isRefreshing}
|
|
>
|
|
<Icon
|
|
name="refresh-cw"
|
|
size={20}
|
|
color={isRefreshing ? theme.colors.textMuted : theme.colors.primary}
|
|
/>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
{/* Patient Header */}
|
|
{renderPatientHeader()}
|
|
|
|
{/* Tab Navigation */}
|
|
{renderTabNavigation()}
|
|
|
|
{/* Tab Content */}
|
|
<ScrollView
|
|
style={styles.content}
|
|
showsVerticalScrollIndicator={false}
|
|
refreshControl={
|
|
<RefreshControl
|
|
refreshing={isRefreshing}
|
|
onRefresh={handleRefresh}
|
|
colors={[theme.colors.primary]}
|
|
tintColor={theme.colors.primary}
|
|
/>
|
|
}
|
|
>
|
|
{activeTab === 'overview' && renderOverviewTab()}
|
|
{activeTab === 'images' && renderImagesTab()}
|
|
{activeTab === 'history' && renderHistoryTab()}
|
|
</ScrollView>
|
|
|
|
{/* Full-Screen Image Viewer */}
|
|
<View style={{position:'absolute',top:0,left:0,right:0,bottom:0}}>
|
|
<ImageViewer
|
|
visible={showFullImage}
|
|
images={getAllImages()}
|
|
initialIndex={selectedImageIndex}
|
|
onClose={handleCloseImageViewer}
|
|
patientName={parsedData.patientDetails.Name || 'Unknown Patient'}
|
|
seriesInfo={`Series ${getSeriesInfoForImage(selectedImageIndex).seriesNum}: ${getSeriesInfoForImage(selectedImageIndex).seriesDesc}`}
|
|
/>
|
|
</View>
|
|
</SafeAreaView>
|
|
);
|
|
};
|
|
|
|
// ============================================================================
|
|
// STYLES
|
|
// ============================================================================
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: theme.colors.background,
|
|
},
|
|
|
|
// Header Styles
|
|
header: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingHorizontal: theme.spacing.md,
|
|
paddingVertical: theme.spacing.sm,
|
|
backgroundColor: theme.colors.background,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: theme.colors.border,
|
|
},
|
|
backButton: {
|
|
padding: theme.spacing.sm,
|
|
marginRight: theme.spacing.sm,
|
|
},
|
|
headerTitle: {
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
},
|
|
headerTitleText: {
|
|
fontSize: 18,
|
|
fontWeight: 'bold',
|
|
color: theme.colors.textPrimary,
|
|
fontFamily: theme.typography.fontFamily.bold,
|
|
},
|
|
headerSubtitleText: {
|
|
fontSize: 12,
|
|
color: theme.colors.textSecondary,
|
|
fontFamily: theme.typography.fontFamily.regular,
|
|
},
|
|
refreshButton: {
|
|
padding: theme.spacing.sm,
|
|
marginLeft: theme.spacing.sm,
|
|
},
|
|
|
|
// Patient Header Styles
|
|
patientHeader: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
paddingHorizontal: theme.spacing.md,
|
|
paddingVertical: theme.spacing.lg,
|
|
backgroundColor: theme.colors.background,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: theme.colors.border,
|
|
},
|
|
patientInfo: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
flex: 1,
|
|
},
|
|
patientAvatar: {
|
|
width: 60,
|
|
height: 60,
|
|
borderRadius: 30,
|
|
backgroundColor: theme.colors.backgroundAlt,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
marginRight: theme.spacing.md,
|
|
},
|
|
patientDetails: {
|
|
flex: 1,
|
|
},
|
|
patientName: {
|
|
fontSize: 20,
|
|
fontWeight: 'bold',
|
|
color: theme.colors.textPrimary,
|
|
fontFamily: theme.typography.fontFamily.bold,
|
|
marginBottom: 4,
|
|
},
|
|
patientId: {
|
|
fontSize: 14,
|
|
color: theme.colors.textSecondary,
|
|
fontFamily: theme.typography.fontFamily.medium,
|
|
marginBottom: 8,
|
|
},
|
|
patientMeta: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
},
|
|
patientMetaText: {
|
|
fontSize: 14,
|
|
color: theme.colors.textSecondary,
|
|
fontFamily: theme.typography.fontFamily.regular,
|
|
},
|
|
statusBadge: {
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 6,
|
|
borderRadius: 16,
|
|
},
|
|
statusText: {
|
|
fontSize: 12,
|
|
fontWeight: 'bold',
|
|
color: theme.colors.background,
|
|
textTransform: 'uppercase',
|
|
},
|
|
emergencyButton: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
backgroundColor: theme.colors.error,
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 12,
|
|
borderRadius: 8,
|
|
shadowColor: theme.colors.error,
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.3,
|
|
shadowRadius: 4,
|
|
elevation: 4,
|
|
},
|
|
emergencyButtonText: {
|
|
color: theme.colors.background,
|
|
fontSize: 12,
|
|
fontWeight: 'bold',
|
|
marginLeft: 8,
|
|
textTransform: 'uppercase',
|
|
},
|
|
|
|
// Tab Navigation Styles
|
|
tabContainer: {
|
|
flexDirection: 'row',
|
|
backgroundColor: theme.colors.background,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: theme.colors.border,
|
|
},
|
|
tabButton: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
paddingVertical: theme.spacing.md,
|
|
paddingHorizontal: theme.spacing.sm,
|
|
position: 'relative',
|
|
},
|
|
activeTabButton: {
|
|
borderBottomWidth: 2,
|
|
borderBottomColor: theme.colors.primary,
|
|
},
|
|
tabLabel: {
|
|
fontSize: 14,
|
|
color: theme.colors.textSecondary,
|
|
fontFamily: theme.typography.fontFamily.medium,
|
|
marginLeft: 8,
|
|
},
|
|
activeTabLabel: {
|
|
color: theme.colors.primary,
|
|
fontFamily: theme.typography.fontFamily.bold,
|
|
},
|
|
tabCount: {
|
|
backgroundColor: theme.colors.primary,
|
|
borderRadius: 10,
|
|
paddingHorizontal: 6,
|
|
paddingVertical: 2,
|
|
marginLeft: 8,
|
|
},
|
|
tabCountText: {
|
|
color: theme.colors.background,
|
|
fontSize: 10,
|
|
fontWeight: 'bold',
|
|
},
|
|
|
|
// Content Styles
|
|
content: {
|
|
flex: 1,
|
|
},
|
|
tabContent: {
|
|
padding: theme.spacing.md,
|
|
},
|
|
|
|
// Section Styles
|
|
section: {
|
|
marginBottom: theme.spacing.lg,
|
|
},
|
|
sectionTitle: {
|
|
fontSize: 18,
|
|
fontWeight: 'bold',
|
|
color: theme.colors.textPrimary,
|
|
fontFamily: theme.typography.fontFamily.bold,
|
|
marginBottom: theme.spacing.md,
|
|
},
|
|
|
|
// Info Grid Styles
|
|
infoGrid: {
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
justifyContent: 'space-between',
|
|
},
|
|
infoItem: {
|
|
width: '48%',
|
|
marginBottom: theme.spacing.md,
|
|
},
|
|
infoLabel: {
|
|
fontSize: 12,
|
|
color: theme.colors.textSecondary,
|
|
fontFamily: theme.typography.fontFamily.medium,
|
|
marginBottom: 4,
|
|
textTransform: 'uppercase',
|
|
},
|
|
infoValue: {
|
|
fontSize: 14,
|
|
color: theme.colors.textPrimary,
|
|
fontFamily: theme.typography.fontFamily.regular,
|
|
},
|
|
|
|
// Series Info Styles
|
|
seriesInfo: {
|
|
backgroundColor: theme.colors.backgroundAlt,
|
|
padding: theme.spacing.md,
|
|
borderRadius: 8,
|
|
},
|
|
seriesText: {
|
|
fontSize: 14,
|
|
color: theme.colors.textSecondary,
|
|
fontFamily: theme.typography.fontFamily.regular,
|
|
marginBottom: 4,
|
|
},
|
|
|
|
// Images Styles
|
|
imagesContainer: {
|
|
marginTop: theme.spacing.sm,
|
|
},
|
|
seriesContainer: {
|
|
marginBottom: theme.spacing.lg,
|
|
},
|
|
seriesHeader: {
|
|
marginBottom: theme.spacing.md,
|
|
},
|
|
seriesTitle: {
|
|
fontSize: 16,
|
|
fontWeight: 'bold',
|
|
color: theme.colors.textPrimary,
|
|
fontFamily: theme.typography.fontFamily.bold,
|
|
marginBottom: 4,
|
|
},
|
|
seriesMeta: {
|
|
fontSize: 14,
|
|
color: theme.colors.textSecondary,
|
|
fontFamily: theme.typography.fontFamily.regular,
|
|
},
|
|
imageList: {
|
|
paddingRight: theme.spacing.md,
|
|
},
|
|
imageThumbnail: {
|
|
width: 120,
|
|
height: 120,
|
|
borderRadius: 8,
|
|
marginRight: theme.spacing.sm,
|
|
position: 'relative',
|
|
shadowColor: '#000000',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 4,
|
|
elevation: 2,
|
|
},
|
|
thumbnailImage: {
|
|
width: '100%',
|
|
height: '100%',
|
|
borderRadius: 8,
|
|
},
|
|
imageOverlay: {
|
|
position: 'absolute',
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
backgroundColor: 'rgba(0, 0, 0, 0.7)',
|
|
paddingVertical: 4,
|
|
paddingHorizontal: 8,
|
|
borderBottomLeftRadius: 8,
|
|
borderBottomRightRadius: 8,
|
|
},
|
|
imageNumber: {
|
|
color: theme.colors.background,
|
|
fontSize: 10,
|
|
fontWeight: 'bold',
|
|
textAlign: 'center',
|
|
},
|
|
|
|
// History Styles
|
|
historyItem: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
marginBottom: theme.spacing.sm,
|
|
},
|
|
historyText: {
|
|
fontSize: 14,
|
|
color: theme.colors.textSecondary,
|
|
fontFamily: theme.typography.fontFamily.regular,
|
|
marginLeft: theme.spacing.sm,
|
|
},
|
|
notesText: {
|
|
fontSize: 14,
|
|
color: theme.colors.textSecondary,
|
|
fontFamily: theme.typography.fontFamily.regular,
|
|
lineHeight: 20,
|
|
},
|
|
|
|
// Empty State Styles
|
|
emptyState: {
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
paddingVertical: theme.spacing.xl,
|
|
},
|
|
emptyStateTitle: {
|
|
fontSize: 18,
|
|
fontWeight: 'bold',
|
|
color: theme.colors.textPrimary,
|
|
fontFamily: theme.typography.fontFamily.bold,
|
|
marginTop: theme.spacing.md,
|
|
marginBottom: theme.spacing.sm,
|
|
},
|
|
emptyStateSubtitle: {
|
|
fontSize: 14,
|
|
color: theme.colors.textSecondary,
|
|
fontFamily: theme.typography.fontFamily.regular,
|
|
textAlign: 'center',
|
|
lineHeight: 20,
|
|
},
|
|
|
|
// No Image Placeholder Styles
|
|
noImagePlaceholder: {
|
|
width: 120,
|
|
height: 120,
|
|
borderRadius: 8,
|
|
marginRight: theme.spacing.sm,
|
|
backgroundColor: theme.colors.backgroundAlt,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
borderWidth: 1,
|
|
borderColor: theme.colors.border,
|
|
borderStyle: 'dashed',
|
|
},
|
|
noImageText: {
|
|
fontSize: 10,
|
|
color: theme.colors.textMuted,
|
|
fontFamily: theme.typography.fontFamily.regular,
|
|
textAlign: 'center',
|
|
marginTop: 4,
|
|
},
|
|
|
|
// Series Details Styles
|
|
seriesDetails: {
|
|
backgroundColor: theme.colors.backgroundAlt,
|
|
padding: theme.spacing.sm,
|
|
borderRadius: 8,
|
|
marginBottom: theme.spacing.md,
|
|
},
|
|
seriesDetailItem: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'flex-start',
|
|
marginBottom: theme.spacing.xs,
|
|
},
|
|
seriesDetailLabel: {
|
|
fontSize: 12,
|
|
color: theme.colors.textSecondary,
|
|
fontFamily: theme.typography.fontFamily.medium,
|
|
flex: 1,
|
|
},
|
|
seriesDetailValue: {
|
|
fontSize: 12,
|
|
color: theme.colors.textPrimary,
|
|
fontFamily: theme.typography.fontFamily.regular,
|
|
flex: 2,
|
|
textAlign: 'right',
|
|
},
|
|
});
|
|
|
|
export default PatientDetailsScreen;
|
|
|
|
/*
|
|
* End of File: PatientDetailsScreen.tsx
|
|
* Design & Developed by Tech4Biz Solutions
|
|
* Copyright (c) Spurrin Innovations. All rights reserved.
|
|
*/
|