1. 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

3. 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

```sh
# 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

```sh
# 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:

```sh
bundle install
```

Then, and every time you update your native dependencies, run:

```sh
bundle exec pod install
```

For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html).

```sh
# 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.