This page explains how the app models and surfaces a user's overall wealth, including assets, liabilities, and insurance, and how the wealth dashboard connects to lower-level detail pages and API services.
The Wealth Dashboard aggregates portfolio data and exposes navigation into detailed sections:
Core entrypoints:
src/pages/WealthDashboard/index.jsx.src/components/WealthDashboardHeader/index.jsx.src/pages/AssetsDetailPage/index.tsx and components/*.src/pages/LiabilitiesDetailPage/index.tsx and components/*.src/pages/InsuranceDetailPage/index.tsx.src/services/wealthApiService.js and src/lib/wealth/types.ts.The wealth dashboard dispatches to the detail pages for deeper workflows, and all of them depend on the shared wealth API service for data loading and mutations.
Assets represent positive-value holdings such as mutual funds, stocks, fixed deposits, and NPS accounts.
Key components:
AssetRow.tsx — renders a single asset row with key metrics and next steps.AddAssetModal.tsx / EditAssetModal.tsx — modals for adding and editing assets.AddTransactionForm.tsx, InvestmentTransactionTable.tsx, and related components — capture and display asset transactions.NpsAccountRow.tsx and other typed rows — specialized rendering for certain asset types.Behavior highlights:
src/lib/wealth/types.ts to ensure consistent fields across the dashboard.wealthApiService.js, which centralizes API requests and invalidation keys.Liabilities include all obligations such as home loans, personal loans, and credit card debt.
Key components:
LiabilitiesDetailPage/index.tsx — orchestrates the liabilities list, filters, and summary.LiabilityRow.tsx — shows individual liability details and key actions (e.g., view EMI schedule, mark as paid on credit cards).SubtitleRow.tsx and TypeBadge.tsx — provide secondary context like next EMI date and liability type.MarkPaidModal.tsx and PaymentHistoryTable.tsx — handle payment flows and history views.CCSpendingHistory.tsx — captures credit-card-specific views.Behavior highlights:
LiabilityRow.tsx links into the EMI Schedule Calculator, preloading schedule parameters from the loan so users see the correct next EMI date and amount.MarkPaidModal.tsx interacts with wealthApiService.js to update server state and trigger store invalidation via src/store/invalidation.js.Insurance is surfaced as a dedicated tab and detail page within the wealth area; deeper behavior is described in Insurance Domain.
Within the wealth domain, it is important to note that:
src/pages/InsuranceDetailPage/index.tsx.InsuranceRow.tsx uses live values from the API for the current sum assured/insured declared value (IDV), rather than any stale parsed value from uploads.wealthApiService.js and invalidation patterns as assets and liabilities.All wealth-related views rely on a shared API layer:
src/services/wealthApiService.js defines functions to fetch and mutate assets, liabilities, and insurance policies.src/store/invalidation.js tracks which cached slices need to be refreshed when certain actions occur.WealthDashboardHeader and FreshnessLabel.tsx) so users know when data was last synced.When adding new wealth features:
src/lib/wealth/types.ts instead of inventing ad-hoc shapes.wealthApiService.js and ensure appropriate invalidation keys are wired up.AssetRow, LiabilityRow, and/or InsuranceRow to keep the dashboard summaries and detail pages consistent.