Skip to main content

Dashboard

The OneLibro dashboard provides a comprehensive overview of your financial health at a glance. View your total balance, track monthly spending, monitor recent transactions, and visualize spending trends—all in one beautifully designed interface.

Overview​

The dashboard is the central hub of OneLibro, displaying:

  • Total balance across all connected accounts
  • Monthly spending (last 30 days)
  • Number of connected accounts
  • Spending chart visualizing daily expenses over 30 days
  • Recent transactions (last 10 transactions)
  • Quick actions to connect banks or view all transactions

The dashboard automatically refreshes data using SWR (stale-while-revalidate) for real-time updates without manual reloading.

Accessing the Dashboard​

  1. Log in to OneLibro
  2. Dashboard is the default landing page after login
  3. Or click "Dashboard" in the main navigation

URL​

/finance/dashboard

Dashboard Layout​

The dashboard consists of several key sections:

1. Stats Cards (Top Row)​

Three key metrics displayed as cards:

  • Total Balance
  • Monthly Spending
  • Connected Accounts

2. Spending Chart (Middle Section)​

Line/bar chart showing daily spending over the last 30 days

3. Recent Transactions (Bottom Section)​

Table/list of most recent 10 transactions with "View All" link

Stats Cards​

Total Balance Card​

What It Shows:

  • Sum of current balances across all connected accounts
  • Includes checking, savings, credit, and other account types

Card Details:

  • Icon: Dollar sign ($) in green circle
  • Label: "Total Balance" (small text, uppercase)
  • Amount: Large, bold display (e.g., "$12,543.67")
  • Subtitle: "Across all accounts" with trending-up icon

Calculation:

const totalBalance = accounts.reduce((sum, account) => {
  return sum + (account.current_balance || 0);
}, 0);

Example:

  • Checking: $3,500.00
  • Savings: $10,000.00
  • Credit Card: -$450.00 (debt shown as negative)
  • Total: $13,050.00
Credit Cards

Credit card balances are negative (debt). They reduce your total balance. If you owe $500 on a credit card, it shows as -$500.

Monthly Spending Card​

What It Shows:

  • Total expenses in the last 30 days
  • Only counts expenses (positive amounts), not income

Card Details:

  • Icon: Trending down arrow in green circle
  • Label: "Monthly Spending" (small text, uppercase)
  • Amount: Large, bold display (e.g., "$2,456.18")
  • Subtitle: "Last 30 days" with trending-down icon

Calculation:

const monthlySpending = transactions
  .filter((tx) => {
    const txDate = new Date(tx.transaction_date);
    const thirtyDaysAgo = new Date();
    thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);

    return txDate >= thirtyDaysAgo && tx.amount > 0; // Positive = expense
  })
  .reduce((sum, tx) => sum + tx.amount, 0);

Use Cases:

  • Compare to monthly budget
  • Track spending trends month-to-month
  • Identify high-spending months
  • Plan future budgets

Connected Accounts Card​

What It Shows:

  • Number of bank accounts connected via Plaid
  • Total count across all institutions

Card Details:

  • Icon: Building (bank) in green circle
  • Label: "Connected Accounts" (small text, uppercase)
  • Count: Large number display (e.g., "5")
  • Subtitle: "N banks linked" (singular "bank" if 1 account)

Example:

  • 2 checking accounts
  • 1 savings account
  • 2 credit cards
  • Total: 5 accounts

Quick Action:

  • Click anywhere on card → Navigate to Accounts page

Spending Chart​

Overview​

The spending chart visualizes your daily spending over the last 30 days as a line or bar chart.

Chart Details:

  • Title: "Spending Over Time (Last 30 Days)"
  • X-Axis: Dates (e.g., "Jan 15", "Jan 16")
  • Y-Axis: Amount spent (currency formatted)
  • Data Points: 30 days of spending
  • Chart Type: Bar chart (using Recharts library)
  • Color: Green bars matching OneLibro theme

Chart Data Generation​

How Data is Calculated:

  1. Generate 30 date buckets (one per day)
  2. For each day, sum all expense transactions
  3. Plot amount spent on Y-axis, date on X-axis

Code Example:

const chartData = [];

for (let i = 29; i >= 0; i--) {
  const date = new Date();
  date.setDate(date.getDate() - i);
  const dateStr = date.toLocaleDateString('en-US', {
    month: 'short',
    day: 'numeric',
  });

  // Calculate spending for this day
  const daySpending = transactions
    .filter((tx) => {
      const txDate = new Date(tx.transaction_date);
      return (
        txDate.toDateString() === date.toDateString() &&
        tx.amount > 0 // Expenses only
      );
    })
    .reduce((sum, tx) => sum + tx.amount, 0);

  chartData.push({
    date: dateStr,
    amount: daySpending,
  });
}

Chart Insights​

Spending Patterns:

  • Spike days: Large expenses (e.g., rent, car payment)
  • Flat periods: Days with no spending
  • Consistent spending: Daily expenses (groceries, gas, food)
  • Weekend patterns: Higher spending on Saturdays/Sundays

Use Cases:

  • Identify spending spikes
  • Spot unusual spending days
  • Compare weekly spending patterns
  • Track progress toward budget goals

Chart Interactivity​

Features:

  • Hover over bars to see exact amount
  • Tooltip shows date and amount
  • Responsive design adjusts for mobile
  • Auto-scales Y-axis based on spending range

Mobile View:

  • Scrollable chart on small screens
  • Touch-friendly tooltips
  • Simplified axis labels

Recent Transactions​

Overview​

The Recent Transactions widget displays the 10 most recent transactions for quick visibility.

Widget Details:

  • Title: "Recent Transactions"
  • Transaction Count: Up to 10 most recent
  • Sort Order: Newest first (by transaction date)
  • View: Table on desktop, cards on mobile

Transaction Display​

Desktop (Table View):

DateMerchantCategoryAmountStatus
Jan 20StarbucksFood & Drink-$5.47Posted
Jan 19AmazonShopping-$32.15Pending

Mobile (Card View):

  • Merchant name (bold)
  • Date and category
  • Amount (large, color-coded)
  • Status badge

Transaction Details​

Each Transaction Shows:

  • Date: Formatted as "MMM DD" (e.g., "Jan 20")
  • Merchant: Business name
  • Category: Transaction category badge
  • Amount: Color-coded (red for expenses, green for income)
  • Status: Pending (yellow) or Posted (green)

Color Coding:

  • Red amount: Expense (money spent)
  • Green amount: Income (money received)
  • Yellow badge: Pending transaction
  • Green badge: Posted transaction

View All Transactions​

Call-to-Action:

  • "View All" link at bottom of widget
  • Arrow icon indicating navigation
  • Clicking navigates to /finance/transactions page

Empty State (New Users)​

When Displayed​

The empty state appears when:

  • User has no connected bank accounts
  • First time visiting dashboard after signup

Empty State Content​

Display:

  • Large bank building icon (green)
  • Heading: "Welcome to OneLibro!"
  • Message: "Connect your bank account to start tracking your finances. Your data is secure and encrypted end-to-end."
  • Large "Connect Your First Bank Account" button

Button Action:

  • Clicking opens Plaid Link modal
  • After successful connection, dashboard loads with data

Loading State​

Loading Skeleton​

While data is being fetched, the dashboard shows loading skeletons:

Skeleton Elements:

  • 3 stat card skeletons (animated pulse)
  • Spending chart skeleton
  • Recent transactions skeleton

Loading Duration:

  • Typically 1-2 seconds on first load
  • Instant on subsequent visits (thanks to SWR caching)

Skeleton Animation:

  • Pulsing gray rectangles
  • Matches layout of actual cards
  • Smooth transition when data loads

Error State​

When Errors Occur​

Errors are displayed if:

  • Network connection fails
  • API returns error
  • Authentication expires
  • Database query fails

Error Display​

Error Banner:

  • Red background with alert icon
  • Heading: "Error Loading Dashboard"
  • Message: "Failed to load dashboard data. Please try again."
  • "Retry" button to reload data

Error Handling:

  • Banner appears at top of page
  • Existing data (if any) remains visible
  • Click "Retry" to attempt reload
  • If error persists, user should check connection or contact support

Data Refresh​

Automatic Refresh (SWR)​

OneLibro uses SWR (stale-while-revalidate) for smart data fetching:

How It Works:

  1. Show cached data immediately (stale)
  2. Fetch fresh data in background (revalidate)
  3. Update UI when fresh data arrives

Benefits:

  • Instant page loads
  • Always up-to-date data
  • Automatic error recovery
  • Background updates without user action

Manual Refresh​

Refresh Triggers:

  • Connecting a new bank account
  • Syncing transactions from Accounts page
  • Navigating back to dashboard
  • Browser tab regains focus

How to Manually Refresh:

  1. Navigate away from dashboard and back
  2. Or hard refresh browser (Ctrl+R / Cmd+R)
  3. Or sync transactions from Accounts page

Responsive Design​

Desktop (1024px+)​

  • Stats Cards: 3-column grid, side-by-side
  • Chart: Full width, tall height
  • Transactions: Table view with all columns visible
  • Spacing: Generous padding and gaps

Tablet (768px - 1024px)​

  • Stats Cards: 3-column grid, slightly compressed
  • Chart: Full width, medium height
  • Transactions: Table view or hybrid card/table
  • Spacing: Moderate padding

Mobile (<768px)​

  • Stats Cards: Single column stack
  • Chart: Scrollable if too wide
  • Transactions: Card view, full width
  • Spacing: Compact for scrolling

Performance Considerations​

Optimizations​

Memoization:

  • Total balance calculation memoized
  • Monthly spending calculation memoized
  • Chart data generation memoized
  • Prevents unnecessary re-calculations

Code Example:

const totalBalance = useMemo(() => {
  return accounts.reduce((sum, account) => {
    return sum + (account.current_balance || 0);
  }, 0);
}, [accounts]); // Only recalculates when accounts change

SWR Caching:

  • Data fetched once and cached
  • Subsequent visits load instantly from cache
  • Background revalidation ensures freshness

Large Dataset Handling​

Transaction Limit:

  • Dashboard fetches last 50 transactions
  • Only displays 10 in widget
  • Full list available on Transactions page

Chart Performance:

  • 30 data points max (one per day)
  • Lightweight Recharts library
  • Renders smoothly even on slow devices

Use Cases​

Daily Quick Check (2 minutes)​

  1. Open dashboard
  2. Check total balance
  3. Scan recent transactions for unusual activity
  4. Verify monthly spending is on track

Frequency: Every morning or evening

Weekly Financial Review (10 minutes)​

  1. Review spending chart for the week
  2. Identify high-spending days
  3. Check if on track for monthly budget
  4. Plan adjustments for next week

Frequency: Sunday evening

Monthly Budget Analysis (30 minutes)​

  1. Review monthly spending total
  2. Compare to budget goals
  3. Analyze spending chart for trends
  4. Export transactions for detailed analysis

Frequency: Last day of each month

Account Health Monitor​

  1. Check total balance trend (increasing/decreasing?)
  2. Review connected accounts count
  3. Ensure all accounts are synced
  4. Verify no unauthorized transactions

Frequency: Weekly or as needed

API and Data Flow​

Data Sources​

Dashboard Data:

  • Accounts: Fetched from getUserAccounts(userId)
  • Transactions: Fetched from getUserTransactions(userId, options)

Query Parameters:

// Accounts: All accounts for user
const accounts = await getUserAccounts(userId);

// Transactions: Last 30 days, limit 50
const transactions = await getUserTransactions(userId, {
  startDate: thirtyDaysAgo,
  limit: 50,
});

SWR Configuration​

Hooks Used:

  • useAccounts(userId) - Fetches and caches accounts
  • useTransactions(userId, options) - Fetches and caches transactions

SWR Features:

  • Automatic revalidation on focus
  • Automatic retry on error
  • Deduplicate requests
  • Optimistic updates

Customization (Future)​

Potential dashboard customizations in future versions:

Widget Preferences:

  • Show/hide specific cards
  • Reorder dashboard sections
  • Choose chart type (line, bar, area)
  • Set custom date ranges

Theme Options:

  • Light/dark mode toggle
  • Custom color schemes
  • Compact vs spacious layout

Data Filters:

  • Filter by account type
  • Filter by category
  • Custom date ranges for charts

Troubleshooting​

Dashboard Not Loading​

Possible Causes:

  1. No internet connection
  2. Authentication expired
  3. API server down
  4. Browser cache issue

Solutions:

  • Check internet connection
  • Log out and log back in
  • Hard refresh browser (Ctrl+Shift+R)
  • Clear browser cache
  • Try different browser

Stats Cards Show $0.00​

Possible Causes:

  1. No accounts connected yet
  2. All account balances are actually zero
  3. Accounts not synced
  4. Recent bank connection still processing

Solutions:

  • Connect a bank account if none connected
  • Wait 1-2 minutes after connecting for initial sync
  • Go to Accounts page and manually sync
  • Refresh dashboard

Spending Chart is Empty​

Possible Causes:

  1. No transactions in last 30 days
  2. Transactions haven't synced yet
  3. Only income transactions (no expenses)

Solutions:

  • Wait for transactions to sync (can take 5-10 minutes after connecting)
  • Manually sync from Accounts page
  • Add manual transactions if needed
  • Check Transactions page to verify data exists

Recent Transactions Shows "No transactions"​

Possible Causes:

  1. Account just connected, initial sync in progress
  2. No transactions in database
  3. Transactions failed to sync

Solutions:

  • Wait 5-10 minutes for initial sync
  • Manually sync accounts
  • Check Accounts page for sync errors
  • Add manual transactions to test

Best Practices​

Dashboard Habits​

Morning Routine (1 minute):

  • Check total balance
  • Scan recent transactions
  • Identify any unusual activity

End of Day (2 minutes):

  • Review day's spending in chart
  • Verify pending transactions cleared
  • Plan tomorrow's expenses

Weekly Review (10 minutes):

  • Analyze spending chart trends
  • Compare to budget goals
  • Identify areas to cut spending
  • Plan week ahead

Using Chart Insights​

Identify Patterns:

  • High spending days: Usually rent/bills
  • Flat days: Weekdays with packed lunch
  • Weekend spikes: Dining out, shopping

Take Action:

  • If spending trending up, review budgets
  • If spike days, verify large purchases
  • If consistent overspending, adjust budgets

Transaction Monitoring​

Red Flags to Watch For:

  • Unfamiliar merchant names
  • Duplicate charges
  • Higher-than-expected amounts
  • Transactions in wrong locations

Quick Actions:

  • Click "View All" to investigate
  • Search merchant name in Transactions page
  • Contact bank if suspicious
  • Dispute unauthorized charges

Summary​

The OneLibro dashboard provides:

  • ✅ Real-time financial overview
  • ✅ Total balance across all accounts
  • ✅ Monthly spending tracking (30 days)
  • ✅ Visual spending chart
  • ✅ Recent transactions widget
  • ✅ SWR-powered automatic updates
  • ✅ Responsive design (desktop, tablet, mobile)
  • ✅ Loading and error states
  • ✅ Empty state for new users

The dashboard is designed for daily use—open it each morning to stay on top of your finances and make informed spending decisions throughout the day!