{label} {used.toLocaleString()} / {isInfinity ? "∞" : limit.toLocaleString()}

); } ``` - [ ] **Step 8.3: Create `components/dashboard/usage-section.tsx`** ```tsx import { getTranslations } from "next-intl/server"; import { UsageMeter } from "@/components/billing/usage-meter"; import { getOrgUsage } from "@/lib/data/usage"; export async function UsageSection({ organizationId }: { organizationId: string }) { const usage = await getOrgUsage(organizationId); const t = await getTranslations("Billing.usage"); return (

); } ``` - [ ] **Step 8.4: Add to dashboard layout** Read `app/[locale]/dashboard/layout.tsx`. After the existing org resolution, render `` somewhere visible (e.g., right under the page header, or inside the main content area). Wrap in `` with a small skeleton fallback so it doesn't block the rest of the page. ```tsx import { Suspense } from "react"; import { UsageSection } from "@/components/dashboard/usage-section"; import { Skeleton } from "@/components/ui/skeleton"; // Inside the layout's return JSX, somewhere appropriate: }> ; ``` If adding it to the layout interferes with existing UI structure, alternatively add it to the dashboard root page (`app/[locale]/dashboard/page.tsx`) above the existing sites list. - [ ] **Step 8.5: Typecheck + lint** ```bash pnpm typecheck 2>&1 | tail -3 pnpm lint lib/data/usage.ts components/billing/ components/dashboard/usage-section.tsx 'app/[locale]/dashboard/' 2>&1 | tail -3 ``` - [ ] **Step 8.6: Commit** ```bash git add lib/data/usage.ts components/billing/ components/dashboard/usage-section.tsx 'app/[locale]/dashboard/' git commit -m "feat(billing): UsageSection + UsageMeter — 3-tile dashboard usage panel Server Component fetches tests/sites/seats quotas concurrently via checkQuota and renders three bars (client component for the progress fill animation). Color tones step through amber (≥70%, ≥90%) then destructive at 100%. Wrapped in Suspense so the panel streams in without blocking dashboard render." ``` --- ## Task 9: `` (client) + integration in failing actions **Files:** - Create: `components/billing/quota-exhausted-dialog.tsx` - [ ] **Step 9.1: Create the dialog** This is a controlled component that displays when a `QUOTA_EXCEEDED` response (or `QuotaExceededError` toast) fires. Client-only. ```tsx "use client"; import { useTranslations } from "next-intl"; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog"; import { Button } from "@/components/ui/button"; export type QuotaExhaustedDialogProps = { open: boolean; onOpenChange: (open: boolean) => void; kind: "tests" | "sites" | "seats"; used: number; limit: number; plan: string; }; const SUGGESTED_TIER: Record = { free: "Starter", starter: "Pro", pro: "Business", business: "Enterprise", enterprise: "Enterprise", }; export function QuotaExhaustedDialog(props: QuotaExhaustedDialogProps) { const t = useTranslations("Quota"); const tier = SUGGESTED_TIER[props.plan] ?? "Starter"; return ( ); } ``` The actual integration into callers (e.g., InviteForm, the AddSite dialog) is one extra step per caller: catch the QuotaExceededError (or a 403 response with `error: "QUOTA_EXCEEDED"`), set local state `quotaDialog = { open: true, ...result }`, and render the dialog conditionally. **Phase 5 wires only ONE caller as a demonstration**: `` (where the action throws QuotaExceededError directly). The site-add and run-test callers can wire later; for now the 403 surfaces as a generic toast. - [ ] **Step 9.2: Wire `` to show the dialog on QuotaExceededError** Read `app/[locale]/settings/team/invite-form.tsx`. Modify the catch block to: ```tsx import { useState } from "react"; import { QuotaExhaustedDialog } from "@/components/billing/quota-exhausted-dialog"; // Inside the component: const [quotaDialog, setQuotaDialog] = useState(null); // Replace the existing `catch { toast.error(...) }` with: } catch (err) { const msg = err instanceof Error ? err.message : String(err); // Heuristic: QuotaExceededError messages start with "Quota exceeded for" if (msg.startsWith("Quota exceeded for")) { // Parse the message — simpler than re-throwing structured data through // Server Actions (which can't transport custom error classes cleanly). const m = msg.match(/Quota exceeded for (\w+) on plan (\w+): (\d+)\/(\d+)/); if (m) { setQuotaDialog({ kind: m[1] as "seats", plan: m[2]!, used: Number(m[3]), limit: Number(m[4]), }); } else { toast.error(t("inviteFailed")); } } else { toast.error(t("inviteFailed")); } } // In the JSX, render the dialog: {quotaDialog && ( !v && setQuotaDialog(null)} kind={quotaDialog.kind} used={quotaDialog.used} limit={quotaDialog.limit} plan={quotaDialog.plan} /> )} ``` Note: parsing the error message string is a pragmatic workaround because Server Actions serialize errors as plain Error objects — custom class fields don't survive the network boundary. A more elegant approach (return-shape with `{ ok: false, error: ... }`) is a future refactor. - [ ] **Step 9.3: Typecheck + lint + commit** ```bash pnpm typecheck 2>&1 | tail -3 pnpm lint components/billing/quota-exhausted-dialog.tsx 'app/[locale]/settings/team/invite-form.tsx' 2>&1 | tail -3 git add components/billing/quota-exhausted-dialog.tsx 'app/[locale]/settings/team/invite-form.tsx' git commit -m "feat(billing): QuotaExhaustedDialog + wire InviteForm to show it on seats exhaustion Client modal triggered when a quota-consuming action throws QuotaExceededError. Phase 5 wires only the InviteForm; AddSite + LaunchTest will wire similarly in Phase 6 alongside the actual upgrade Checkout flow. Upgrade button is disabled with 'Coming soon' copy for now." ``` --- ## Task 10: i18n keys for Phase 5 **Files:** - Modify: `messages/{en,fr,es}.json` - [ ] **Step 10.1: Add `Quota` and `Billing.usage` namespaces** For `messages/en.json` (append to existing top-level object): ```json "Quota": { "close": "Close", "upgradeComingSoon": "Upgrade — coming soon", "exhausted": { "tests": { "title": "Monthly test limit reached", "description": "You've used {used} of {limit} tests this month on the {plan} plan. Upgrade to {tier} for more tests." }, "sites": { "title": "Site limit reached", "description": "You've added {used} of {limit} sites on the {plan} plan. Upgrade to {tier} to add more sites." }, "seats": { "title": "Seat limit reached", "description": "You have {used} of {limit} seats on the {plan} plan. Upgrade to {tier} to invite more teammates." } } }, "Billing": { "usage": { "tests": "Tests this month", "sites": "Sites monitored", "seats": "Team members" } } ``` For `messages/fr.json`: ```json "Quota": { "close": "Fermer", "upgradeComingSoon": "Upgrade — bientôt disponible", "exhausted": { "tests": { "title": "Limite mensuelle de tests atteinte", "description": "Vous avez utilisé {used} sur {limit} tests ce mois-ci sur le plan {plan}. Passez à {tier} pour davantage de tests." }, "sites": { "title": "Limite de sites atteinte", "description": "Vous avez ajouté {used} sur {limit} sites sur le plan {plan}. Passez à {tier} pour ajouter plus de sites." }, "seats": { "title": "Limite de membres atteinte", "description": "Vous avez {used} sur {limit} membres sur le plan {plan}. Passez à {tier} pour inviter plus de coéquipiers." } } }, "Billing": { "usage": { "tests": "Tests ce mois-ci", "sites": "Sites monitorés", "seats": "Membres d'équipe" } } ``` For `messages/es.json`: ```json "Quota": { "close": "Cerrar", "upgradeComingSoon": "Upgrade — próximamente", "exhausted": { "tests": { "title": "Límite mensual de pruebas alcanzado", "description": "Ha usado {used} de {limit} pruebas este mes en el plan {plan}. Actualice a {tier} para más pruebas." }, "sites": { "title": "Límite de sitios alcanzado", "description": "Ha añadido {used} de {limit} sitios en el plan {plan}. Actualice a {tier} para añadir más sitios." }, "seats": { "title": "Límite de miembros alcanzado", "description": "Tiene {used} de {limit} miembros en el plan {plan}. Actualice a {tier} para invitar a más compañeros." } } }, "Billing": { "usage": { "tests": "Pruebas este mes", "sites": "Sitios monitorizados", "seats": "Miembros del equipo" } } ``` - [ ] **Step 10.2: Verify parity + commit** ```bash jq . messages/en.json > /dev/null && jq . messages/fr.json > /dev/null && jq . messages/es.json > /dev/null diff <(jq -r 'paths(scalars) | join(".")' messages/en.json | sort) <(jq -r 'paths(scalars) | join(".")' messages/fr.json | sort) diff <(jq -r 'paths(scalars) | join(".")' messages/en.json | sort) <(jq -r 'paths(scalars) | join(".")' messages/es.json | sort) git add messages/ git commit -m "i18n(quota,billing): add Quota.exhausted + Billing.usage namespaces (EN/FR/ES)" ``` --- ## Task 11: Smoke test verify-quotas **Files:** - Create: `scripts/verify-quotas.ts` - Modify: `package.json` - [ ] **Step 11.1: Create the test** ```ts import { and, eq, gte, like, notExists } from "drizzle-orm"; import { nanoid } from "nanoid"; import { auth } from "../lib/auth"; import { db } from "../lib/db"; import { member, organization, orgSubscription, sites, siteTests, user } from "../lib/db/schema"; import { checkQuota, getCurrentMonthStart, getOrgPlan } from "../lib/billing/quotas"; const EMAIL = `smoke-quotas-${nanoid(8)}@elevaseo.com`; const NAME = "Smoke Quotas"; const PASSWORD = "SmokeQuotas!2026"; async function main() { console.log(`→ Signing up ${EMAIL}`); const res = await auth.api.signUpEmail({ body: { name: NAME, email: EMAIL, password: PASSWORD }, }); const userId = res.user.id; try { // Resolve Personal Org (Phase 1). const mem = await db.select().from(member).where(eq(member.userId, userId)).limit(1); if (mem.length === 0) throw new Error("Personal org missing"); const orgId = mem[0]!.organizationId; // 1. Plan should be free (signup hook creates the row). const plan = await getOrgPlan(orgId); if (plan !== "free") throw new Error(`Expected free, got ${plan}`); console.log(`✓ Plan: ${plan}`); // 2. Sites quota: 0/1 initially. const sitesBefore = await checkQuota(orgId, "sites"); if (sitesBefore.used !== 0 || sitesBefore.limit !== 1) { throw new Error(`Sites: expected 0/1, got ${sitesBefore.used}/${sitesBefore.limit}`); } console.log(`✓ Sites quota: 0/${sitesBefore.limit}`); // 3. Add 1 site → 1/1. const siteId = nanoid(); await db.insert(sites).values({ id: siteId, organizationId: orgId, createdByUserId: userId, hostname: "example-quotas.com", url: "https://example-quotas.com/", label: null, createdAt: new Date().toISOString(), }); const sitesAfter = await checkQuota(orgId, "sites"); if (sitesAfter.used !== 1 || sitesAfter.ok !== false) { throw new Error( `Sites: expected 1/1 ok=false, got ${sitesAfter.used}/${sitesAfter.limit} ok=${sitesAfter.ok}`, ); } console.log( `✓ Sites quota after add: ${sitesAfter.used}/${sitesAfter.limit} ok=${sitesAfter.ok}`, ); // 4. Tests quota: 0/15 initially this month. const testsBefore = await checkQuota(orgId, "tests"); if (testsBefore.limit !== 15) { throw new Error(`Tests: expected limit 15, got ${testsBefore.limit}`); } console.log(`✓ Tests quota: ${testsBefore.used}/${testsBefore.limit}`); // 5. Insert 15 dummy tests dated this month → 15/15, ok=false. const ids: string[] = []; for (let i = 0; i < 15; i++) { const id = `test-${nanoid()}`; ids.push(id); await db.insert(siteTests).values({ id, siteId, organizationId: orgId, triggeredByUserId: userId, hostname: "example-quotas.com", url: "https://example-quotas.com/", status: "completed", createdAt: new Date().toISOString(), }); } const testsAfter = await checkQuota(orgId, "tests"); if (testsAfter.used !== 15 || testsAfter.ok !== false) { throw new Error( `Tests: expected 15/15 ok=false, got ${testsAfter.used}/${testsAfter.limit} ok=${testsAfter.ok}`, ); } console.log( `✓ Tests quota after 15: ${testsAfter.used}/${testsAfter.limit} ok=${testsAfter.ok}`, ); // 6. Seats quota: 1/1 (only the owner). const seats = await checkQuota(orgId, "seats"); if (seats.used !== 1 || seats.ok !== false) { throw new Error( `Seats: expected 1/1 ok=false, got ${seats.used}/${seats.limit} ok=${seats.ok}`, ); } console.log(`✓ Seats quota: ${seats.used}/${seats.limit} ok=${seats.ok}`); } finally { await db.delete(user).where(eq(user.id, userId)); await db .delete(organization) .where( and( like(organization.name, "Personal — smoke-quotas-%"), notExists( db .select({ one: member.id }) .from(member) .where(eq(member.organizationId, organization.id)), ), ), ); console.log(`→ Cleanup done`); } console.log(`✅ verify-quotas OK`); process.exit(0); } main().catch((e) => { console.error(`❌ verify-quotas FAILED:`, e instanceof Error ? e.message : e); process.exit(1); }); ``` - [ ] **Step 11.2: Register pnpm script** After `verify:team-invite`: ```json "verify:quotas": "tsx --env-file-if-exists=.env.local --env-file-if-exists=.env scripts/verify-quotas.ts", ``` - [ ] **Step 11.3: Run + commit** ```bash pnpm verify:quotas git add scripts/verify-quotas.ts package.json git commit -m "test: add smoke test for Free-tier quotas (sites=1, tests=15, seats=1) Signs up a fresh user, asserts the Free plan stub was created, exercises checkQuota for sites/tests/seats across thresholds (0→1, 0→15), confirms ok flips false at the limit. Cleans up in finally{}." ``` --- ## Task 12: Final validation + format + final review - [ ] **Step 12.1: Full validation** ```bash cd /Users/humperdoo/Github/eleva-speed pnpm typecheck pnpm lint pnpm verify:org-signup pnpm verify:org-sites pnpm verify:org-switch pnpm verify:team-invite pnpm verify:quotas diff <(jq -r 'paths(scalars) | join(".")' messages/en.json | sort) <(jq -r 'paths(scalars) | join(".")' messages/fr.json | sort) diff <(jq -r 'paths(scalars) | join(".")' messages/en.json | sort) <(jq -r 'paths(scalars) | join(".")' messages/es.json | sort) ``` All must pass. Both diffs empty. - [ ] **Step 12.2: Format** ```bash pnpm format git add -A git commit -m "chore(format): oxfmt pass on Phase 5 new files" 2>&1 || echo "(nothing to commit)" ``` - [ ] **Step 12.3: Manual E2E hint to user** `! pnpm dev:agent`, log in as bastien, visit `/dashboard` — verify the new usage panel renders 3 meters (Tests, Sites, Seats) at the top. Visit `/settings/team`, try to invite a member when seats are exhausted (manually insert an extra member row in DB, or just observe with the owner-test user which already has full org). The QuotaExhaustedDialog should appear. --- ## Critères d'acceptation Phase 5 - ✅ `es_org_subscription` table created, every org has a row with `plan=free`. - ✅ Signup hook inserts a stub subscription row. - ✅ Backfill script idempotent. - ✅ `checkQuota(orgId, kind)` returns `{ used, limit, ok, plan, percent }`. - ✅ `assertQuota` throws `QuotaExceededError` enforced in `inviteMember`, POST `/api/sites`, POST `/api/sites/[siteId]/test`. - ✅ `` renders in dashboard with tone steps (amber/destructive). - ✅ `` wired in InviteForm for seats exhaustion. - ✅ i18n EN/FR/ES with key parity for `Quota.*` + `Billing.usage.*`. - ✅ Smoke test `verify:quotas` PASS. - ✅ `pnpm typecheck && pnpm lint` clean. ## Next phase Phase 6 — Stripe Checkout + Customer Portal + webhook handler + `/settings/billing` page. Wires the actual upgrade flow that this phase's QuotaExhaustedDialog teases.