Merge branch 'feat-spa-refactor-server-connection'

Author: Diogo Ferraz

README.md

@@ -1,27 +1,44 @@
 # TaskManagementClient
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.11.
+Angular SPA for a Jira-style task management system, integrated with an existing .NET 8 backend.
 
-## Development server
+## Highlights
 
-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.
+- OIDC authentication (Authorization Code + PKCE) against OpenIddict
+- Role-aware UX for `Administrator`, `ProjectManager`, and `User`
+- Real-time activity updates via SignalR
+- Project Kanban board with drag/drop and inline task editing
+- Dashboard, calendar, search/filters, admin tools, activity views, and settings
+- Preview mode support for frontend-only workflows
 
-## Code scaffolding
+## Tech Stack
 
-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`.
+- Angular 18 (standalone components)
+- PrimeNG UI
+- RxJS
+- SignalR JavaScript client
 
-## Build
+## Architecture
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+- `src/app/core`: auth, api clients, config, layout, realtime, preferences
+- `src/app/features`: page-level feature components by domain
+- `src/app/shared`: shared module and reusable UI pieces
 
-## Running unit tests
+The SPA is API-contract-first: typed DTOs and clients are aligned with backend endpoints.
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+## Sidebar Information Architecture
 
-## Running end-to-end tests
+- Overview: Dashboard
+- Workspaces: Projects, Project Details, Project Members, Kanban
+- Delivery: All Tasks, My Tasks, Create Task
+- Activity: My Activity, Activity Log, Calendar, Search & Filters
+- Account: Profile & Security, Settings
+- Administration: Admin Dashboard
+- About: Project Docs
 
-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.
+## Run
 
-## Further help
-
-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.
+- Install dependencies: `npm install`
+- Development server: `npm start`
+- Build: `npm run build`
+- Tests: `npm test`

angular.json

@@ -29,6 +29,11 @@
               {
                 "glob": "**/*",
                 "input": "public"
+              },
+              {
+                "glob": "**/*",
+                "input": "src/assets",
+                "output": "assets"
               }
             ],
             "styles": [
@@ -58,7 +63,13 @@
             "development": {
               "optimization": false,
               "extractLicenses": false,
-              "sourceMap": true
+              "sourceMap": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.development.ts"
+                }
+              ]
             }
           },
           "defaultConfiguration": "production"
@@ -91,6 +102,11 @@
               {
                 "glob": "**/*",
                 "input": "public"
+              },
+              {
+                "glob": "**/*",
+                "input": "src/assets",
+                "output": "assets"
               }
             ],
             "styles": [

docs/SPA_ARCHITECTURE_PLAN.md

@@ -0,0 +1,78 @@
+# SPA Architecture Plan (Angular + .NET 8 API)
+
+## Current architecture status
+- Angular standalone-first architecture is active (no feature NgModules used in runtime).
+- Clear boundaries are in place:
+  - `core`: auth, api clients/models, config, layout, realtime, preferences.
+  - `shared`: shared module + reusable cross-feature UI.
+  - `features`: page-level domain slices.
+- API contracts are typed and aligned under `core/api/models` and consumed through `core/api/clients`.
+- RxJS is used for async/server orchestration; Signals/computed are used for local/session/preferences state.
+
+## Implemented folder structure
+- `src/app/core/config`: app environment token + runtime config plumbing.
+- `src/app/core/auth`: OIDC PKCE auth service + guards (`auth`, `admin`, `managerOrAdmin`).
+- `src/app/core/http`: query param/url helpers and HTTP integration utilities.
+- `src/app/core/api`: typed DTOs + API clients (`projects`, `taskitems`, `activity`, `dashboard`, `users`).
+- `src/app/core/realtime`: SignalR hub integration for activity feed/log updates.
+- `src/app/core/preferences`: persisted app preferences service (density/date/notification/kanban defaults).
+- `src/app/features`: dashboard, projects, tasks, search, calendar, activity, profile, settings, docs, admin.
+
+## Routing and authorization (implemented)
+- Public routes:
+  - `/` (landing)
+  - `/login`
+  - `/callback`
+- Protected routes:
+  - dashboard/workspaces/delivery/activity/account/about.
+- Role-restricted routes:
+  - `/admin` -> `Administrator`.
+  - `/activity/log` -> `Administrator` or `ProjectManager`.
+
+## Sidebar information architecture (current)
+- Overview: Dashboard
+- Workspaces: All Projects, Project Details, Project Members, Create Project, Kanban
+- Delivery: All Tasks, My Tasks, Create Task
+- Activity: My Activity, Activity Log, Calendar, Search & Filters
+- Account: Profile & Security, Settings
+- Administration: Admin Dashboard
+- About: Project Docs
+
+## Core feature status
+- Auth foundation:
+  - OIDC Authorization Code + PKCE, callback handling, guarded routes.
+- Dashboard:
+  - Summary KPIs + activity history + SignalR live updates + preview fallback.
+- Kanban:
+  - Project picker, grouped status columns, drag/drop, create/edit dialogs, optimistic patch flows.
+- Search & filters:
+  - Cross-entity filtering flows aligned with current API clients.
+- Project tools:
+  - All Projects, Project Details, Project Members.
+- Task tools:
+  - All Tasks, My Tasks, Create Task.
+- Activity tools:
+  - My Activity (personal timeline) + Activity Log (admin/pm audit).
+- Account:
+  - Profile & Security, Settings (persisted app preferences).
+
+## Contract alignment rules (enforced)
+- Frontend uses backend enums/contracts from typed models (no ad-hoc enum invention).
+- Patch semantics preserve omitted vs `null` behavior.
+- Date values sent to API follow ISO conventions.
+- Problem Details responses are surfaced consistently at UI layer.
+
+## Quality and cleanup status
+- Legacy scaffold artifacts removed:
+  - unused dummy services (`ProjectService`, `TaskItemService`, `LoginService`) and associated specs.
+  - empty unused feature modules (`projects.module.ts`, `task-item.module.ts`).
+- UI consistency pass completed across major pages:
+  - header card + kpi cards + main content card patterns.
+  - PrimeNG built-in table filter strategy on table-centric pages.
+
+## Known backend/API gaps worth addressing
+- Activity endpoint filtering:
+  - Current contract used by SPA does not expose server-side actor/type/date filters.
+  - Activity Log currently applies these filters client-side after fetching feed data.
+- Authorization matrix check:
+  - `GET /api/projects/{id}` policy should be verified against intended `User` read capabilities.