med-plan-assistant/docs/2025-10-18_MODULAR_STRUCTURE.md

Medication Plan Assistant - Modular Structure

This application has been successfully modularized to simplify maintenance and further development.

📁 New Project Structure

src/
├── App.js                     # Main component (greatly simplified)
├── components/                # UI components
│   ├── DoseSchedule.js        # Dosage schedule input
│   ├── DeviationList.js       # Deviations from the schedule
│   ├── SuggestionPanel.js     # Correction suggestions
│   ├── SimulationChart.js     # Chart component
│   ├── Settings.js            # Settings panel
│   ├── TimeInput.js           # Time input with picker
│   └── NumericInput.js        # Numeric input with +/- buttons
├── hooks/                     # Custom React hooks
│   ├── useAppState.js         # State management & local storage
│   └── useSimulation.js       # Simulation logic & calculations
├── utils/                     # Utility functions
│   ├── timeUtils.js           # Time utility functions
│   ├── pharmacokinetics.js    # PK calculations
│   ├── calculations.js        # Concentration calculations
│   └── suggestions.js         # Correction suggestion algorithm
└── constants/
    └── defaults.js            # Constants & default values

🎯 Advantages of the new structure

✅ Better maintainability

• Small, focused modules: Each file has a clear responsibility
• Easier debugging: Problems can be localized more quickly
• Clearer code organization: Related functions are grouped together

✅ Reusability

• UI components: TimeInput, NumericInput can be used anywhere
• Utility functions: PK calculations are isolated and testable
• Custom hooks: State logic is reusable

✅ Development friendliness

• Parallel development: Teams can work on different modules
• Simpler testing: Each module can be tested in isolation
• Better IDE support: Smaller files = better performance

✅ Scalability

• New features: Easy to add as new modules
• Code splitting: Possible for better performance
• Refactoring: Changes are limited locally

🔧 Technical details

State management

• useAppState: Manages global app state and LocalStorage
• useSimulation: Manages all simulation-related calculations

Component architecture

• Dumb components: UI components receive props and call callbacks
• Smart Components: Hooks manage state and business logic
• Separation of Concerns: UI, state, and business logic are separated

Utils & Calculations

• Pure functions: All calculations are side-effect-free
• Modular exports: Functions can be imported individually
• Typed interfaces: Clear input/output definitions

🚀 Migration complete

The application works identically to the original version, but now:

• Split into 350+ lines across several small modules
• Easier to understand and modify
• Ready for further features and improvements
• More test-friendly for unit and integration tests