MONIVO USER FLOW

Monivo Frontend Flow (Authentication and Data Pipeline)

Tech stack (frontend)
- Expo Router (app directory), React Native, React Context
- AsyncStorage for tokens/user data
- Fetch-based API wrapper (services/apiService.ts)
- Environment-driven config (config/environment.ts), persisted user id (config/userconfig.ts)

1) Authentication flow (from app start to end-user UI)
- Root composition (app/_layout.tsx):
  - Wraps app with ThemeProvider, AuthProvider, UserProvider, then AuthGuard around the navigation Stack/Tabs.

- AuthGuard (components/auth/AuthGuard.tsx):
  - While auth state is loading → shows LoadingScreen.
  - If not authenticated → shows WelcomeScreen.
  - If authenticated → renders the protected tabs UI.

- Welcome/login (components/auth/WelcomeScreen.tsx):
  - Presents a Google-like flow where the user selects an account (mocked list).
  - On account selection: calls setDefaultUserId(<chosenId>) → stores in AsyncStorage.
  - Then calls login().

- AuthProvider (components/auth/AuthProvider.tsx):
  - checkAuthStatus():
    - Reads token via authService.getAuthToken(). If missing → unauthenticated.
    - If token exists → authService.initialize() sets the Authorization header on apiService.
    - Loads user from storage; if found → authenticated; else tries refreshToken() and finally clears storage if still invalid.
  - login():
    - Uses Config.DEFAULT_USER_ID (or the id set by WelcomeScreen via setDefaultUserId) to fetch real user data from backend with userService.getUserById.
    - Stores a dev access token + refresh token + user in AsyncStorage under @monivo/* keys.
    - Sets isAuthenticated = true and exposes user in context.
  - logout(): clears all auth data via authService.clearAuthData() and resets context state.

- Storage keys (services/storageService.ts):
  - @monivo/auth_token, @monivo/refresh_token, @monivo/user_data

- User id resolution (config/userconfig.ts):
  - getUserId(): returns the stored DEFAULT_USER_ID from AsyncStorage if available; otherwise falls back to Config.DEFAULT_USER_ID.
  - setDefaultUserId(id): persists the chosen id for subsequent API calls.

2) Data fetching pipeline (from API to UI)
- Environment/config (config/environment.ts):
  - Supplies API_BASE_URL, API_VERSION, DEFAULT_USER_ID.
  - getFullApiUrl() used by apiService to build URLs; isDevelopment() logs configured values.

- API service (services/apiService.ts):
  - Central fetch wrapper with default JSON headers and optional Authorization.
  - Provides generic get/post/put/patch/delete and uploadFile.
  - Exposes grouped endpoint helpers (authAPI, userAPI, budgetAPI, transactionAPI, categoryAPI) using relative endpoints.

- Domain services (services/*):
  - transactionService:
    - getTransactionsByUserId(userId): fetches from https://monivo-node-api.onrender.com/api/transactions/user/:userId
    - Maps backend records to app Transaction model, including populated category.
    - CRUD routes via apiService for non user-scoped paths when used.
  - budgetService:
    - getBudgetsByUserId(userId): fetches from https://monivo-node-api.onrender.com/api/budgets/user/:userId
    - Maps budgets and optionally populated category; also exposes CRUD via apiService.
  - categoryService:
    - getCategoriesByUserId(userId): fetches from https://monivo-node-api.onrender.com/api/categories/user/:userId and maps to Category model; CRUD via apiService.
  - dashboardService:
    - Aggregates data by calling the above 3 services in parallel.
    - Computes financialSummary (income, expenses, budget, savings), recentTransactions, categoryBreakdown, and monthlyTrends.

- Hooks (client-side shape + state):
  - use-transaction-data.tsx:
    - Resolves userId via getUserId(), fetches transactions by user, sorts by date, computes totals, exposes { transactions, summary, loading, error, refetch }.
  - use-budget-data.tsx:
    - Resolves userId via getUserId(), fetches budgets + transactions by user.
    - Builds per-category spend (by month-year) and monthly summary; exposes { budgets, summary, loading, error, refetch }.

3) Data display (screens and components)
- Tabs layout (app/(tabs)/_layout.tsx): sets themed headers and defines the 4 tabs (overview, transaction, budget, profile).

- Overview screen (app/(tabs)/overview/index.tsx):
  - Loads userId via getUserId() and calls dashboardService.getDashboardData(userId).
  - Sets state for financialSummary, recentTransactions, spendingTrends.
  - Renders OverviewCard totals, SpendingTrendsChart, and RecentTransactionsCard.

- Transactions screen (app/(tabs)/transaction/index.tsx):
  - Uses use-transaction-data to load/transform transactions and summary.
  - Supports search and type filtering; shows list and TransactionDetailsModal.
  - Uses useFocusEffect to refetch on screen focus.

- Budgets UI (example: app/modals/EditBudgetModal.tsx):
  - Builds UpdateBudgetRequest with amount, month, year, and userId from getUserId() or Config.DEFAULT_USER_ID.
  - Calls budgetService.updateBudget(budget.id, payload), then triggers onBudgetEdited() and onClose().
  - Note: current code calls onClose both in try and in finally when onClose exists; ensure your parent handler tolerates being called twice or adjust modal logic.

4) End-to-end flow summary
1. App starts → AuthGuard checks tokens:
   - If no valid token/user → WelcomeScreen is shown.
   - User selects an account → setDefaultUserId(id) → login() fetches user and stores tokens → authenticated.
2. Tabs render; each screen resolves userId via getUserId() (or env fallback).
3. Services fetch user-scoped resources (transactions, budgets, categories) and map to UI models.
4. Hooks/screens transform data (sorting, aggregations), maintain loading/error state.
5. Components render cards/lists/charts. CRUD actions call services and then refetch or update local state.