Dashboard page

[ardier16]

Describe the feature

Description:
Implement the main dashboard with overview stats, borrower/lender cards, and recent offers table.

Acceptance Criteria:

• Header component:
  • Logo and app title
  • Account menu (address, balance, disconnect button)
  • Wallet connection status indicator
• General Overview stats row:
  • Total Collateral (LBTC)
  • Borrowings (USDT)
  • Average APR (%)
  • Active Loans (count)
  • Pending Offers (count)
• YOUR BORROWS card:
  • Balance in LBTC with percentage change indicator
  • Stats rows:
    • User Total Locked Collateral
    • Borrowings (USDT)
    • # of active loans
    • Pending offers
    • To Repay (count)
  • "Repayment Due Soon" alert banner (if any loans near expiry)
  • Borrow CTA button (→ Create Offer modal)
• YOUR SUPPLY card:
  • Balance in USDT with percentage change indicator
  • Stats rows:
    • Supplied Loans (count)
    • Interest Outstanding (USDT)
    • # of Active Loans
    • Repaid to be Claimed (count)
  • "Repayment Available" alert banner (if claims pending)
  • Supply CTA button (→ Pending Offers table/modal)
• Offers/Loans table:
  • Columns: Collateral (LBTC), Loan Amount (USDT), Earn (USDT), APR (%), Term Left, Status
  • Sortable by column
  • Pagination (10 per page)
  • Status badges (yellow for Pending)
  • Row click → offer detail modal (future enhancement)
• Data loaded from:
  • useOffers() — recent offers
  • useOffersByScript() — filter lender's active supply
  • useOffersByBorrowerPubkey() — filter borrower's pending offers
  • useBlockHeight() — calculate term left
  • useAddressUtxos() — borrower/lender balances
• Loading states with skeleton cards
• Error states with retry button
• Manual test: Visual matches Figma Dashboard screenshot, data flows correctly

Notes:

• Stats calculation: diff vs previous block height or 24h baseline
• Refresh data every 30s or on manual refresh button
• All amounts formatted with 2–8 decimal places per asset