@seedgrid/fe-billing-user 2026.7.0

package/dist/server/create-billing-user-server.d.ts

@@ -0,0 +1,34 @@
+import type { SecurityServer } from "@seedgrid/fe-security";
+import type { BillingInvoiceEnvelope, CancelScheduledChangeResponse, CancelSubscriptionResponse, ChangePlanRequest, ChangePlanResponse, ChangePreviewResponse, CheckoutRequest, CheckoutSessionResponse, PlansCatalogResponse, PortalSessionResponse, ReactivateSubscriptionResponse, SubscriptionResponse, UpcomingInvoiceResponse, UsageStatementResponse, UsageSummaryResponse } from "../billing";
+export interface BillingUserServer {
+    /** Assinatura corrente (null se não houver). */
+    getSubscription(): Promise<SubscriptionResponse | null>;
+    /** Catálogo de planos assináveis. */
+    listPlans(): Promise<PlansCatalogResponse>;
+    /** Resumo de uso do ciclo (null se sem assinatura). */
+    getUsageSummary(): Promise<UsageSummaryResponse | null>;
+    /** Extrato detalhado de uso. Requer permissão STATEMENT_READ (403 sem ela). */
+    getUsageStatement(): Promise<UsageStatementResponse | null>;
+    /** Cria sessão de checkout (1ª assinatura) — devolve checkoutUrl pra redirecionar. */
+    createCheckout(req: CheckoutRequest): Promise<CheckoutSessionResponse>;
+    /** Cria sessão do customer portal — devolve portalUrl pra redirecionar. Sem payload. */
+    openPortal(): Promise<PortalSessionResponse>;
+    /** Troca o plano de uma assinatura já ATIVA (upgrade imediato ou downgrade agendado). */
+    changePlan(req: ChangePlanRequest): Promise<ChangePlanResponse>;
+    /** Cancela uma troca de plano (downgrade) agendada. Idempotente. */
+    cancelScheduledChange(): Promise<CancelScheduledChangeResponse>;
+    /** Agenda cancelamento da assinatura ao fim do ciclo vigente. */
+    cancelSubscription(): Promise<CancelSubscriptionResponse>;
+    /** Reverte um cancelamento agendado (enquanto ainda vigente). */
+    reactivateSubscription(): Promise<ReactivateSubscriptionResponse>;
+    /** Extrato de faturas do provedor, mais recentes primeiro. */
+    listInvoices(limit?: number): Promise<BillingInvoiceEnvelope>;
+    /** Prévia da próxima fatura (null se não houver, ex.: cancelada). */
+    getUpcomingInvoice(): Promise<{
+        upcoming: UpcomingInvoiceResponse | null;
+    }>;
+    /** Prévia do impacto (rateio) de uma troca de plano antes de confirmar. */
+    getChangePreview(planId: string): Promise<ChangePreviewResponse>;
+}
+export declare function createBillingUserServer(session: SecurityServer): BillingUserServer;
+//# sourceMappingURL=create-billing-user-server.d.ts.map

package/dist/server/create-billing-user-server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-billing-user-server.d.ts","sourceRoot":"","sources":["../../src/server/create-billing-user-server.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,KAAK,EACV,sBAAsB,EACtB,6BAA6B,EAC7B,0BAA0B,EAC1B,iBAAiB,EACjB,kBAAkB,EAClB,qBAAqB,EACrB,eAAe,EACf,uBAAuB,EACvB,oBAAoB,EACpB,qBAAqB,EACrB,8BAA8B,EAC9B,oBAAoB,EACpB,uBAAuB,EACvB,sBAAsB,EACtB,oBAAoB,EACrB,MAAM,YAAY,CAAC;AAEpB,MAAM,WAAW,iBAAiB;IAChC,gDAAgD;IAChD,eAAe,IAAI,OAAO,CAAC,oBAAoB,GAAG,IAAI,CAAC,CAAC;IACxD,qCAAqC;IACrC,SAAS,IAAI,OAAO,CAAC,oBAAoB,CAAC,CAAC;IAC3C,uDAAuD;IACvD,eAAe,IAAI,OAAO,CAAC,oBAAoB,GAAG,IAAI,CAAC,CAAC;IACxD,+EAA+E;IAC/E,iBAAiB,IAAI,OAAO,CAAC,sBAAsB,GAAG,IAAI,CAAC,CAAC;IAC5D,sFAAsF;IACtF,cAAc,CAAC,GAAG,EAAE,eAAe,GAAG,OAAO,CAAC,uBAAuB,CAAC,CAAC;IACvE,wFAAwF;IACxF,UAAU,IAAI,OAAO,CAAC,qBAAqB,CAAC,CAAC;IAC7C,yFAAyF;IACzF,UAAU,CAAC,GAAG,EAAE,iBAAiB,GAAG,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAChE,oEAAoE;IACpE,qBAAqB,IAAI,OAAO,CAAC,6BAA6B,CAAC,CAAC;IAChE,iEAAiE;IACjE,kBAAkB,IAAI,OAAO,CAAC,0BAA0B,CAAC,CAAC;IAC1D,iEAAiE;IACjE,sBAAsB,IAAI,OAAO,CAAC,8BAA8B,CAAC,CAAC;IAClE,8DAA8D;IAC9D,YAAY,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,sBAAsB,CAAC,CAAC;IAC9D,qEAAqE;IACrE,kBAAkB,IAAI,OAAO,CAAC;QAAE,QAAQ,EAAE,uBAAuB,GAAG,IAAI,CAAA;KAAE,CAAC,CAAC;IAC5E,2EAA2E;IAC3E,gBAAgB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,qBAAqB,CAAC,CAAC;CAClE;AAED,wBAAgB,uBAAuB,CACrC,OAAO,EAAE,cAAc,GACtB,iBAAiB,CA4DnB"}

package/dist/server/create-billing-user-server.js

@@ -0,0 +1,33 @@
+// Helpers server-side de billing do usuário, sobre o motor de sessão do fe-security.
+// SERVER-ONLY (action/route).
+//
+//   const session = createSecurityServer({ ... });
+//   export const billing = createBillingUserServer(session);
+//
+// change-plan/cancel/cancel-scheduled-change/reactivate/invoices/upcoming/change-preview
+// foram confirmados lendo `MeBillingResource`/`BillingCheckoutResource` reais
+// (`seedgrid-report-api`) e adicionados aqui — ver `scaffold/README.md` pras divergências
+// encontradas (paths errados, CheckoutRequest/PortalRequest com shape incorreto).
+import { BillingUserPaths } from "../paths";
+export function createBillingUserServer(session) {
+    return {
+        getSubscription: () => session.apiFetchSecurity(BillingUserPaths.subscription),
+        listPlans: () => session.apiFetchSecurity(BillingUserPaths.plans),
+        getUsageSummary: () => session.apiFetchSecurity(BillingUserPaths.usageSummary),
+        getUsageStatement: () => session.apiFetchSecurity(BillingUserPaths.usageStatement),
+        createCheckout: (req) => session.apiFetchSecurity(BillingUserPaths.checkout, { method: "POST", body: JSON.stringify(req) }),
+        openPortal: () => session.apiFetchSecurity(BillingUserPaths.portal, {
+            method: "POST",
+        }),
+        changePlan: (req) => session.apiFetchSecurity(BillingUserPaths.changePlan, {
+            method: "POST",
+            body: JSON.stringify(req),
+        }),
+        cancelScheduledChange: () => session.apiFetchSecurity(BillingUserPaths.cancelScheduledChange, { method: "POST" }),
+        cancelSubscription: () => session.apiFetchSecurity(BillingUserPaths.cancel, { method: "POST" }),
+        reactivateSubscription: () => session.apiFetchSecurity(BillingUserPaths.reactivate, { method: "POST" }),
+        listInvoices: (limit) => session.apiFetchSecurity(`${BillingUserPaths.invoices}${typeof limit === "number" ? `?limit=${encodeURIComponent(limit)}` : ""}`),
+        getUpcomingInvoice: () => session.apiFetchSecurity(BillingUserPaths.upcoming),
+        getChangePreview: (planId) => session.apiFetchSecurity(`${BillingUserPaths.changePreview}?planId=${encodeURIComponent(planId)}`),
+    };
+}

package/dist/server/index.d.ts

@@ -0,0 +1,2 @@
+export { createBillingUserServer, type BillingUserServer, } from "./create-billing-user-server";
+//# sourceMappingURL=index.d.ts.map

package/dist/server/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/server/index.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,uBAAuB,EACvB,KAAK,iBAAiB,GACvB,MAAM,8BAA8B,CAAC"}

package/dist/server/index.js

@@ -0,0 +1,2 @@
+// Barrel SERVER (@seedgrid/fe-billing-user/server). Roda em action/route.
+export { createBillingUserServer, } from "./create-billing-user-server";

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@seedgrid/fe-billing-user",
+  "version": "2026.7.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SeedGrid/seedgrid-fe-components.git"
+  },
+  "homepage": "https://github.com/SeedGrid/seedgrid-fe-components",
+  "bugs": {
+    "url": "https://github.com/SeedGrid/seedgrid-fe-components/issues"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./server": {
+      "types": "./dist/server/index.d.ts",
+      "default": "./dist/server/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "scaffold"
+  ],
+  "peerDependencies": {
+    "@seedgrid/fe-core": "*",
+    "@seedgrid/fe-security": "*"
+  },
+  "devDependencies": {
+    "@seedgrid/fe-core": "2026.7.1",
+    "@seedgrid/fe-security": "2026.7.2"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "postbuild": "node scripts/emit-module-manifest.mjs",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "pnpm run build && node --test tests/module-manifest.test.mjs"
+  }
+}

package/scaffold/README.md

@@ -0,0 +1,72 @@
+# `fe-billing-user` scaffold
+
+Conteúdo copiado para dentro do app gerado pelo CLI (git do app, editável à
+vontade — ver `seedgrid-cli/docs/adr/0004-module-manifest-contract.md`).
+
+## Sem fonte histórica — tela construída do zero
+
+Ao contrário do `fe-security`/`fe-subdomain-tenancy`/`fe-backup` (extraídos de
+`seedgrid-cli/templates/modules/...`), este pacote **não tinha nenhuma tela
+pra extrair**. A única coisa parecida encontrada foi
+`admin-web/app/billing/page.tsx` — mas essa tela é a visão da PLATAFORMA
+(lista agregada de assinaturas de TODOS os tenants, MRR estimado, tenants em
+excedente), não a visão do usuário final vendo a própria assinatura. Servem
+públicos diferentes (staff da plataforma vs. cliente final), então não foi
+adaptada — a tela aqui (`app/billing/page.tsx`) foi desenhada do zero em cima
+do engine já pronto (`src/server/create-billing-user-server.ts`), seguindo o
+mesmo layout/componentes (`PageFrame`, `RouteGuard`, `SgCard`, `useI18n()` +
+chaves de tradução) já estabelecidos no `fe-security`.
+
+**Revisão humana recomendada** — telas construídas do zero.
+
+Cobertura atual (todas as capacidades do `BillingUserServer` têm UI):
+- **Visão geral** (`app/billing/page.tsx`): plano atual, uso do ciclo, portal;
+  agora também **cancelar** (`cancel`), **reativar** (`reactivate`) e
+  **cancelar troca agendada** (`cancel-scheduled-change`), com confirmação.
+- **Catálogo/checkout** (`app/billing/plans/page.tsx`): lista `listPlans`; sem
+  assinatura → **assinar** (`createCheckout` → redirect ao provedor); com
+  assinatura → **trocar** com prévia (`getChangePreview` → diálogo →
+  `changePlan`, upgrade imediato / downgrade agendado).
+- **Faturas** (`app/billing/invoices/page.tsx`): próxima fatura
+  (`getUpcomingInvoice`) + histórico (`listInvoices`, item cru do provedor
+  lido defensivamente).
+- **Navegação**: submenu Billing (overview / plans / invoices), gated por
+  `BILLING_READ`, wireado via o campo `navigation` do `module.ts`.
+
+## O que já existia (trabalho de um agente anterior, verificado)
+
+`src/billing.ts` (DTOs) e `src/paths.ts` já tinham sido conferidos contra o
+backend real (`MeBillingResource`/`BillingCheckoutResource`/`SubscriptionResource`
+em `seedgrid-report-api`) **antes** desta sessão continuar o trabalho —
+várias correções já registradas nos comentários desses arquivos (paths com
+prefixo errado, `CheckoutRequest`/`PortalRequest` com campos que o backend
+não aceita, endpoints de troca/cancelamento de assinatura adicionados). Não
+refiz essa auditoria, só continuei a partir dela.
+
+## Adicionado nesta passada
+
+- `src/messages.ts` (`billingUserMessages`) — mensagens da tela, en/pt-BR
+  completas, es/fr/pt-PT com fallback pro inglês (tradução real pendente).
+- `scaffold/src/modules/billing-user/server.ts` (`.hbs` — só arquivo com
+  templating real, nome de cookie por `{{project_slug}}`) — bootstrap que
+  compõe `createSecurityServer` (fe-security) + `createBillingUserServer`
+  (este pacote). Mesma convenção de nome de cookie que
+  `modules/security/server/server-api.ts` usa, pra funcionar com a MESMA
+  sessão do usuário logado.
+- `scaffold/src/app/api/billing/{me,portal}/route.ts` — rotas finas
+  (`toRouteResponse` de `@seedgrid/fe-security/server`), thin proxies pro
+  engine.
+- `scaffold/src/app/billing/page.tsx` — a tela em si.
+
+## Follow-ups
+
+- `getUsageStatement` (extrato detalhado de uso, requer `STATEMENT_READ`)
+  ainda não tem tela — só o resumo (`getUsageSummary`) aparece na visão geral.
+- O item de fatura (`listInvoices`) vem cru do provedor (shape não confirmado);
+  a tabela lê os campos comuns (estilo Stripe: `number`/`amount_paid`/`status`/
+  `created`/`hosted_invoice_url`) de forma defensiva. Apertar quando o DTO real
+  for confirmado.
+- Traduzir `es`/`fr`/`pt-PT` de verdade em `messages.ts` (hoje caem no
+  fallback do inglês).
+- Validado: app com `security` + `billing-user` typecheca com **0 erros**;
+  nav + i18n wirados pelo CLI.

package/scaffold/src/app/api/billing/cancel/route.ts

@@ -0,0 +1,10 @@
+import { toRouteResponse } from "@seedgrid/fe-security/server";
+
+import { getBillingUserServer } from "@/modules/billing-user/server";
+
+export async function POST() {
+  return toRouteResponse(async () => {
+    const billing = await getBillingUserServer();
+    return billing.cancelSubscription();
+  });
+}

package/scaffold/src/app/api/billing/cancel-scheduled-change/route.ts

@@ -0,0 +1,10 @@
+import { toRouteResponse } from "@seedgrid/fe-security/server";
+
+import { getBillingUserServer } from "@/modules/billing-user/server";
+
+export async function POST() {
+  return toRouteResponse(async () => {
+    const billing = await getBillingUserServer();
+    return billing.cancelScheduledChange();
+  });
+}

package/scaffold/src/app/api/billing/change-plan/route.ts

@@ -0,0 +1,14 @@
+import { NextRequest } from "next/server";
+import { toRouteResponse } from "@seedgrid/fe-security/server";
+
+import { getBillingUserServer } from "@/modules/billing-user/server";
+import type { ChangePlanRequest } from "@seedgrid/fe-billing-user";
+
+export async function POST(request: NextRequest) {
+  const body = (await request.json()) as ChangePlanRequest;
+
+  return toRouteResponse(async () => {
+    const billing = await getBillingUserServer();
+    return billing.changePlan(body);
+  });
+}

package/scaffold/src/app/api/billing/change-preview/route.ts

@@ -0,0 +1,13 @@
+import { NextRequest } from "next/server";
+import { toRouteResponse } from "@seedgrid/fe-security/server";
+
+import { getBillingUserServer } from "@/modules/billing-user/server";
+
+export async function GET(request: NextRequest) {
+  const planId = request.nextUrl.searchParams.get("planId") ?? "";
+
+  return toRouteResponse(async () => {
+    const billing = await getBillingUserServer();
+    return billing.getChangePreview(planId);
+  });
+}

package/scaffold/src/app/api/billing/checkout/route.ts

@@ -0,0 +1,14 @@
+import { NextRequest } from "next/server";
+import { toRouteResponse } from "@seedgrid/fe-security/server";
+
+import { getBillingUserServer } from "@/modules/billing-user/server";
+import type { CheckoutRequest } from "@seedgrid/fe-billing-user";
+
+export async function POST(request: NextRequest) {
+  const body = (await request.json()) as CheckoutRequest;
+
+  return toRouteResponse(async () => {
+    const billing = await getBillingUserServer();
+    return billing.createCheckout(body);
+  });
+}

package/scaffold/src/app/api/billing/invoices/route.ts

@@ -0,0 +1,14 @@
+import { NextRequest } from "next/server";
+import { toRouteResponse } from "@seedgrid/fe-security/server";
+
+import { getBillingUserServer } from "@/modules/billing-user/server";
+
+export async function GET(request: NextRequest) {
+  const limitParam = request.nextUrl.searchParams.get("limit");
+  const limit = limitParam ? Number(limitParam) : undefined;
+
+  return toRouteResponse(async () => {
+    const billing = await getBillingUserServer();
+    return billing.listInvoices(Number.isFinite(limit) ? limit : undefined);
+  });
+}

package/scaffold/src/app/api/billing/me/route.ts

@@ -0,0 +1,15 @@
+import { toRouteResponse } from "@seedgrid/fe-security/server";
+
+import { getBillingUserServer } from "@/modules/billing-user/server";
+
+export async function GET() {
+  return toRouteResponse(async () => {
+    const billing = await getBillingUserServer();
+    const [subscription, usage] = await Promise.all([
+      billing.getSubscription(),
+      billing.getUsageSummary(),
+    ]);
+
+    return { subscription, usage };
+  });
+}

package/scaffold/src/app/api/billing/plans/route.ts

@@ -0,0 +1,10 @@
+import { toRouteResponse } from "@seedgrid/fe-security/server";
+
+import { getBillingUserServer } from "@/modules/billing-user/server";
+
+export async function GET() {
+  return toRouteResponse(async () => {
+    const billing = await getBillingUserServer();
+    return billing.listPlans();
+  });
+}

package/scaffold/src/app/api/billing/portal/route.ts

@@ -0,0 +1,10 @@
+import { toRouteResponse } from "@seedgrid/fe-security/server";
+
+import { getBillingUserServer } from "@/modules/billing-user/server";
+
+export async function POST() {
+  return toRouteResponse(async () => {
+    const billing = await getBillingUserServer();
+    return billing.openPortal();
+  });
+}

package/scaffold/src/app/api/billing/reactivate/route.ts

@@ -0,0 +1,10 @@
+import { toRouteResponse } from "@seedgrid/fe-security/server";
+
+import { getBillingUserServer } from "@/modules/billing-user/server";
+
+export async function POST() {
+  return toRouteResponse(async () => {
+    const billing = await getBillingUserServer();
+    return billing.reactivateSubscription();
+  });
+}

package/scaffold/src/app/api/billing/upcoming/route.ts

@@ -0,0 +1,10 @@
+import { toRouteResponse } from "@seedgrid/fe-security/server";
+
+import { getBillingUserServer } from "@/modules/billing-user/server";
+
+export async function GET() {
+  return toRouteResponse(async () => {
+    const billing = await getBillingUserServer();
+    return billing.getUpcomingInvoice();
+  });
+}

package/scaffold/src/app/billing/invoices/page.tsx

@@ -0,0 +1,213 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+
+import {
+  SgButton,
+  SgCard,
+  SgSkeleton,
+  SgStack,
+  sgWhistle,
+} from "@seedgrid/fe-components";
+
+import { useI18n } from "@/i18n";
+import { PageFrame, RouteGuard } from "@/modules/security";
+import type {
+  BillingInvoiceEnvelope,
+  UpcomingInvoiceResponse,
+} from "@seedgrid/fe-billing-user";
+
+export default function InvoicesPage() {
+  return (
+    <RouteGuard permissions={["BILLING_READ"]}>
+      <InvoicesScreen />
+    </RouteGuard>
+  );
+}
+
+// O item de invoice é repassado cru do provedor (shape não confirmado — ver a
+// lib). Leitura defensiva dos campos mais comuns (estilo Stripe), sem travar
+// o tipo.
+function pickString(record: Record<string, unknown>, ...keys: string[]): string | null {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "string" && value.trim()) return value;
+    if (typeof value === "number") return String(value);
+  }
+  return null;
+}
+
+function pickAmount(record: Record<string, unknown>, ...keys: string[]): number | null {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "number" && Number.isFinite(value)) return value;
+  }
+  return null;
+}
+
+function formatCurrency(value: number | string | null | undefined, currency?: string | null) {
+  if (value == null) return "-";
+  const numeric = typeof value === "number" ? value : Number.parseFloat(value);
+  if (!Number.isFinite(numeric)) return "-";
+  return new Intl.NumberFormat(undefined, {
+    style: "currency",
+    currency: (currency || "BRL").toUpperCase(),
+  }).format(numeric);
+}
+
+function formatDate(value: string | number | null | undefined) {
+  if (value == null) return "-";
+  // Stripe timestamps vêm em segundos (epoch); ISO strings também são aceitas.
+  const date = typeof value === "number" ? new Date(value * 1000) : new Date(value);
+  if (Number.isNaN(date.getTime())) return "-";
+  return new Intl.DateTimeFormat(undefined, { dateStyle: "medium" }).format(date);
+}
+
+function InvoicesScreen() {
+  const { t } = useI18n();
+  const [upcoming, setUpcoming] = useState<UpcomingInvoiceResponse | null>(null);
+  const [invoices, setInvoices] = useState<Record<string, unknown>[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    try {
+      const [upcomingRes, invoicesRes] = await Promise.all([
+        fetch("/api/billing/upcoming", { cache: "no-store" }),
+        fetch("/api/billing/invoices?limit=12", { cache: "no-store" }),
+      ]);
+      if (upcomingRes.ok) {
+        const payload = (await upcomingRes.json()) as { upcoming: UpcomingInvoiceResponse | null };
+        setUpcoming(payload.upcoming ?? null);
+      }
+      if (invoicesRes.ok) {
+        const payload = (await invoicesRes.json()) as BillingInvoiceEnvelope;
+        setInvoices(payload.invoices ?? []);
+      }
+    } catch {
+      sgWhistle.error({ message: t("billing.user.invoices.load_error") });
+    } finally {
+      setLoading(false);
+    }
+  }, [t]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  return (
+    <PageFrame
+      title={t("billing.user.invoices.title")}
+      description={t("billing.user.invoices.description")}
+    >
+      {loading ? (
+        <SgStack gap={16}>
+          <SgSkeleton height={120} />
+          <SgSkeleton height={200} />
+        </SgStack>
+      ) : (
+        <SgStack gap={16}>
+          <SgCard cardStyle="elevated" title={t("billing.user.invoices.upcoming.title")}>
+            {upcoming ? (
+              <SgStack gap={8}>
+                <div className="text-2xl font-semibold text-slate-900">
+                  {formatCurrency(upcoming.amountDue ?? upcoming.total, upcoming.currency)}
+                </div>
+                <span className="text-sm text-slate-600">
+                  {t("billing.user.invoices.upcoming.next_attempt", {
+                    date: formatDate(upcoming.nextPaymentAttempt),
+                  })}
+                </span>
+                {upcoming.lines?.length ? (
+                  <SgStack gap={4} className="mt-2">
+                    {upcoming.lines.map((line, index) => (
+                      <div
+                        key={index}
+                        className="flex justify-between border-b border-slate-100 py-1 text-sm last:border-b-0"
+                      >
+                        <span className="text-slate-600">{line.description ?? "-"}</span>
+                        <span className="text-slate-900">
+                          {formatCurrency(line.amount, upcoming.currency)}
+                        </span>
+                      </div>
+                    ))}
+                  </SgStack>
+                ) : null}
+              </SgStack>
+            ) : (
+              <span className="text-sm text-slate-500">
+                {t("billing.user.invoices.upcoming.none")}
+              </span>
+            )}
+          </SgCard>
+
+          <SgCard cardStyle="elevated" title={t("billing.user.invoices.history.title")}>
+            {invoices.length ? (
+              <div className="overflow-x-auto">
+                <table className="w-full text-sm">
+                  <thead>
+                    <tr className="border-b border-slate-200 text-left text-slate-500">
+                      <th className="py-2 pr-4">{t("billing.user.invoices.history.column.number")}</th>
+                      <th className="py-2 pr-4">{t("billing.user.invoices.history.column.date")}</th>
+                      <th className="py-2 pr-4">{t("billing.user.invoices.history.column.amount")}</th>
+                      <th className="py-2 pr-4">{t("billing.user.invoices.history.column.status")}</th>
+                      <th className="py-2">{" "}</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {invoices.map((invoice, index) => {
+                      const number = pickString(invoice, "number", "id");
+                      const amountRaw = pickAmount(invoice, "amount_paid", "amount_due", "total");
+                      const amount = amountRaw != null ? amountRaw / 100 : null;
+                      const currency = pickString(invoice, "currency");
+                      const status = pickString(invoice, "status");
+                      const created = invoice["created"];
+                      const url = pickString(invoice, "hosted_invoice_url", "invoice_pdf");
+
+                      return (
+                        <tr key={number ?? index} className="border-b border-slate-100 last:border-b-0">
+                          <td className="py-2 pr-4 text-slate-900">{number ?? "-"}</td>
+                          <td className="py-2 pr-4 text-slate-600">
+                            {formatDate(typeof created === "number" || typeof created === "string" ? created : null)}
+                          </td>
+                          <td className="py-2 pr-4 text-slate-900">{formatCurrency(amount, currency)}</td>
+                          <td className="py-2 pr-4 text-slate-600">{status ?? "-"}</td>
+                          <td className="py-2">
+                            {url ? (
+                              <a
+                                href={url}
+                                target="_blank"
+                                rel="noreferrer"
+                                className="text-sky-600 hover:text-sky-800"
+                              >
+                                {t("billing.user.invoices.history.view")}
+                              </a>
+                            ) : null}
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </div>
+            ) : (
+              <span className="text-sm text-slate-500">
+                {t("billing.user.invoices.history.empty")}
+              </span>
+            )}
+          </SgCard>
+
+          <div>
+            <SgButton
+              appearance="outline"
+              severity="secondary"
+              shape="rounded"
+              label={t("billing.user.invoices.refresh")}
+              onClick={() => void load()}
+            />
+          </div>
+        </SgStack>
+      )}
+    </PageFrame>
+  );
+}