Update readmes

docs/2025-10-18_MODULAR_STRUCTURE.md

@@ -1,32 +1,78 @@
 # Medication Plan Assistant - Modular Structure
 
-This application has been successfully modularized to simplify maintenance and further development.
+This application has been successfully modularized and migrated to TypeScript with shadcn/ui components.
 
-## 📁 New Project Structure
+## 📁 Current Project Structure (2025-11-26)
 
 ```text
 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
+├── App.tsx                    # Main component (TypeScript)
+├── index.tsx                  # Entry point
+├── components/                # UI components (TypeScript)
+│   ├── dose-schedule.tsx      # Dosage schedule input
+│   ├── deviation-list.tsx     # Deviations from the schedule
+│   ├── suggestion-panel.tsx   # Correction suggestions
+│   ├── simulation-chart.tsx   # Chart component (Recharts)
+│   ├── settings.tsx           # Settings panel
+│   ├── language-selector.tsx  # Language switcher
+│   └── ui/                    # shadcn/ui components
+│       ├── form-time-input.tsx      # Custom time input with picker
+│       ├── form-numeric-input.tsx   # Custom numeric input with +/- buttons
+│       ├── button.tsx
+│       ├── card.tsx
+│       ├── input.tsx
+│       ├── label.tsx
+│       ├── popover.tsx
+│       ├── select.tsx
+│       ├── separator.tsx
+│       ├── slider.tsx
+│       ├── switch.tsx
+│       └── tooltip.tsx
+├── hooks/                     # Custom React hooks (TypeScript)
+│   ├── useAppState.ts         # State management & local storage
+│   ├── useSimulation.ts       # Simulation logic & calculations
+│   └── useLanguage.ts         # i18n language management
+├── utils/                     # Utility functions (TypeScript)
+│   ├── timeUtils.ts           # Time utility functions
+│   ├── pharmacokinetics.ts    # PK calculations
+│   ├── calculations.ts        # Concentration calculations
+│   └── suggestions.ts         # Correction suggestion algorithm
+├── constants/
+│   └── defaults.ts            # Constants, types & default values
+├── locales/                   # Internationalization
+│   ├── en.ts                  # English translations
+│   ├── de.ts                  # German translations
+│   └── index.ts               # i18n setup
+├── styles/
+│   └── global.css             # Tailwind CSS + shadcn/ui theme
+└── lib/
+    └── utils.ts               # Utility functions (cn helper)
 ```
 
+## 🔄 Recent Migrations (November 2025)
+
+### ✅ JavaScript → TypeScript
+- All `.js` files migrated to `.ts`/`.tsx`
+- Type definitions in `constants/defaults.ts`
+- Proper TypeScript configuration with strict mode
+
+### ✅ Custom Components → shadcn/ui
+- Replaced custom inputs with shadcn/ui components
+- Built custom form components: `FormTimeInput`, `FormNumericInput`
+- Integrated Radix UI primitives for accessibility
+- Tailwind CSS for consistent styling
+
+### ✅ Validation Enhancement
+- Real-time validation with visual feedback
+- Error tooltips (shown on focus only)
+- Red borders for invalid fields
+- Empty value filtering in calculations
+
+### ✅ Internationalization
+- Multi-language support (EN/DE)
+- Browser language detection
+- LocalStorage persistence
+
 ## 🎯 Advantages of the new structure
 
 ### ✅ Better maintainability
@@ -53,30 +99,67 @@ src/
 - **Code splitting**: Possible for better performance
 - **Refactoring**: Changes are limited locally
 
-## 🔧 Technical details
+## 🔧 Technical Details
 
-### State management
+### State Management
 
-- **useAppState**: Manages global app state and LocalStorage
-- **useSimulation**: Manages all simulation-related calculations
+- **useAppState**: Manages global app state with LocalStorage persistence
+- **useSimulation**: Handles all simulation-related calculations and deviations
+- **useLanguage**: Manages i18n state and language switching
 
-### Component architecture
+### 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
+- **Presentational components**: UI components receive typed props and call callbacks
+- **Custom hooks**: Manage state and business logic
+- **shadcn/ui base**: Radix UI primitives with Tailwind styling
+- **Form components**: Reusable `FormTimeInput` and `FormNumericInput` with validation
+
+### TypeScript Integration
+
+- **Type-safe state**: All state objects have proper TypeScript interfaces
+- **Type inference**: Leverages TS for better IDE support and compile-time checks
+- **Strict mode**: Configured for maximum type safety
+- **Exported types**: `Dose`, `Deviation`, `AppState`, `PkParams`, etc.
 
 ### Utils & Calculations
 
-- **Pure functions**: All calculations are side-effect-free
+- **Pure functions**: All calculations are side-effect-free and deterministic
 - **Modular exports**: Functions can be imported individually
-- **Typed interfaces**: Clear input/output definitions
+- **Type-safe interfaces**: Clear input/output types with TypeScript
+- **Empty value handling**: Filters out invalid entries before calculations
 
-## 🚀 Migration complete
+## 🎯 Key Features
 
-The application works identically to the original version, but now:
+### Validation System
+- Real-time field validation
+- Visual feedback (red borders, error tooltips)
+- Focus-based error display (tooltips only show on focus)
+- Required field enforcement
 
-- 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
+### UI/UX Enhancements
+- Time picker with hour/minute grid selection
+- Numeric inputs with increment/decrement buttons
+- Responsive layout with Tailwind CSS
+- Dark mode ready (HSL color variables)
+
+### Data Persistence
+- LocalStorage for all settings
+- Automatic save on state changes
+- Version-based storage key
+- Graceful fallback to defaults
+
+## 🚀 Evolution Summary
+
+The application has evolved significantly:
+
+- **2025-10**: Initial modularization (JS)
+- **2025-11**: TypeScript migration (34 TS/TSX files)
+- **2025-11**: shadcn/ui component library integration
+- **2025-11**: Enhanced validation and UX improvements
+
+**Current state**:
+- **Full TypeScript** with type safety throughout
+- **Modern component library** (shadcn/ui + Radix UI)
+- **Professional UI/UX** with validation and error handling
+- **Maintainable architecture** with clear separation of concerns
+- **Production-ready** with optimized builds