/* * File: PROJECT_STRUCTURE.md * Description: Complete project structure and architecture documentation * Design & Developed by Tech4Biz Solutions * Copyright (c) Spurrin Innovations. All rights reserved. */ # NeoScan Physician App - Project Structure ## 📁 Complete Directory Structure ``` NeoScan_Physician/ ├── app/ # Main application code │ ├── modules/ # Feature-based modules │ │ ├── Auth/ # Authentication module │ │ │ ├── components/ # Auth-specific components │ │ │ ├── screens/ # Auth screens │ │ │ │ └── LoginScreen.tsx # Main login screen │ │ │ ├── hooks/ # Auth custom hooks │ │ │ ├── redux/ # Auth state management │ │ │ ├── services/ # Auth API services │ │ │ └── index.ts # Auth module exports │ │ ├── Dashboard/ # ER Dashboard module │ │ │ ├── components/ # Dashboard components │ │ │ │ ├── PatientCard.tsx # Patient information card │ │ │ │ ├── CriticalAlerts.tsx # Critical alerts display │ │ │ │ ├── DashboardHeader.tsx # Dashboard statistics header │ │ │ │ ├── QuickActions.tsx # Emergency quick actions │ │ │ │ └── DepartmentStats.tsx # Department statistics │ │ │ ├── screens/ # Dashboard screens │ │ │ │ └── DashboardScreen.tsx # Main ER dashboard │ │ │ ├── hooks/ # Dashboard custom hooks │ │ │ ├── redux/ # Dashboard state management │ │ │ ├── services/ # Dashboard API services │ │ │ └── index.ts # Dashboard module exports │ │ ├── PatientCare/ # Patient management module │ │ │ ├── components/ # Patient care components │ │ │ ├── screens/ # Patient care screens │ │ │ ├── hooks/ # Patient care hooks │ │ │ ├── redux/ # Patient care state │ │ │ ├── services/ # Patient care services │ │ │ └── index.ts # Patient care exports │ │ └── Settings/ # App settings module │ │ ├── components/ # Settings components │ │ ├── screens/ # Settings screens │ │ ├── hooks/ # Settings hooks │ │ ├── redux/ # Settings state │ │ ├── services/ # Settings services │ │ └── index.ts # Settings exports │ ├── shared/ # Shared utilities & components │ │ ├── components/ # Reusable UI components │ │ │ ├── UI/ # Basic UI components │ │ │ │ ├── Button.tsx # Button component │ │ │ │ ├── Input.tsx # Input field component │ │ │ │ ├── Card.tsx # Card component │ │ │ │ ├── Modal.tsx # Modal component │ │ │ │ ├── Badge.tsx # Badge component │ │ │ │ ├── Spinner.tsx # Loading spinner │ │ │ │ ├── Alert.tsx # Alert component │ │ │ │ ├── Dropdown.tsx # Dropdown component │ │ │ │ ├── Tabs.tsx # Tab component │ │ │ │ ├── ProgressBar.tsx # Progress bar │ │ │ │ └── index.ts # UI components export │ │ │ ├── Forms/ # Form-related components │ │ │ │ ├── FormField.tsx # Form field component │ │ │ │ ├── ValidationMessage.tsx # Validation message │ │ │ │ ├── FormContainer.tsx # Form container │ │ │ │ └── index.ts # Form components export │ │ │ ├── Icons/ # Icon components │ │ │ │ ├── MedicalIcons.tsx # Medical-specific icons │ │ │ │ ├── StatusIcons.tsx # Status indicators │ │ │ │ ├── NavigationIcons.tsx # Navigation icons │ │ │ │ └── index.ts # Icon components export │ │ │ └── index.ts # Shared components export │ │ ├── utils/ # Utility functions │ │ │ ├── api.ts # API utilities │ │ │ ├── constants.ts # App constants │ │ │ ├── helpers.ts # Helper functions │ │ │ ├── validators.ts # Validation functions │ │ │ ├── formatters.ts # Data formatting │ │ │ ├── dateUtils.ts # Date utilities │ │ │ ├── medicalUtils.ts # Medical-specific utilities │ │ │ ├── imageUtils.ts # Image processing │ │ │ ├── stringUtils.ts # String manipulation │ │ │ └── index.ts # Utils export │ │ ├── types/ # TypeScript type definitions │ │ │ ├── auth.ts # Authentication types │ │ │ ├── patient.ts # Patient-related types │ │ │ ├── dashboard.ts # Dashboard types │ │ │ ├── alerts.ts # Alert types │ │ │ ├── common.ts # Common types │ │ │ └── index.ts # Types export │ │ └── index.ts # Shared module export │ ├── theme/ # Design system & theming │ │ ├── colors.ts # Color palette │ │ ├── typography.ts # Typography system │ │ ├── spacing.ts # Spacing & layout │ │ ├── shadows.ts # Shadow system │ │ ├── animations.ts # Animation system │ │ ├── theme.ts # Main theme object │ │ └── index.ts # Theme export │ ├── navigation/ # Navigation setup │ │ ├── AppNavigator.tsx # Root navigator │ │ ├── AuthNavigator.tsx # Authentication flow │ │ ├── MainNavigator.tsx # Main app flow │ │ ├── TabNavigator.tsx # Tab navigation │ │ ├── navigationTypes.ts # Navigation types │ │ ├── navigationUtils.ts # Navigation utilities │ │ └── __tests__/ # Navigation tests │ ├── store/ # Redux store configuration │ │ ├── index.ts # Store configuration │ │ ├── rootReducer.ts # Root reducer │ │ ├── middleware.ts # Custom middleware │ │ └── __tests__/ # Store tests │ ├── config/ # Configuration files │ │ ├── env.ts # Environment variables │ │ ├── api.ts # API configuration │ │ ├── websocket.ts # WebSocket config │ │ ├── notifications.ts # Notification config │ │ ├── security.ts # Security settings │ │ └── index.ts # Config export │ ├── assets/ # Static assets │ │ ├── images/ # Image assets │ │ │ ├── logos/ # Hospital & app logos │ │ │ ├── icons/ # UI icons │ │ │ │ ├── medical/ # Medical-specific icons │ │ │ │ ├── ui/ # General UI icons │ │ │ │ └── status/ # Status indicators │ │ │ ├── backgrounds/ # Background images │ │ │ └── placeholders/ # Placeholder images │ │ ├── fonts/ # Font files │ │ └── sounds/ # Audio assets │ ├── localization/ # Internationalization │ │ ├── en/ # English translations │ │ ├── es/ # Spanish translations │ │ ├── fr/ # French translations │ │ └── index.ts # i18n configuration │ ├── App.tsx # Root component │ └── index.tsx # App entry point ├── android/ # Android native code │ ├── app/ # Android app module │ │ ├── build.gradle # App build configuration │ │ ├── debug.keystore # Debug keystore │ │ ├── proguard-rules.pro # ProGuard rules │ │ └── src/ # Source code │ │ ├── debug/ # Debug configuration │ │ │ └── AndroidManifest.xml # Debug manifest │ │ └── main/ # Main source │ │ ├── AndroidManifest.xml # Main manifest │ │ ├── java/ # Java source │ │ │ └── com/ # Package structure │ │ │ └── neoscan_physician/ │ │ │ ├── MainActivity.kt # Main activity │ │ │ └── MainApplication.kt # Application class │ │ └── res/ # Resources │ │ ├── drawable/ # Drawable resources │ │ ├── mipmap-*/ # App icons │ │ └── values/ # Values │ │ ├── strings.xml # String resources │ │ └── styles.xml # Styles │ ├── build.gradle # Project build configuration │ ├── gradle/ # Gradle wrapper │ ├── gradle.properties # Gradle properties │ ├── gradlew # Gradle wrapper script │ ├── gradlew.bat # Windows gradle wrapper │ └── settings.gradle # Gradle settings ├── ios/ # iOS native code │ ├── NeoScan_Physician/ # iOS app │ │ ├── AppDelegate.swift # App delegate │ │ ├── Images.xcassets/ # Image assets │ │ │ ├── AppIcon.appiconset/ # App icons │ │ │ └── Contents.json # Asset catalog │ │ ├── Info.plist # App info │ │ ├── LaunchScreen.storyboard # Launch screen │ │ └── PrivacyInfo.xcprivacy # Privacy info │ ├── NeoScan_Physician.xcodeproj/ # Xcode project │ │ ├── project.pbxproj # Project file │ │ └── xcshareddata/ # Shared data │ │ └── xcschemes/ # Build schemes │ │ └── NeoScan_Physician.xcscheme │ └── Podfile # CocoaPods configuration ├── __tests__/ # Test files │ ├── App.test.tsx # App component tests │ ├── components/ # Component tests │ ├── utils/ # Utility tests │ └── integration/ # Integration tests ├── docs/ # Documentation │ ├── README.md # Project overview │ ├── ARCHITECTURE.md # Architecture documentation │ ├── API.md # API documentation │ ├── DEPLOYMENT.md # Deployment guide │ ├── TESTING.md # Testing guidelines │ ├── SECURITY.md # Security guidelines │ └── wireframes/ # UI wireframes ├── .gitignore # Git ignore rules ├── .eslintrc.js # ESLint configuration ├── .prettierrc.js # Prettier configuration ├── .watchmanconfig # Watchman configuration ├── app.json # App configuration ├── babel.config.js # Babel configuration ├── jest.config.js # Jest configuration ├── metro.config.js # Metro bundler configuration ├── package.json # Dependencies and scripts ├── package-lock.json # Locked dependencies ├── tsconfig.json # TypeScript configuration ├── index.js # React Native entry point ├── setup.sh # Unix setup script ├── setup.bat # Windows setup script ├── README.md # Project README ├── PROJECT_STRUCTURE.md # This file └── Gemfile # Ruby dependencies (iOS) ``` ## 🏗️ Module Architecture ### Auth Module **Purpose**: Handles all authentication and authorization functionality - **LoginScreen**: Hospital SSO, credential login, emergency access - **Components**: Login forms, authentication modals - **Services**: Authentication API, token management - **Redux**: Auth state, user session management ### Dashboard Module **Purpose**: Main ER dashboard with patient monitoring and alerts - **DashboardScreen**: Main dashboard with patient list and statistics - **PatientCard**: Individual patient information display - **CriticalAlerts**: High-priority alert notifications - **QuickActions**: Emergency procedure shortcuts - **DepartmentStats**: Real-time department overview ### PatientCare Module **Purpose**: Comprehensive patient management and medical records - **PatientDetailsScreen**: Complete patient information - **VitalSigns**: Real-time vital signs monitoring - **MedicalHistory**: Patient medical records - **Medications**: Current medication management - **Allergies**: Allergy information and alerts ### Settings Module **Purpose**: App configuration and user preferences - **SettingsScreen**: User preferences and app settings - **NotificationSettings**: Alert and notification configuration - **SecuritySettings**: Authentication and security options - **AboutScreen**: App information and version details ## 📁 File Naming Conventions ### Components - **PascalCase** for all component files - **Suffix with type**: `.tsx` for components, `.ts` for utilities - **Examples**: `LoginScreen.tsx`, `PatientCard.tsx`, `CriticalAlerts.tsx` ### Hooks - **camelCase** with `use` prefix - **Examples**: `useAuth.ts`, `usePatientList.ts`, `useRealTimeAlerts.ts` ### Services - **camelCase** with descriptive names - **Suffix with type**: `API.ts`, `Service.ts` - **Examples**: `authAPI.ts`, `patientCareAPI.ts`, `notificationService.ts` ### Redux - **camelCase** with descriptive suffixes - **Examples**: `authSlice.ts`, `erDashboardSlice.ts`, `patientCareActions.ts` ### Tests - **Same name as source file** + `.test.ts` or `.test.tsx` - **Examples**: `LoginScreen.test.tsx`, `useAuth.test.ts`, `authSlice.test.ts` ## 🔧 Configuration Files ### Theme System - **colors.ts**: Complete color palette with healthcare blue theme - **typography.ts**: Font families, weights, sizes, and spacing - **spacing.ts**: Spacing scale, border radius, breakpoints - **shadows.ts**: Shadow system for elevation - **animations.ts**: Animation durations and easing functions - **theme.ts**: Main theme object combining all design tokens ### Type Definitions - **auth.ts**: Authentication types and interfaces - **patient.ts**: Patient data and medical record types - **dashboard.ts**: Dashboard and ER management types - **alerts.ts**: Alert and notification types - **common.ts**: Common utility types and interfaces ### Utilities - **constants.ts**: App constants, API configs, timeouts - **helpers.ts**: Common utility functions and helpers - **validators.ts**: Form validation and data validation - **formatters.ts**: Data formatting and display utilities - **medicalUtils.ts**: Medical-specific utility functions ## 🎨 Design System ### Color Palette - **Primary**: #2196F3 (Material Blue) - **Secondary**: #1976D2 (Darker Blue) - **Critical**: #F44336 (Material Red) - **Warning**: #FF9800 (Material Orange) - **Success**: #4CAF50 (Material Green) ### Component Library - **UI Components**: Basic building blocks (Button, Input, Card, etc.) - **Form Components**: Form-specific components with validation - **Icon Components**: Medical and UI icons - **Layout Components**: Container and layout components ### Responsive Design - **Mobile First**: Optimized for mobile devices - **Tablet Support**: Enhanced layouts for tablets - **Breakpoints**: Mobile (375px), Tablet (768px), Desktop (1024px) ## 🚀 Getting Started 1. **Clone the repository** 2. **Run setup script**: `./setup.sh` (Unix) or `setup.bat` (Windows) 3. **Start development server**: `npm start` 4. **Run on device**: `npm run android` or `npm run ios` ## 📱 Key Features Implemented ### ✅ Completed - **Theme System**: Complete design system with healthcare blue theme - **Authentication**: Login screen with SSO and credential options - **ER Dashboard**: Main dashboard with patient cards and statistics - **Patient Cards**: Comprehensive patient information display - **Critical Alerts**: High-priority alert system - **Quick Actions**: Emergency procedure shortcuts - **Department Stats**: Real-time department overview - **Navigation**: Tab-based navigation structure - **Type Safety**: Complete TypeScript implementation ### 🔄 In Progress - **Redux Store**: State management implementation - **API Integration**: Backend service integration - **Real-time Updates**: WebSocket implementation - **Push Notifications**: Critical alert notifications ### 📋 Planned - **Patient Details**: Comprehensive patient management screens - **Medical Records**: Complete medical history management - **Settings**: App configuration and preferences - **Offline Support**: Offline data access and sync - **Testing**: Comprehensive test suite - **Documentation**: Complete API and user documentation This structure provides a solid foundation for a comprehensive healthcare application with proper separation of concerns, type safety, and modern React Native best practices. /* * End of File: PROJECT_STRUCTURE.md * Design & Developed by Tech4Biz Solutions * Copyright (c) Spurrin Innovations. All rights reserved. */