26 KiB
- RADIOLOGIST APP - DETAILED WORKFLOW 1.1 App Launch & Authentication App Launch → Biometric Auth → Dashboard Loading ↓ Load Case Queue → Priority Sort → Display Cases ↓ Critical (RED) → Urgent (ORANGE) → Routine (GREEN) 1.2 Critical Finding Workflow (Acute Subdural Hemorrhage) STEP 1: Alert Reception Push Notification → "CRITICAL - Acute Subdural Hemorrhage" ↓ Tap Notification → App Opens → Case Preview ↓ Patient: John Doe, Age 45, Head Trauma AI Confidence: 93% Midline Shift: 7mm
STEP 2: Full Case Review Case Preview → Open DICOM Viewer ↓ AI Overlay ON → Hemorrhage Highlighted ↓ Review Images → Confirm Finding → Add Observations ↓ "Large acute subdural hemorrhage with mass effect"
STEP 3: Report Generation Voice-to-Text → "Acute subdural hemorrhage..." ↓ Review Text → Edit if needed → Submit Report ↓ Preliminary Report Sent (< 5 minutes)
STEP 4: System Learning System Logs → Radiologist Confirmation ↓ Time Metrics Recorded → Model Improvement Data 1.3 Routine Scan Workflow (Negative Finding) STEP 1: Queue Processing Dashboard → Routine Queue → Select Case ↓ Patient: Jane Smith, Age 30, Headache AI: No acute abnormalities (99% confidence)
STEP 2: Confirmation Review DICOM Viewer → Quick Review → Confirm Negative ↓ "No acute intracranial abnormality"
STEP 3: Report & Documentation Submit Report → System Logs Concordance ↓ Next Case in Queue 1.4 System Uncertainty Protocol AI Confidence 70-85% → "REVIEW RECOMMENDED" ↓ Special Yellow Flag → Enhanced Attention Required ↓ Detailed Review → Feedback to System
- RADIOLOGIST APP WIREFRAMES 3.1 Login Screen +------------------------+ | [HOSPITAL LOGO] | | | | Radiologist Portal | | | | [👤 Dr. Smith] | | [🔒 Biometric Login] | | | | [Face ID Icon] | | Touch to Login | | | | OR | | | | PIN: [****] | | [LOGIN] | | | | Emergency Access | +------------------------+ 3.2 Dashboard - Case Queue +------------------------+ | Dr. Smith [🔔3][⚙️] | | On-Call Status: ACTIVE | | | | CRITICAL CASES | | 🔴 Bed 3 - Hemorrhage | | 📱 2 min ago | | AI: 93% confidence | | [REVIEW NOW] | | | | 🔴 Bed 7 - Stroke | | 📱 5 min ago | | AI: 87% confidence | | [REVIEW NOW] | | | | URGENT CASES (4) | | 🟡 Show All | | | | ROUTINE CASES (12) | | 🟢 Show All | +------------------------+ 3.3 Critical Case Details +------------------------+ | ← CRITICAL CASE | | | | Patient: John Doe, 45M | | Bed: 3 | Time: 14:35 | | Clinical: Head trauma | | | | AI ANALYSIS: | | 🔴 Acute Subdural | | Confidence: 93% | | Midline Shift: 7mm | | Mass Effect: Present | | | | [VIEW DICOM IMAGES] | | [VOICE REPORT] | | [QUICK REPORT] | | | | Status: PENDING REVIEW | +------------------------+ 3.4 DICOM Viewer +------------------------+ | ← John Doe - CT Brain | | | | [ CT SCAN IMAGE ]| | [ WITH AI OVERLAY ]| | [ HEMORRHAGE ]| | [ HIGHLIGHTED ]| | | | Tools: [🔍][📏][✏️] | | AI: [ON] Conf: 93% | | | | Measurements: | | • Hemorrhage: 3.2cm | | • Midline: 7mm shift | | | | [🎤 START REPORT] | +------------------------+ 3.5 Voice Report Interface +------------------------+ | ← Voice Report | | | | [🎤 RECORDING 01:23] | | | | "There is a large | | acute subdural | | hemorrhage in the | | right frontoparietal | | region..." | | | | [PAUSE] [STOP] [PLAY] | | | | [SAVE DRAFT] | | [SUBMIT REPORT] | | | | Estimated: 2 min left | +------------------------+
5.1 React Native Project Structure 🏥 RADIOLOGIST APP STRUCTURE NeoScan_Radiologist/ │ ├── app/ │ ├── modules/ # 🌐 Feature-wise modular architecture │ │ ├── Auth/ # 🔐 Authentication Module │ │ │ ├── components/ │ │ │ │ ├── BiometricLogin.tsx │ │ │ │ ├── PinInput.tsx │ │ │ │ ├── EmergencyAccess.tsx │ │ │ │ └── index.ts │ │ │ ├── screens/ │ │ │ │ ├── LoginScreen.tsx │ │ │ │ ├── SetupBiometricScreen.tsx │ │ │ │ └── index.ts │ │ │ ├── hooks/ │ │ │ │ ├── useAuth.ts │ │ │ │ ├── useBiometric.ts │ │ │ │ └── index.ts │ │ │ ├── redux/ │ │ │ │ ├── authSlice.ts │ │ │ │ ├── authActions.ts │ │ │ │ ├── authSelectors.ts │ │ │ │ └── index.ts │ │ │ ├── services/ │ │ │ │ ├── authAPI.ts │ │ │ │ ├── biometricService.ts │ │ │ │ └── index.ts │ │ │ ├── tests/ │ │ │ │ ├── AuthService.test.ts │ │ │ │ ├── LoginScreen.test.tsx │ │ │ │ └── authSlice.test.ts │ │ │ └── index.ts │ │ │ │ │ ├── Dashboard/ # 📊 Dashboard Module │ │ │ ├── components/ │ │ │ │ ├── CaseQueue.tsx │ │ │ │ ├── CaseCard.tsx │ │ │ │ ├── PriorityIndicator.tsx │ │ │ │ ├── StatsPanel.tsx │ │ │ │ ├── FilterBar.tsx │ │ │ │ └── index.ts │ │ │ ├── screens/ │ │ │ │ ├── DashboardScreen.tsx │ │ │ │ ├── CaseListScreen.tsx │ │ │ │ └── index.ts │ │ │ ├── hooks/ │ │ │ │ ├── useCaseQueue.ts │ │ │ │ ├── useRealTimeUpdates.ts │ │ │ │ ├── useFilterCases.ts │ │ │ │ └── index.ts │ │ │ ├── redux/ │ │ │ │ ├── dashboardSlice.ts │ │ │ │ ├── caseQueueSlice.ts │ │ │ │ ├── dashboardActions.ts │ │ │ │ ├── dashboardSelectors.ts │ │ │ │ └── index.ts │ │ │ ├── services/ │ │ │ │ ├── caseAPI.ts │ │ │ │ ├── websocketService.ts │ │ │ │ ├── notificationService.ts │ │ │ │ └── index.ts │ │ │ ├── tests/ │ │ │ │ ├── CaseQueue.test.tsx │ │ │ │ ├── dashboardSlice.test.ts │ │ │ │ └── caseAPI.test.ts │ │ │ └── index.ts │ │ │ │ │ ├── CaseReview/ # 🔍 Case Review Module │ │ │ ├── components/ │ │ │ │ ├── DICOMViewer.tsx │ │ │ │ ├── AIOverlay.tsx │ │ │ │ ├── MeasurementTools.tsx │ │ │ │ ├── AnnotationTools.tsx │ │ │ │ ├── CaseMetadata.tsx │ │ │ │ ├── PriorStudyComparison.tsx │ │ │ │ └── index.ts │ │ │ ├── screens/ │ │ │ │ ├── CaseDetailsScreen.tsx │ │ │ │ ├── DICOMViewerScreen.tsx │ │ │ │ ├── ComparisonScreen.tsx │ │ │ │ └── index.ts │ │ │ ├── hooks/ │ │ │ │ ├── useDICOMViewer.ts │ │ │ │ ├── useAIOverlay.ts │ │ │ │ ├── useMeasurements.ts │ │ │ │ ├── useAnnotations.ts │ │ │ │ └── index.ts │ │ │ ├── redux/ │ │ │ │ ├── caseReviewSlice.ts │ │ │ │ ├── dicomSlice.ts │ │ │ │ ├── aiAnalysisSlice.ts │ │ │ │ ├── caseReviewActions.ts │ │ │ │ ├── caseReviewSelectors.ts │ │ │ │ └── index.ts │ │ │ ├── services/ │ │ │ │ ├── dicomAPI.ts │ │ │ │ ├── aiAnalysisAPI.ts │ │ │ │ ├── dicomParser.ts │ │ │ │ ├── imageProcessor.ts │ │ │ │ └── index.ts │ │ │ ├── tests/ │ │ │ │ ├── DICOMViewer.test.tsx │ │ │ │ ├── AIOverlay.test.tsx │ │ │ │ ├── dicomParser.test.ts │ │ │ │ └── caseReviewSlice.test.ts │ │ │ └── index.ts │ │ │ │ │ ├── Reporting/ # 📝 Reporting Module │ │ │ ├── components/ │ │ │ │ ├── VoiceRecorder.tsx │ │ │ │ ├── ReportEditor.tsx │ │ │ │ ├── ReportTemplate.tsx │ │ │ │ ├── QuickReportButtons.tsx │ │ │ │ ├── ReportPreview.tsx │ │ │ │ └── index.ts │ │ │ ├── screens/ │ │ │ │ ├── ReportingScreen.tsx │ │ │ │ ├── VoiceReportScreen.tsx │ │ │ │ ├── ReportHistoryScreen.tsx │ │ │ │ └── index.ts │ │ │ ├── hooks/ │ │ │ │ ├── useVoiceRecording.ts │ │ │ │ ├── useReportGeneration.ts │ │ │ │ ├── useSpeechToText.ts │ │ │ │ └── index.ts │ │ │ ├── redux/ │ │ │ │ ├── reportingSlice.ts │ │ │ │ ├── voiceRecordingSlice.ts │ │ │ │ ├── reportingActions.ts │ │ │ │ ├── reportingSelectors.ts │ │ │ │ └── index.ts │ │ │ ├── services/ │ │ │ │ ├── reportAPI.ts │ │ │ │ ├── voiceToTextAPI.ts │ │ │ │ ├── reportTemplateService.ts │ │ │ │ └── index.ts │ │ │ ├── tests/ │ │ │ │ ├── VoiceRecorder.test.tsx │ │ │ │ ├── reportingSlice.test.ts │ │ │ │ └── voiceToTextAPI.test.ts │ │ │ └── index.ts │ │ │ │ │ ├── Notifications/ # 🔔 Notifications Module │ │ │ ├── components/ │ │ │ │ ├── NotificationPanel.tsx │ │ │ │ ├── AlertBanner.tsx │ │ │ │ ├── CriticalAlert.tsx │ │ │ │ ├── NotificationSettings.tsx │ │ │ │ └── index.ts │ │ │ ├── screens/ │ │ │ │ ├── NotificationsScreen.tsx │ │ │ │ ├── AlertDetailsScreen.tsx │ │ │ │ └── index.ts │ │ │ ├── hooks/ │ │ │ │ ├── useNotifications.ts │ │ │ │ ├── usePushNotifications.ts │ │ │ │ ├── useAlertHandling.ts │ │ │ │ └── index.ts │ │ │ ├── redux/ │ │ │ │ ├── notificationsSlice.ts │ │ │ │ ├── alertsSlice.ts │ │ │ │ ├── notificationActions.ts │ │ │ │ ├── notificationSelectors.ts │ │ │ │ └── index.ts │ │ │ ├── services/ │ │ │ │ ├── pushNotificationService.ts │ │ │ │ ├── alertService.ts │ │ │ │ ├── notificationAPI.ts │ │ │ │ └── index.ts │ │ │ ├── tests/ │ │ │ │ ├── NotificationPanel.test.tsx │ │ │ │ ├── alertService.test.ts │ │ │ │ └── notificationsSlice.test.ts │ │ │ └── index.ts │ │ │ │ │ ├── Analytics/ # 📈 Analytics Module │ │ │ ├── components/ │ │ │ │ ├── PerformanceMetrics.tsx │ │ │ │ ├── ResponseTimeChart.tsx │ │ │ │ ├── ConcordanceStats.tsx │ │ │ │ ├── WorkloadAnalysis.tsx │ │ │ │ └── index.ts │ │ │ ├── screens/ │ │ │ │ ├── AnalyticsScreen.tsx │ │ │ │ ├── PerformanceScreen.tsx │ │ │ │ └── index.ts │ │ │ ├── hooks/ │ │ │ │ ├── useAnalytics.ts │ │ │ │ ├── usePerformanceMetrics.ts │ │ │ │ └── index.ts │ │ │ ├── redux/ │ │ │ │ ├── analyticsSlice.ts │ │ │ │ ├── analyticsActions.ts │ │ │ │ ├── analyticsSelectors.ts │ │ │ │ └── index.ts │ │ │ ├── services/ │ │ │ │ ├── analyticsAPI.ts │ │ │ │ ├── metricsCollector.ts │ │ │ │ └── index.ts │ │ │ ├── tests/ │ │ │ │ ├── PerformanceMetrics.test.tsx │ │ │ │ ├── analyticsSlice.test.ts │ │ │ │ └── metricsCollector.test.ts │ │ │ └── index.ts │ │ │ │ │ └── Profile/ # 👤 User Profile Module │ │ ├── components/ │ │ │ ├── ProfileHeader.tsx │ │ │ ├── SettingsPanel.tsx │ │ │ ├── PreferencesForm.tsx │ │ │ ├── SecuritySettings.tsx │ │ │ └── index.ts │ │ ├── screens/ │ │ │ ├── ProfileScreen.tsx │ │ │ ├── SettingsScreen.tsx │ │ │ ├── PreferencesScreen.tsx │ │ │ └── index.ts │ │ ├── hooks/ │ │ │ ├── useProfile.ts │ │ │ ├── useSettings.ts │ │ │ └── index.ts │ │ ├── redux/ │ │ │ ├── profileSlice.ts │ │ │ ├── settingsSlice.ts │ │ │ ├── profileActions.ts │ │ │ ├── profileSelectors.ts │ │ │ └── index.ts │ │ ├── services/ │ │ │ ├── profileAPI.ts │ │ │ ├── settingsAPI.ts │ │ │ └── index.ts │ │ ├── tests/ │ │ │ ├── ProfileHeader.test.tsx │ │ │ ├── profileSlice.test.ts │ │ │ └── profileAPI.test.ts │ │ └── index.ts │ │ │ ├── navigation/ # 🧭 Navigation Setup │ │ ├── AppNavigator.tsx │ │ ├── AuthNavigator.tsx │ │ ├── MainNavigator.tsx │ │ ├── TabNavigator.tsx │ │ ├── ModalNavigator.tsx │ │ ├── navigationTypes.ts │ │ └── index.ts │ │ │ ├── redux/ # 🗃️ Redux Store Setup │ │ ├── store.ts │ │ ├── rootReducer.ts │ │ ├── middleware.ts │ │ ├── persistConfig.ts │ │ └── index.ts │ │ │ ├── constants/ # 📋 Global Constants │ │ ├── apiEndpoints.ts │ │ ├── appConstants.ts │ │ ├── errorMessages.ts │ │ ├── notificationTypes.ts │ │ ├── priorityLevels.ts │ │ └── index.ts │ │ │ ├── App.tsx # 🎯 Root Component │ └── index.ts # 🚀 App Bootstrap │ ├── shared/ # ✅ Shared Components & Utilities │ ├── src/ │ │ ├── components/ # 🎨 Global UI Components │ │ │ ├── Button/ │ │ │ │ ├── Button.tsx │ │ │ │ ├── Button.styles.ts │ │ │ │ ├── Button.types.ts │ │ │ │ └── index.ts │ │ │ ├── Input/ │ │ │ │ ├── TextInput.tsx │ │ │ │ ├── SearchInput.tsx │ │ │ │ ├── Input.styles.ts │ │ │ │ ├── Input.types.ts │ │ │ │ └── index.ts │ │ │ ├── Modal/ │ │ │ │ ├── Modal.tsx │ │ │ │ ├── ConfirmModal.tsx │ │ │ │ ├── AlertModal.tsx │ │ │ │ ├── Modal.styles.ts │ │ │ │ ├── Modal.types.ts │ │ │ │ └── index.ts │ │ │ ├── Card/ │ │ │ │ ├── Card.tsx │ │ │ │ ├── InfoCard.tsx │ │ │ │ ├── Card.styles.ts │ │ │ │ ├── Card.types.ts │ │ │ │ └── index.ts │ │ │ ├── Loading/ │ │ │ │ ├── Spinner.tsx │ │ │ │ ├── LoadingOverlay.tsx │ │ │ │ ├── Loading.styles.ts │ │ │ │ └── index.ts │ │ │ ├── Icons/ │ │ │ │ ├── CustomIcon.tsx │ │ │ │ ├── IconButton.tsx │ │ │ │ ├── Icons.types.ts │ │ │ │ └── index.ts │ │ │ └── index.ts │ │ │ │ │ ├── theme/ # 🎨 Design System │ │ │ ├── colors.ts │ │ │ ├── spacing.ts │ │ │ ├── typography.ts │ │ │ ├── shadows.ts │ │ │ ├── borderRadius.ts │ │ │ ├── animations.ts │ │ │ └── index.ts │ │ │ │ │ ├── assets/ # 📁 Static Assets │ │ │ ├── icons/ │ │ │ │ ├── critical-alert.svg │ │ │ │ ├── urgent-alert.svg │ │ │ │ ├── routine-alert.svg │ │ │ │ └── index.ts │ │ │ ├── images/ │ │ │ │ ├── logo.png │ │ │ │ ├── placeholder.png │ │ │ │ └── index.ts │ │ │ ├── fonts/ │ │ │ │ ├── Roboto-Regular.ttf │ │ │ │ ├── Roboto-Bold.ttf │ │ │ │ └── index.ts │ │ │ └── sounds/ │ │ │ ├── critical-alert.wav │ │ │ ├── urgent-alert.wav │ │ │ └── routine-alert.wav │ │ │ │ │ ├── utils/ # 🛠️ Utility Functions │ │ │ ├── dateTime/ │ │ │ │ ├── formatDate.ts │ │ │ │ ├── timeAgo.ts │ │ │ │ └── index.ts │ │ │ ├── validation/ │ │ │ │ ├── validators.ts │ │ │ │ ├── schemas.ts │ │ │ │ └── index.ts │ │ │ ├── helpers/ │ │ │ │ ├── debounce.ts │ │ │ │ ├── throttle.ts │ │ │ │ ├── formatters.ts │ │ │ │ └── index.ts │ │ │ ├── constants/ │ │ │ │ ├── regex.ts │ │ │ │ ├── formats.ts │ │ │ │ └── index.ts │ │ │ └── index.ts │ │ │ │ │ ├── hooks/ # 🎣 Shared Custom Hooks │ │ │ ├── useTheme.ts │ │ │ ├── useDebounce.ts │ │ │ ├── useKeyboard.ts │ │ │ ├── useNetworkStatus.ts │ │ │ ├── useOrientation.ts │ │ │ └── index.ts │ │ │ │ │ ├── types/ # 📝 TypeScript Types │ │ │ ├── common.ts │ │ │ ├── api.ts │ │ │ ├── navigation.ts │ │ │ ├── theme.ts │ │ │ └── index.ts │ │ │ │ │ └── index.ts # 📦 Barrel Export │ │ │ ├── package.json # 📦 Shared Package Config │ └── tsconfig.json # ⚙️ TypeScript Config │ ├── tests/ # 🧪 Global Tests │ ├── App.test.tsx │ ├── Navigation.test.tsx │ ├── Redux.test.tsx │ └── Integration.test.tsx │ ├── assets/ # 🖼️ App-wide Assets │ ├── images/ │ ├── videos/ │ └── audio/ │ ├── android/ # 🤖 Android Native ├── ios/ # 🍎 iOS Native ├── index.js # 🎯 RN Entry Point ├── package.json # 📦 Root Dependencies ├── tsconfig.json # ⚙️ Base TypeScript Config ├── metro.config.js # 📦 Metro Bundler Config ├── babel.config.js # 🔄 Babel Config └── .eslintrc.js # 📏 ESLint Config
Key Features:
Real-time WebSocket connections Offline caching for critical cases Biometric authentication for radiologists Performance monitoring with timing metrics
Radiologist App Options Option 1: "Clinical Gray Spectrum"
Primary: #2C3E50 (Dark Blue-Gray) Secondary: #34495E (Medium Blue-Gray) Tertiary: #95A5A6 (Light Gray) Text Primary: #2C3E50 (Dark Blue-Gray) Text Secondary: #7F8C8D (Medium Gray) Text Muted: #BDC3C7 (Light Gray) Background: #F8F9FA (Light Gray) Background Alt: #E9ECEF (Darker Light Gray) Success: #27AE60 (Green) Warning: #F39C12 (Orange) Error: #E74C3C (Red) Info: #3498DB (Blue)
Option 2: "Deep Tech Purple"
Primary: #6C5CE7 (Modern Purple) Secondary: #A29BFE (Light Purple) Tertiary: #DDD6FE (Very Light Purple) Text Primary: #2D3436 (Charcoal) Text Secondary: #636E72 (Gray) Text Muted: #B2BEC3 (Light Gray) Background: #FFFFFF (White) Background Alt: #F8F7FF (Very Light Purple) Success: #00B894 (Teal) Warning: #FDCB6E (Yellow) Error: #FD79A8 (Pink) Info: #74B9FF (Light Blue)
Option 3: "Dark Professional"
Primary: #1A365D (Navy Blue) Secondary: #2D3748 (Dark Gray) Tertiary: #4A5568 (Medium Gray) Text Primary: #1A202C (Very Dark Gray) Text Secondary: #4A5568 (Medium Gray) Text Muted: #718096 (Light Gray) Background: #FFFFFF (White) Background Alt: #F7FAFC (Off White) Success: #38A169 (Green) Warning: #DD6B20 (Orange) Error: #E53E3E (Red) Info: #3182CE (Blue)
Option 4: "Sophisticated Slate"
Primary: #475569 (Slate Gray) Secondary: #64748B (Medium Slate) Tertiary: #CBD5E1 (Light Slate) Text Primary: #0F172A (Almost Black) Text Secondary: #475569 (Slate Gray) Text Muted: #94A3B8 (Light Slate) Background: #FFFFFF (White) Background Alt: #F8FAFC (Very Light Slate) Success: #059669 (Emerald) Warning: #D97706 (Amber) Error: #DC2626 (Red) Info: #0284C7 (Sky Blue)
Radiologist App - "Clinical Blue Interface" Primary: #5B7CE6 (Blue Purple - from the selected buttons) Secondary: #7B94F0 (Light Blue Purple) Tertiary: #E8EFFF (Very Light Blue) Quaternary: #3B5998 (Deep Blue) Text Primary: #1A1D29 (Almost Black) Text Secondary: #4A5568 (Medium Gray) Text Muted: #9CA3AF (Light Gray) Background: #FFFFFF (White) Background Alt: #F8FAFF (Very Light Blue Tint) Background Accent: #F1F5FF (Soft Blue) Card Background: #FFFFFF (White with shadow) Success: #10B981 (Green - from the security icon) Warning: #F59E0B (Amber) Error: #EF4444 (Red) Info: #3B82F6 (Blue) Border: #E5E7EB (Light Gray) Selected State: #5B7CE6 (Same as Primary) Inactive State: #F3F4F6 (Light Gray) Shadow: rgba(91, 124, 230, 0.1) (Blue Shadow) Gradient Background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)
Dark professional Prefered
# Using npm
npm start
# OR using Yarn
yarn start
Step 2: Build and run your app
With Metro running, open a new terminal window/pane from the root of your React Native project, and use one of the following commands to build and run your Android or iOS app:
Android
# Using npm
npm run android
# OR using Yarn
yarn android
iOS
For iOS, remember to install CocoaPods dependencies (this only needs to be run on first clone or after updating native deps).
The first time you create a new project, run the Ruby bundler to install CocoaPods itself:
bundle install
Then, and every time you update your native dependencies, run:
bundle exec pod install
For more information, please visit CocoaPods Getting Started guide.
# Using npm
npm run ios
# OR using Yarn
yarn ios
If everything is set up correctly, you should see your new app running in the Android Emulator, iOS Simulator, or your connected device.
This is one way to run your app — you can also build it directly from Android Studio or Xcode.