[FE-18] Build /documents/:id detail page — risk summary, flag cards, status timeline

[mftee]

Overview

The document detail page is the most information-dense page in the app. It shows everything about a single document: its current status, its risk analysis results broken down by flag, and the verification history. It is the page users return to after receiving a risk alert email.

Background

File to create: frontend/app/(protected)/documents/[id]/page.tsx

Sections:

Header:

• Document name, upload date, file hash (truncated), status badge

Risk panel:

• Circular gauge showing the overall risk score (0–100) — colour-coded (see FE-19)
• Flag breakdown: for each of the 6 risk flags, show name, weight, whether it was detected (✓/✗), and its contribution to the total score

Status timeline:

• Vertical timeline: PENDING → ANALYZING → VERIFIED/FLAGGED/REJECTED
• Current step highlighted; completed steps checked

Actions:

• "Verify on Stellar" button (only if status is PENDING or FLAGGED)
• "Download Report" button → /documents/:id/report
• "File Dispute" button
• "Share" button → opens share modal

Acceptance Criteria

• Page fetches data from GET /api/documents/:id and GET /api/documents/:id/risk
• Status updates in real time via the WebSocket hook (FE-06) without page refresh
• "Verify on Stellar" calls POST /api/documents/:id/verify and updates the UI on success
• Flag cards show the correct detected/not-detected state
• Page shows a skeleton loader while data is fetching

[Gogo-Eng]

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

I would love to work on this issue

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

[Joseph-1-Duro]

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

Hi, I would love to work on your project.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Joseph-1-Duro to this issue.

[Ummi-001]

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

Hi, I am a full stack developer I would really like to contribute on this project, as I clearly understand what is needed to be done.

If available, please assign it to me.
ETA is in 2 hours

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

[AbuTuraab]

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

Hi,

I’d like to request assignment to this issue.

As a full-stack developer working actively in the Stellar ecosystem, I understand how important robust automation is for projects that combine Soroban smart contracts, backend services, and frontend applications. A reliable CI/CD pipeline is the backbone of safe contract development, deterministic builds, and predictable testnet releases.

During the previous waves of contributions, I worked on several Stellar-related repos where I resolved issues such as:
Frontend implementations.
Misconfigured GitHub Actions leading to failing builds
Missing or incomplete Soroban contract test pipelines
Frontend pipelines that didn’t catch build/lint errors
Inefficient caching (Rust, pnpm) that slowed down CI
Incorrect workflow permissions affecting deployment and artifact uploads
These issues helped me develop a strong sense of what healthy CI/CD should look like for blockchain projects.

Relevant Skills
Full-stack expertise with Soroban, Rust, TypeScript, and modern frontend tooling
Strong experience designing and maintaining GitHub Actions workflows
Familiar with contract testing, reproducible builds, and blockchain dev best practices
Experience with pnpm-based frontend CI pipelines (install, lint, type-check, build)
Comfortable implementing secure deployment flows, secret management, and workflow permission hardening
Confident in making pipelines faster and more reliable using smart caching strategies

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

[khaadish]

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

Interested in taking this on. I’ve worked across smart contracts, APIs, and frontend integrations, and I can start immediately.

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

[drips-wave]

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

🧑‍💻 @khaadish: 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 🌊