Issue #44 — Frontend: Invoice Detail Page

[yusuftomilola]

Location: frontend/app/invoices/[id]/page.tsx

Description

Clicking View on any invoice from the invoices list page (Issue #43) should take the member to a full invoice detail page. This page displays a clean, printable view of the invoice — mirroring what is in the PDF — and gives the member the option to download the PDF version directly.

This is a dynamic route. In Next.js App Router, the params object is a Promise and must be awaited before accessing route parameters.

Acceptance Criteria

• The page lives at frontend/app/invoices/[id]/page.tsx and is marked "use client"
• The page is wrapped in DashboardLayout
• The id param is extracted by awaiting params (Next.js 15 App Router pattern)
• The invoice is fetched using the useGetInvoice hook from Issue created the subscriptions implementation #42 using the id from the route
• The page displays a formatted invoice card/panel showing:
  • ManageHub name/branding at the top
  • Invoice number and issue date
  • Member name and email (Bill To section)
  • Workspace name, plan type, start and end dates, seat count
  • Total amount in ₦ with a PAID badge
  • Payment date
• A Download PDF button triggers a download via GET /invoices/:id/download — opened as a new tab or anchor download
• A Back to Invoices navigation link returns the member to /invoices
• A loading skeleton is shown while the invoice is fetching; a 404-style message is shown if the invoice is not found
• npx tsc --noEmit passes with no errors