[FE-15] Build /dashboard page — stats cards, recent documents table, risk distribution chart

[mftee]

Overview

The dashboard is the central landing page after login. It should give users an at-a-glance view of their document portfolio health, recent activity, and any outstanding actions (documents needing verification, documents with high risk scores).

Background

File to create: frontend/app/(protected)/dashboard/page.tsx

Content sections:

Stats row (top):

• Total documents uploaded
• Average risk score (colour-coded: green ≤ 30, yellow 31–60, red > 60)
• Documents pending verification
• Verified documents count

Risk distribution chart:

• A horizontal bar chart showing distribution of documents across PENDING / VERIFIED / FLAGGED / REJECTED statuses
• Use a lightweight charting library (Recharts, already installed, or Chart.js)

Recent documents table:

• Latest 5–10 documents with: name, status badge, risk score, uploaded date, quick-action link to detail page
• "View all" link to /documents

Action items card:

• List of documents with FLAGGED status that have not been reviewed (link to their detail page)

Acceptance Criteria

• Stats fetched from GET /api/documents (calculate counts/averages client-side or use GET /api/admin/stats if available)
• Risk distribution chart renders correctly with real data
• Recent documents table is sortable by date
• Empty state shown when user has no documents (with CTA to upload)
• Dashboard refreshes automatically when a WebSocket documentStatus event is received (FE-06)

[OmniZlatoon]

@OmniZlatoon has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hi, I'm called J.Junior Brown , a full-stack and smart contract engineer building on Stellar. I specialize in designing and shipping scalable, secure systems end-to-end, from Soroban smart contracts to production-ready backend infrastructure and user-facing applications.

I’ve worked on complex architectures involving automated agents, cross-chain logic, and data indexing, focusing on reliability, performance, and clean standards. My approach is very product-driven: I don’t just build contracts, I build complete systems that solve real user problems and can scale in production.

I’m especially interested in infrastructure, security, and automation creating tools and frameworks that make it easier for other developers to build safely and efficiently on Stellar.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @OmniZlatoon to this issue.

[TheShnider]

@TheShnider has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hi. I have reviewed this issue and would like to work on it.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @TheShnider to this issue.

[Codex723]

@Codex723 has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

I would like to work on this issue because I'm ready to build the full dashboard page with colour-coded stats cards, a Recharts risk distribution chart, a sortable recent documents table with status badges, a flagged action items card, empty state handling, and WebSocket-triggered auto-refresh on documentStatus events.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Codex723 to this issue.

[Mikey-222]

@Mikey-222 has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

hey can i work on this

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Mikey-222 to this issue.

[TheWeirdDee]

@TheWeirdDee has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hi, I want to work on this because a well-built dashboard is the first thing users see after login and it sets the tone for the whole product. The scope is clear and I can implement all of it: the stats row with color-coded risk scoring, the Recharts horizontal bar chart, the sortable recent documents table, the flagged action items card, empty states with CTAs, and the WebSocket refresh on documentStatus events.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @TheWeirdDee to this issue.

[mijinummi]

@mijinummi has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hello maintainers I'm a full stack developer experience in building scalable systems I can handle this perfectly if assigned

ℹ️ Repo Maintainers: To accept this application, review their application or assign @mijinummi to this issue.

[grantfox-oss]

🦊 GrantFox — @mijinummi has been assigned to this issue!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #827)
2. Your PR will be reviewed by the CodeGirlsInc maintainers

Good luck! Track your progress on GrantFox.

[drips-wave]

Congratulations, @mijinummi! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 30, 2026.

🧑‍💻 @mijinummi: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊