feat(ui): create organized folder structure for application

Folder Structure:
- components/ : UI components (room-map, details-panel, header, legend, footer)
- services/ : Business logic and API communication
- models/ : TypeScript interfaces for data typing
- guards/ : Route guards for authentication (future)
- interceptors/ : HTTP interceptors for request/response handling
- pipes/ : Custom pipes for data transformation
- directives/ : Custom directives for DOM behaviors
- utils/ : Pure utility functions and helpers

Documentation:
- Added README.md in each folder documenting:
  - Folder purpose and planned contents
  - Naming conventions
  - Usage examples

This structure follows Angular best practices and supports:
- Standalone components (Angular 18)
- Clean separation of concerns
- Scalable architecture
- Easy navigation with path aliases (@models, @services, etc.)

Closes #25

ui/README.md

@@ -1,27 +1,116 @@
-# Dashboard
+# PI_E2EEDA - Angular Dashboard
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.0.2.
+Angular 18 dashboard for real-time air quality visualization.
 
-## Development server
+## Quick Start
+```bash
+# Install dependencies
+npm install
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+# Start dev server
+npm start
+#  http://localhost:4200
 
-## Code scaffolding
+# Build for production
+npm run build
+#  dist/dashboard/
+```
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+## Structure
+```
+src/
+├── app/
+│   ├── components/       # UI Components
+│   │   ├── room-map/    # Interactive 2D map
+│   │   ├── room-details-panel/
+│   │   ├── header/
+│   │   └── legend/
+│   ├── services/        # Angular services
+│   │   ├── analytics.service.ts
+│   │   └── websocket.service.ts
+│   ├── models/          # TypeScript interfaces
+│   ├── guards/          # Route guards
+│   └── interceptors/    # HTTP interceptors
+├── environments/        # Environment configs
+└── assets/             # Images, fonts, etc.
+```
 
-## Build
+## Available Scripts
+```bash
+npm start           # Dev server (port 4200)
+npm run build       # Production build
+npm run lint        # ESLint
+npm run format      # Prettier
+npm test            # Unit tests (Karma)
+npm run e2e         # E2E tests (Cypress)
+```
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+## Technologies
 
-## Running unit tests
+- **Angular**: 18.2.x
+- **TypeScript**: 5.4.x
+- **RxJS**: 7.8.x
+- **Chart.js**: 4.4.x
+- **Angular Material**: 18.2.x
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+## Environments
 
-## Running end-to-end tests
+### Development
+- API: `http://localhost:8080`
+- WebSocket: `ws://localhost:8080`
 
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+### Production
+- API: `https://e2eeda.hes-so.ch/api`
+- WebSocket: `wss://e2eeda.hes-so.ch/ws`
 
-## Further help
+## Conventions
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+- Components: kebab-case (`room-map`)
+- Services: camelCase with suffix (`analytics.service.ts`)
+- Models: PascalCase (`RoomData.ts`)
+- Standalone components only
+- Signals for state management
+
+## Tests
+```bash
+# Unit tests
+npm test
+
+# Coverage
+npm run test:coverage
+#  coverage/index.html
+```
+
+## Build & Deploy
+```bash
+# Production build
+npm run build
+
+# Output
+dist/dashboard/
+  ├── index.html
+  ├── main.*.js
+  ├── polyfills.*.js
+  └── styles.*.css
+
+# Deploy (Docker)
+docker build -t e2eeda/ui:latest .
+docker run -p 80:80 e2eeda/ui:latest
+```
+
+## Debugging
+
+### Common Issues
+
+**CORS errors:**
+```bash
+# Proxy configured in angular.json for /api
+# Or add to package.json:
+"start": "ng serve --proxy-config proxy.conf.json"
+```
+
+**WebSocket connection failed:**
+```typescript
+// Check URL in environment.ts
+wsUrl: 'ws://localhost:8080/ws' // port can change
+```

ui/src/app/components/README.md

@@ -0,0 +1,17 @@
+# Components
+
+Angular components for the user interface.
+
+## Structure
+
+- **room-map/** : Interactive 2D SVG map displaying rooms
+- **room-details-panel/** : Side panel with detailed room information
+- **header/** : Application header (title, navigation)
+- **legend/** : CO2 color legend
+- **footer/** : Footer (optional)
+
+## Conventions
+
+- All components are **standalone**
+- Change detection: **OnPush** by default
+- Naming: kebab-case (e.g., `room-map`)

ui/src/app/directives/README.md

@@ -0,0 +1,12 @@
+# Directives
+
+Custom directives for reusable DOM behaviors.
+
+## Planned Directives
+
+- (To be defined based on needs)
+
+## Conventions
+
+- Naming: kebab-case with `.directive.ts` suffix
+- Standalone: true

ui/src/app/guards/README.md

@@ -0,0 +1,12 @@
+# Guards
+
+Route guards for route protection (if auth needed in the future).
+
+## Planned Guards
+
+- **auth.guard.ts** : Check authentication (future)
+
+## Conventions
+
+- Naming: kebab-case with `.guard.ts` suffix
+- Type: Functional guards (Angular 18 style)

ui/src/app/interceptors/README.md

@@ -0,0 +1,14 @@
+# Interceptors
+
+HTTP interceptors for request/response transformation.
+
+## Planned Interceptors
+
+- **auth.interceptor.ts** : Add JWT token (future)
+- **error.interceptor.ts** : Global HTTP error handling
+- **logging.interceptor.ts** : Log requests (dev only)
+
+## Conventions
+
+- Naming: kebab-case with `.interceptor.ts` suffix
+- Type: Functional interceptors (Angular 18 style)

ui/src/app/models/README.md

@@ -0,0 +1,16 @@
+# Models
+
+TypeScript interfaces for data typing.
+
+## Planned Models
+
+- **room.model.ts** : Room interface (id, name, coordinates)
+- **room-data.model.ts** : RoomData interface (co2, temp, humidity)
+- **sensor.model.ts** : Sensor interface
+- **notification.model.ts** : Notification interface
+
+## Conventions
+
+- Naming: kebab-case with `.model.ts` suffix
+- Export: `export interface RoomData { ... }`
+- Documentation: JSDoc for each property

ui/src/app/pipes/README.md

@@ -0,0 +1,13 @@
+# Pipes
+
+Custom pipes for data transformation in templates.
+
+## Planned Pipes
+
+- **co2-level.pipe.ts** : Transform CO2 ppm → level (excellent/good/poor)
+- **relative-time.pipe.ts** : Transform timestamp → "5 minutes ago"
+
+## Conventions
+
+- Naming: kebab-case with `.pipe.ts` suffix
+- Standalone: true

ui/src/app/services/README.md

@@ -0,0 +1,16 @@
+# Services
+
+Angular services for business logic and API communication.
+
+## Planned Services
+
+- **analytics.service.ts** : Backend communication (REST API)
+- **websocket.service.ts** : Real-time communication (WebSocket)
+- **room-data.service.ts** : Room state management
+- **notification.service.ts** : Toast/snackbar display
+
+## Conventions
+
+- Naming: camelCase with `.service.ts` suffix
+- Injectable: `providedIn: 'root'`
+- RxJS: Use Observables for data streams

ui/src/app/utils/README.md

@@ -0,0 +1,15 @@
+# Utils
+
+Pure utility functions (helpers).
+
+## Planned Utils
+
+- **co2-helpers.ts** : CO2 level calculation functions
+- **color-helpers.ts** : Color generation functions
+- **date-helpers.ts** : Date manipulation functions
+
+## Conventions
+
+- Naming: kebab-case with `.ts` suffix
+- Export: Named exports of pure functions
+- Tests: Each util must have a .spec.ts file