354 lines
9.8 KiB
TypeScript
354 lines
9.8 KiB
TypeScript
/*
|
|
* File: AppInfoScreen.tsx
|
|
* Description: App information screen displaying version, build, and app details
|
|
* Design & Developed by Tech4Biz Solutions
|
|
* Copyright (c) Spurrin Innovations. All rights reserved.
|
|
*/
|
|
|
|
import React from 'react';
|
|
import {
|
|
View,
|
|
Text,
|
|
StyleSheet,
|
|
ScrollView,
|
|
} from 'react-native';
|
|
|
|
import { theme } from '../../../theme/theme';
|
|
import { SettingsHeader } from '../components/SettingsHeader';
|
|
import { CustomModal } from '../../../shared/components';
|
|
|
|
/**
|
|
* AppInfoScreenProps Interface
|
|
*
|
|
* Purpose: Defines the props required by the AppInfoScreen component
|
|
*
|
|
* Props:
|
|
* - navigation: React Navigation object for screen navigation
|
|
*/
|
|
interface AppInfoScreenProps {
|
|
navigation: any;
|
|
}
|
|
|
|
/**
|
|
* AppInfoScreen Component
|
|
*
|
|
* Purpose: Display comprehensive app information including version, build details,
|
|
* and links to legal documents and support resources
|
|
*
|
|
* Features:
|
|
* 1. App logo and basic information
|
|
* 2. Version and build details
|
|
* 3. Legal and privacy information
|
|
* 4. Support and contact links
|
|
* 5. App description and features
|
|
*/
|
|
export const AppInfoScreen: React.FC<AppInfoScreenProps> = ({
|
|
navigation,
|
|
}) => {
|
|
// ============================================================================
|
|
// APP INFORMATION DATA
|
|
// ============================================================================
|
|
|
|
// App version and build information
|
|
const appInfo = {
|
|
name: 'NeoScan Radiologist',
|
|
version: '1.0.0',
|
|
buildNumber: '2025.08.001',
|
|
releaseDate: 'August 2025',
|
|
developer: 'Tech4Biz Solutions',
|
|
copyright: '© 2025 Spurrin Innovations. All rights reserved.',
|
|
};
|
|
|
|
// App features and description
|
|
const appDescription = {
|
|
title: 'AI-Powered Medical Imaging Radiologist App',
|
|
description: 'Comprehensive medical imaging and patient management platform designed specifically for radiologists. Provides access to AI-powered diagnostic predictions, DICOM image viewing with Cornerstone.js integration, and streamlined clinical workflows for reviewing radiologist feedback.',
|
|
features: [
|
|
'AI-powered diagnostic predictions with confidence scores',
|
|
'DICOM image viewer with Cornerstone.js integration',
|
|
'Radiologist feedback review system',
|
|
'Patient case management and tracking',
|
|
'Hospital integration and user management',
|
|
'Mobile-optimized interface for clinical use',
|
|
],
|
|
};
|
|
|
|
|
|
|
|
// ============================================================================
|
|
// EVENT HANDLERS
|
|
// ============================================================================
|
|
|
|
|
|
|
|
|
|
|
|
// ============================================================================
|
|
// MAIN RENDER
|
|
// ============================================================================
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
{/* App info header with back button */}
|
|
<SettingsHeader
|
|
title="App Information"
|
|
showBackButton={true}
|
|
onBackPress={() => navigation.goBack()}
|
|
/>
|
|
|
|
{/* Scrollable app information content */}
|
|
<ScrollView
|
|
style={styles.scrollView}
|
|
contentContainerStyle={styles.scrollContent}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
{/* App logo and basic info section */}
|
|
<View style={styles.appHeaderSection}>
|
|
<View style={styles.appLogoContainer}>
|
|
<View style={styles.appLogo}>
|
|
<Text style={styles.appLogoText}>NS</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<Text style={styles.appName}>{appInfo.name}</Text>
|
|
<Text style={styles.appVersion}>Version {appInfo.version}</Text>
|
|
<Text style={styles.appBuild}>Build {appInfo.buildNumber}</Text>
|
|
<Text style={styles.appReleaseDate}>{appInfo.releaseDate}</Text>
|
|
</View>
|
|
|
|
{/* App description section */}
|
|
<View style={styles.infoSection}>
|
|
<Text style={styles.sectionTitle}>{appDescription.title}</Text>
|
|
<Text style={styles.appDescription}>{appDescription.description}</Text>
|
|
|
|
<Text style={styles.featuresTitle}>Key Features:</Text>
|
|
{appDescription.features.map((feature, index) => (
|
|
<View key={index} style={styles.featureItem}>
|
|
<View style={styles.featureBullet} />
|
|
<Text style={styles.featureText}>{feature}</Text>
|
|
</View>
|
|
))}
|
|
</View>
|
|
|
|
{/* Version and build details section */}
|
|
<View style={styles.infoSection}>
|
|
<Text style={styles.sectionTitle}>Technical Information</Text>
|
|
|
|
<View style={styles.infoRow}>
|
|
<Text style={styles.infoLabel}>App Version:</Text>
|
|
<Text style={styles.infoValue}>{appInfo.version}</Text>
|
|
</View>
|
|
|
|
<View style={styles.infoRow}>
|
|
<Text style={styles.infoLabel}>Build Number:</Text>
|
|
<Text style={styles.infoValue}>{appInfo.buildNumber}</Text>
|
|
</View>
|
|
|
|
<View style={styles.infoRow}>
|
|
<Text style={styles.infoLabel}>Release Date:</Text>
|
|
<Text style={styles.infoValue}>{appInfo.releaseDate}</Text>
|
|
</View>
|
|
|
|
<View style={styles.infoRow}>
|
|
<Text style={styles.infoLabel}>Developer:</Text>
|
|
<Text style={styles.infoValue}>{appInfo.developer}</Text>
|
|
</View>
|
|
</View>
|
|
|
|
|
|
|
|
{/* Copyright section */}
|
|
<View style={styles.copyrightSection}>
|
|
<Text style={styles.copyrightText}>{appInfo.copyright}</Text>
|
|
</View>
|
|
|
|
{/* Bottom spacing for tab bar */}
|
|
<View style={styles.bottomSpacing} />
|
|
</ScrollView>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
// ============================================================================
|
|
// STYLES SECTION
|
|
// ============================================================================
|
|
|
|
const styles = StyleSheet.create({
|
|
// Main container for the app info screen
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: theme.colors.background,
|
|
},
|
|
|
|
// Scroll view styling
|
|
scrollView: {
|
|
flex: 1,
|
|
},
|
|
|
|
// Scroll content styling
|
|
scrollContent: {
|
|
paddingHorizontal: theme.spacing.md,
|
|
},
|
|
|
|
// Bottom spacing for tab bar
|
|
bottomSpacing: {
|
|
height: theme.spacing.xl,
|
|
},
|
|
|
|
// App header section with logo and basic info
|
|
appHeaderSection: {
|
|
alignItems: 'center',
|
|
paddingVertical: theme.spacing.xl,
|
|
marginBottom: theme.spacing.md,
|
|
},
|
|
|
|
appLogoContainer: {
|
|
marginBottom: theme.spacing.md,
|
|
},
|
|
|
|
appLogo: {
|
|
width: 80,
|
|
height: 80,
|
|
borderRadius: 40,
|
|
backgroundColor: theme.colors.primary,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
...theme.shadows.medium,
|
|
},
|
|
|
|
appLogoText: {
|
|
color: theme.colors.background,
|
|
fontSize: 32,
|
|
fontFamily: theme.typography.fontFamily.bold,
|
|
},
|
|
|
|
appName: {
|
|
fontSize: theme.typography.fontSize.displayMedium,
|
|
fontFamily: theme.typography.fontFamily.bold,
|
|
color: theme.colors.textPrimary,
|
|
marginBottom: theme.spacing.xs,
|
|
textAlign: 'center',
|
|
},
|
|
|
|
appVersion: {
|
|
fontSize: theme.typography.fontSize.bodyLarge,
|
|
fontFamily: theme.typography.fontFamily.medium,
|
|
color: theme.colors.primary,
|
|
marginBottom: theme.spacing.xs,
|
|
},
|
|
|
|
appBuild: {
|
|
fontSize: theme.typography.fontSize.bodyMedium,
|
|
fontFamily: theme.typography.fontFamily.regular,
|
|
color: theme.colors.textSecondary,
|
|
marginBottom: theme.spacing.xs,
|
|
},
|
|
|
|
appReleaseDate: {
|
|
fontSize: theme.typography.fontSize.bodyMedium,
|
|
fontFamily: theme.typography.fontFamily.regular,
|
|
color: theme.colors.textSecondary,
|
|
},
|
|
|
|
// Information sections
|
|
infoSection: {
|
|
backgroundColor: theme.colors.background,
|
|
borderRadius: theme.borderRadius.medium,
|
|
padding: theme.spacing.md,
|
|
marginBottom: theme.spacing.md,
|
|
...theme.shadows.primary,
|
|
},
|
|
|
|
sectionTitle: {
|
|
fontSize: theme.typography.fontSize.displaySmall,
|
|
fontFamily: theme.typography.fontFamily.bold,
|
|
color: theme.colors.textPrimary,
|
|
marginBottom: theme.spacing.md,
|
|
},
|
|
|
|
appDescription: {
|
|
fontSize: theme.typography.fontSize.bodyMedium,
|
|
fontFamily: theme.typography.fontFamily.regular,
|
|
color: theme.colors.textSecondary,
|
|
lineHeight: 22,
|
|
marginBottom: theme.spacing.md,
|
|
},
|
|
|
|
featuresTitle: {
|
|
fontSize: theme.typography.fontSize.bodyMedium,
|
|
fontFamily: theme.typography.fontFamily.medium,
|
|
color: theme.colors.textPrimary,
|
|
marginBottom: theme.spacing.sm,
|
|
},
|
|
|
|
featureItem: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
marginBottom: theme.spacing.xs,
|
|
},
|
|
|
|
featureBullet: {
|
|
width: 6,
|
|
height: 6,
|
|
borderRadius: 3,
|
|
backgroundColor: theme.colors.primary,
|
|
marginRight: theme.spacing.sm,
|
|
},
|
|
|
|
featureText: {
|
|
fontSize: theme.typography.fontSize.bodyMedium,
|
|
fontFamily: theme.typography.fontFamily.regular,
|
|
color: theme.colors.textSecondary,
|
|
flex: 1,
|
|
},
|
|
|
|
// Information rows
|
|
infoRow: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
paddingVertical: theme.spacing.xs,
|
|
borderBottomColor: theme.colors.border,
|
|
borderBottomWidth: 1,
|
|
},
|
|
|
|
infoLabel: {
|
|
fontSize: theme.typography.fontSize.bodyMedium,
|
|
fontFamily: theme.typography.fontFamily.medium,
|
|
color: theme.colors.textPrimary,
|
|
},
|
|
|
|
infoValue: {
|
|
fontSize: theme.typography.fontSize.bodyMedium,
|
|
fontFamily: theme.typography.fontFamily.regular,
|
|
color: theme.colors.textSecondary,
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
// Copyright section
|
|
copyrightSection: {
|
|
alignItems: 'center',
|
|
paddingVertical: theme.spacing.lg,
|
|
marginBottom: theme.spacing.md,
|
|
},
|
|
|
|
copyrightText: {
|
|
fontSize: theme.typography.fontSize.bodySmall,
|
|
fontFamily: theme.typography.fontFamily.regular,
|
|
color: theme.colors.textMuted,
|
|
textAlign: 'center',
|
|
lineHeight: 18,
|
|
},
|
|
|
|
|
|
});
|
|
|
|
/*
|
|
* End of File: AppInfoScreen.tsx
|
|
* Design & Developed by Tech4Biz Solutions
|
|
* Copyright (c) Spurrin Innovations. All rights reserved.
|
|
*/
|