Add Optimistic Updates and Offline Mutation Queuing for Expense Creation

[Cjay-Cyber-2]

Description — what to implement and the why/impact.

Users expect instant feedback when recording shared expenses, even on unstable mobile connections. This issue adds optimistic UI updates and mutation queue handling using TanStack React Query (@tanstack/react-query) so that expense creation appears instantly in the UI while syncing reliably with the backend API.

Context & Requirements — background, constraints, design references, edge cases; grounded in the actual repo (real files, stack, conventions).

Leverage @tanstack/react-query cache manipulation features (setQueryData, cancelQueries, onMutate) to update the group expense list optimistically. Handle rollback scenarios if the API call fails, and display appropriate toast notifications using sonner.

Acceptance Criteria — a checklist ("- [ ] ...") of specific, testable conditions that define "done".

• Configure optimistic updates in expense creation mutation hooks.
• Implement rollback logic on mutation failure with descriptive user error feedback via sonner.
• Ensure cache keys match existing query patterns across group views.
• Pass npm run typecheck and npm test.

Implementation Guidance — likely files/modules to touch (use real paths from the repo context) and a suggested approach, without over-prescribing.

• Inspect existing query hooks and API wrapper functions.
• Update mutation hooks in src/hooks/ or component files where expenses are submitted.

Testing & Validation — how the contributor should prove it works (tests to add/run, manual checks, screenshots for UI).

• Test optimistic rendering by simulating network latency.
• Run existing test suites to ensure no regressions.

Submission Guidelines — must open a PR that includes "Closes #"; assignment is required before starting; follow the repo's existing style and conventions.

---

Wave complexity: Medium

[Ranjeet2063]

Hi everyone,

I would love to take this on. My planned approach:

• Build Add Optimistic Updates and Offline Mutation Queuing for Expense Creation with modular React/Next.js components, responsive styling, and proper loading/error states.
• Include component tests and verify clean production build with zero TypeScript/lint issues.

Looking forward to contributing—please feel free to assign!