# Project Tasks List

## Task 1: Backend API Development for Notes [BACKEND] — TEST: FAIL — COMMIT: SUCCESSFUL
Implement the RESTful API endpoints for creating, reading, updating, and deleting notes. This includes defining the note data model, setting up database interactions (using SQLAlchemy with Alembic for PostgreSQL), and implementing the necessary Flask routes and business logic to handle note persistence and retrieval. This task also covers ensuring data integrity and reliability as per Epic 2.

### 1.1 Define Note Entity
- [x] Define Note Entity (id, title, content, createdAt, updatedAt)

### 1.2 Create Note Repository
- [x] Create Note Repository

### 1.3 Implement Note Service
- [x] Implement Note Service (CRUD operations)

### 1.4 Create Note Controller
- [x] Create Note Controller (REST endpoints)

### 1.5 Add Necessary Imports and Configurations
- [x] Add necessary imports and configurations

### 1.6 Implement Error Handling and Validation
- [x] Implement error handling and validation

## Task 2: Frontend UI Development for Notes List & Detail [FRONTEND]
Develop the Angular components and services responsible for displaying a list of all existing notes and a dedicated page for viewing individual note details. This involves creating responsive UI elements using the Clarity Design System, fetching data from the backend API, and ensuring a clear and intuitive user experience for browsing notes.

### 2.1 Create Note Model/Interface
- [x] Create Note model/interface in Angular

### 2.2 Create Notes Module and Routing
- [x] Create `notes/notes.module.ts`
- [x] Create `notes/notes-routing.module.ts`
- [x] Add lazy loading route for `NotesModule` in `app-routing.module.ts`

### 2.3 Create Note Service
- [x] Create `services/note.service.ts`
- [x] Implement CRUD methods in `NoteService` to interact with backend API

### 2.4 Create NotesListComponent
- [ ] Generate `notes/note-list/note-list.component.ts`, `.html`, `.scss`
- [ ] Implement HTML template for notes list (Clarity Data Grid)
- [ ] Implement component logic to fetch and display notes using `NoteService`

### 2.5 Implement NoteDetailComponent
- [ ] Generate `notes/note-detail/note-detail.component.ts`, `.html`, `.scss`
- [ ] Implement HTML template for note detail
- [ ] Implement component logic to fetch and display a single note using `NoteService`

### 2.6 Add navigation links to the sidebar
- [ ] Add navigation link for notes list in `app.component.html`

## Task 3: Frontend UI Development for Note Creation & Editing [FRONTEND]
Develop the Angular components and forms that allow users to create new notes and modify existing ones. This includes designing user-friendly input forms for note titles and content, implementing client-side validation, and integrating these forms with the backend API for saving and updating note data.

### 3.1 Create NoteFormComponent
- [ ] Generate `notes/note-form/note-form.component.ts`, `.html`, `.scss`
- [ ] Implement HTML template for note form (Clarity form controls)
- [ ] Implement component logic for creating new notes using `NoteService`
- [ ] Implement component logic for editing existing notes using `NoteService`
- [ ] Implement client-side validation for note title and content

### 3.2 Integrate NoteFormComponent
- [ ] Integrate `NoteFormComponent` for creating new notes (e.g., via a button in `NotesListComponent`)
- [ ] Integrate `NoteFormComponent` for editing existing notes (e.g., via a button in `NoteDetailComponent`)

## Task 4: Frontend UI Development for Note Deletion [FRONTEND]
Implement the user interface and logic for deleting notes. This task involves creating a clear deletion mechanism, including confirmation dialogs to prevent accidental data loss, and integrating with the backend API to permanently remove selected notes.

### 4.1 Implement Note Deletion Logic
- [ ] Add delete method to `NoteService`
- [ ] Implement deletion functionality in `NotesListComponent`
- [ ] Implement deletion functionality in `NoteDetailComponent`

### 4.2 Implement Confirmation Dialog
- [ ] Use Clarity Modal or Alert for deletion confirmation

## Task 5: Full-Stack Integration & End-to-End Testing [FULL-STACK]
Integrate all developed frontend components with the backend API for note management. Conduct comprehensive end-to-end testing to verify that all CRUD operations (create, read, update, delete) function correctly across the entire application stack, from UI interaction to database persistence. This task also includes addressing any integration issues and ensuring overall application reliability and performance.

### 5.1 Verify Backend API Endpoints
- [ ] Manually test all backend API endpoints (GET, POST, PUT, DELETE) using Postman/Insomnia

### 5.2 Integrate Frontend with Backend
- [ ] Ensure `NoteService` correctly calls backend API
- [ ] Verify data flow from frontend to backend and vice-versa

### 5.3 Conduct End-to-End Testing
- [ ] Perform manual end-to-end tests for all CRUD operations via the UI
- [ ] Verify data persistence in the database

### 5.4 Address Integration Issues
- [ ] Debug and resolve any frontend-backend integration issues

## Task X: Application Smoke Test
- [ ] Check project file structure using `tree -L 2` command to identify any missing files
- [ ] Create any missing files found during structure check (e.g., `simple_notes_taking_20251009_044730-simple_notes_taking_20251009_044730-f-f/authsec_angular/frontend/angular-clarity-master/src/reportWebVitals.js`)
- [ ] Install missing dependencies for backend (e.g., `mvn clean install`)
- [ ] Install missing dependencies for frontend (e.g., `npm install`)
- [ ] Start the backend server.
- [ ] Start the frontend development server.
- [ ] Verify that both processes start without crashing. If an error occurs, analyze the logs, create a new subtask to fix the bug, and re-run the smoke test until it passes.

## Current Task Status
**Currently Working On:** Task 2.4 - Create NotesListComponent
**Next Task:** Task 2.5 - Implement NoteDetailComponent
**Completed Tasks:** Task 1 - Backend API Development for Notes [BACKEND]

## Task Completion Guidelines
- Use `- [x]` to mark completed subtasks (to be added by Developer)
- Use `- [ ]` for pending subtasks (to be added by Developer)
- Update "Currently Working On" when starting a new subtask (to be managed by Developer)
- Update "Completed Tasks" when finishing a task (to be managed by Developer)
- Always maintain the hierarchical structure (Task → Subtask → Subtask items)
- **IMPORTANT: Do NOT add subtasks here. Only create main tasks. Subtasks will be added by the Developer agent.**