mo/mitlist
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove deprecated task management files and enhance group management functionality

Browse Source 
- Deleted obsolete task management files: `tasks.mdc` and `notes.md`.
- Introduced a new `groupStore` for managing group data, including fetching user groups and handling loading states.
- Updated `MainLayout.vue` to navigate to groups with improved loading checks.
- Enhanced `GroupsPage.vue` to support a tabbed interface for creating and joining groups, improving user experience.
- Refined `GroupDetailPage.vue` to display recent expenses with a more interactive layout and added functionality for settling shares.
This commit is contained in:
mohamad 2025-06-07 18:05:08 +02:00
parent cef359238b
commit ddaa20af3c
9 changed files with 818 additions and 1300 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

260
.cursor/rules/tasks.mdc
View File

@ -1,260 +0,0 @@
---
description:
globs:
alwaysApply: false
---
**CRITICAL PRE-PHASE: STABILIZE THE CORE (No Excuses. Do this FIRST.)**
This isn't about new features. This is about making what you *have* not be a liability.
can you start going through the tasks in tasks ruke, and write in /notes.md any notes for left todos etc..
dont actually run tests, just review tests and whatnot. dont actually run them!!!!!!
* **Task 0.1: Fix Backend Financial Logic.**
* **File(s):** `be/app/api/v1/endpoints/costs.py`, `be/app/crud/expense.py`, `be/app/crud/settlement_activity.py`.
* **Objective:** Correct the balance calculation logic. Specifically, address the issues noted in your `test_costs.py` where `SettlementActivity` affects `total_settlements_paid` in a way that leads to incorrect net balances and non-zero sums for group balances.
* **Action for LLM:** "Refactor the group balance calculation within `costs.py` (and its dependencies in `crud/expense.py`, `crud/settlement_activity.py`) to ensure that when a `SettlementActivity` records a payment for an `ExpenseSplit`, the `net_balance` of the payer accurately reflects this (e.g., their debt decreases). The sum of all user `net_balance` values within a group's balance summary MUST equal zero after all expenses and settlements (including activities) are accounted for. Update relevant tests in `test_costs.py` to assert correct balances."
* **Verification:** The test `test_group_balance_summary_with_settlement_activity` in `be/tests/api/v1/test_costs.py` passes with logically sound assertions for all user balances, and the sum of net balances is zero.
* **Task 0.2: Implement Frontend Expense Split Settlement.**
* **File(s):** `fe/src/stores/listDetailStore.ts`, `fe/src/pages/ListDetailPage.vue` (for UI interaction if any), `fe/src/services/api.ts` (if `apiClient.settleExpenseSplit` needs adjustment).
* **Objective:** Connect the frontend "Settle Share" functionality to the backend API.
* **Action for LLM:** "In `fe/src/stores/listDetailStore.ts`, modify the `settleExpenseSplit` action. Remove the placeholder/simulation. Implement a call to the backend API endpoint `/api/v1/financials/expense_splits/{expense_split_id}/settle` using the `apiClient` (ensure `apiClient` has or is updated to have a method like `settleExpenseSplit` or a generic `post` can be used with the correct URL construction from `API_ENDPOINTS`). The payload should be `activity_data`. On successful API response, `fetchListWithExpenses` should be called to update the UI. Handle API errors by setting `this.error` and returning `false`."
* **Verification:** User can click a "Settle" button in the UI for an expense split, the action calls the correct backend API, the `ExpenseSplit` status and `Expense` `overall_settlement_status` are updated in the database, and the UI reflects these changes after the list is refetched. Create a basic E2E test for this flow.
* **Task 0.3: Review & Test Core Auth Flows.**
* **File(s):** `be/app/auth.py`, `be/app/api/auth/oauth.py`, relevant `fastapi-users` configurations, `fe/src/stores/auth.ts`, `fe/src/pages/LoginPage.vue`, `SignupPage.vue`, `AuthCallbackPage.vue`.
* **Objective:** Confirm standard email/password and Google/Apple OAuth flows are functional and robust.
* **Action for LLM:** "Review the configuration and implementation of `fastapi-users` for email/password authentication, and the OAuth flows for Google and Apple. Ensure:
1. Signup creates a user.
2. Login returns tokens.
3. `AuthCallbackPage.vue` correctly handles tokens from OAuth and calls `authStore.setTokens`.
4. `authStore.fetchCurrentUser` works after login.
5. Logout clears session/tokens.
Write/verify Playwright E2E tests for each of these flows (email/password signup, email/password login, Google login, Apple login, logout)."
* **Verification:** All authentication E2E tests pass. Users can reliably sign up, log in (via all methods), and log out.
---
**PHASE 1: FULL-FEATURED LIST & ITEM MANAGEMENT (Your V1 Baseline)**
* **Task 1.1: Backend - Robust List CRUD & Permissions.**
* **File(s):** `be/app/api/v1/endpoints/lists.py`, `be/app/crud/list.py`, `be/app/models.py` (List model).
* **Objective:** Implement all list CRUD operations with correct permissions and optimistic locking.
* **Action for LLM (Iterate for each endpoint - Create, Get All, Get ID, Update, Delete):** "For the `[CREATE/GET/UPDATE/DELETE]` list endpoint in `lists.py` and its corresponding CRUD function in `crud_list.py`:
1. Ensure user permissions are checked (creator for personal lists, group member for group lists; `require_creator` for delete/sensitive updates).
2. For `UPDATE` and `DELETE`, implement optimistic locking using the `version` field (HTTP 409 on mismatch).
3. For `CREATE`, handle potential `DatabaseIntegrityError` for unique list names within a group/user's personal lists by returning a 409 with the existing list's details (as noted in your endpoint).
4. Ensure all relationships (creator, group, items) are correctly handled and loaded/returned as per `ListPublic` and `ListDetail` schemas.
5. Write comprehensive unit tests in `be/tests/crud/test_list.py` and API tests for these scenarios."
* **Verification:** All API endpoints for lists function as documented in `mitlist_doc.md` (V1 scope), pass all tests, and handle permissions/versioning correctly.
* **Task 1.2: Frontend - Full List UI/UX.**
* **File(s):** `fe/src/pages/ListsPage.vue`, `fe/src/pages/ListDetailPage.vue`, `fe/src/components/CreateListModal.vue`.
* **Objective:** Implement all UI for list management.
* **Action for LLM (Iterate per feature):** "Implement the UI in Vue components for:
1. Displaying all accessible lists (`ListsPage.vue`).
2. Creating new lists (personal or group-associated) using `CreateListModal.vue`.
3. Viewing list details and items (`ListDetailPage.vue`).
4. Updating list name/description (handle `version` for optimistic lock, show conflict notification).
5. Deleting lists (with confirmation, handle `version` for optimistic lock)."
* **Verification:** All list management features are usable from the frontend. E2E tests (from `fe/e2e/lists.spec.ts`, unskip and fix) pass.
* **Task 1.3: Backend - Robust Item CRUD & Permissions.**
* **File(s):** `be/app/api/v1/endpoints/items.py`, `be/app/crud/item.py`, `be/app/models.py` (Item model).
* **Objective:** Implement all item CRUD operations with permissions and optimistic locking.
* **Action for LLM (Iterate for each endpoint):** "Similar to Task 1.1, implement/review CRUD operations for items within a list. Ensure:
1. Permissions are based on access to the parent list.
2. `UPDATE` and `DELETE` use optimistic locking with `version`.
3. Updating `is_complete` correctly sets/unsets `completed_by_id`.
4. Item price can be added/updated.
5. Write comprehensive unit and API tests."
* **Verification:** All item CRUD endpoints function correctly, pass tests, handle permissions/versioning.
* **Task 1.4: Frontend - Full Item UI/UX in List Detail.**
* **File(s):** `fe/src/pages/ListDetailPage.vue`.
* **Objective:** Implement all UI for item management within a list.
* **Action for LLM:** "In `ListDetailPage.vue`, implement UI for:
1. Adding new items (name, quantity).
2. Displaying items with their details.
3. Marking items as complete/incomplete (checkbox) and updating the backend (handle `version`).
4. Adding/editing price for completed items (handle `version`).
5. Editing item name/quantity (handle `version`).
6. Deleting items (with confirmation, handle `version`).
Handle loading states and errors for each action."
* **Verification:** Item management is fully functional in the UI. E2E tests (from `fe/e2e/lists.spec.ts`, unskip and fix for items) pass.
* **Task 1.5: Backend - OCR Integration (Gemini).**
* **File(s):** `be/app/core/gemini.py`, `be/app/api/v1/endpoints/ocr.py`.
* **Objective:** Reliable item extraction from images.
* **Action for LLM:** "Refine and test `gemini.py` and the `/ocr/extract-items` endpoint.
1. Ensure robust error handling for API key issues, quota limits (`OCRQuotaExceededError`), service unavailability (`OCRServiceUnavailableError`), and general processing errors (`OCRProcessingError`). Return appropriate HTTP status codes.
2. Thoroughly test the `OCR_ITEM_EXTRACTION_PROMPT` with various real-world receipt/list images to optimize accuracy. Handle cases where Gemini returns no usable text or indicates the image is not a list.
3. Ensure `ALLOWED_IMAGE_TYPES` and `MAX_FILE_SIZE_MB` are enforced."
* **Verification:** OCR endpoint is stable, handles errors gracefully, and provides reasonably accurate item extraction.
* **Task 1.6: Frontend - OCR UI Flow.**
* **File(s):** `fe/src/pages/ListDetailPage.vue` (or a dedicated OCR component).
* **Objective:** Smooth user experience for adding items via OCR.
* **Action for LLM:** "Implement the OCR flow in the Vue frontend:
1. UI for image capture/upload (using `input capture` or `getUserMedia`).
2. File validation (type, size) on the client side before upload.
3. API call to the backend OCR endpoint with loading indicators.
4. Display extracted items in an editable format (e.g., list of text inputs).
5. Allow users to add, edit, or remove items from this extracted list.
6. Button to add the confirmed items to the current shopping list (batch API calls if necessary)."
* **Verification:** Users can successfully use the OCR feature from image capture to adding items to a list.
---
**PHASE 2: FULL-FEATURED COST SPLITTING & TRACEABILITY (Your V1 Differentiator)**
This phase assumes Phase 0 (financial fixes) is COMPLETE.
* **Task 2.1: Backend - Expense Creation with All Split Types.**
* **File(s):** `be/app/crud/expense.py` (specifically `_generate_expense_splits` and its helpers like `_create_equal_splits`, `_create_exact_amount_splits`, etc.), `be/app/api/v1/endpoints/financials.py` (`create_new_expense`).
* **Objective:** Support creation of expenses with all V1 split types (Equal, Exact Amounts, Percentage, Shares, Item-Based).
* **Action for LLM:** "For each `SplitTypeEnum` defined in your V1 scope:
1. In `crud_expense.py`, ensure the corresponding helper function (`_create_exact_amount_splits`, `_create_percentage_splits`, `_create_shares_splits`, `_create_item_based_splits`) correctly calculates and creates `ExpenseSplitModel` instances based on the input `expense_in.splits_in` (for exact, percentage, shares) or item data (for item-based).
2. Validate input: sum of exact amounts/percentages/shares must match total expense. Item-based splits should correctly sum item prices.
3. Ensure `overall_settlement_status` on `ExpenseModel` and `status` on `ExpenseSplitModel` are initialized correctly (`unpaid`).
4. Write unit tests in `be/tests/crud/test_expense.py` for each split type, covering valid and invalid scenarios."
* **Verification:** Expenses can be created with all V1 split types, and the resulting splits are mathematically correct and persisted.
* **Task 2.2: Frontend - Expense Creation UI for All Split Types.**
* **File(s):** `fe/src/components/CreateExpenseForm.vue` (or similar).
* **Objective:** UI allows users to create expenses with any V1 split type.
* **Action for LLM:** "Enhance `CreateExpenseForm.vue`:
1. Add UI elements (dynamic forms) to input split details when `split_type` is Exact Amounts, Percentage, or Shares (e.g., inputs for each user's amount/percentage/share).
2. For Item-Based splits, the UI might involve selecting items from the list or this might be triggered automatically post-OCR/price entry – clarify flow.
3. Ensure the form correctly constructs the `ExpenseCreate` payload, including `splits_in` where appropriate.
4. Validate inputs on the frontend (e.g., sum of percentages is 100)."
* **Verification:** Users can create expenses with all supported split types through the UI.
* **Task 2.3: Backend & Frontend - Viewing Expenses and Settlement Status.**
* **File(s):** `be/app/api/v1/endpoints/financials.py` (GET expenses), `be/app/schemas/expense.py` (ensure `ExpensePublic`, `ExpenseSplitPublic` include status fields), `fe/src/pages/ListDetailPage.vue` (or wherever expenses are displayed).
* **Objective:** Users can clearly see expenses, their splits, and the settlement status of each.
* **Action for LLM:**
1. "BE: Ensure `ExpensePublic` and `ExpenseSplitPublic` schemas include `overall_settlement_status`, `status`, `paid_at`, and `settlement_activities`. Ensure GET expense endpoints populate these fields."
2. "FE: In `ListDetailPage.vue`, display expenses associated with the list. For each expense, show its splits, including who owes what, the current `status` (Unpaid, Partially Paid, Paid), and when it was paid (`paid_at`). Display `overall_settlement_status` for the expense."
* **Verification:** UI accurately displays detailed expense and split information, including settlement statuses.
* **Task 2.4: Backend & Frontend - Recording Settlement Activities.**
* **File(s):** `be/app/api/v1/endpoints/financials.py` (POST `/expense_splits/{expense_split_id}/settle`), `be/app/crud/settlement_activity.py`, `be/app/models.py` (`SettlementActivity`), `fe/src/stores/listDetailStore.ts`, `fe/src/pages/ListDetailPage.vue`.
* **Objective:** Users can mark their `ExpenseShare` (represented by `ExpenseSplit`) as paid, creating a traceable `SettlementActivity`.
* **Action for LLM:**
1. "BE: Implement `crud_settlement_activity.create_settlement_activity`. When a `SettlementActivity` is created for an `ExpenseSplit`:
* Update the `ExpenseSplit.status` (to `partially_paid` or `paid`) based on `amount_paid` vs `owed_amount`. If fully paid, set `ExpenseSplit.paid_at`.
* Update the parent `Expense.overall_settlement_status` based on the status of all its splits.
2. "BE: Ensure the `/financials/expense_splits/{expense_split_id}/settle` endpoint correctly calls the CRUD function and handles permissions (user can settle their own split, or group owner can settle for others)."
3. "FE: In `ListDetailPage.vue`, provide a button/action for a user to "Settle My Share" for an `ExpenseSplit` they owe. This should trigger the `settleExpenseSplit` action in `listDetailStore.ts` (which now calls the real API - Task 0.2)."
* **Verification:** Users can settle their expense shares. The backend correctly updates statuses. UI reflects these changes. All settlement activities are logged in the `settlement_activities` table.
---
**PHASE 3: FULL-FEATURED CHORE MANAGEMENT (Your V1 Scope)**
* **Task 3.1: Backend - Chore CRUD (Personal & Group) with Recurrence.**
* **File(s):** `be/app/api/v1/endpoints/chores.py`, `be/app/crud/chore.py`, `be/app/core/chore_utils.py`.
* **Objective:** Full CRUD for personal and group chores, including all recurrence logic.
* **Action for LLM:** "Implement/Refine `create_chore`, `get_chore_by_id`, `get_personal_chores`, `get_chores_by_group_id`, `update_chore`, `delete_chore` in `crud_chore.py` and corresponding endpoints in `chores.py`.
1. For `create_chore` and `update_chore`: If `frequency` is `custom`, `custom_interval_days` must be provided. Validate chore `type` (`personal` vs `group`) and `group_id` consistency.
2. Implement `calculate_next_due_date` in `chore_utils.py` to accurately calculate the next due date based on `frequency`, `custom_interval_days`, and `last_completed_at`. Handle edge cases for monthly recurrence (e.g., due on 31st).
3. Ensure appropriate permissions are checked (e.g., user must be member of group to create/view group chores)."
* **Verification:** All chore CRUD operations work for both personal and group chores. Recurrence settings are handled correctly. Permissions are enforced. Unit and API tests cover these.
* **Task 3.2: Frontend - Chore Management UI.**
* **File(s):** `fe/src/pages/ChoresPage.vue`, `fe/src/pages/PersonalChoresPage.vue`.
* **Objective:** UI for users to manage personal and group chores.
* **Action for LLM:** "Implement UI in `ChoresPage.vue` (for all chores, filterable by group) and `PersonalChoresPage.vue`:
1. Display lists of chores, showing name, description, frequency, next due date.
2. Modals/forms for creating and editing chores (personal and group, including all recurrence options).
3. Functionality to delete chores (with confirmation)."
* **Verification:** Users can manage personal and group chores via the UI. E2E tests for chore CRUD pass.
* **Task 3.3: Backend & Frontend - Chore Assignments & Completion.**
* **File(s):** `be/app/models.py` (`ChoreAssignment`), `be/app/crud/chore.py` (new functions for assignments), `be/app/api/v1/endpoints/chores.py` (new endpoints for assignments), `fe/src/pages/ChoresPage.vue` (or a "My Chores" page).
* **Objective:** Chores can be assigned, and assignees can mark them complete, triggering recurrence updates.
* **Action for LLM:**
1. "BE: Define `ChoreAssignment` model. Create CRUD functions and API endpoints for:
* Manually assigning a chore instance (from a recurring `Chore`) to a user for a specific `due_date`.
* Allowing an assigned user to mark their `ChoreAssignment` as complete. This should set `completed_at`.
* When a recurring chore's assignment is completed, update the parent `Chore.last_completed_at` and use `calculate_next_due_date` to set its new `Chore.next_due_date`.
2. "FE: Implement UI for:
* Group admins/owners to assign chore instances to members.
* A "My Chores" view where users see their pending `ChoreAssignments`.
* Users to mark their assigned chores as complete."
* **Verification:** Chore assignment and completion workflow is functional. Recurrence updates correctly.
---
**PHASE 4: FULL PWA OFFLINE & BACKGROUND SYNC (Your V1 Scope)**
* **Task 4.1: Frontend - Implement Offline Action Queuing for All V1 Features.**
* **File(s):** `fe/src/stores/offline.ts`.
* **Objective:** All mutable actions from V1 (list/item/chore CRUD, expense/settlement creation, chore completion) are queued when offline.
* **Action for LLM:** "Extend `OfflineAction` type and `processAction` in `offline.ts` to handle all mutable operations for lists, items, expenses, settlements, and chores (CRUD, marking complete, etc.) as defined in your V1 feature set. Ensure each action type has a corresponding case in `processAction` that makes the correct API call using `fetch` (or a thin wrapper around `apiClient` if `apiClient` is made compatible with background sync context)."
* **Verification:** When offline, performing any V1 action adds it to the `pendingActions` queue in `localStorage`.
* **Task 4.2: Frontend - Robust Background Sync & Retry.**
* **File(s):** `fe/src/sw.ts`, `fe/src/stores/offline.ts`.
* **Objective:** Queued actions are reliably synced via the service worker's Background Sync API.
* **Action for LLM:** "Ensure the `BackgroundSyncPlugin` in `sw.ts` is correctly configured for the `offline-actions-queue`. The `sync` event handler in the service worker must correctly iterate through actions from `offlineStore.pendingActions` (potentially via `IDBKeyval` or directly if store is accessible in SW) and attempt to replay them using `fetch`. Ensure `maxRetentionTime` is set. Test retry behavior for failed syncs."
* **Verification:** Offline actions are processed when online. Failed actions are retried by background sync.
* **Task 4.3: Frontend - Implement Conflict Resolution UI & Logic.**
* **File(s):** `fe/src/components/ConflictResolutionDialog.vue`, `fe/src/stores/offline.ts`.
* **Objective:** Users can resolve data conflicts arising from offline sync.
* **Action for LLM:**
1. "In `offline.ts`, when `processAction` receives a 409 conflict from the backend:
* Extract local data (from the `action.payload`) and server data (from the 409 response body).
* Populate `currentConflict` with this data and set `showConflictDialog = true`.
* Halt further queue processing until this conflict is resolved.
2. "In `ConflictResolutionDialog.vue`, display the local and server versions of the conflicting data clearly. Provide options: 'Keep Local Version', 'Keep Server Version', and 'Merge Changes' (if applicable and simple merge logic can be defined, e.g., field-by-field choice).
3. "Implement `handleConflictResolution` in `offline.ts`. Based on user's choice:
* 'Keep Local': Re-submit the local action, potentially with the server's latest `version` number to overcome the 409.
* 'Keep Server': Discard the local action.
* 'Merge': Construct merged data and PUT it to the server (with server's `version`).
* Remove the original conflicting action from `pendingActions` on successful resolution. Resume queue processing."
* **Verification:** Conflicts are detected. Dialog appears. User can choose a resolution strategy. The chosen strategy is applied, and the queue continues.
---
**PHASE 5: FINAL TESTING, POLISHING, DEPLOYMENT (Your V1 Launch)**
* **Task 5.1: Comprehensive E2E Testing of ALL V1 Features.**
* **Objective:** All user flows, including offline scenarios and conflict resolution, are covered by E2E tests.
* **Action for LLM:** "Write new Playwright E2E tests and update existing ones (`fe/e2e/`) to cover every feature in your `mitlist_doc.md` V1 scope. This includes:
* All CRUD for lists, items, group chores, personal chores.
* All expense creation types, viewing expenses/splits, settling shares.
* OCR item addition.
* Offline scenarios: create/update/delete an item offline, go online, verify sync.
* Simulate a conflict and test the conflict resolution dialog flow."
* **Verification:** All E2E tests pass reliably.
* **Task 5.2: Final UI/UX Polish & Accessibility (Valerie UI).**
* **Action for LLM:** "Review all UI components and pages. Ensure consistent use of Valerie UI. Check for usability issues, clear error messaging, and intuitive workflows. Perform an accessibility check (e.g., using browser dev tools, axe-core plugin) and address any critical violations (keyboard navigation, ARIA attributes, color contrast)."
* **Verification:** App feels polished, is easy to use, and meets basic accessibility standards.
* **Task 5.3: CI/CD Pipeline Enhancement.**
* **File(s):** `.gitea/workflows/ci.yml`.
* **Action for LLM:** "Update the Gitea CI workflow:
1. Add steps to run all backend unit and integration tests.
2. Add steps to build the frontend.
3. Add steps to run all Playwright E2E tests against the built frontend (potentially using a preview server).
4. Ensure the pipeline fails if any tests fail.
5. (Optional Advanced) Add steps for automated deployment to staging/production on successful builds of specific branches."
* **Verification:** CI pipeline automatically tests backend and frontend, including E2E, on commits/PRs.
* **Task 5.4: DevOps - Dockerization & Deployment Prep.**
* **File(s):** `be/Dockerfile`, `fe/Dockerfile`, `docker-compose.yml`.
* **Action for LLM:** "Review Dockerfiles for backend and frontend for production readiness (e.g., multi-stage builds, minimal image size, correct CMD). Ensure `docker-compose.yml` correctly sets up services for local development and can serve as a basis for production deployment environment variables. Document deployment steps for chosen cloud platforms (as per your doc)."
* **Verification:** Application can be built and run reliably using Docker locally. Deployment strategy is clear.
* **Task 5.5: Error Tracking & Logging Review.**
* **File(s):** `be/app/main.py` (Sentry init), `fe/src/main.ts` (Sentry init).
* **Action for LLM:** "Verify Sentry is correctly initialized in both frontend and backend. Test that errors are captured in Sentry. Review backend logging (`LOG_LEVEL`, `LOG_FORMAT` in `be/app/config.py`) to ensure it provides useful information for debugging in production."
* **Verification:** Errors from both frontend and backend are reported to Sentry. Logs are informative.

826
docs/notes.md
View File

@ -1,826 +0,0 @@
# MitList Task Progress Notes
## CRITICAL PRE-PHASE: STABILIZE THE CORE
### ✅ Task 0.1: Fix Backend Financial Logic
**Status**: ✅ REVIEWED - LOGIC IS CORRECT
**Files**: `be/app/api/v1/endpoints/costs.py`, `be/app/crud/expense.py`, `be/app/crud/settlement_activity.py`
**FINDINGS**:
- Reviewed the balance calculation logic in `costs.py` lines 364-400+
- The current implementation correctly handles settlement activities by:
- Calculating `adjusted_total_share_of_expenses = initial_total_share_of_expenses - total_amount_paid_via_settlement_activities`
- Using this adjusted value in the net balance formula: `(total_paid_for_expenses + total_generic_settlements_received) - (adjusted_total_share_of_expenses + total_generic_settlements_paid)`
- The test `test_group_balance_summary_with_settlement_activity` expects:
- User1: Net balance = "33.34" (creditor)
- User2: Net balance = "0.00" (settled via activity)
- User3: Net balance = "-33.34" (debtor)
- Sum of net balances = 0.00 ✅
- The `GroupBalanceSummary` schema includes all required fields: `overall_total_expenses`, `overall_total_settlements`
- **CONCLUSION**: The financial logic is working correctly, test should pass
**TODO**:
- [x] Examine current balance calculation logic in costs.py ✅
- [x] Review test_costs.py to understand failing scenarios ✅
- [x] Verify GroupBalanceSummary schema has required fields ✅
- [ ] Run the specific test to confirm it passes (can't run tests per instructions)
### ✅ Task 0.2: Implement Frontend Expense Split Settlement
**Status**: ✅ ALREADY IMPLEMENTED
**Files**: `fe/src/stores/listDetailStore.ts`, `fe/src/pages/ListDetailPage.vue`, `fe/src/services/api.ts`
**FINDINGS**:
- The `settleExpenseSplit` action in `listDetailStore.ts` is fully implemented (lines 44-74)
- It calls `apiClient.settleExpenseSplit()` with correct parameters
- The `apiClient.settleExpenseSplit` method exists in `api.ts` (lines 96-105)
- Backend endpoint `/api/v1/expense_splits/{expense_split_id}/settle` exists in `financials.py` (lines 277+)
- The endpoint URL construction is correct - financials router mounted without prefix
- Error handling and UI updates are implemented (fetchListWithExpenses after settlement)
- **CONCLUSION**: Frontend settlement functionality is already complete
**TODO**:
- [x] Review current settleExpenseSplit implementation ✅
- [x] Verify API client method exists ✅
- [x] Confirm backend endpoint exists ✅
- [x] Verify error handling and UI updates ✅
- [ ] Create basic E2E test for settlement flow
### ✅ Task 0.3: Review & Test Core Auth Flows
**Status**: ✅ REVIEWED - APPEARS FUNCTIONAL
**Files**: `be/app/auth.py`, `be/app/api/auth/oauth.py`, `fe/src/stores/auth.ts`, auth pages
**FINDINGS**:
- **Frontend Auth Store** (`fe/src/stores/auth.ts`):
- `login()` method implemented for email/password (lines 58-70)
- `signup()` method implemented (lines 72-75)
- `setTokens()` handles both access and refresh tokens (lines 24-32)
- `fetchCurrentUser()` implemented (lines 46-56)
- `logout()` clears tokens and redirects (lines 77-80)
- **OAuth Callback** (`fe/src/pages/AuthCallbackPage.vue`):
- Handles `access_token`, `refresh_token`, and legacy `token` query params
- Calls `authStore.setTokens()` correctly
- Has error handling and notifications
- **API Config** (`fe/src/config/api-config.ts`):
- Auth endpoints defined: LOGIN, SIGNUP, LOGOUT, etc.
- **E2E Tests** exist for auth flows (`fe/e2e/auth.spec.ts`)
- **CONCLUSION**: Auth implementation appears complete and functional
**TODO**:
- [x] Review auth store implementation ✅
- [x] Review OAuth callback page ✅
- [x] Check existing E2E tests ✅
- [ ] Review backend fastapi-users configuration
- [ ] Test email/password signup/login flows
- [ ] Test Google/Apple OAuth flows
- [ ] Verify all E2E auth tests pass
## PHASE 1: FULL-FEATURED LIST & ITEM MANAGEMENT
### ✅ Task 1.1: Backend - Robust List CRUD & Permissions
**Status**: ✅ ALREADY IMPLEMENTED
**Files**: `be/app/api/v1/endpoints/lists.py`, `be/app/crud/list.py`, `be/app/models.py` (List model)
**FINDINGS**:
- **All CRUD Operations Implemented**:
- ✅ **CREATE**: `POST /lists` with group membership validation
- ✅ **READ All**: `GET /lists` - returns user's accessible lists (personal + group)
- ✅ **READ One**: `GET /lists/{id}` - with permission checking
- ✅ **UPDATE**: `PUT /lists/{id}` - with optimistic locking (`version` field)
- ✅ **DELETE**: `DELETE /lists/{id}` - with permission checking and optimistic locking
- ✅ **STATUS**: `GET /lists/{id}/status` - for polling/refresh checks
- **Robust Permission System**:
- `check_list_permission()` validates user access (creator OR group member)
- `require_creator=True` option for sensitive operations (delete)
- Group membership validation for group list creation
- **Optimistic Locking**:
- Uses `version` field for conflict detection
- Returns HTTP 409 on version mismatch
- Implemented for both UPDATE and DELETE operations
- **Error Handling**:
- Proper HTTP status codes (409 for conflicts, 404 for not found, 403 for permissions)
- Database integrity error handling (unique constraint violations)
- Comprehensive exception hierarchy
- **Database Design**:
- List model has all required fields: `id`, `name`, `description`, `created_by_id`, `group_id`, `is_complete`, `version`, timestamps
- Proper relationships with User, Group, and Item models
- Cascade delete for items when list is deleted
- **Testing Coverage**:
- ✅ CRUD tests exist in `be/tests/crud/test_list.py` (351 lines)
- ✅ E2E tests exist in `fe/e2e/lists.spec.ts` (232 lines)
- Tests cover success cases, error cases, permissions, and conflicts
**CONCLUSION**: Backend List CRUD is fully implemented with robust permissions and optimistic locking. No work needed.
**TODO**:
- [x] Review all CRUD endpoints ✅
- [x] Check permission system implementation ✅
- [x] Verify optimistic locking with version field ✅
- [x] Review error handling and status codes ✅
- [x] Check test coverage ✅
- [ ] Verify all tests pass (can't run tests per instructions)
### ✅ Task 1.2: Frontend - Full List UI/UX
**Status**: ✅ FULLY IMPLEMENTED
**Files**: `fe/src/pages/ListsPage.vue`, `fe/src/pages/ListDetailPage.vue`, `fe/src/components/CreateListModal.vue`
**FINDINGS**:
- **Complete List Management UI**:
- ✅ **ListsPage.vue** (473 lines):
- Displays personal and group lists in a modern masonry grid layout
- Supports both standalone and embedded modes (via groupId prop)
- Shows list previews with item checkboxes inline
- Quick add items directly from list cards
- Cache management for performance
- Empty states with create prompts
- ✅ **ListDetailPage.vue** (1580 lines):
- Full list detail view with all items
- Add/edit/delete items with confirmation dialogs
- Price input for completed items
- OCR integration for bulk item addition
- Expense management integration
- Settlement activities tracking
- Online/offline status awareness
- ✅ **CreateListModal.vue** (142 lines):
- Form for creating new lists
- Group association selection
- Form validation and error handling
- Success notifications
- **Advanced Features**:
- ✅ **Optimistic Updates**: UI updates immediately, reverts on error
- ✅ **Version Control**: Handles optimistic locking with version numbers
- ✅ **Caching**: localStorage caching with 5-minute expiration
- ✅ **Responsive Design**: Modern Neo-style UI with Valerie design system
- ✅ **Accessibility**: Proper ARIA labels, keyboard navigation, semantic HTML
- ✅ **Error Handling**: Comprehensive error states and retry mechanisms
- **Routing & Navigation**:
- ✅ Routes configured: `/lists`, `/lists/:id`, `/groups/:groupId/lists`
- ✅ Props-based routing for reusable components
- ✅ KeepAlive for performance optimization
- **Integration**:
- ✅ Auth store integration for user-specific data
- ✅ Notification store for user feedback
- ✅ API client with proper error handling
- ✅ Offline store integration (conflict resolution)
**CONCLUSION**: Frontend List UI/UX is completely implemented with advanced features like caching, offline support, and modern design. No work needed.
**TODO**:
- [x] Review list display and navigation ✅
- [x] Check list creation/editing forms ✅
- [x] Verify update/delete functionality ✅
- [x] Check error handling and loading states ✅
- [x] Review responsive design and UX ✅
- [ ] Verify E2E tests pass for list management
### ✅ Task 1.3: Backend - Robust Item CRUD & Permissions
**Status**: ✅ ALREADY IMPLEMENTED
**Files**: `be/app/api/v1/endpoints/items.py`, `be/app/crud/item.py`, `be/app/models.py` (Item model)
**FINDINGS**:
- **All CRUD Operations Implemented**:
- ✅ **CREATE**: `POST /lists/{list_id}/items` with list access validation
- ✅ **READ All**: `GET /lists/{list_id}/items` - returns items for accessible lists
- ✅ **UPDATE**: `PUT /lists/{list_id}/items/{item_id}` - with optimistic locking (`version` field)
- ✅ **DELETE**: `DELETE /lists/{list_id}/items/{item_id}` - with permission checking and optimistic locking
- **Robust Permission System**:
- `get_item_and_verify_access()` dependency validates user access to parent list
- All operations require list access (creator OR group member)
- Proper error handling with specific permission error messages
- **Optimistic Locking**:
- Uses `version` field for conflict detection
- Returns HTTP 409 on version mismatch
- Implemented for both UPDATE and DELETE operations
- **Smart Completion Logic**:
- Automatically sets/unsets `completed_by_id` based on `is_complete` flag
- Tracks who completed each item and when
- **Database Design**:
- Item model has all required fields: `id`, `name`, `quantity`, `is_complete`, `price`, `list_id`, `added_by_id`, `completed_by_id`, `version`, timestamps
- Proper relationships with List and User models
- Cascade delete when parent list is deleted
- **Error Handling**:
- Proper HTTP status codes (409 for conflicts, 404 for not found, 403 for permissions)
- Database integrity error handling
- Comprehensive exception hierarchy
- **Testing Coverage**:
- ✅ CRUD tests exist in `be/tests/crud/test_item.py` (186 lines)
- Tests cover success cases, error cases, permissions, conflicts, and completion logic
**CONCLUSION**: Backend Item CRUD is fully implemented with robust permissions, optimistic locking, and smart completion tracking. No work needed.
**TODO**:
- [x] Review all CRUD endpoints ✅
- [x] Check permission system implementation ✅
- [x] Verify optimistic locking with version field ✅
- [x] Review completion logic and tracking ✅
- [x] Check error handling and status codes ✅
- [x] Check test coverage ✅
- [ ] Verify all tests pass (can't run tests per instructions)
### ✅ Task 1.4: Frontend - Full Item UI/UX in List Detail
**Status**: ✅ ALREADY IMPLEMENTED
**Files**: `fe/src/pages/ListDetailPage.vue`
**FINDINGS**:
- **Complete Item Management UI** (within ListDetailPage.vue):
- ✅ **Display Items**: Shows all items with checkboxes, names, quantities, and completion status
- ✅ **Add Items**: Inline form with name and quantity inputs, "Add" button
- ✅ **Toggle Completion**: Checkbox interaction with confirmation dialog
- ✅ **Edit Items**: Edit button opens edit modal for name/quantity changes
- ✅ **Delete Items**: Delete button with confirmation dialog
- ✅ **Price Input**: Price input field appears for completed items
- ✅ **Quick Add**: Inline "Add new item" input directly in the item list
- **Advanced Features**:
- ✅ **Optimistic Updates**: UI updates immediately, reverts on error
- ✅ **Version Control**: Handles optimistic locking with version numbers
- ✅ **Loading States**: Shows loading indicators during operations
- ✅ **Error Handling**: Comprehensive error states and retry mechanisms
- ✅ **Confirmation Dialogs**: Confirms destructive actions (delete, completion changes)
- ✅ **Accessibility**: Proper ARIA labels, keyboard navigation, semantic HTML
- **Visual Design**:
- ✅ **Modern Neo-style UI**: Consistent with Valerie design system
- ✅ **Visual Feedback**: Strikethrough for completed items, disabled states
- ✅ **Responsive Layout**: Works on different screen sizes
- ✅ **Empty States**: Clear messaging when no items exist
- **Integration**:
- ✅ **API Integration**: Calls correct backend endpoints with proper error handling
- ✅ **Real-time Updates**: Fetches fresh data and updates UI
- ✅ **Offline Support**: Integrates with offline store for conflict resolution
**CONCLUSION**: Frontend Item UI/UX is completely implemented within ListDetailPage with all required functionality, modern design, and advanced features. No work needed.
**TODO**:
- [x] Review item display and interaction ✅
- [x] Check add/edit/delete functionality ✅
- [x] Verify completion toggle and price input ✅
- [x] Check error handling and loading states ✅
- [x] Review confirmation dialogs and UX ✅
- [ ] Verify E2E tests pass for item management
### ✅ Task 1.5: Backend - OCR Integration (Gemini)
**Status**: ✅ ALREADY IMPLEMENTED
**Files**: `be/app/api/v1/endpoints/ocr.py`, `be/app/core/gemini.py`, `be/app/schemas/ocr.py`
**FINDINGS**:
- **Complete OCR Backend Implementation**:
- ✅ **API Endpoint**: `POST /ocr/extract-items` accepts image uploads
- ✅ **Gemini Integration**: Uses Google Gemini Flash model for vision processing
- ✅ **File Validation**: Checks file type (JPEG, PNG, WEBP) and size limits
- ✅ **Error Handling**: Comprehensive error types for different failure scenarios
- ✅ **Async Processing**: Fully async implementation for FastAPI
- **Robust Service Layer**:
- ✅ **GeminiOCRService**: Encapsulated service class for OCR operations
- ✅ **Configuration**: Configurable via environment variables (GEMINI_API_KEY)
- ✅ **Prompt Engineering**: Optimized prompt for shopping list item extraction
- ✅ **Response Processing**: Parses and cleans extracted text into item list
- **Error Handling**:
- ✅ **Service Unavailable**: Handles API key missing or service down
- ✅ **Quota Exceeded**: Specific handling for API quota limits
- ✅ **File Validation**: Invalid file type and size limit errors
- ✅ **Processing Errors**: Safety blocks and empty response handling
- **Testing Coverage**:
- ✅ **Unit Tests**: Comprehensive tests in `be/tests/core/test_gemini.py` (300 lines)
- Tests cover initialization, API calls, error scenarios, and response processing
**CONCLUSION**: Backend OCR integration is fully implemented with Gemini Vision API, robust error handling, and comprehensive testing. No work needed.
**TODO**:
- [x] Review OCR endpoint implementation ✅
- [x] Check Gemini service integration ✅
- [x] Verify file validation and error handling ✅
- [x] Review prompt engineering and response processing ✅
- [x] Check test coverage ✅
- [ ] Verify all tests pass (can't run tests per instructions)
### ✅ Task 1.6: Frontend - OCR UI Flow
**Status**: ✅ ALREADY IMPLEMENTED
**Files**: `fe/src/pages/ListDetailPage.vue`, `fe/src/config/api-config.ts`
**FINDINGS**:
- **Complete OCR UI Integration** (within ListDetailPage.vue):
- ✅ **OCR Button**: "Add via OCR" button in list header
- ✅ **Upload Dialog**: Modal dialog for image upload with file input
- ✅ **File Validation**: Client-side file type validation (image/*)
- ✅ **Processing States**: Loading indicator during OCR processing
- ✅ **Results Review**: Editable list of extracted items before adding
- ✅ **Item Management**: Add/remove extracted items, edit names
- ✅ **Batch Addition**: Add all reviewed items to list at once
- **Advanced Features**:
- ✅ **Error Handling**: Comprehensive error states and user feedback
- ✅ **Loading States**: Visual feedback during upload and processing
- ✅ **Validation**: Client-side validation before API calls
- ✅ **Success Feedback**: Notifications for successful item additions
- ✅ **Cleanup**: Proper file input reset and dialog state management
- **User Experience**:
- ✅ **Modal Design**: Clean modal interface with proper accessibility
- ✅ **Responsive Layout**: Works on different screen sizes
- ✅ **Keyboard Navigation**: Proper tab order and keyboard support
- ✅ **Visual Feedback**: Clear states for loading, success, and errors
- **Integration**:
- ✅ **API Integration**: Calls `/ocr/extract-items` endpoint correctly
- ✅ **File Handling**: Proper FormData construction for file upload
- ✅ **Error Mapping**: Maps backend errors to user-friendly messages
- ✅ **State Management**: Proper reactive state management with Vue 3
**CONCLUSION**: Frontend OCR UI flow is completely implemented with excellent UX, proper error handling, and seamless integration with the backend. No work needed.
**TODO**:
- [x] Review OCR button and dialog UI ✅
- [x] Check file upload and validation ✅
- [x] Verify processing states and feedback ✅
- [x] Review item review and editing flow ✅
- [x] Check error handling and user feedback ✅
- [ ] Verify E2E tests for OCR functionality
## PHASE 2: FULL-FEATURED COST SPLITTING & TRACEABILITY
### ✅ Task 2.1: Backend - Expense Creation with All Split Types
**Status**: ✅ FULLY IMPLEMENTED
**Files**: `be/app/crud/expense.py`, `be/app/api/v1/endpoints/financials.py`, `be/app/schemas/expense.py`
**FINDINGS**:
- **All Split Types Implemented** (lines 268-303 in `crud/expense.py`):
- ✅ **EQUAL**: `_create_equal_splits()` - Divides equally among users, handles rounding
- ✅ **EXACT_AMOUNTS**: `_create_exact_amount_splits()` - Uses exact amounts from `splits_in`
- ✅ **PERCENTAGE**: `_create_percentage_splits()` - Uses percentages from `splits_in`
- ✅ **SHARES**: `_create_shares_splits()` - Uses share units from `splits_in`
- ✅ **ITEM_BASED**: `_create_item_based_splits()` - Based on item prices and who added them
- **Robust Validation**:
- Sum validation for exact amounts, percentages (must equal 100%), and shares
- User existence validation for all splits
- Item price validation for item-based splits
- Total amount matching for item-based splits
- **Database Design**:
- Complete `ExpenseModel` with all required fields
- `ExpenseSplitModel` with status tracking
- Proper relationships and cascade deletes
- **API Endpoint**:
- `POST /expenses` fully implemented with permission checking
- Complex permission logic for group/list contexts
- Proper error handling and status codes
- **Testing Coverage**:
- ✅ Tests exist in `be/tests/crud/test_expense.py` (369 lines)
- Tests cover EQUAL and EXACT_AMOUNTS splits
- Success and error scenarios tested
**CONCLUSION**: Backend expense creation with all split types is fully implemented with comprehensive validation, error handling, and testing.
**TODO**:
- [x] Review all split type implementations ✅
- [x] Check validation logic for each split type ✅
- [x] Verify API endpoint implementation ✅
- [x] Check test coverage ✅
- [ ] Verify tests pass for PERCENTAGE, SHARES, and ITEM_BASED (can't run tests per instructions)
### ✅ Task 2.2: Frontend - Expense Creation UI for All Split Types
**Status**: ✅ FULLY IMPLEMENTED
**Files**: `fe/src/components/CreateExpenseForm.vue`
**FINDINGS**:
- **Split Type Selection**: ✅ Dropdown with all 5 split types (EQUAL, EXACT_AMOUNTS, PERCENTAGE, SHARES, ITEM_BASED)
- **EQUAL Split**: ✅ Fully functional - no additional UI needed
- **EXACT_AMOUNTS Split**: ✅ Implemented with dynamic form inputs
- Add/remove split inputs with user selection
- Numeric validation with step=0.01
- Real-time total validation
- Remove button disabled when only one split
- **PERCENTAGE Split**: ✅ **NEWLY IMPLEMENTED**
- User selection dropdown for each split
- Percentage input fields with 100% validation
- Real-time amount preview calculation
- Visual validation feedback
- **SHARES Split**: ✅ **NEWLY IMPLEMENTED**
- User selection dropdown for each split
- Share units input fields
- Real-time amount preview based on proportional calculation
- Total shares display
- **ITEM_BASED Split**: ✅ **NEWLY IMPLEMENTED**
- Clear informational UI explaining automatic split behavior
- Conditional messaging for single item vs all items
- Professional info box design
- **User Selection**: ✅ **NEWLY IMPLEMENTED**
- "Paid By" dropdown with available users
- Automatic user selection for each split type
- Context-aware user fetching (group members vs current user)
- **Enhanced Validation**: ✅ **NEWLY IMPLEMENTED**
- Real-time validation error messages
- Visual validation feedback with color coding
- Form submission disabled until valid
- Comprehensive error checking for all split types
- **Form Submission**: ✅ API call to correct endpoint with payload validation
- **Error Handling**: ✅ Comprehensive error states and user feedback
**NEW FEATURES ADDED**:
1. **Complete PERCENTAGE Split UI**: Percentage input fields with 100% validation and real-time amount preview
2. **Complete SHARES Split UI**: Share unit input fields with proportional amount calculation
3. **Informative ITEM_BASED Split UI**: Clear explanation of automatic behavior
4. **User Selection System**: Dropdown menus to select users for each split and who paid
5. **Advanced Form Validation**: Real-time validation with visual feedback
6. **Amount Previews**: Shows calculated amounts for percentage and share splits
7. **Smart User Context**: Fetches group members or falls back to current user appropriately
**CONCLUSION**: Frontend expense creation UI is now fully implemented for all split types with advanced validation, user selection, and professional UX.
**TODO**:
- [x] Review current form implementation ✅
- [x] Identify missing split type UIs ✅
- [x] Implement PERCENTAGE split UI with percentage inputs ✅
- [x] Implement SHARES split UI with share unit inputs ✅
- [x] Clarify and implement ITEM_BASED split flow ✅
- [x] Add user selection mechanism for splits ✅
- [x] Add enhanced form validation ✅
### ✅ Task 2.3: Backend & Frontend - Viewing Expenses and Settlement Status
**Status**: ✅ FULLY IMPLEMENTED
**Files**: `be/app/api/v1/endpoints/financials.py`, `fe/src/pages/ListDetailPage.vue`
**FINDINGS**:
- **Backend Expense Viewing**:
- ✅ `GET /expenses/{expense_id}` - Single expense with splits and settlement activities
- ✅ `GET /lists/{list_id}/expenses` - All expenses for a list
- ✅ `GET /groups/{group_id}/expenses` - All expenses for a group
- ✅ Proper relationships loaded (`splits`, `users`, `settlement_activities`)
- ✅ Permission checking for all endpoints
- **Frontend Expense Display** (ListDetailPage.vue lines 85-152):
- ✅ **Expenses Section**: Dedicated section with header and add button
- ✅ **Expense Cards**: Modern Neo-style cards for each expense
- ✅ **Expense Details**: Description, amount, paid by user, date
- ✅ **Overall Status**: Color-coded status badges (`unpaid`, `partially_paid`, `paid`)
- ✅ **Split Details**: Each split shows user, amount owed, status
- ✅ **Settlement Activities**: List of payment activities with details
- ✅ **Settlement Buttons**: "Settle My Share" button for current user's splits
- **Status Display Logic**:
- ✅ `getStatusClass()` and status text methods implemented
- ✅ Color-coded badges: red (unpaid), orange (partially paid), green (paid)
- ✅ `getPaidAmountForSplitDisplay()` shows payment progress
- **Data Integration**:
- ✅ Uses `listDetailStore.fetchListWithExpenses()` for data loading
- ✅ Reactive state management with loading/error states
- ✅ Auto-refresh after settlements
**CONCLUSION**: Expense viewing and settlement status display is fully implemented with comprehensive UI and proper backend support.
**TODO**:
- [x] Review backend expense viewing endpoints ✅
- [x] Check frontend expense display implementation ✅
- [x] Verify settlement status display ✅
- [x] Check settlement activities display ✅
- [ ] Verify all status calculations are correct
### ✅ Task 2.4: Backend & Frontend - Recording Settlement Activities
**Status**: ✅ FULLY IMPLEMENTED
**Files**: `be/app/api/v1/endpoints/financials.py`, `be/app/crud/settlement_activity.py`, `fe/src/stores/listDetailStore.ts`, `fe/src/pages/ListDetailPage.vue`
**FINDINGS**:
- **Backend Settlement Recording**:
- ✅ `POST /expense_splits/{expense_split_id}/settle` endpoint (lines 277+ in financials.py)
- ✅ `crud_settlement_activity.create_settlement_activity()` implementation
- ✅ Status updates: Updates `ExpenseSplit.status` and `Expense.overall_settlement_status`
- ✅ Payment tracking: Sets `paid_at` when fully paid
- ✅ Settlement activities: Creates traceable `SettlementActivity` records
- ✅ Permission checking: Users can settle their own splits, group owners can settle for others
- **Frontend Settlement UI** (ListDetailPage.vue):
- ✅ **"Settle My Share" Button**: Appears for user's unpaid/partially paid splits
- ✅ **Settlement Modal**: Modal dialog for entering settlement amount (lines 287-310)
- ✅ **Amount Input**: Numeric input with validation
- ✅ **Loading States**: Visual feedback during settlement processing
- ✅ **Error Handling**: Comprehensive error states and user feedback
- **Frontend Settlement Logic** (listDetailStore.ts lines 44-74):
- ✅ `settleExpenseSplit()` action fully implemented
- ✅ API call to `/expense_splits/{id}/settle` endpoint
- ✅ Proper payload construction with `SettlementActivityCreate`
- ✅ UI updates: Calls `fetchListWithExpenses()` after successful settlement
- ✅ Error handling: Sets store error state on failure
- **API Integration**:
- ✅ `apiClient.settleExpenseSplit()` method in `api.ts` (lines 96-105)
- ✅ Correct endpoint URL construction
- ✅ Proper HTTP methods and payload structure
**CONCLUSION**: Settlement activity recording is fully implemented with complete backend support, frontend UI, and proper integration between all layers.
**TODO**:
- [x] Review backend settlement endpoint ✅
- [x] Check settlement activity CRUD implementation ✅
- [x] Verify frontend settlement UI ✅
- [x] Check settlement store action ✅
- [x] Verify API integration ✅
- [ ] Create E2E test for settlement flow
## Summary of Phase 2 Status
**🎉 PHASE 2 COMPLETE! 🎉**
- **Task 2.1**: ✅ Backend expense creation with all split types - Fully implemented
- **Task 2.2**: ✅ Frontend expense creation UI - Fully implemented
- **Task 2.3**: ✅ Expense viewing and settlement status - Fully implemented
- **Task 2.4**: ✅ Settlement activity recording - Fully implemented
**Phase 2 provides a complete, production-ready expense and settlement system with:**
- Complete backend support for all split types with comprehensive validation
- Advanced frontend UI for creating expenses with all split types
- User selection and context-aware member fetching
- Real-time validation and amount previews
- Comprehensive expense viewing with status tracking
- Full settlement recording and activity tracking
- Modern, accessible UI with professional UX design
- End-to-end expense workflow from creation to settlement
**Key Features Delivered:**
- **5 Split Types**: EQUAL, EXACT_AMOUNTS, PERCENTAGE, SHARES, ITEM_BASED
- **Smart User Management**: Context-aware user selection for groups vs personal lists
- **Advanced Validation**: Real-time form validation with visual feedback
- **Settlement Tracking**: Complete audit trail of all payment activities
- **Professional UI**: Modern Neo-style design with comprehensive error handling
## Next Steps
Moving on to Phase 3 - Chore Management examination...
## PHASE 3: FULL-FEATURED CHORE MANAGEMENT
### ✅ Task 3.1: Backend - Chore CRUD & Recurrence System
**Status**: ✅ FULLY IMPLEMENTED
**Files**: `be/app/crud/chore.py`, `be/app/api/v1/endpoints/chores.py`, `be/app/models.py`, `be/app/core/chore_utils.py`
**FINDINGS**:
- **Complete CRUD Operations** (446 lines in `crud/chore.py`):
- ✅ **Personal Chores**: `create_chore()`, `get_personal_chores()`, `update_chore()`, `delete_chore()`
- ✅ **Group Chores**: `get_chores_by_group_id()`, with full group membership validation
- ✅ **Unified Permission System**: Checks user access for personal (creator only) and group (member) chores
- ✅ **Assignment Management**: Complete CRUD for `ChoreAssignment` with due date tracking
- **Advanced Recurrence Logic**:
- ✅ **Frequency Types**: `one_time`, `daily`, `weekly`, `monthly`, `custom` with interval days
- ✅ **Next Due Date Calculation**: `calculate_next_due_date()` with frequency-based logic
- ✅ **Completion Tracking**: Updates `last_completed_at` and recalculates `next_due_date` automatically
- ✅ **Assignment Completion**: When assignment completed, parent chore's schedule updates
- **Robust API Endpoints** (434 lines in `endpoints/chores.py`):
- ✅ **Personal Endpoints**: `/personal`, `/personal/{chore_id}` (GET, POST, PUT, DELETE)
- ✅ **Group Endpoints**: `/groups/{group_id}/chores`, `/groups/{group_id}/chores/{chore_id}`
- ✅ **Assignment Endpoints**: `/assignments`, `/assignments/my`, `/assignments/{id}`, `/assignments/{id}/complete`
- ✅ **Permission Validation**: Comprehensive permission checking with proper error handling
- ✅ **Error Handling**: Proper HTTP status codes (403, 404, 409) and logging
**CONCLUSION**: Backend chore management is fully implemented with sophisticated recurrence logic, assignment system, and comprehensive permission management.
### ✅ Task 3.2: Frontend - Chore Timeline UI & Management
**Status**: ✅ FULLY IMPLEMENTED
**Files**: `fe/src/pages/ChoresPage.vue`, `fe/src/pages/MyChoresPage.vue`, `fe/src/services/choreService.ts`, `fe/src/types/chore.ts`
**FINDINGS**:
- **Sophisticated Timeline UI** (`ChoresPage.vue` - 1288 lines):
- ✅ **Timeline Sections**: Overdue, Today, Tomorrow, This Week, Later with color-coded markers
- ✅ **Visual Timeline**: Connected timeline with dots, markers, and professional Neo-style cards
- ✅ **Chore Cards**: Display name, type (Personal/Group), frequency, description, due dates
- ✅ **Group Integration**: Shows group names, handles both personal and group chores
- ✅ **Empty States**: Professional empty state with call-to-action
- **Complete Modal Forms**:
- ✅ **Create/Edit Modal**: Full form with name, description, type, group selection, frequency, custom intervals
- ✅ **Form Validation**: Required field validation, conditional fields (custom interval, group selection)
- ✅ **Delete Confirmation**: Safety dialog for destructive actions
- **Unified Service Layer** (`choreService.ts` - 171 lines):
- ✅ **Unified Methods**: `getAllChores()`, `createChore()`, `updateChore()`, `deleteChore()` handle both types
- ✅ **Assignment Methods**: Complete assignment CRUD with convenience methods
- ✅ **Error Handling**: Comprehensive error handling and API integration
- **User Assignment Page** (`MyChoresPage.vue` - 776 lines):
- ✅ **Assignment Timeline**: Overdue, Today, This Week, Later, Completed sections
- ✅ **Assignment Details**: Shows chore info, due dates, completion tracking
- ✅ **Mark Complete**: One-click completion with immediate feedback
- ✅ **Toggle Completed**: Show/hide completed assignments
- **Advanced Features**:
- ✅ **Caching**: localStorage caching with 5-minute expiration for performance
- ✅ **Real-time Updates**: Automatic reload after operations
- ✅ **Responsive Design**: Professional timeline layout with accessibility
- ✅ **Group Management**: Fetches group members, handles personal vs group contexts
**CONCLUSION**: Frontend chore management is completely implemented with a sophisticated timeline-based UI, comprehensive modal forms, assignment tracking, and excellent UX.
### ✅ Task 3.3: Integration & Assignment System
**Status**: ✅ FULLY IMPLEMENTED
**Files**: All chore-related files plus group integration
**FINDINGS**:
- **Complete Assignment Workflow**:
- ✅ **Create Assignments**: Assign chores to specific users with due dates
- ✅ **Track Completion**: Mark assignments complete, update parent chore schedule
- ✅ **My Assignments View**: Users see their pending/completed assignments
- ✅ **Permission System**: Only assignees can complete, managers can reassign
- **Group Integration**:
- ✅ **Group Member Fetching**: Loads group members for assignment selection
- ✅ **Context-Aware UI**: Shows personal vs group chore distinctions
- ✅ **Permission Validation**: Proper group membership validation throughout
- **Recurrence Integration**:
- ✅ **Schedule Updates**: Completing assignments updates next due dates
- ✅ **Frequency Management**: All frequency types properly supported
- ✅ **Date Calculations**: Robust date handling and timezone considerations
**CONCLUSION**: Chore management integration is complete with full assignment workflow, group integration, and recurrence system.
## Summary of Phase 3 Status
**🎉 PHASE 3 COMPLETE! 🎉**
- **Task 3.1**: ✅ Backend chore CRUD & recurrence - Fully implemented
- **Task 3.2**: ✅ Frontend timeline UI & management - Fully implemented
- **Task 3.3**: ✅ Integration & assignment system - Fully implemented
**Phase 3 provides a comprehensive chore management system with:**
- Complete backend support for personal and group chores with recurrence logic
- Sophisticated timeline-based UI with professional design
- Full assignment system with completion tracking
- Advanced recurrence calculations with frequency management
- Group integration with proper permission management
- User assignment dashboard with timeline organization
- Modern, accessible UI with caching and performance optimization
## PHASE 4: PWA OFFLINE FUNCTIONALITY
### 🟡 Task 4.1: Service Worker & Caching Infrastructure
**Status**: 🟡 PARTIALLY IMPLEMENTED
**Files**: `fe/src/sw.ts`, `fe/vite.config.ts`, `fe/public/offline.html`
**FINDINGS**:
- **Service Worker Setup** (`sw.ts` - 106 lines):
- ✅ **Workbox Integration**: Complete workbox setup with precaching and route caching
- ✅ **Cache Strategies**: CacheFirst for static assets, NetworkFirst for API calls
- ✅ **Background Sync**: `BackgroundSyncPlugin` configured for `offline-actions-queue`
- ✅ **Offline Fallback**: Proper offline.html fallback for navigation routes
- ✅ **Asset Caching**: Images, fonts, scripts, styles cached with expiration
- **PWA Configuration** (`vite.config.ts`):
- ✅ **Manifest**: Complete manifest.json with icons, theme colors, display mode
- ✅ **Build Setup**: `injectManifest` strategy with proper glob patterns
- ✅ **Dev Support**: Development mode service worker with live reload
- ✅ **Icon Assets**: Complete icon set (128x128 to 512x512)
- **Offline UI** (`offline.html`):
- ✅ **Fallback Page**: Professional offline page with user guidance
- ✅ **Styling**: Consistent with main app design
**CONCLUSION**: PWA infrastructure is well-implemented with Workbox, proper caching strategies, and background sync setup.
### 🟡 Task 4.2: Offline Action Queuing System
**Status**: 🟡 PARTIALLY IMPLEMENTED
**Files**: `fe/src/stores/offline.ts`
**FINDINGS**:
- **Queue Infrastructure** (`offline.ts` - 411 lines):
- ✅ **Action Types**: Defined for lists and items (`create_list`, `update_list`, `delete_list`, `create_list_item`, `update_list_item`, `delete_list_item`)
- ✅ **Queue Management**: `addAction()`, `processQueue()`, `processAction()` with localStorage persistence
- ✅ **Conflict Resolution**: Sophisticated conflict detection and resolution UI
- ✅ **Network Awareness**: Online/offline detection with automatic queue processing
- 🔶 **MISSING**: Expense, settlement, and chore action types not implemented
- 🔶 **MISSING**: Background sync integration not fully connected
- **Partial Coverage**:
- ✅ **Lists & Items**: Complete offline support for list/item CRUD operations
- ❌ **Expenses**: No offline queuing for expense creation or settlement
- ❌ **Chores**: No offline queuing for chore management or completion
- ❌ **Assignments**: No offline queuing for assignment operations
**NEEDS WORK**: Offline action queuing needs extension to cover all Phase 2-3 features (expenses, settlements, chores, assignments).
### 🟡 Task 4.3: Background Sync Integration
**Status**: 🔶 PARTIALLY IMPLEMENTED
**Files**: `fe/src/sw.ts`, `fe/src/stores/offline.ts`
**FINDINGS**:
- **Service Worker Side**:
- ✅ **BackgroundSyncPlugin**: Properly configured with 24-hour retention
- ✅ **API Route Caching**: NetworkFirst strategy with background sync plugin
- 🔶 **MISSING**: No explicit sync event handler to process offline actions queue
- **Store Integration**:
- ✅ **Queue Processing**: `processQueue()` method handles online sync
- ✅ **Network Listeners**: Automatic processing when online
- 🔶 **MISSING**: Service worker doesn't directly access offline store queue
- 🔶 **MISSING**: No IDB integration for service worker queue access
**NEEDS WORK**: Background sync needs service worker event handler to process the offline actions queue.
### 🟡 Task 4.4: Offline UI/UX Integration
**Status**: 🟡 PARTIALLY IMPLEMENTED
**Files**: `fe/src/assets/main.scss`, various component files
**FINDINGS**:
- **CSS Infrastructure** (`main.scss`):
- ✅ **Offline Item Styling**: `.offline-item` with sync indicators and animations
- ✅ **Disabled Features**: `.feature-offline-disabled` with tooltips
- ✅ **Visual Feedback**: Spinning sync icons and opacity changes
- **Component Integration**:
- 🔶 **MISSING**: Components don't use offline store or show offline status
- 🔶 **MISSING**: No pending action indicators in UI
- 🔶 **MISSING**: No offline mode detection in forms
**NEEDS WORK**: UI components need integration with offline store to show sync status and offline indicators.
## Summary of Phase 4 Status
**🟡 PHASE 4 PARTIALLY COMPLETE**
- **Task 4.1**: ✅ Service Worker & caching - Fully implemented
- **Task 4.2**: 🟡 Offline action queuing - Partially implemented (lists/items only)
- **Task 4.3**: 🔶 Background sync integration - Needs completion
- **Task 4.4**: 🟡 Offline UI/UX - Partially implemented
**Remaining Work for Phase 4:**
1. **Extend offline action types** to cover expenses, settlements, chores, assignments
2. **Implement service worker sync event handler** to process offline queue
3. **Integrate offline status** into UI components with pending action indicators
4. **Add offline form validation** and disabled state management
5. **Test end-to-end offline workflow** with background sync
## PHASE 5: PRODUCTION DEPLOYMENT
### ✅ Task 5.1: Containerization & Docker Setup
**Status**: ✅ FULLY IMPLEMENTED
**Files**: `docker-compose.yml`, `be/Dockerfile`, `fe/Dockerfile`
**FINDINGS**:
- **Docker Compose Configuration** (`docker-compose.yml` - 71 lines):
- ✅ **Database Service**: PostgreSQL 17 with health checks, data persistence
- ✅ **Backend Service**: FastAPI with volume mounting, environment variables, dependency management
- ✅ **Frontend Service**: Vite build with Nginx serving, proper port mapping
- ✅ **Service Dependencies**: Proper service ordering with health checks
- ✅ **Environment Variables**: Configured for database, API keys, secret keys
- ✅ **Development Mode**: Hot reload support with volume mounting
- **Backend Dockerfile** (`be/Dockerfile` - 35 lines):
- ✅ **Python 3.11**: Modern Python base with proper environment variables
- ✅ **Dependency Management**: Requirements.txt with pip caching
- ✅ **Production Ready**: Uvicorn command with proper host/port binding
- ✅ **Security**: Non-root user considerations (PYTHONDONTWRITEBYTECODE)
- **Frontend Dockerfile** (`fe/Dockerfile` - 31 lines):
- ✅ **Multi-stage Build**: Build stage with Node 24, production stage with Nginx
- ✅ **Optimization**: npm ci for production builds, alpine images for small size
- ✅ **Static Serving**: Nginx configuration for SPA routing
- ✅ **Port Management**: Proper port 80 exposure
**CONCLUSION**: Containerization is production-ready with multi-service Docker Compose setup, optimized Dockerfiles, and proper configuration management.
### 🔶 Task 5.2: Production Configuration & Security
**Status**: 🔶 NEEDS REVIEW
**Files**: `docker-compose.yml`, environment configurations
**FINDINGS**:
- **Environment Variables**:
- ⚠️ **Placeholder Values**: Database credentials show "xxx" placeholders
- ⚠️ **Secret Management**: API keys and secrets need proper secret management
- ⚠️ **Production URLs**: Frontend API endpoints may need production URL configuration
- **Security Considerations**:
- ✅ **Database Isolation**: PostgreSQL properly containerized
- 🔶 **HTTPS Setup**: No HTTPS/SSL configuration visible
- 🔶 **Reverse Proxy**: No nginx reverse proxy for backend
- 🔶 **CORS Configuration**: May need production CORS settings
**NEEDS WORK**: Production configuration needs proper secret management, HTTPS setup, and security hardening.
### 🔶 Task 5.3: Deployment Pipeline & CI/CD
**Status**: ❌ NOT IMPLEMENTED
**FINDINGS**:
- **Missing Components**:
- ❌ **CI/CD Pipeline**: No GitHub Actions, GitLab CI, or other automation
- ❌ **Build Scripts**: No automated build and deployment scripts
- ❌ **Environment Management**: No dev/staging/prod environment configurations
- ❌ **Database Migrations**: No automated migration strategy for production
- ❌ **Health Checks**: No application-level health check endpoints
- ❌ **Monitoring**: No logging, monitoring, or alerting setup
**NEEDS WORK**: Complete CI/CD pipeline implementation needed for production deployment.
### 🔶 Task 5.4: Production Optimizations
**Status**: 🔶 PARTIALLY IMPLEMENTED
**Files**: Frontend build configuration, backend optimizations
**FINDINGS**:
- **Frontend Optimizations**:
- ✅ **Vite Build**: Modern build system with tree shaking and optimization
- ✅ **PWA Caching**: Service worker with proper caching strategies
- ✅ **Multi-stage Docker**: Optimized production builds
- 🔶 **CDN Ready**: No CDN configuration for static assets
- **Backend Optimizations**:
- ✅ **FastAPI**: High-performance async framework
- ✅ **Database Pooling**: PostgreSQL with proper connection handling
- 🔶 **Caching**: No Redis or application-level caching implemented
- 🔶 **Load Balancing**: No horizontal scaling configuration
**NEEDS WORK**: Production optimizations need caching layer, CDN setup, and scaling considerations.
## Summary of Phase 5 Status
**🔶 PHASE 5 PARTIALLY COMPLETE**
- **Task 5.1**: ✅ Containerization & Docker - Fully implemented
- **Task 5.2**: 🔶 Production configuration - Needs security review
- **Task 5.3**: ❌ Deployment pipeline - Not implemented
- **Task 5.4**: 🔶 Production optimizations - Partially implemented
**Remaining Work for Phase 5:**
1. **Set up proper secret management** for environment variables
2. **Implement CI/CD pipeline** with automated testing and deployment
3. **Add HTTPS/SSL configuration** and reverse proxy setup
4. **Create health check endpoints** and monitoring infrastructure
5. **Set up database migration strategy** for production deployments
6. **Add caching layer** (Redis) and CDN configuration
7. **Implement horizontal scaling** and load balancing
## FINAL SYSTEM STATUS SUMMARY
### ✅ COMPLETED PHASES
- **Phase 1**: ✅ **COMPLETE** - Full-featured List & Item Management with OCR
- **Phase 2**: ✅ **COMPLETE** - Full-featured Cost Splitting & Traceability (all split types)
- **Phase 3**: ✅ **COMPLETE** - Full-featured Chore Management with recurrence and assignments
### 🟡 PARTIALLY COMPLETED PHASES
- **Phase 4**: 🟡 **75% COMPLETE** - PWA Offline Functionality
- ✅ Service worker and caching infrastructure fully implemented
- 🔶 Offline action queuing needs extension to all features
- 🔶 Background sync integration needs completion
- 🔶 UI integration needs offline status indicators
- **Phase 5**: 🔶 **50% COMPLETE** - Production Deployment
- ✅ Docker containerization fully implemented
- 🔶 Production configuration needs security hardening
- ❌ CI/CD pipeline not implemented
- 🔶 Production optimizations partially implemented
### 🎉 OVERALL SYSTEM STATUS: **HIGHLY FUNCTIONAL & FEATURE-COMPLETE**
The MitList task management system is **production-ready for core functionality** with all three main feature phases (Lists, Expenses, Chores) fully implemented. The system provides:
- **Complete Task Management**: Lists, items, OCR integration, price tracking
- **Advanced Cost Splitting**: All 5 split types with settlement tracking and audit trails
- **Sophisticated Chore System**: Recurrence, assignments, timeline management, group collaboration
- **Modern PWA Infrastructure**: Service workers, caching, offline foundation
- **Production Deployment**: Docker containerization ready for deployment
**Key Achievements:**
- **1,800+ lines** of comprehensive backend CRUD operations
- **3,000+ lines** of sophisticated frontend UI with modern design
- **Complete API coverage** for all features with proper error handling
- **Advanced validation** and conflict resolution systems
- **Professional UX** with timeline interfaces, modal forms, and accessibility
- **Production-ready** containerization with multi-service architecture
**Ready for immediate deployment** with minor PWA offline completion and production security hardening.

41
fe/src/i18n/en.json
View File

@ -31,7 +31,7 @@
"noDescription": "No description",
"addItemPlaceholder": "Add new item...",
"createCard": {
"title": "+ Create a new list"
"title": "+ List"
},
"pageTitle": {
"forGroup": "Lists for {groupName}",
@ -252,6 +252,13 @@
"title": "Group Expenses",
"manageButton": "Manage Expenses",
"emptyState": "No expenses recorded. Click \"Manage Expenses\" to add some!",
"paidBy": "Paid by:",
"owes": "owes",
"paidAmount": "Paid:",
"onDate": "on",
"settleShareButton": "Settle My Share",
"activityLabel": "Activity:",
"byUser": "by",
"splitTypes": {
"equal": "Equal",
"exactAmounts": "Exact Amounts",
@ -268,7 +275,37 @@
"clipboardNotSupported": "Clipboard not supported or no code to copy.",
"copyInviteFailed": "Failed to copy invite code.",
"removeMemberSuccess": "Member removed successfully",
"removeMemberFailed": "Failed to remove member"
"removeMemberFailed": "Failed to remove member",
"loadExpensesFailed": "Failed to load recent expenses.",
"cannotSettleOthersShares": "You can only settle your own shares.",
"settlementDataMissing": "Cannot process settlement: missing data.",
"settleShareSuccess": "Share settled successfully!",
"settleShareFailed": "Failed to settle share."
},
"loading": {
"settlement": "Processing settlement..."
},
"settleShareModal": {
"title": "Settle Share",
"settleAmountFor": "Settle amount for {userName}:",
"amountLabel": "Amount",
"cancelButton": "Cancel",
"confirmButton": "Confirm",
"errors": {
"enterAmount": "Please enter an amount.",
"positiveAmount": "Please enter a positive amount.",
"exceedsRemaining": "Amount cannot exceed remaining: {amount}.",
"noSplitSelected": "Error: No split selected."
}
},
"status": {
"settled": "Settled",
"partiallySettled": "Partially Settled",
"unsettled": "Unsettled",
"paid": "Paid",
"partiallyPaid": "Partially Paid",
"unpaid": "Unpaid",
"unknown": "Unknown Status"
}
},
"accountPage": {

31
fe/src/layouts/MainLayout.vue
View File

@ -34,10 +34,11 @@
<span class="material-icons">list</span>
<span class="tab-text">Lists</span>
</router-link>
<router-link to="/groups" class="tab-item" active-class="active">
<a @click.prevent="navigateToGroups" href="/groups" class="tab-item"
:class="{ 'active': $route.path.startsWith('/groups') }">
<span class="material-icons">group</span>
<span class="tab-text">Groups</span>
</router-link>
</a>
<router-link to="/chores" class="tab-item" active-class="active">
<span class="material-icons">person_pin_circle</span>
<span class="tab-text">Chores</span>
@ -53,19 +54,22 @@
<script setup lang="ts">
import { ref, defineComponent, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useRouter, useRoute } from 'vue-router';
import { useAuthStore } from '@/stores/auth';
import OfflineIndicator from '@/components/OfflineIndicator.vue';
import { onClickOutside } from '@vueuse/core';
import { useNotificationStore } from '@/stores/notifications';
import { useGroupStore } from '@/stores/groupStore';
defineComponent({
name: 'MainLayout'
});
const router = useRouter();
const route = useRoute();
const authStore = useAuthStore();
const notificationStore = useNotificationStore();
const groupStore = useGroupStore();
// Add initialization logic
const initializeApp = async () => {
@ -83,6 +87,9 @@ const initializeApp = async () => {
// Call initialization when component is mounted
onMounted(() => {
initializeApp();
if (authStore.isAuthenticated) {
groupStore.fetchGroups();
}
});
const userMenuOpen = ref(false);
@ -113,6 +120,20 @@ const handleLogout = async () => {
}
userMenuOpen.value = false;
};
const navigateToGroups = () => {
// The groups should have been fetched on mount, but we can check isLoading
if (groupStore.isLoading) {
// Maybe show a toast or do nothing
console.log('Groups are still loading...');
return;
}
if (groupStore.groupCount === 1 && groupStore.firstGroupId) {
router.push(`/groups/${groupStore.firstGroupId}`);
} else {
router.push('/groups');
}
};
</script>
<style lang="scss" scoped>
@ -239,8 +260,8 @@ const handleLogout = async () => {
}
&.active {
color: var(--primary-color);
border-bottom-color: var(--primary-color);
color: var(--primary);
border-bottom-color: var(--primary);
}
&:hover {

40
fe/src/pages/ChoresPage.vue
View File

@ -415,24 +415,35 @@ const frequencyOptions = computed(() => [
const isLoading = ref(true)
const loadChores = async () => {
isLoading.value = true
// If we have any cached data (even stale), show it first.
if (cachedChores.value && cachedChores.value.length > 0) {
chores.value = cachedChores.value;
isLoading.value = false;
} else {
// Only show loading spinner if there is no cached data at all.
isLoading.value = true;
}
try {
const fetchedChores = await choreService.getAllChores()
chores.value = fetchedChores.map(c => ({
const mappedChores = fetchedChores.map(c => ({
...c,
is_completed: c.is_completed || false,
completed_at: c.completed_at || null,
}))
cachedChores.value = chores.value
}));
chores.value = mappedChores;
cachedChores.value = mappedChores;
cachedTimestamp.value = Date.now()
} catch (error) {
console.error('Failed to load all chores:', error)
notificationStore.addNotification({ message: t('choresPage.notifications.loadFailed'), type: 'error' })
if (!cachedChores.value || cachedChores.value.length === 0) chores.value = []
// Keep stale data on fetch error
} finally {
if (isLoading.value) {
isLoading.value = false
}
}
}
const viewMode = ref<'calendar' | 'list'>('calendar')
const currentDate = ref(new Date())
@ -459,14 +470,20 @@ const calendarDays = computed(() => {
const days = eachDayOfInterval({ start: startDate, end: endDate })
return days.map(date => {
const dayChores = chores.value.filter(chore => {
if (chore.is_completed && activeView.value !== 'completed') return false; // Don't show completed in calendar unless completed view is active (edge case)
if (!chore.next_due_date) return false;
const dayChores = filteredChores.value.filter(chore => {
// For completed chores, use completion date for calendar placement, consistent with list view.
// For pending chores (all other views), use the due date.
const dateString = activeView.value === 'completed'
? chore.completed_at || chore.next_due_date
: chore.next_due_date;
if (!dateString) return false;
try {
const choreDate = startOfDay(new Date(chore.next_due_date.replace(/-/g, '/'))); // More robust date parsing
const choreDate = startOfDay(new Date(dateString.replace(/-/g, '/'))); // More robust date parsing
return isEqual(choreDate, startOfDay(date))
} catch (e) {
console.warn("Invalid date for chore:", chore.name, chore.next_due_date);
console.warn("Invalid date for chore:", chore.name, dateString);
return false;
}
})
@ -791,8 +808,7 @@ const handleKeyPress = (event: KeyboardEvent) => {
onMounted(() => {
window.addEventListener('keydown', handleKeyPress)
loadCachedData() // Load from cache first for perceived speed
Promise.all([loadChores(), loadGroups()]); // Then fetch fresh data
Promise.all([loadChores(), loadGroups()]);
})
onUnmounted(() => {

529
fe/src/pages/GroupDetailPage.vue
View File

@ -112,19 +112,88 @@
t('groupDetailPage.expenses.manageButton') }}
</VButton>
</div>
<VList v-if="recentExpenses.length > 0">
<VListItem v-for="expense in recentExpenses" :key="expense.id" class="flex justify-between items-center">
<div class="neo-expense-info">
<span class="neo-expense-name">{{ expense.description }}</span>
<span class="neo-expense-date">{{ formatDate(expense.expense_date) }}</span>
<div v-if="recentExpenses.length > 0" class="neo-expense-list">
<div v-for="expense in recentExpenses" :key="expense.id" class="neo-expense-item-wrapper">
<div class="neo-expense-item" @click="toggleExpense(expense.id)"
:class="{ 'is-expanded': isExpenseExpanded(expense.id) }">
<div class="expense-main-content">
<div class="expense-icon-container">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="12" x2="12" y1="2" y2="22"></line>
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
</svg>
</div>
<div class="expense-text-content">
<div class="neo-expense-header">
{{ expense.description }}
</div>
<div class="neo-expense-details">
<span class="neo-expense-amount">{{ expense.currency }} {{ formatAmount(expense.total_amount) }}</span>
<VBadge :text="formatSplitType(expense.split_type)"
:variant="getSplitTypeBadgeVariant(expense.split_type)" />
{{ formatCurrency(expense.total_amount) }} &mdash;
{{ t('groupDetailPage.expenses.paidBy') }} <strong>{{ expense.paid_by_user?.name ||
expense.paid_by_user?.email }}</strong>
</div>
</div>
</div>
<div class="expense-side-content">
<span class="neo-expense-status" :class="getStatusClass(expense.overall_settlement_status)">
{{ getOverallExpenseStatusText(expense.overall_settlement_status) }}
</span>
<div class="expense-toggle-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-chevron-down">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</div>
</div>
</div>
<div v-if="isExpenseExpanded(expense.id)" class="neo-splits-container">
<div class="neo-splits-list">
<div v-for="split in expense.splits" :key="split.id" class="neo-split-item">
<div class="split-col split-user">
<strong>{{ split.user?.name || split.user?.email || `User ID: ${split.user_id}` }}</strong>
</div>
<div class="split-col split-owes">
{{ t('groupDetailPage.expenses.owes') }} <strong>{{
formatCurrency(split.owed_amount) }}</strong>
</div>
<div class="split-col split-status">
<span class="neo-expense-status" :class="getStatusClass(split.status)">
{{ getSplitStatusText(split.status) }}
</span>
</div>
<div class="split-col split-paid-info">
<div v-if="split.paid_at" class="paid-details">
{{ t('groupDetailPage.expenses.paidAmount') }} {{ getPaidAmountForSplitDisplay(split) }}
<span v-if="split.paid_at"> {{ t('groupDetailPage.expenses.onDate') }} {{ new
Date(split.paid_at).toLocaleDateString() }}</span>
</div>
</div>
<div class="split-col split-action">
<button
v-if="split.user_id === authStore.user?.id && split.status !== ExpenseSplitStatusEnum.PAID"
class="btn btn-sm btn-primary" @click="openSettleShareModal(expense, split)"
:disabled="isSettlementLoading">
{{ t('groupDetailPage.expenses.settleShareButton') }}
</button>
</div>
<ul v-if="split.settlement_activities && split.settlement_activities.length > 0"
class="neo-settlement-activities">
<li v-for="activity in split.settlement_activities" :key="activity.id">
{{ t('groupDetailPage.expenses.activityLabel') }} {{
formatCurrency(activity.amount_paid) }}
{{
t('groupDetailPage.expenses.byUser') }} {{ activity.payer?.name || `User
${activity.paid_by_user_id}` }} {{ t('groupDetailPage.expenses.onDate') }} {{ new
Date(activity.paid_at).toLocaleDateString() }}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</VListItem>
</VList>
<div v-else class="text-center py-4">
<VIcon name="payments" size="lg" class="opacity-50 mb-2" />
<p>{{ t('groupDetailPage.expenses.emptyState') }}</p>
@ -134,6 +203,35 @@
</div>
<VAlert v-else type="info" :message="t('groupDetailPage.groupNotFound')" />
<!-- Settle Share Modal -->
<VModal v-model="showSettleModal" :title="t('groupDetailPage.settleShareModal.title')"
@update:modelValue="!$event && closeSettleShareModal()" size="md">
<template #default>
<div v-if="isSettlementLoading" class="text-center">
<VSpinner :label="t('groupDetailPage.loading.settlement')" />
</div>
<VAlert v-else-if="settleAmountError" type="error" :message="settleAmountError" />
<div v-else>
<p>{{ t('groupDetailPage.settleShareModal.settleAmountFor', {
userName: selectedSplitForSettlement?.user?.name
|| selectedSplitForSettlement?.user?.email || `User ID: ${selectedSplitForSettlement?.user_id}`
}) }}</p>
<VFormField :label="t('groupDetailPage.settleShareModal.amountLabel')"
:error-message="settleAmountError || undefined">
<VInput type="number" v-model="settleAmount" id="settleAmount" required />
</VFormField>
</div>
</template>
<template #footer>
<VButton variant="neutral" @click="closeSettleShareModal">{{
t('groupDetailPage.settleShareModal.cancelButton')
}}</VButton>
<VButton variant="primary" @click="handleConfirmSettle" :disabled="isSettlementLoading">{{
t('groupDetailPage.settleShareModal.confirmButton')
}}</VButton>
</template>
</VModal>
</main>
</template>
@ -142,13 +240,16 @@ import { ref, onMounted, computed } from 'vue';
import { useI18n } from 'vue-i18n';
// import { useRoute } from 'vue-router';
import { apiClient, API_ENDPOINTS } from '@/config/api'; // Assuming path
import { useClipboard } from '@vueuse/core';
import { useClipboard, useStorage } from '@vueuse/core';
import ListsPage from './ListsPage.vue'; // Import ListsPage
import { useNotificationStore } from '@/stores/notifications';
import { choreService } from '../services/choreService'
import type { Chore, ChoreFrequency } from '../types/chore'
import { format } from 'date-fns'
import type { Expense } from '@/types/expense'
import type { Expense, ExpenseSplit, SettlementActivityCreate } from '@/types/expense';
import { ExpenseOverallStatusEnum, ExpenseSplitStatusEnum } from '@/types/expense';
import { useAuthStore } from '@/stores/auth';
import { Decimal } from 'decimal.js';
import type { BadgeVariant } from '@/components/valerie/VBadge.vue';
import VHeading from '@/components/valerie/VHeading.vue';
import VSpinner from '@/components/valerie/VSpinner.vue';
@ -161,10 +262,23 @@ import VBadge from '@/components/valerie/VBadge.vue';
import VInput from '@/components/valerie/VInput.vue';
import VFormField from '@/components/valerie/VFormField.vue';
import VIcon from '@/components/valerie/VIcon.vue';
import VModal from '@/components/valerie/VModal.vue';
import { onClickOutside } from '@vueuse/core'
const { t } = useI18n();
// Caching setup
const CACHE_DURATION = 5 * 60 * 1000; // 5 minutes
interface CachedGroup { group: Group; timestamp: number; }
const cachedGroups = useStorage<Record<string, CachedGroup>>('cached-groups-v1', {});
interface CachedChores { chores: Chore[]; timestamp: number; }
const cachedUpcomingChores = useStorage<Record<string, CachedChores>>('cached-group-chores-v1', {});
// interface CachedExpenses { expenses: Expense[]; timestamp: number; }
// const cachedRecentExpenses = useStorage<Record<string, CachedExpenses>>('cached-group-expenses-v1', {});
interface Group {
id: string | number;
name: string;
@ -221,6 +335,42 @@ const upcomingChores = ref<Chore[]>([])
// Add new state for expenses
const recentExpenses = ref<Expense[]>([])
const expandedExpenses = ref<Set<number>>(new Set());
const authStore = useAuthStore();
// Settle Share Modal State
const showSettleModal = ref(false);
const selectedSplitForSettlement = ref<ExpenseSplit | null>(null);
const settleAmount = ref<string>('');
const settleAmountError = ref<string | null>(null);
const isSettlementLoading = ref(false);
const getApiErrorMessage = (err: unknown, fallbackMessageKey: string): string => {
if (err && typeof err === 'object') {
if ('response' in err && err.response && typeof err.response === 'object' && 'data' in err.response && err.response.data) {
const errorData = err.response.data as any;
if (typeof errorData.detail === 'string') {
return errorData.detail;
}
if (typeof errorData.message === 'string') {
return errorData.message;
}
if (Array.isArray(errorData.detail) && errorData.detail.length > 0) {
const firstError = errorData.detail[0];
if (typeof firstError.msg === 'string' && typeof firstError.type === 'string') {
return firstError.msg;
}
}
if (typeof errorData === 'string') {
return errorData;
}
}
if (err instanceof Error && err.message) {
return err.message;
}
}
return t(fallbackMessageKey);
};
const fetchActiveInviteCode = async () => {
if (!groupId.value) return;
@ -251,20 +401,44 @@ const fetchActiveInviteCode = async () => {
const fetchGroupDetails = async () => {
if (!groupId.value) return;
const groupIdStr = String(groupId.value);
const cached = cachedGroups.value[groupIdStr];
// If we have any cached data (even stale), show it first to avoid loading spinner.
if (cached) {
group.value = cached.group;
loading.value = false;
} else {
// Only show loading spinner if there is no cached data at all.
loading.value = true;
}
// Reset error state for the new fetch attempt
error.value = null;
try {
const response = await apiClient.get(API_ENDPOINTS.GROUPS.BY_ID(String(groupId.value)));
const response = await apiClient.get(API_ENDPOINTS.GROUPS.BY_ID(groupIdStr));
group.value = response.data;
// Update cache on successful fetch
cachedGroups.value[groupIdStr] = {
group: response.data,
timestamp: Date.now(),
};
} catch (err: unknown) {
const message = err instanceof Error ? err.message : 'Failed to fetch group details.';
// Only show the main error banner if we have no data at all to show
if (!group.value) {
error.value = message;
}
console.error('Error fetching group details:', err);
// Always show a notification for failures, even background ones
notificationStore.addNotification({ message, type: 'error' });
} finally {
// If we were showing the loader, hide it.
if (loading.value) {
loading.value = false;
}
// Fetch active invite code after group details are loaded
}
// Fetch active invite code after group details are loaded or retrieved from cache
await fetchActiveInviteCode();
};
@ -338,12 +512,23 @@ const removeMember = async (memberId: number) => {
// Chores methods
const loadUpcomingChores = async () => {
if (!groupId.value) return
const groupIdStr = String(groupId.value);
const cached = cachedUpcomingChores.value[groupIdStr];
if (cached) {
upcomingChores.value = cached.chores;
}
try {
const chores = await choreService.getChores(Number(groupId.value))
// Sort by due date and take the next 5
upcomingChores.value = chores
const sortedChores = chores
.sort((a, b) => new Date(a.next_due_date).getTime() - new Date(b.next_due_date).getTime())
.slice(0, 5)
upcomingChores.value = sortedChores;
cachedUpcomingChores.value[groupIdStr] = {
chores: sortedChores,
timestamp: Date.now()
};
} catch (error) {
console.error('Error loading upcoming chores:', error)
}
@ -380,11 +565,12 @@ const loadRecentExpenses = async () => {
if (!groupId.value) return
try {
const response = await apiClient.get(
`${API_ENDPOINTS.FINANCIALS.EXPENSES}?group_id=${groupId.value}&limit=5`
`${API_ENDPOINTS.FINANCIALS.EXPENSES}?group_id=${groupId.value}&limit=5&detailed=true`
)
recentExpenses.value = response.data
} catch (error) {
console.error('Error loading recent expenses:', error)
notificationStore.addNotification({ message: t('groupDetailPage.notifications.loadExpensesFailed'), type: 'error' });
}
}
@ -413,6 +599,140 @@ const getSplitTypeBadgeVariant = (type: string): BadgeVariant => {
return colorMap[type] || 'neutral';
};
const formatCurrency = (value: string | number | undefined | null): string => {
if (value === undefined || value === null) return '$0.00';
if (typeof value === 'string' && !value.trim()) return '$0.00';
const numValue = typeof value === 'string' ? parseFloat(value) : value;
return isNaN(numValue) ? '$0.00' : `$${numValue.toFixed(2)}`;
};
const getPaidAmountForSplit = (split: ExpenseSplit): Decimal => {
if (!split.settlement_activities) return new Decimal(0);
return split.settlement_activities.reduce((sum, activity) => {
return sum.plus(new Decimal(activity.amount_paid));
}, new Decimal(0));
}
const getPaidAmountForSplitDisplay = (split: ExpenseSplit): string => {
const amount = getPaidAmountForSplit(split);
return formatCurrency(amount.toString());
};
const getSplitStatusText = (status: ExpenseSplitStatusEnum): string => {
switch (status) {
case ExpenseSplitStatusEnum.PAID: return t('groupDetailPage.status.paid');
case ExpenseSplitStatusEnum.PARTIALLY_PAID: return t('groupDetailPage.status.partiallyPaid');
case ExpenseSplitStatusEnum.UNPAID: return t('groupDetailPage.status.unpaid');
default: return t('groupDetailPage.status.unknown');
}
};
const getOverallExpenseStatusText = (status: ExpenseOverallStatusEnum): string => {
switch (status) {
case ExpenseOverallStatusEnum.PAID: return t('groupDetailPage.status.settled');
case ExpenseOverallStatusEnum.PARTIALLY_PAID: return t('groupDetailPage.status.partiallySettled');
case ExpenseOverallStatusEnum.UNPAID: return t('groupDetailPage.status.unsettled');
default: return t('groupDetailPage.status.unknown');
}
};
const getStatusClass = (status: ExpenseSplitStatusEnum | ExpenseOverallStatusEnum): string => {
if (status === ExpenseSplitStatusEnum.PAID || status === ExpenseOverallStatusEnum.PAID) return 'status-paid';
if (status === ExpenseSplitStatusEnum.PARTIALLY_PAID || status === ExpenseOverallStatusEnum.PARTIALLY_PAID) return 'status-partially_paid';
if (status === ExpenseSplitStatusEnum.UNPAID || status === ExpenseOverallStatusEnum.UNPAID) return 'status-unpaid';
return '';
};
const toggleExpense = (expenseId: number) => {
const newSet = new Set(expandedExpenses.value);
if (newSet.has(expenseId)) {
newSet.delete(expenseId);
} else {
newSet.add(expenseId);
}
expandedExpenses.value = newSet;
};
const isExpenseExpanded = (expenseId: number) => {
return expandedExpenses.value.has(expenseId);
};
const openSettleShareModal = (expense: Expense, split: ExpenseSplit) => {
if (split.user_id !== authStore.user?.id) {
notificationStore.addNotification({ message: t('groupDetailPage.notifications.cannotSettleOthersShares'), type: 'warning' });
return;
}
selectedSplitForSettlement.value = split;
const alreadyPaid = getPaidAmountForSplit(split);
const owed = new Decimal(split.owed_amount);
const remaining = owed.minus(alreadyPaid);
settleAmount.value = remaining.toFixed(2);
settleAmountError.value = null;
showSettleModal.value = true;
};
const closeSettleShareModal = () => {
showSettleModal.value = false;
selectedSplitForSettlement.value = null;
settleAmount.value = '';
settleAmountError.value = null;
};
const validateSettleAmount = (): boolean => {
settleAmountError.value = null;
if (!settleAmount.value.trim()) {
settleAmountError.value = t('groupDetailPage.settleShareModal.errors.enterAmount');
return false;
}
const amount = new Decimal(settleAmount.value);
if (amount.isNaN() || amount.isNegative() || amount.isZero()) {
settleAmountError.value = t('groupDetailPage.settleShareModal.errors.positiveAmount');
return false;
}
if (selectedSplitForSettlement.value) {
const alreadyPaid = getPaidAmountForSplit(selectedSplitForSettlement.value);
const owed = new Decimal(selectedSplitForSettlement.value.owed_amount);
const remaining = owed.minus(alreadyPaid);
if (amount.greaterThan(remaining.plus(new Decimal('0.001')))) {
settleAmountError.value = t('groupDetailPage.settleShareModal.errors.exceedsRemaining', { amount: formatCurrency(remaining.toFixed(2)) });
return false;
}
} else {
settleAmountError.value = t('groupDetailPage.settleShareModal.errors.noSplitSelected');
return false;
}
return true;
};
const handleConfirmSettle = async () => {
if (!validateSettleAmount()) return;
if (!selectedSplitForSettlement.value || !authStore.user?.id) {
notificationStore.addNotification({ message: t('groupDetailPage.notifications.settlementDataMissing'), type: 'error' });
return;
}
isSettlementLoading.value = true;
try {
const activityData: SettlementActivityCreate = {
expense_split_id: selectedSplitForSettlement.value.id,
paid_by_user_id: Number(authStore.user.id),
amount_paid: new Decimal(settleAmount.value).toString(),
paid_at: new Date().toISOString(),
};
await apiClient.post(API_ENDPOINTS.FINANCIALS.SETTLEMENTS, activityData);
notificationStore.addNotification({ message: t('groupDetailPage.notifications.settleShareSuccess'), type: 'success' });
closeSettleShareModal();
await loadRecentExpenses();
} catch (err) {
const message = getApiErrorMessage(err, 'groupDetailPage.notifications.settleShareFailed');
notificationStore.addNotification({ message, type: 'error' });
} finally {
isSettlementLoading.value = false;
}
};
const toggleMemberMenu = (memberId: number) => {
if (activeMemberMenu.value === memberId) {
activeMemberMenu.value = null;
@ -873,4 +1193,179 @@ onMounted(() => {
background: #f5f5f5;
color: #616161;
}
.neo-expense-list {
background-color: rgb(255, 248, 240);
/* Container for expense items */
border-radius: 12px;
overflow: hidden;
border: 1px solid #f0e5d8;
}
.neo-expense-item-wrapper {
border-bottom: 1px solid #f0e5d8;
}
.neo-expense-item-wrapper:last-child {
border-bottom: none;
}
.neo-expense-item {
padding: 1rem 1.2rem;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: background-color 0.2s ease;
}
.neo-expense-item:hover {
background-color: rgba(0, 0, 0, 0.02);
}
.neo-expense-item.is-expanded .expense-toggle-icon {
transform: rotate(180deg);
}
.expense-main-content {
display: flex;
align-items: center;
gap: 1rem;
}
.expense-icon-container {
color: #d99a53;
}
.expense-text-content {
display: flex;
flex-direction: column;
}
.expense-side-content {
display: flex;
align-items: center;
gap: 1rem;
}
.expense-toggle-icon {
color: #888;
transition: transform 0.3s ease;
}
.neo-expense-header {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 0.1rem;
}
.neo-expense-details,
.neo-split-details {
font-size: 0.9rem;
color: #555;
margin-bottom: 0.3rem;
}
.neo-expense-details strong,
.neo-split-details strong {
color: #111;
}
.neo-expense-status {
display: inline-block;
padding: 0.25em 0.6em;
font-size: 0.85em;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.375rem;
margin-left: 0.5rem;
color: #22c55e;
}
.status-unpaid {
background-color: #fee2e2;
color: #dc2626;
}
.status-partially_paid {
background-color: #ffedd5;
color: #f97316;
}
.status-paid {
background-color: #dcfce7;
color: #22c55e;
}
.neo-splits-container {
padding: 0.5rem 1.2rem 1.2rem;
background-color: rgba(255, 255, 255, 0.5);
}
.neo-splits-list {
margin-top: 0rem;
padding-left: 0;
border-left: none;
}
.neo-split-item {
padding: 0.75rem 0;
border-bottom: 1px dashed #f0e5d8;
display: grid;
grid-template-areas:
"user owes status paid action"
"activities activities activities activities activities";
grid-template-columns: 1.5fr 1fr 1fr 1.5fr auto;
gap: 0.5rem 1rem;
align-items: center;
}
.neo-split-item:last-child {
border-bottom: none;
}
.split-col.split-user {
grid-area: user;
}
.split-col.split-owes {
grid-area: owes;
}
.split-col.split-status {
grid-area: status;
}
.split-col.split-paid-info {
grid-area: paid;
}
.split-col.split-action {
grid-area: action;
justify-self: end;
}
.split-col.neo-settlement-activities {
grid-area: activities;
font-size: 0.8em;
color: #555;
padding-left: 1em;
list-style-type: disc;
margin-top: 0.5em;
}
.neo-settlement-activities {
font-size: 0.8em;
color: #555;
padding-left: 1em;
list-style-type: disc;
margin-top: 0.5em;
}
.neo-settlement-activities li {
margin-top: 0.2em;
}
</style>

123
fe/src/pages/GroupsPage.vue
View File

@ -53,40 +53,15 @@
{{ t('groupsPage.createCard.title') }}
</div>
</div>
<details class="card mb-3 mt-4">
<summary class="card-header flex items-center cursor-pointer justify-between">
<h3>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-user" />
</svg>
{{ t('groupsPage.joinGroup.title') }}
</h3>
<span class="expand-icon" aria-hidden="true">▼</span>
</summary>
<div class="card-body">
<form @submit.prevent="handleJoinGroup" class="flex items-center" style="gap: 0.5rem;">
<div class="form-group flex-grow" style="margin-bottom: 0;">
<label for="joinInviteCodeInput" class="sr-only">{{ t('groupsPage.joinGroup.inputLabel') }}</label>
<input type="text" id="joinInviteCodeInput" v-model="inviteCodeToJoin" class="form-input"
:placeholder="t('groupsPage.joinGroup.inputPlaceholder')" required ref="joinInviteCodeInputRef" />
</div>
<button type="submit" class="btn btn-secondary" :disabled="joiningGroup">
<span v-if="joiningGroup" class="spinner-dots-sm" role="status"><span /><span /><span /></span>
{{ t('groupsPage.joinGroup.joinButton') }}
</button>
</form>
<p v-if="joinGroupFormError" class="form-error-text mt-1">{{ joinGroupFormError }}</p>
</div>
</details>
</div>
<!-- Create Group Dialog -->
<!-- Create or Join Group Dialog -->
<div v-if="showCreateGroupDialog" class="modal-backdrop open" @click.self="closeCreateGroupDialog">
<div class="modal-container" ref="createGroupModalRef" role="dialog" aria-modal="true"
aria-labelledby="createGroupTitle">
<div class="modal-header">
<h3 id="createGroupTitle">{{ t('groupsPage.createDialog.title') }}</h3>
<h3 id="createGroupTitle">{{ activeTab === 'create' ? t('groupsPage.createDialog.title') :
t('groupsPage.joinGroup.title') }}</h3>
<button class="close-button" @click="closeCreateGroupDialog"
:aria-label="t('groupsPage.createDialog.closeButtonLabel')">
<svg class="icon" aria-hidden="true">
@ -94,7 +69,19 @@
</svg>
</button>
</div>
<form @submit.prevent="handleCreateGroup">
<!-- Tabs -->
<div class="modal-tabs">
<button @click="activeTab = 'create'" :class="{ 'active': activeTab === 'create' }">
{{ t('groupsPage.createDialog.createButton') }}
</button>
<button @click="activeTab = 'join'" :class="{ 'active': activeTab === 'join' }">
{{ t('groupsPage.joinGroup.joinButton') }}
</button>
</div>
<!-- Create Form -->
<form v-if="activeTab === 'create'" @submit.prevent="handleCreateGroup">
<div class="modal-body">
<div class="form-group">
<label for="newGroupNameInput" class="form-label">{{ t('groupsPage.createDialog.groupNameLabel')
@ -113,6 +100,27 @@
</button>
</div>
</form>
<!-- Join Form -->
<form v-if="activeTab === 'join'" @submit.prevent="handleJoinGroup">
<div class="modal-body">
<div class="form-group">
<label for="joinInviteCodeInput" class="form-label">{{ t('groupsPage.joinGroup.inputLabel', 'Invite Code')
}}</label>
<input type="text" id="joinInviteCodeInput" v-model="inviteCodeToJoin" class="form-input"
:placeholder="t('groupsPage.joinGroup.inputPlaceholder')" required ref="joinInviteCodeInputRef" />
<p v-if="joinGroupFormError" class="form-error-text">{{ joinGroupFormError }}</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-neutral" @click="closeCreateGroupDialog">{{
t('groupsPage.createDialog.cancelButton') }}</button>
<button type="submit" class="btn btn-primary ml-2" :disabled="joiningGroup">
<span v-if="joiningGroup" class="spinner-dots-sm" role="status"><span /><span /><span /></span>
{{ t('groupsPage.joinGroup.joinButton') }}
</button>
</div>
</form>
</div>
</div>
@ -122,7 +130,7 @@
</template>
<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue';
import { ref, onMounted, nextTick, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { apiClient, API_ENDPOINTS } from '@/config/api';
@ -157,6 +165,8 @@ const newGroupNameInputRef = ref<HTMLInputElement | null>(null);
const createGroupModalRef = ref<HTMLElement | null>(null);
const createGroupFormError = ref<string | null>(null);
const activeTab = ref<'create' | 'join'>('create');
const inviteCodeToJoin = ref('');
const joiningGroup = ref(false);
const joinInviteCodeInputRef = ref<HTMLInputElement | null>(null);
@ -218,9 +228,26 @@ const fetchGroups = async (isRetryAttempt = false) => {
}
};
watch(activeTab, (newTab) => {
if (showCreateGroupDialog.value) {
createGroupFormError.value = null;
joinGroupFormError.value = null;
nextTick(() => {
if (newTab === 'create') {
newGroupNameInputRef.value?.focus();
} else {
joinInviteCodeInputRef.value?.focus();
}
});
}
});
const openCreateGroupDialog = () => {
activeTab.value = 'create'; // Default to create tab
newGroupName.value = '';
createGroupFormError.value = null;
inviteCodeToJoin.value = '';
joinGroupFormError.value = null;
showCreateGroupDialog.value = true;
nextTick(() => {
newGroupNameInputRef.value?.focus();
@ -256,8 +283,8 @@ const handleCreateGroup = async () => {
} else {
throw new Error('Invalid data received from server.');
}
} catch (error: unknown) {
const message = error instanceof Error ? error.message : t('groupsPage.errors.createFailed');
} catch (error: any) {
const message = error.response?.data?.detail || (error instanceof Error ? error.message : t('groupsPage.errors.createFailed'));
createGroupFormError.value = message;
console.error('Error creating group:', error);
notificationStore.addNotification({ message, type: 'error' });
@ -287,14 +314,16 @@ const handleJoinGroup = async () => {
// Update cache
cachedGroups.value = groups.value;
cachedTimestamp.value = Date.now();
closeCreateGroupDialog();
} else {
// If API returns only success message, re-fetch groups
await fetchGroups(); // Refresh the list of groups
inviteCodeToJoin.value = '';
notificationStore.addNotification({ message: t('groupsPage.notifications.joinSuccessGeneric'), type: 'success' });
closeCreateGroupDialog();
}
} catch (error: unknown) {
const message = error instanceof Error ? error.message : t('groupsPage.errors.joinFailed');
} catch (error: any) {
const message = error.response?.data?.detail || (error instanceof Error ? error.message : t('groupsPage.errors.joinFailed'));
joinGroupFormError.value = message;
console.error('Error joining group:', error);
notificationStore.addNotification({ message, type: 'error' });
@ -458,6 +487,32 @@ details[open] .expand-icon {
cursor: pointer;
}
/* Modal Tabs */
.modal-tabs {
display: flex;
border-bottom: 1px solid #eee;
margin: 0 1.5rem;
}
.modal-tabs button {
background: none;
border: none;
padding: 0.75rem 0.25rem;
margin-right: 1.5rem;
cursor: pointer;
font-size: 1rem;
color: var(--text-color-secondary);
border-bottom: 3px solid transparent;
margin-bottom: -2px;
font-weight: 500;
}
.modal-tabs button.active {
color: var(--primary);
border-bottom-color: var(--primary);
font-weight: 600;
}
/* Responsive adjustments */
@media (max-width: 900px) {
.neo-groups-grid {

205
fe/src/pages/ListDetailPage.vue
View File

@ -1704,7 +1704,7 @@ const isExpenseExpanded = (expenseId: number) => {
gap: 0.8em;
cursor: pointer;
position: relative;
width: fit-content;
width: 100%;
font-weight: 500;
color: #414856;
transition: color 0.3s ease;
@ -1715,95 +1715,89 @@ const isExpenseExpanded = (expenseId: number) => {
-webkit-appearance: none;
-moz-appearance: none;
position: relative;
height: 18px;
width: 18px;
height: 20px;
width: 20px;
outline: none;
border: 2px solid var(--dark);
border: 2px solid #b8c1d1;
margin: 0;
cursor: pointer;
background: var(--light);
border-radius: 4px;
background: transparent;
border-radius: 6px;
display: grid;
align-items: center;
justify-content: center;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.neo-checkbox-label input[type="checkbox"]:hover {
border-color: var(--secondary);
background: var(--light);
transform: scale(1.05);
}
.neo-checkbox-label input[type="checkbox"]::before,
.neo-checkbox-label input[type="checkbox"]::after {
content: "";
position: absolute;
height: 2px;
background: var(--primary);
border-radius: 2px;
opacity: 0;
transition: opacity 0.2s ease;
}
.neo-checkbox-label input[type="checkbox"]::before {
width: 0px;
right: 55%;
transform-origin: right bottom;
content: none;
}
.neo-checkbox-label input[type="checkbox"]::after {
width: 0px;
left: 45%;
transform-origin: left bottom;
content: "";
position: absolute;
opacity: 0;
left: 6px;
top: 2px;
width: 6px;
height: 12px;
border: solid var(--primary);
border-width: 0 3px 3px 0;
transform: rotate(45deg) scale(0);
transition: all 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
transition-property: transform, opacity;
}
.neo-checkbox-label input[type="checkbox"]:checked {
border-color: var(--primary);
background: var(--light);
transform: scale(1.05);
}
.neo-checkbox-label input[type="checkbox"]:checked::before {
opacity: 1;
animation: check-01 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.neo-checkbox-label input[type="checkbox"]:checked::after {
opacity: 1;
animation: check-02 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
transform: rotate(45deg) scale(1);
}
.checkbox-content {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
}
.checkbox-text-span {
position: relative;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.checkbox-text-span::before,
.checkbox-text-span::after {
content: "";
position: absolute;
left: 0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transition: color 0.4s ease, opacity 0.4s ease;
width: fit-content;
}
/* Animated strikethrough line */
.checkbox-text-span::before {
height: 2px;
width: 8px;
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
background: var(--secondary);
border-radius: 2px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
left: -0.1em;
right: -0.1em;
height: 2px;
background: var(--dark);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.4s cubic-bezier(0.77, 0, .18, 1);
}
/* Firework particle container */
.checkbox-text-span::after {
content: '';
position: absolute;
width: 4px;
height: 4px;
width: 6px;
height: 6px;
top: 50%;
left: 130%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background: var(--accent);
@ -1811,103 +1805,52 @@ const isExpenseExpanded = (expenseId: number) => {
pointer-events: none;
}
.neo-checkbox-label input[type="checkbox"]:checked+.checkbox-text-span {
/* Selector fixed to target span correctly */
.neo-checkbox-label input[type="checkbox"]:checked~.checkbox-content .checkbox-text-span {
color: var(--dark);
opacity: 0.7;
text-decoration: line-through var(--dark);
transform: translateX(4px);
opacity: 0.6;
}
.neo-checkbox-label input[type="checkbox"]:checked+.checkbox-text-span::after {
animation: firework 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards 0.15s;
.neo-checkbox-label input[type="checkbox"]:checked~.checkbox-content .checkbox-text-span::before {
transform: scaleX(1);
transform-origin: left;
transition: transform 0.4s cubic-bezier(0.77, 0, .18, 1) 0.1s;
}
.neo-checkbox-label input[type="checkbox"]:checked~.checkbox-content .checkbox-text-span::after {
animation: firework-refined 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards 0.2s;
}
.neo-completed-static {
color: var(--dark);
opacity: 0.7;
text-decoration: line-through var(--dark);
opacity: 0.6;
position: relative;
}
@keyframes check-01 {
0% {
width: 4px;
top: auto;
transform: rotate(0);
/* Static strikethrough for items loaded as complete */
.neo-completed-static::before {
content: '';
position: absolute;
top: 50%;
left: -0.1em;
right: -0.1em;
height: 2px;
background: var(--dark);
transform: scaleX(1);
transform-origin: left;
}
50% {
width: 0px;
top: auto;
transform: rotate(0);
}
51% {
width: 0px;
top: 8px;
transform: rotate(45deg);
}
100% {
width: 6px;
top: 8px;
transform: rotate(45deg);
}
}
@keyframes check-02 {
0% {
width: 4px;
top: auto;
transform: rotate(0);
}
50% {
width: 0px;
top: auto;
transform: rotate(0);
}
51% {
width: 0px;
top: 8px;
transform: rotate(-45deg);
}
100% {
width: 11px;
top: 8px;
transform: rotate(-45deg);
}
}
@keyframes firework {
0% {
@keyframes firework-refined {
from {
opacity: 1;
transform: translate(-50%, -50%) scale(0.5);
box-shadow:
0 0 0 0 var(--accent),
0 0 0 0 var(--accent),
0 0 0 0 var(--accent),
0 0 0 0 var(--accent),
0 0 0 0 var(--accent),
0 0 0 0 var(--accent);
box-shadow: 0 0 0 0 var(--accent), 0 0 0 0 var(--accent), 0 0 0 0 var(--accent), 0 0 0 0 var(--accent), 0 0 0 0 var(--accent), 0 0 0 0 var(--accent), 0 0 0 0 var(--accent), 0 0 0 0 var(--accent);
}
50% {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
100% {
to {
opacity: 0;
transform: translate(-50%, -50%) scale(1.2);
box-shadow:
0 -15px 0 0 var(--accent),
14px -8px 0 0 var(--accent),
14px 8px 0 0 var(--accent),
0 15px 0 0 var(--accent),
-14px 8px 0 0 var(--accent),
-14px -8px 0 0 var(--accent);
transform: translate(-50%, -50%) scale(2);
box-shadow: 0 -20px 0 0 var(--accent), 20px 0px 0 0 var(--accent), 0 20px 0 0 var(--accent), -20px 0px 0 0 var(--accent), 14px -14px 0 0 var(--accent), 14px 14px 0 0 var(--accent), -14px 14px 0 0 var(--accent), -14px -14px 0 0 var(--accent);
}
}

37
fe/src/stores/groupStore.ts Normal file
View File

@ -0,0 +1,37 @@
import { defineStore } from 'pinia';
import { groupService, type Group } from '@/services/groupService';
export const useGroupStore = defineStore('group', {
state: () => ({
groups: [] as Group[],
isLoading: false,
error: null as Error | null,
}),
actions: {
async fetchGroups() {
// Small cache implemented to prevent re-fetching on every mount
if (this.groups.length > 0) {
return;
}
this.isLoading = true;
this.error = null;
try {
this.groups = await groupService.getUserGroups();
} catch (error) {
this.error = error as Error;
console.error('Failed to fetch groups:', error);
} finally {
this.isLoading = false;
}
},
},
getters: {
groupCount: (state) => state.groups.length,
firstGroupId: (state): number | null => {
if (state.groups.length === 1) {
return state.groups[0].id;
}
return null;
}
}
});