20 KiB
20 KiB
/*
- 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:
.tsxfor components,.tsfor utilities - Examples:
LoginScreen.tsx,PatientCard.tsx,CriticalAlerts.tsx
Hooks
- camelCase with
useprefix - 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.tsor.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
- Clone the repository
- Run setup script:
./setup.sh(Unix) orsetup.bat(Windows) - Start development server:
npm start - Run on device:
npm run androidornpm 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. */