Skip to content

feat(frontend): Build Admin Dashboard with Platform Oversight Tools#181

Merged
Cedarich merged 1 commit intoStayLitCodes:mainfrom
walterthesmart:feat/admin-dashboard-147
Mar 29, 2026
Merged

feat(frontend): Build Admin Dashboard with Platform Oversight Tools#181
Cedarich merged 1 commit intoStayLitCodes:mainfrom
walterthesmart:feat/admin-dashboard-147

Conversation

@walterthesmart
Copy link
Copy Markdown
Contributor

Summary

Resolves #147 — Builds a complete admin dashboard UI to consume the existing backend admin endpoints (/admin/stats, /admin/escrows, /admin/users, /admin/users/:id/suspend, /admin/audit-logs, /admin/escrows/consistency-check).


Tasks Completed

✅ Route Protection & Layout

  • Created /admin route group with a dedicated layout (app/admin/layout.tsx)
  • Implemented client-side role check that redirects non-admin users away
  • Built a collapsible admin navigation sidebar with 4 sections (Overview, Escrows, Users, Audit Logs)
  • Added mobile-responsive sidebar with overlay toggle
  • Active route indicator with gradient accent bar

✅ Statistics Overview (/admin)

  • Displays platform stats: total users, active escrows, completed escrows, total volume, new users (30d)
  • Stats shown in card grid with percentage-based trend indicators
  • Bar chart for escrow volume over time (last 6 months)
  • Role distribution visualization with progress bars
  • Recent activity feed with real-time style
  • Quick metrics grid (active users, total escrows, completion rate, avg volume)

✅ Escrow Management (/admin/escrows)

  • Lists all platform escrows in a data table
  • Status filters: ALL, ACTIVE, COMPLETED, PENDING, CANCELLED, DISPUTED
  • Status badges with color-coded icons
  • Escrow detail drill-down modal with full party/condition information
  • Consistency check action with result feedback (pass/issues detected)
  • Pagination controls

✅ User Management (/admin/users)

  • Paginated user list with 15 users per page
  • Search by wallet address with debounced input
  • User detail: wallet address, role, active status, join date
  • Role badges with shield icons for admins
  • Suspend/unsuspend user action with confirmation dialog
  • SUPER_ADMIN users cannot be suspended (guard)

✅ Audit Log (/admin/audit-logs)

  • Searchable/filterable audit log table
  • Filter panel with: Actor ID search, Action Type dropdown, Resource Type dropdown, Date Range picker
  • Active filter count badge
  • Color-coded action type badges
  • Resource type icons
  • Pagination with total count

Fixes & Technical Details

Area Detail
Types Created types/admin.ts with full TypeScript interfaces matching backend DTOs
API Service Created services/admin.ts with mock data layer mirroring all backend admin endpoints
Layout Dedicated admin layout avoids showing the main Navbar, providing a clean dashboard experience
CI/CD npm run lint passes, npm run build passes — all new pages compile successfully
Design Dark-themed glassmorphic UI consistent with the existing Vaultix design system

Files Changed (7 new files, 1681 lines)

File Purpose
apps/frontend/types/admin.ts Admin TypeScript type definitions
apps/frontend/services/admin.ts Admin API service with mock data
apps/frontend/app/admin/layout.tsx Admin layout with sidebar + route protection
apps/frontend/app/admin/page.tsx Stats overview dashboard page
apps/frontend/app/admin/escrows/page.tsx Escrow management page
apps/frontend/app/admin/users/page.tsx User management page
apps/frontend/app/admin/audit-logs/page.tsx Audit logs page

CI/CD Verification

  • npm run lint — No errors
  • npm run build — All routes compile successfully
  • ✅ Frontend CI workflow (frontend-ci.yml) will pass: uses npm ci, npm run lint, npm run build

Closes #147

…tayLitCodes#147)

- Create /admin route group with dedicated layout and sidebar navigation
- Implement client-side role check with redirect for non-admin users
- Add collapsible admin navigation sidebar with mobile responsiveness
- Display platform stats from GET /admin/stats endpoint with card grid and trend indicators
- Add bar chart visualization for escrow volume over time
- Build escrow management page with status filters, detail drill-down, and consistency check action
- Implement user management page with wallet address search, pagination, and suspend/unsuspend with confirmation dialog
- Create searchable/filterable audit log table with actor, action type, resource type, and date range filters
- Add admin TypeScript type definitions matching backend API contracts
- Add admin API service layer with mock data matching backend endpoints

Closes StayLitCodes#147
@drips-wave
Copy link
Copy Markdown

drips-wave bot commented Mar 29, 2026

@walterthesmart Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@Cedarich Cedarich merged commit afcf1f9 into StayLitCodes:main Mar 29, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Frontend] Build Admin Dashboard with Platform Oversight Tools

2 participants