Update README and documentation; refactor frontend components for improved structure and resilience

docs/progress.md

@@ -66,6 +66,34 @@ LabFusion is a unified dashboard and integration hub for homelab services, built
   - Enhanced error handling with proper HTTP status codes
   - Additional endpoints for better service integration
 
+- [x] **Modular Service Adapters Refactoring** (2024-11-09)
+  - Refactored monolithic main.py into modular structure
+  - Separated concerns: models, routes, services
+  - Clean main.py (40 lines vs 424 lines)
+  - Improved maintainability and team collaboration
+  - Service-specific route organization
+
+- [x] **Frontend Clean Code Refactoring** (2024-11-09)
+  - Applied clean code principles and React best practices
+  - Refactored 155-line Dashboard component into focused components
+  - Created reusable common components (StatusIcon, LoadingSpinner, ErrorBoundary)
+  - Implemented component composition with dashboard-specific components
+  - Added PropTypes for type safety and better development experience
+  - Centralized constants and eliminated magic numbers/strings
+  - Created utility functions for error handling and data formatting
+  - Implemented proper separation of concerns (components, hooks, services, utils)
+  - Added comprehensive error boundaries for graceful error handling
+  - Improved code maintainability, testability, and readability
+
+- [x] **Frontend Resilience & Offline Mode** (2024-11-09)
+  - Implemented offline mode for when backend services are unavailable
+  - Added service status monitoring with real-time health checks
+  - Created graceful error handling with user-friendly messages
+  - Implemented fallback data and loading states
+  - Added automatic retry mechanisms and service recovery detection
+  - Created comprehensive error boundary system
+  - Enhanced developer experience with clear error messages and debugging info
+
 ## Current Status 🚧
 
 ### Services Directory Structure
@@ -165,11 +193,13 @@ The modular structure allows for easy addition of new services:
 - **Cache Service** (C++) - For high-performance caching
 
 ## Technical Debt
-- [ ] Add comprehensive error handling
+- [x] Add comprehensive error handling (Frontend)
 - [ ] Implement proper logging across all services
 - [ ] Add unit and integration tests
-- [ ] Create API documentation with OpenAPI/Swagger
-- [ ] Add health check endpoints for all services
+- [x] Create API documentation with OpenAPI/Swagger
+- [x] Add health check endpoints for all services
+- [x] Apply clean code principles (Frontend)
+- [x] Implement offline mode and resilience (Frontend)
 
 ## Resources
 - [Project Specifications](specs.md)

docs/structure.txt

@@ -18,7 +18,21 @@ labfusion/
 │   │   ├── Dockerfile.dev     # Development container
 │   │   └── README.md          # Service documentation
 │   ├── service-adapters/      # Python FastAPI Service Adapters (Port 8000)
-│   │   ├── main.py            # FastAPI application
+│   │   ├── main.py            # FastAPI application (modular)
+│   │   ├── models/            # Pydantic schemas
+│   │   │   ├── __init__.py
+│   │   │   └── schemas.py     # Request/response models
+│   │   ├── routes/            # API endpoints
+│   │   │   ├── __init__.py
+│   │   │   ├── general.py     # Root, health, services
+│   │   │   ├── home_assistant.py # HA integration
+│   │   │   ├── frigate.py     # Frigate integration
+│   │   │   ├── immich.py      # Immich integration
+│   │   │   └── events.py      # Event management
+│   │   ├── services/          # Business logic
+│   │   │   ├── __init__.py
+│   │   │   ├── config.py      # Service configurations
+│   │   │   └── redis_client.py # Redis connection
 │   │   ├── requirements.txt   # Python dependencies
 │   │   ├── Dockerfile         # Production container
 │   │   ├── Dockerfile.dev     # Development container
@@ -44,17 +58,37 @@ labfusion/
 ├── frontend/                  # React Frontend (Port 3000)
 │   ├── src/
 │   │   ├── components/        # React components
-│   │   │   ├── Dashboard.js   # Main dashboard
+│   │   │   ├── common/        # Reusable UI components
+│   │   │   │   ├── ErrorBoundary.js    # Error boundary component
+│   │   │   │   ├── LoadingSpinner.js   # Loading state component
+│   │   │   │   └── StatusIcon.js       # Status icon component
+│   │   │   ├── dashboard/     # Dashboard-specific components
+│   │   │   │   ├── SystemStatsCards.js # System statistics cards
+│   │   │   │   ├── ServiceStatusList.js # Service status list
+│   │   │   │   └── RecentEventsList.js # Recent events list
+│   │   │   ├── Dashboard.js   # Main dashboard (refactored)
 │   │   │   ├── SystemMetrics.js # Metrics visualization
-│   │   │   └── Settings.js    # Configuration UI
-│   │   ├── App.js             # Main app component
+│   │   │   ├── Settings.js    # Configuration UI
+│   │   │   ├── ServiceStatusBanner.js # Service status banner
+│   │   │   └── OfflineMode.js # Offline mode component
+│   │   ├── hooks/             # Custom React hooks
+│   │   │   └── useServiceStatus.js # Service status and data hooks
+│   │   ├── services/          # API and external services
+│   │   │   └── api.js         # Centralized API client
+│   │   ├── utils/             # Utility functions
+│   │   │   └── errorHandling.js # Error handling utilities
+│   │   ├── constants/         # Configuration constants
+│   │   │   └── index.js       # UI constants, colors, messages
+│   │   ├── App.js             # Main app component (with ErrorBoundary)
 │   │   ├── index.js           # App entry point
 │   │   └── index.css          # Global styles
 │   ├── public/
 │   │   └── index.html         # HTML template
-│   ├── package.json           # Node.js dependencies
+│   ├── package.json           # Node.js dependencies (with prop-types)
 │   ├── Dockerfile             # Production container
-│   └── Dockerfile.dev         # Development container
+│   ├── Dockerfile.dev         # Development container
+│   ├── CLEAN_CODE.md          # Clean code documentation
+│   └── RESILIENCE.md          # Frontend resilience features
 └── docs/                      # Documentation
     ├── specs.md              # Project specifications
     ├── structure.txt         # Project structure