feat(profile): add profile page and transaction history closes #22

[pkakajoseph-png]

Pull Request — User Profile & Transaction History (Closes #22)

Summary

Adds a /profile page for authenticated users showing account metadata and a filterable, paginated transaction history. Includes two new server endpoints (GET /api/profile and GET /api/profile/trades) and a new frontend route.

---

Changes

Server

File	Change
server/src/routes/profile.ts	New — two authenticated routes: profile metadata + paginated trade history
server/src/index.ts	Registers /api/profile router
server/src/types/trade.ts	Adds buyer_id and escrow_tx_hash fields that were present in DB but missing from the type

Frontend

File	Change
frontend/app/profile/layout.tsx	New — nav/footer shell matching the rest of the app, with ThemeToggle
frontend/app/profile/page.tsx	New — full profile page (auth guard, stats, filterable table, pagination)

---

API

GET /api/profile

Auth required. Returns the user's masked phone, registration date, completed trade count, and Stellar public key.

{
  "data": {
    "id": "uuid",
    "maskedPhone": "+234 *** *** 5678",
    "createdAt": "2025-01-15T10:00:00Z",
    "totalTradesCompleted": 4,
    "stellarPublicKey": "GABCD..."
  }
}

GET /api/profile/trades

Auth required. Returns the user's trade history (as seller or buyer).

Query params:

• page — 1-based (default 1)
• limit — items per page (default 10, max 50)
• status — All | Active | Locked | Completed | Cancelled (default All)

{
  "data": [ ...TradeOffer[] ],
  "pagination": { "page": 1, "limit": 10, "total": 23, "totalPages": 3 }
}

---

Frontend Features

Auth guard

useEffect on mount — redirects to /auth/signup?returnTo=/profile if no JWT is present.

Account Details section

Three stat cards: masked phone number, member-since date, trades completed. Stellar public key shown below in a monospace block.

Transaction History section

• Desktop: Full table with columns — Date, Asset, Amount, Role (Seller/Buyer), Counterparty alias, Status badge.
• Mobile: Stacked cards with the same data, shown below sm breakpoint.
• Filter bar: Toggle buttons for All / Completed / Cancelled / Disputed / Active. Resetting the filter resets to page 1.
• Pagination: Previous / Next controls with page X of Y indicator. Hidden when only one page.
• Empty state: Different message for "no trades yet" vs "no matches for filter".
• Error state: Inline error banner with a Retry button.

Dark mode

All new components use dark: Tailwind variants consistent with the rest of the app.

---

Acceptance Criteria Checklist

• /profile displays masked phone, registration date, total completed trades
• Transaction History section with date, asset, amount, counterparty alias, status badge columns
• Paginated (10 per page) with next/previous controls
• Filter control for All / Completed / Cancelled / Disputed
• Auth-guarded — redirects unauthenticated users to /auth/signup
• Data fetched from GET /api/profile and GET /api/profile/trades

---

Testing

1. Visit /profile while unauthenticated — should redirect to /auth/signup?returnTo=/profile.
2. Sign in and visit /profile — stats card shows your masked phone and member date.
3. Create a trade from /sell — it should appear in the history table.
4. Use the filter buttons to narrow results — table updates, page resets to 1.
5. If you have > 10 trades, pagination controls appear and navigate correctly.
6. Toggle dark mode — all elements render with correct contrast.

Related

closes #22

[dark-sarge]

LGTM