PR 9 — Dashboard: /links/[id] detail page

[0xdevcollins]

Why

After PR #144 ships, clicking a link in the list goes nowhere. Detail page is where merchants see the QR code, get the shareable URL, watch conversion stats, and deactivate. Standard CRUD completion.

Depends on: #144 (PR 8 — the list page that links here).

Scope

One page at `apps/dashboard/src/app/(dashboard)/links/[id]/page.tsx`.

API endpoints (already shipped)

Verb	Path	Returns
GET	`/v1/payment-links/:id`	The full `PaymentLink` object
GET	`/v1/payment-links/:id/stats`	`{ linkId, totalViews, totalPayments, conversionRate, totalRevenue, currency }`
DELETE	`/v1/payment-links/:id`	Deactivates (sets `active=false`)

What to build

Three vertical sections + a sidebar.

Hero card

• Big mono `lnk_…` ID
• Status badge (reuse `LinkStatusBadge`)
• Big amount + currency, or "Open amount"
• Description below
• Two CTAs side-by-side: "Copy URL" (with toast), "Download QR" (the qrCodeUrl is a data:url — trigger a download)

Stats strip (calls /stats)

• Three tiles: Views · Payments · Conversion rate
• Conversion rate gets a sparkline if we add a /stats/timeseries endpoint later (out of scope for this PR — show flat number)
• Total revenue card with the link's currency

Recent payments table (calls /v1/payments?linkId=…)

• Last 10 payments routed through this link
• Columns: created, payer (or "—" if anonymous), amount, method (card/bank/crypto), status badge
• Click a row → /payments/[id] (existing page)
• "View all payments" link at the bottom filtering /payments by this link

Right sidebar

• Created at, updated at (relative time + tooltip with full ISO)
• Single-use vs multi-use chip
• Expiry: "Never" or "Expires Aug 4" with a tooltip showing the full datetime
• Hairline rule, then a destructive "Deactivate link" button (only when status === "active") with a confirm dialog

Files to read first

• `apps/dashboard/src/app/(dashboard)/payments/[id]/page.tsx` — sibling detail page, mirror the layout
• `apps/dashboard/src/components/links/LinkCard.tsx` — already renders much of the same data
• `apps/dashboard/src/components/links/LinkStatusBadge.tsx` — reuse as-is

Acceptance criteria

• `/links/[id]` renders for a valid link the merchant owns
• 404 when the link belongs to a different merchant (API enforces this — page should show a friendly "not found")
• Copy URL button copies + toasts confirmation
• Download QR button triggers a PNG download
• Stats tile renders (zeros if no payments)
• Recent payments table renders or shows empty state
• Deactivate flow: confirm dialog → DELETE → status badge flips to "Deactivated" → button disappears
• Breadcrumb / back link to `/links`
• Loading skeleton matches the existing dashboard skeleton style
• tsc clean, no console errors

Estimated effort

~0.5 day if PR 8's components are in place.

[TheShnider]

@TheShnider has applied to work on this issue as part of the Stellar Wave Program's 5th 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.

[superstarflayce]

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

Hi Maintainer, I'm a developer with great experience, and I'd love to contribute by taking on this issue.

Would you consider assigning me?

Thanks

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

[Ekene001]

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

Hi, i'd like to work on this issue

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

[drips-wave]

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

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