Spaces:
Running
Running
| "use client"; | |
| import React from "react"; | |
| import { trpc } from "@/lib/trpc"; | |
| import { AlertTriangle, CheckCircle, XCircle } from "lucide-react"; | |
| interface UsageMeterProps { | |
| /** The workspace ID is needed only to gate the query (enabled). */ | |
| workspaceId: string; | |
| } | |
| type StatRow = { | |
| label: string; | |
| current: number; | |
| limit: number | null; | |
| barColor: string; | |
| }; | |
| function isAtLimit(current: number, limit: number | null): "ok" | "warn" | "exceeded" { | |
| if (limit === null) return "ok"; | |
| const ratio = current / limit; | |
| if (ratio >= 1) return "exceeded"; | |
| if (ratio >= 0.8) return "warn"; | |
| return "ok"; | |
| } | |
| export default function UsageMeter({ workspaceId }: UsageMeterProps) { | |
| const { data, isLoading, error } = trpc.billing.getUsage.useQuery( | |
| undefined, | |
| { enabled: !!workspaceId, refetchInterval: 60_000 }, | |
| ); | |
| if (isLoading) { | |
| return ( | |
| <div className="usage-meter-skeleton" aria-busy="true"> | |
| <div className="skeleton-line" style={{ height: 12, width: "60%", marginBottom: 12 }} /> | |
| <div className="skeleton-line" style={{ height: 8, width: "100%", marginBottom: 8 }} /> | |
| <div className="skeleton-line" style={{ height: 8, width: "100%", marginBottom: 8 }} /> | |
| </div> | |
| ); | |
| } | |
| if (error || !data) return null; | |
| const { usage, planId, status } = data; | |
| const rows: StatRow[] = []; | |
| if (usage.guestsPerMonth.limit !== 0) { | |
| rows.push({ | |
| label: "Guests (this month)", | |
| current: usage.guestsPerMonth.current, | |
| limit: usage.guestsPerMonth.limit, | |
| barColor: "var(--color-primary)", | |
| }); | |
| } | |
| if (usage.episodesPerMonth.limit !== 0) { | |
| rows.push({ | |
| label: "Episodes (this month)", | |
| current: usage.episodesPerMonth.current, | |
| limit: usage.episodesPerMonth.limit, | |
| barColor: "var(--color-secondary)", | |
| }); | |
| } | |
| if (usage.clipsPerMonth.limit !== 0) { | |
| rows.push({ | |
| label: "AI Clips (this month)", | |
| current: usage.clipsPerMonth.current, | |
| limit: usage.clipsPerMonth.limit, | |
| barColor: "var(--color-accent)", | |
| }); | |
| } | |
| if (usage.exportMinutesPerMonth.limit !== 0) { | |
| rows.push({ | |
| label: "Export Minutes (this month)", | |
| current: usage.exportMinutesPerMonth.current, | |
| limit: usage.exportMinutesPerMonth.limit, | |
| barColor: "#8B5CF6", | |
| }); | |
| } | |
| if (rows.length === 0) return null; | |
| return ( | |
| <div className="usage-meter" role="region" aria-label="Plan usage summary"> | |
| <div | |
| style={{ | |
| display: "flex", | |
| justifyContent: "space-between", | |
| alignItems: "center", | |
| marginBottom: "var(--space-4)", | |
| }} | |
| > | |
| <span | |
| style={{ | |
| fontSize: "var(--text-xs)", | |
| fontWeight: 600, | |
| textTransform: "uppercase", | |
| letterSpacing: "0.05em", | |
| color: "var(--text-tertiary)", | |
| }} | |
| > | |
| Usage | |
| </span> | |
| <span | |
| className="status-badge" | |
| style={{ | |
| textTransform: "capitalize", | |
| fontSize: "var(--text-xs)", | |
| }} | |
| > | |
| {planId} · {status} | |
| </span> | |
| </div> | |
| <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-3)" }}> | |
| {rows.map((row) => { | |
| const state = isAtLimit(row.current, row.limit); | |
| const pct = | |
| row.limit !== null && row.limit > 0 | |
| ? Math.min(100, Math.round((row.current / row.limit) * 100)) | |
| : 0; | |
| return ( | |
| <div key={row.label}> | |
| <div | |
| style={{ | |
| display: "flex", | |
| justifyContent: "space-between", | |
| fontSize: "var(--text-xs)", | |
| marginBottom: 4, | |
| }} | |
| > | |
| <span style={{ color: "var(--text-secondary)" }}>{row.label}</span> | |
| <span | |
| style={{ | |
| fontWeight: 600, | |
| color: | |
| state === "exceeded" | |
| ? "var(--color-error)" | |
| : state === "warn" | |
| ? "var(--color-warning)" | |
| : "var(--text-primary)", | |
| }} | |
| > | |
| {state === "exceeded" && ( | |
| <XCircle size={12} style={{ display: "inline", marginRight: 4, verticalAlign: "middle" }} /> | |
| )} | |
| {state === "warn" && ( | |
| <AlertTriangle size={12} style={{ display: "inline", marginRight: 4, verticalAlign: "middle" }} /> | |
| )} | |
| {state === "ok" && row.limit !== null && ( | |
| <CheckCircle size={12} style={{ display: "inline", marginRight: 4, verticalAlign: "middle" }} /> | |
| )} | |
| {row.limit === null ? "Unlimited" : `${row.current} / ${row.limit}`} | |
| </span> | |
| </div> | |
| {row.limit !== null && ( | |
| <div | |
| style={{ | |
| height: 6, | |
| borderRadius: 3, | |
| background: "var(--bg-tertiary)", | |
| overflow: "hidden", | |
| }} | |
| role="progressbar" | |
| aria-valuenow={pct} | |
| aria-valuemin={0} | |
| aria-valuemax={100} | |
| aria-label={`${row.label}: ${row.current} of ${row.limit}`} | |
| > | |
| <div | |
| style={{ | |
| width: `${Math.min(pct, 100)}%`, | |
| height: "100%", | |
| borderRadius: 3, | |
| background: | |
| state === "exceeded" | |
| ? "var(--color-error)" | |
| : state === "warn" | |
| ? "var(--color-warning)" | |
| : row.barColor, | |
| transition: "width 0.3s ease", | |
| }} | |
| /> | |
| </div> | |
| )} | |
| </div> | |
| ); | |
| })} | |
| </div> | |
| </div> | |
| ); | |
| } | |