admin/podcastdistributiona
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Comprehensive admin + user dashboards (production-ready)

Browse Source
This commit is contained in:
Leon Serfaty
2026-06-07 17:54:30 -04:00
parent 155507f21a
commit f033f00379
122 changed files with 7878 additions and 805 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(app)/api-keys/loading.tsx
+13
View File
@@ -0,0 +1,13 @@
import { HeaderSkeleton, Skeleton, ListSkeleton } from "@/components/ui/skeleton";
export default function ApiKeysLoading() {
return (
<>
<HeaderSkeleton />
<div className="max-w-2xl space-y-6">
<Skeleton className="h-20 rounded-2xl" />
<ListSkeleton rows={3} />
</div>
</>
);
}
app/(app)/billing/loading.tsx
+15
View File
@@ -0,0 +1,15 @@
import { HeaderSkeleton, Skeleton } from "@/components/ui/skeleton";
export default function BillingLoading() {
return (
<>
<HeaderSkeleton />
<Skeleton className="mb-8 h-24 rounded-2xl" />
<div className="grid gap-4 lg:grid-cols-4">
{Array.from({ length: 4 }).map((_, i) => (
<Skeleton key={i} className="h-80 rounded-2xl" />
))}
</div>
</>
);
}
app/(app)/dashboard/loading.tsx
+14
View File
@@ -0,0 +1,14 @@
import { HeaderSkeleton, StatRowSkeleton, ListSkeleton, Skeleton } from "@/components/ui/skeleton";
export default function DashboardLoading() {
return (
<>
<HeaderSkeleton />
<StatRowSkeleton count={3} />
<div className="mt-6 space-y-3">
<Skeleton className="h-5 w-40" />
<ListSkeleton rows={5} />
</div>
</>
);
}
app/(app)/dashboard/page.tsx
+133 -52
View File
@@ -1,22 +1,39 @@
import Link from "next/link";
import { Mic2, Plus, Sparkles, ArrowRight } from "lucide-react";
import { Mic2, Plus, Sparkles, ArrowRight, Mic, Gauge, Crown, Infinity as InfinityIcon } from "lucide-react";
import { requireAuth } from "@/lib/auth/guards";
import { getEffectivePlan } from "@/lib/billing/subscription";
import { getUsageSummary } from "@/lib/usage/meter";
import { prisma } from "@/lib/db";
import { UNLIMITED, type UsageMetric } from "@/lib/billing/plans";
import { PageHeader } from "@/components/app/page-header";
import { EpisodeStatusBadge } from "@/components/app/episode-status-badge";
import { StatCard } from "@/components/admin/ui/stat-card";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { EpisodeStatusBadge } from "@/components/app/episode-status-badge";
import { Progress } from "@/components/ui/progress";
import { EmptyState } from "@/components/ui/empty-state";
const METRIC_LABELS: Record<UsageMetric, string> = {
script: "Scripts",
audio: "Audio generations",
art: "Cover art",
repurpose: "Repurposed content",
};
export default async function DashboardPage() {
const session = await requireAuth();
const { plan, key } = await getEffectivePlan(
const { plan, key, subjectId } = await getEffectivePlan(
session.user.id,
session.session.activeOrganizationId
);
const [episodeCount, recent] = await Promise.all([
// Episodes from the last 8 weeks for the sparkline + a 30-day rolling count.
const now = new Date();
const eightWeeksAgo = new Date(now);
eightWeeksAgo.setDate(eightWeeksAgo.getDate() - 7 * 8);
const [episodeCount, recent, recentForSpark, usage] = await Promise.all([
prisma.episode.count({ where: { userId: session.user.id } }),
prisma.episode.findMany({
where: { userId: session.user.id },
@@ -24,8 +41,38 @@ export default async function DashboardPage() {
take: 5,
select: { id: true, title: true, status: true, format: true, createdAt: true },
}),
prisma.episode.findMany({
where: { userId: session.user.id, createdAt: { gte: eightWeeksAgo } },
select: { createdAt: true },
}),
getUsageSummary(subjectId),
]);
// Bucket episodes into 8 weekly counts (oldest → newest) for the sparkline.
const weeklySpark = Array.from({ length: 8 }, (_, i) => {
const start = new Date(eightWeeksAgo);
start.setDate(start.getDate() + i * 7);
const end = new Date(start);
end.setDate(end.getDate() + 7);
return recentForSpark.filter((e) => e.createdAt >= start && e.createdAt < end).length;
});
const thisWeek = weeklySpark[weeklySpark.length - 1];
// Tightest metered limit: the metric closest to its cap (excluding unlimited).
const metrics = (Object.keys(METRIC_LABELS) as UsageMetric[])
.map((m) => {
const limit = plan.limits[m];
const used = usage[m];
const unlimited = limit === UNLIMITED;
const pct = unlimited ? 0 : Math.min(100, Math.round((used / Math.max(1, limit)) * 100));
return { metric: m, used, limit, unlimited, pct };
});
const tightest =
metrics
.filter((m) => !m.unlimited)
.sort((a, b) => b.pct - a.pct)[0] ?? metrics[0];
const tightestAtLimit = !tightest.unlimited && tightest.used >= tightest.limit;
const firstName = session.user.name.split(" ")[0];
return (
@@ -42,74 +89,108 @@ export default async function DashboardPage() {
}
/>
<div className="grid gap-4 sm:grid-cols-3">
<div className="grid gap-4 lg:grid-cols-3">
<StatCard
label="Episodes created"
value={String(episodeCount)}
icon={Mic}
spark={weeklySpark.some((v) => v > 0) ? weeklySpark : undefined}
hint={`${thisWeek} this week`}
/>
{/* Live usage meter — tightest metered metric */}
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium text-muted-foreground">Episodes created</CardTitle>
</CardHeader>
<CardContent>
<p className="font-display text-4xl font-extrabold tracking-tight">{episodeCount}</p>
</CardContent>
</Card>
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium text-muted-foreground">Current plan</CardTitle>
</CardHeader>
<CardContent className="flex items-center justify-between">
<p className="font-display text-4xl font-extrabold capitalize tracking-tight">{plan.name}</p>
{key === "free" && (
<Button asChild size="sm" variant="outline">
<Link href="/billing">Upgrade</Link>
</Button>
<CardContent className="space-y-3 p-5">
<div className="flex items-center justify-between">
<span className="text-sm font-medium text-muted-foreground">
{METRIC_LABELS[tightest.metric]} this month
</span>
<Gauge className="h-4 w-4 text-muted-foreground" />
</div>
<div className="flex items-baseline justify-between gap-3">
<p className="font-display text-3xl font-extrabold tracking-tight">{tightest.used}</p>
<span className="flex items-center gap-1 text-sm text-muted-foreground">
{tightest.unlimited ? (
<>
<InfinityIcon className="h-4 w-4" /> Unlimited
</>
) : (
<>of {tightest.limit}</>
)}
</span>
</div>
{!tightest.unlimited ? (
<Progress
value={tightest.pct}
indicatorClassName={tightestAtLimit ? "bg-warning" : undefined}
/>
) : (
<p className="text-xs text-muted-foreground">No limits on this metric.</p>
)}
</CardContent>
</Card>
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium text-muted-foreground">Usage this month</CardTitle>
</CardHeader>
<CardContent>
<Button asChild size="sm" variant="outline">
<Button asChild size="sm" variant="ghost" className="-ml-2 h-8 px-2 text-brand">
<Link href="/usage">
View usage <ArrowRight className="h-4 w-4" />
View all usage <ArrowRight className="h-3.5 w-3.5" />
</Link>
</Button>
</CardContent>
</Card>
{/* Plan card with inline upgrade */}
<Card>
<CardContent className="space-y-3 p-5">
<div className="flex items-center justify-between">
<span className="text-sm font-medium text-muted-foreground">Current plan</span>
<Crown className="h-4 w-4 text-muted-foreground" />
</div>
<div className="flex items-center gap-2">
<p className="font-display text-3xl font-extrabold capitalize tracking-tight">
{plan.name}
</p>
{key !== "free" && <Badge variant="brand">Active</Badge>}
</div>
<p className="text-xs text-muted-foreground">{plan.tagline}</p>
{key !== "agency" && (
<Button asChild size="sm" variant={key === "free" ? "default" : "outline"}>
<Link href="/billing">
<Sparkles className="h-3.5 w-3.5" /> Upgrade
</Link>
</Button>
)}
</CardContent>
</Card>
</div>
<Card className="mt-6">
<CardHeader className="flex flex-row items-center justify-between">
<CardHeader className="flex flex-row items-center justify-between space-y-0">
<CardTitle>Recent episodes</CardTitle>
<Button asChild variant="ghost" size="sm">
<Link href="/episodes">View all</Link>
</Button>
{recent.length > 0 && (
<Button asChild variant="ghost" size="sm">
<Link href="/episodes">View all</Link>
</Button>
)}
</CardHeader>
<CardContent>
{recent.length === 0 ? (
<div className="flex flex-col items-center gap-3 py-12 text-center">
<span className="flex h-14 w-14 items-center justify-center rounded-2xl bg-brand/10 text-brand">
<Mic2 className="h-6 w-6" />
</span>
<div>
<p className="font-medium">No episodes yet</p>
<p className="text-sm text-muted-foreground">
Create your first AI-produced episode to get started.
</p>
</div>
<Button asChild>
<Link href="/episodes/new">
<Sparkles className="h-4 w-4" /> Create your first episode
</Link>
</Button>
</div>
<EmptyState
bordered={false}
icon={Mic2}
title="No episodes yet"
description="Create your first AI-produced episode to get started."
action={
<Button asChild>
<Link href="/episodes/new">
<Sparkles className="h-4 w-4" /> Create your first episode
</Link>
</Button>
}
/>
) : (
<ul className="divide-y">
{recent.map((ep) => (
<li key={ep.id}>
<Link
href={`/episodes/${ep.id}`}
className="flex items-center justify-between gap-3 py-3 hover:opacity-80"
className="flex items-center justify-between gap-3 py-3 transition-colors hover:opacity-80"
>
<div className="min-w-0">
<p className="truncate font-medium">{ep.title}</p>
app/(app)/episodes/[id]/loading.tsx
+23
View File
@@ -0,0 +1,23 @@
export default function EpisodeLoading() {
return (
<div className="animate-pulse space-y-6">
<div className="space-y-2">
<div className="h-9 w-72 rounded-xl bg-secondary" />
<div className="h-4 w-48 rounded-lg bg-secondary/70" />
</div>
<div className="grid gap-6 lg:grid-cols-3">
<div className="space-y-6 lg:col-span-1">
<div className="aspect-square rounded-2xl border border-border bg-secondary" />
<div className="h-32 rounded-2xl border border-border bg-card" />
<div className="h-11 rounded-full bg-secondary" />
</div>
<div className="space-y-4 lg:col-span-2">
<div className="h-14 rounded-2xl border border-border bg-card" />
{Array.from({ length: 3 }).map((_, i) => (
<div key={i} className="h-40 rounded-2xl border border-border bg-card" />
))}
</div>
</div>
</div>
);
}
app/(app)/episodes/[id]/not-found.tsx
+22
View File
@@ -0,0 +1,22 @@
import Link from "next/link";
import { MicOff } from "lucide-react";
import { Button } from "@/components/ui/button";
export default function EpisodeNotFound() {
return (
<div className="flex min-h-[60vh] flex-col items-center justify-center gap-5 text-center">
<div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-secondary text-muted-foreground">
<MicOff className="h-7 w-7" />
</div>
<div className="space-y-1.5">
<h1 className="font-display text-2xl font-extrabold tracking-tight">Episode not found</h1>
<p className="max-w-sm text-sm text-muted-foreground">
This episode doesn&apos;t exist, or you don&apos;t have access to it.
</p>
</div>
<Button asChild>
<Link href="/episodes">Back to episodes</Link>
</Button>
</div>
);
}
app/(app)/episodes/[id]/page.tsx
+6 -1
View File
@@ -32,7 +32,11 @@ export default async function EpisodePage({ params }: { params: Promise<{ id: st
<PageHeader
title={episode.title}
description={`${episode.format.replace("_", "-").toLowerCase()} · ${episode.language.toUpperCase()} · ${episode.targetLengthMin} min`}
action={!inProgress ? <EpisodeActions episodeId={episode.id} /> : undefined}
action={
!inProgress ? (
<EpisodeActions episodeId={episode.id} initialShareId={episode.shareId} />
) : undefined
}
/>
{episode.status === "FAILED" || inProgress ? (
@@ -68,6 +72,7 @@ export default async function EpisodePage({ params }: { params: Promise<{ id: st
<AudioPlayer
storageKey={episode.audioAsset.storageKey}
durationSec={episode.audioAsset.durationSec}
episodeId={episode.id}
/>
</CardContent>
</Card>
app/(app)/episodes/actions.ts
+213 -71
View File
@@ -1,13 +1,18 @@
"use server";
import { randomBytes } from "node:crypto";
import { revalidatePath } from "next/cache";
import { z } from "zod";
import { getServerSession } from "@/lib/auth/guards";
import { prisma } from "@/lib/db";
import { getEffectivePlan } from "@/lib/billing/subscription";
import { enforceLimit, LimitExceededError } from "@/lib/usage/limits";
import { reserveLimit, LimitExceededError } from "@/lib/usage/limits";
import { refundUsage } from "@/lib/usage/meter";
import { enqueueEpisodeGeneration } from "@/lib/queue/pgboss";
import { rateLimit, LIMITS } from "@/lib/ratelimit";
import { isFlagEnabled } from "@/lib/flags";
import { moderateText } from "@/lib/ai/moderation";
import type { UsageMetric } from "@/lib/billing/plans";
import type { GenerationType } from "@/lib/queue/jobs";
import type { Prisma } from "@prisma/client";
@@ -42,6 +47,10 @@ export async function createEpisodeAction(input: CreateEpisodeInput): Promise<Cr
return { ok: false, error: `Too many requests. Try again in ${rl.retryAfterSec}s.` };
}
if (!(await isFlagEnabled("episode_generation_enabled"))) {
return { ok: false, error: "Episode generation is temporarily paused. Please try again shortly." };
}
const parsed = createSchema.safeParse(input);
if (!parsed.success) {
return { ok: false, error: parsed.error.issues[0]?.message ?? "Invalid input." };
@@ -49,7 +58,7 @@ export async function createEpisodeAction(input: CreateEpisodeInput): Promise<Cr
const data = parsed.data;
const activeOrgId = session.session.activeOrganizationId;
const { plan } = await getEffectivePlan(session.user.id, activeOrgId);
const { plan, subjectId, subjectType } = await getEffectivePlan(session.user.id, activeOrgId);
if (data.targetLengthMin > plan.limits.maxEpisodeMinutes) {
return {
ok: false,
@@ -58,10 +67,33 @@ export async function createEpisodeAction(input: CreateEpisodeInput): Promise<Cr
};
}
// Screen the requested topic before spending any quota or AI budget.
if (await isFlagEnabled("ai_moderation_enabled")) {
const mod = await moderateText([data.title, data.topic, data.audience].filter(Boolean).join("\n"));
if (mod.flagged) {
return {
ok: false,
error: "This topic may violate our content policy and can't be generated. Please revise it and try again.",
};
}
}
// Reserve quota atomically up front (a full generation consumes script,
// audio and art). The worker won't re-meter; we refund below if create/enqueue
// fails. See the metering invariant in lib/usage/meter.ts.
const reserved: UsageMetric[] = [];
const refundReserved = async () => {
for (const m of reserved) await refundUsage(subjectId, subjectType, m);
};
try {
await enforceLimit(session.user.id, "script", activeOrgId);
await enforceLimit(session.user.id, "audio", activeOrgId);
await reserveLimit(session.user.id, "script", activeOrgId);
reserved.push("script");
await reserveLimit(session.user.id, "audio", activeOrgId);
reserved.push("audio");
await reserveLimit(session.user.id, "art", activeOrgId);
reserved.push("art");
} catch (err) {
await refundReserved();
if (err instanceof LimitExceededError) {
return {
ok: false,
@@ -72,38 +104,43 @@ export async function createEpisodeAction(input: CreateEpisodeInput): Promise<Cr
throw err;
}
const episode = await prisma.episode.create({
data: {
userId: session.user.id,
organizationId: activeOrgId ?? undefined,
title: data.title?.trim() || deriveTitle(data.topic),
topic: data.topic,
tone: data.tone,
format: data.format,
language: data.language,
targetLengthMin: data.targetLengthMin,
audience: data.audience,
status: "QUEUED",
stage: "Queued for generation",
speakers: {
create: data.speakers.map((s) => ({
speakerKey: s.speakerKey,
displayName: s.displayName,
elevenVoiceId: s.elevenVoiceId,
})),
try {
const episode = await prisma.episode.create({
data: {
userId: session.user.id,
organizationId: activeOrgId ?? undefined,
title: data.title?.trim() || deriveTitle(data.topic),
topic: data.topic,
tone: data.tone,
format: data.format,
language: data.language,
targetLengthMin: data.targetLengthMin,
audience: data.audience,
status: "QUEUED",
stage: "Queued for generation",
speakers: {
create: data.speakers.map((s) => ({
speakerKey: s.speakerKey,
displayName: s.displayName,
elevenVoiceId: s.elevenVoiceId,
})),
},
jobs: { create: { type: "full", status: "queued" } },
},
jobs: { create: { type: "full", status: "queued" } },
},
});
});
await enqueueEpisodeGeneration(
{ episodeId: episode.id, type: "full" },
{ priority: plan.features.includes("priority_generation") ? 10 : 0 }
);
await enqueueEpisodeGeneration(
{ episodeId: episode.id, type: "full" },
{ priority: plan.features.includes("priority_generation") ? 10 : 0 }
);
revalidatePath("/episodes");
revalidatePath("/dashboard");
return { ok: true, episodeId: episode.id };
revalidatePath("/episodes");
revalidatePath("/dashboard");
return { ok: true, episodeId: episode.id };
} catch (err) {
await refundReserved();
throw err;
}
}
export async function regenerateAction(
@@ -113,6 +150,15 @@ export async function regenerateAction(
const session = await getServerSession();
if (!session) return { ok: false, error: "You must be signed in." };
const rl = await rateLimit("generation", session.user.id, LIMITS.generation);
if (!rl.ok) {
return { ok: false, error: `Too many requests. Try again in ${rl.retryAfterSec}s.` };
}
if (!(await isFlagEnabled("episode_generation_enabled"))) {
return { ok: false, error: "Episode generation is temporarily paused. Please try again shortly." };
}
const episode = await prisma.episode.findUnique({
where: { id: episodeId },
select: { userId: true, organizationId: true },
@@ -122,24 +168,41 @@ export async function regenerateAction(
return { ok: false, error: "Not allowed." };
}
// Gate the metrics this regeneration will consume.
const metrics: ("script" | "audio" | "art")[] =
const activeOrgId = session.session.activeOrganizationId;
const { subjectId, subjectType } = await getEffectivePlan(session.user.id, activeOrgId);
// Reserve the metrics this regeneration will consume up front. The worker
// won't re-meter; refund below if enqueue fails. See meter.ts invariant.
const metrics: UsageMetric[] =
type === "art" ? ["art"] : type === "audio" ? ["audio"] : ["script", "audio"];
const reserved: UsageMetric[] = [];
const refundReserved = async () => {
for (const m of reserved) await refundUsage(subjectId, subjectType, m);
};
try {
for (const m of metrics) await enforceLimit(session.user.id, m, session.session.activeOrganizationId);
for (const m of metrics) {
await reserveLimit(session.user.id, m, activeOrgId);
reserved.push(m);
}
} catch (err) {
await refundReserved();
if (err instanceof LimitExceededError) {
return { ok: false, error: `Monthly ${err.check.metric} limit reached on the ${err.check.plan} plan.` };
}
throw err;
}
await prisma.episode.update({
where: { id: episodeId },
data: { status: "QUEUED", stage: "Queued for regeneration", errorMessage: null },
});
await prisma.generationJob.create({ data: { episodeId, type, status: "queued" } });
await enqueueEpisodeGeneration({ episodeId, type });
try {
await prisma.episode.update({
where: { id: episodeId },
data: { status: "QUEUED", stage: "Queued for regeneration", errorMessage: null },
});
await prisma.generationJob.create({ data: { episodeId, type, status: "queued" } });
await enqueueEpisodeGeneration({ episodeId, type });
} catch (err) {
await refundReserved();
throw err;
}
revalidatePath(`/episodes/${episodeId}`);
return { ok: true };
@@ -198,8 +261,16 @@ export async function regenerateSectionAction(
}
if (!episode.script) return { ok: false, error: "No script to edit yet." };
const rl = await rateLimit("generation", session.user.id, LIMITS.generation);
if (!rl.ok) {
return { ok: false, error: `Too many requests. Try again in ${rl.retryAfterSec}s.` };
}
const activeOrgId = session.session.activeOrganizationId;
// Reserve the script unit atomically up front. This synchronous action does
// NOT increment afterwards (that would double-count) — it refunds on failure.
try {
await enforceLimit(session.user.id, "script", session.session.activeOrganizationId);
await reserveLimit(session.user.id, "script", activeOrgId);
} catch (err) {
if (err instanceof LimitExceededError) {
return { ok: false, error: `Monthly script limit reached on the ${err.check.plan} plan.` };
@@ -207,10 +278,12 @@ export async function regenerateSectionAction(
throw err;
}
const ownerId = episode.organizationId ?? episode.userId;
const ownerType = episode.organizationId ? "organization" : "user";
// Imported lazily so the AI SDK never reaches client bundles importing this file.
const { scriptProvider } = await import("@/lib/ai/providers");
const { recordCost, scriptCostUsd } = await import("@/lib/ai/cost");
const { incrementUsage } = await import("@/lib/usage/meter");
const config = {
title: episode.title,
@@ -227,20 +300,26 @@ export async function regenerateSectionAction(
sections: { id: string; title: string; turns: { speakerKey: string; text: string }[] }[];
};
const { section, usage } = await scriptProvider().regenerateSection(config, current, sectionId);
const updated = {
...current,
sections: current.sections.map((s) => (s.id === sectionId ? section : s)),
};
let section: { id: string; title: string; turns: { speakerKey: string; text: string }[] };
let usage: { inputTokens: number; outputTokens: number };
try {
({ section, usage } = await scriptProvider().regenerateSection(config, current, sectionId));
const updated = {
...current,
sections: current.sections.map((s) => (s.id === sectionId ? section : s)),
};
await prisma.script.update({
where: { episodeId },
data: { content: updated as unknown as Prisma.InputJsonValue, version: { increment: 1 } },
});
await prisma.script.update({
where: { episodeId },
data: { content: updated as unknown as Prisma.InputJsonValue, version: { increment: 1 } },
});
} catch (err) {
// Generation/save failed — refund the script unit we reserved.
await refundUsage(ownerId, ownerType, "script");
throw err;
}
const ownerId = episode.organizationId ?? episode.userId;
const ownerType = episode.organizationId ? "organization" : "user";
await incrementUsage(ownerId, ownerType, "script");
// No incrementUsage here: the unit was already reserved above.
await recordCost({
provider: "openai",
operation: "script",
@@ -270,8 +349,16 @@ export async function repurposeAction(
}
if (!episode.script) return { ok: false, error: "Generate the episode first." };
const rl = await rateLimit("repurpose", session.user.id, LIMITS.repurpose);
if (!rl.ok) {
return { ok: false, error: `Too many requests. Try again in ${rl.retryAfterSec}s.` };
}
const activeOrgId = session.session.activeOrganizationId;
// Reserve the repurpose unit atomically up front; refund on failure. This
// synchronous action does NOT increment afterwards (that would double-count).
try {
await enforceLimit(session.user.id, "repurpose", session.session.activeOrganizationId);
await reserveLimit(session.user.id, "repurpose", activeOrgId);
} catch (err) {
if (err instanceof LimitExceededError) {
return { ok: false, error: `Monthly repurpose limit reached on the ${err.check.plan} plan.` };
@@ -279,22 +366,30 @@ export async function repurposeAction(
throw err;
}
const { repurposeScript } = await import("@/lib/ai/pipeline/repurpose");
const { recordCost, scriptCostUsd } = await import("@/lib/ai/cost");
const { incrementUsage } = await import("@/lib/usage/meter");
const { content, usage } = await repurposeScript(
episode.script.content as unknown as Parameters<typeof repurposeScript>[0],
format
);
await prisma.repurposedContent.create({
data: { episodeId, type: format, content: content as unknown as Prisma.InputJsonValue },
});
const ownerId = episode.organizationId ?? episode.userId;
const ownerType = episode.organizationId ? "organization" : "user";
await incrementUsage(ownerId, ownerType, "repurpose");
const { repurposeScript } = await import("@/lib/ai/pipeline/repurpose");
const { recordCost, scriptCostUsd } = await import("@/lib/ai/cost");
let content: { title: string; body: string };
let usage: { inputTokens: number; outputTokens: number };
try {
({ content, usage } = await repurposeScript(
episode.script.content as unknown as Parameters<typeof repurposeScript>[0],
format
));
await prisma.repurposedContent.create({
data: { episodeId, type: format, content: content as unknown as Prisma.InputJsonValue },
});
} catch (err) {
// Generation/save failed — refund the repurpose unit we reserved.
await refundUsage(ownerId, ownerType, "repurpose");
throw err;
}
// No incrementUsage here: the unit was already reserved above.
await recordCost({
provider: "openai",
operation: "repurpose",
@@ -323,6 +418,53 @@ export async function deleteEpisodeAction(episodeId: string): Promise<{ ok: bool
return { ok: true };
}
/**
* Toggle public sharing for an episode. When enabled, mints a random url-safe
* `shareId` (reachable at /p/<shareId> with no auth) and stamps `sharedAt`;
* when disabled, clears both so the public page 404s. Ownership-checked.
*/
export async function setEpisodeShareAction(
episodeId: string,
enabled: boolean
): Promise<{ ok: boolean; error?: string; shareId?: string | null }> {
const session = await getServerSession();
if (!session) return { ok: false, error: "You must be signed in." };
const episode = await prisma.episode.findUnique({
where: { id: episodeId },
select: { userId: true, shareId: true, status: true },
});
if (!episode || (episode.userId !== session.user.id && session.user.role !== "admin")) {
return { ok: false, error: "Not allowed." };
}
if (enabled) {
if (episode.status !== "READY") {
return { ok: false, error: "Finish generating the episode before sharing it." };
}
// Reuse an existing shareId if one was already minted (stable public URL).
const shareId = episode.shareId ?? randomShareId();
await prisma.episode.update({
where: { id: episodeId },
data: { shareId, sharedAt: new Date() },
});
revalidatePath(`/episodes/${episodeId}`);
return { ok: true, shareId };
}
await prisma.episode.update({
where: { id: episodeId },
data: { shareId: null, sharedAt: null },
});
revalidatePath(`/episodes/${episodeId}`);
return { ok: true, shareId: null };
}
/** url-safe base64 token (~22 chars, 128 bits) for public share links. */
function randomShareId(): string {
return randomBytes(16).toString("base64url");
}
function deriveTitle(topic: string): string {
const trimmed = topic.trim().replace(/\s+/g, " ");
return trimmed.length <= 60 ? trimmed : trimmed.slice(0, 57) + "…";
app/(app)/episodes/loading.tsx
+14
View File
@@ -0,0 +1,14 @@
import { HeaderSkeleton, EpisodeGridSkeleton, Skeleton } from "@/components/ui/skeleton";
export default function EpisodesLoading() {
return (
<>
<HeaderSkeleton />
<div className="mb-6 flex flex-wrap gap-3">
<Skeleton className="h-10 w-full sm:max-w-xs" />
<Skeleton className="h-10 w-[150px]" />
</div>
<EpisodeGridSkeleton count={8} />
</>
);
}
app/(app)/episodes/page.tsx
+60 -16
View File
@@ -1,22 +1,55 @@
import type { Metadata } from "next";
import Link from "next/link";
import { Mic2, Plus } from "lucide-react";
import type { Prisma, EpisodeStatus } from "@prisma/client";
import { requireAuth } from "@/lib/auth/guards";
import { prisma } from "@/lib/db";
import { PageHeader } from "@/components/app/page-header";
import { EpisodeCard } from "@/components/app/episode-card";
import { SearchInput, FilterSelect } from "@/components/admin/ui/table-controls";
import { Button } from "@/components/ui/button";
import { EmptyState } from "@/components/ui/empty-state";
export const metadata: Metadata = { title: "Episodes" };
export default async function EpisodesPage() {
const STATUS_OPTIONS = [
{ value: "DRAFT", label: "Draft" },
{ value: "QUEUED", label: "Queued" },
{ value: "SCRIPTING", label: "Writing script" },
{ value: "SYNTHESIZING", label: "Recording audio" },
{ value: "STITCHING", label: "Mixing audio" },
{ value: "ART", label: "Designing art" },
{ value: "SAVING", label: "Finalizing" },
{ value: "READY", label: "Ready" },
{ value: "FAILED", label: "Failed" },
];
const VALID_STATUSES = new Set(STATUS_OPTIONS.map((o) => o.value));
export default async function EpisodesPage({
searchParams,
}: {
searchParams: Promise<{ q?: string; status?: string }>;
}) {
const session = await requireAuth();
const { q, status } = await searchParams;
const query = q?.trim();
const statusFilter = status && VALID_STATUSES.has(status) ? status : undefined;
const where: Prisma.EpisodeWhereInput = {
userId: session.user.id,
...(query ? { title: { contains: query, mode: "insensitive" } } : {}),
...(statusFilter ? { status: statusFilter as EpisodeStatus } : {}),
};
const episodes = await prisma.episode.findMany({
where: { userId: session.user.id },
where,
orderBy: { createdAt: "desc" },
include: { coverArt: { select: { storageKey: true } } },
});
const filtering = Boolean(query || statusFilter);
return (
<>
<PageHeader
@@ -31,21 +64,32 @@ export default async function EpisodesPage() {
}
/>
<div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center">
<SearchInput placeholder="Search episodes…" />
<FilterSelect param="status" placeholder="Status" options={STATUS_OPTIONS} allLabel="All statuses" />
</div>
{episodes.length === 0 ? (
<div className="flex flex-col items-center gap-3 rounded-2xl border border-dashed border-border py-16 text-center">
<span className="flex h-14 w-14 items-center justify-center rounded-2xl bg-brand/10 text-brand">
<Mic2 className="h-6 w-6" />
</span>
<div>
<p className="font-medium">No episodes yet</p>
<p className="text-sm text-muted-foreground">Create your first AI-produced episode.</p>
</div>
<Button asChild>
<Link href="/episodes/new">
<Plus className="h-4 w-4" /> New episode
</Link>
</Button>
</div>
filtering ? (
<EmptyState
icon={Mic2}
title="No matching episodes"
description="Try a different search term or status filter."
/>
) : (
<EmptyState
icon={Mic2}
title="No episodes yet"
description="Create your first AI-produced episode."
action={
<Button asChild>
<Link href="/episodes/new">
<Plus className="h-4 w-4" /> New episode
</Link>
</Button>
}
/>
)
) : (
<div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
{episodes.map((ep) => (
app/(app)/error.tsx
+26
View File
@@ -0,0 +1,26 @@
"use client";
import { AlertTriangle, RotateCw } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
export default function AppError({ error, reset }: { error: Error; reset: () => void }) {
return (
<Card>
<CardContent className="flex flex-col items-center gap-3 py-16 text-center">
<span className="flex h-12 w-12 items-center justify-center rounded-2xl bg-destructive/10 text-destructive">
<AlertTriangle className="h-6 w-6" />
</span>
<div>
<p className="font-display text-lg font-bold tracking-tight">Something went wrong</p>
<p className="max-w-md text-sm text-muted-foreground">
{error.message || "This page failed to load. Please try again."}
</p>
</div>
<Button onClick={reset}>
<RotateCw className="h-4 w-4" /> Try again
</Button>
</CardContent>
</Card>
);
}
app/(app)/layout.tsx
+82 -37
View File
@@ -1,9 +1,15 @@
import Link from "next/link";
import { Mic, Plus } from "lucide-react";
import { Mic, Plus, Wrench } from "lucide-react";
import { requireAuth } from "@/lib/auth/guards";
import { getEffectivePlan } from "@/lib/billing/subscription";
import { getActiveBranding, hexToHslTriplet } from "@/lib/branding";
import { isFlagEnabled } from "@/lib/flags";
import { SidebarNav } from "@/components/app/sidebar-nav";
import { AppMobileNav } from "@/components/app/app-mobile-nav";
import { UserMenu } from "@/components/app/user-menu";
import { CommandPalette } from "@/components/app/command-palette";
import { ImpersonationBanner } from "@/components/app/impersonation-banner";
import { ThemeProvider } from "@/components/providers/theme-provider";
import { Button } from "@/components/ui/button";
// Authed, DB-backed dashboard — never statically prerender.
@@ -11,46 +17,85 @@ export const dynamic = "force-dynamic";
export default async function AppLayout({ children }: { children: React.ReactNode }) {
const session = await requireAuth();
const { key: plan } = await getEffectivePlan(
session.user.id,
session.session.activeOrganizationId
);
const activeOrgId = session.session.activeOrganizationId;
const [{ key: plan }, branding, maintenance] = await Promise.all([
getEffectivePlan(session.user.id, activeOrgId),
getActiveBranding(session.user.id, activeOrgId),
isFlagEnabled("maintenance_banner"),
]);
const isAdmin = session.user.role === "admin";
return (
<div className="flex min-h-screen flex-col">
<header className="sticky top-0 z-30 flex h-16 items-center justify-between border-b border-border bg-background/85 px-4 backdrop-blur-md md:px-6">
<Link href="/dashboard" className="flex items-center gap-2.5 font-display font-bold tracking-tight">
<span className="flex h-9 w-9 items-center justify-center rounded-2xl bg-brand text-brand-foreground">
<Mic className="h-5 w-5" />
</span>
<span className="hidden sm:inline">PodcastYes</span>
</Link>
<div className="flex items-center gap-3">
<Button asChild size="sm">
<Link href="/episodes/new">
<Plus className="h-4 w-4" /> New episode
</Link>
</Button>
<UserMenu
name={session.user.name}
email={session.user.email}
image={session.user.image}
isAdmin={isAdmin}
/>
</div>
</header>
// White-label: override the brand accent with the org's primary color so the
// whole app shell (logo tile, active nav, buttons) adopts it.
const brandHsl = hexToHslTriplet(branding?.primaryColor);
const brandStyle = brandHsl
? ({ "--brand": brandHsl, "--ring": brandHsl } as React.CSSProperties)
: undefined;
const workspaceName = branding?.brandName ?? "PodcastYes";
<div className="flex flex-1">
<aside className="hidden w-64 shrink-0 border-r border-border bg-background md:block">
<div className="sticky top-16">
<SidebarNav plan={plan} />
return (
<ThemeProvider>
<div className="flex min-h-screen flex-col" style={brandStyle}>
<ImpersonationBanner />
{maintenance && (
<div className="flex items-center justify-center gap-2 bg-warning px-4 py-2 text-center text-sm font-medium text-warning-foreground">
<Wrench className="h-4 w-4" />
We&apos;re performing scheduled maintenance — some features may be briefly unavailable.
</div>
</aside>
<main className="flex-1 bg-secondary/50">
<div className="container max-w-6xl py-8 md:py-10">{children}</div>
</main>
)}
<header className="sticky top-0 z-30 flex h-16 items-center justify-between border-b border-border bg-background/85 px-4 backdrop-blur-md md:px-6">
<div className="flex items-center gap-1">
<AppMobileNav plan={plan} workspaceName={workspaceName} />
<Link href="/dashboard" className="flex items-center gap-2.5 font-display font-bold tracking-tight">
{branding?.logoUrl ? (
// eslint-disable-next-line @next/next/no-img-element
<img
src={branding.logoUrl}
alt={workspaceName}
className="h-8 w-auto max-w-[160px] object-contain"
/>
) : (
<>
<span className="flex h-9 w-9 items-center justify-center rounded-2xl bg-brand text-brand-foreground">
<Mic className="h-5 w-5" />
</span>
<span className="hidden sm:inline">{workspaceName}</span>
</>
)}
</Link>
</div>
<div className="flex items-center gap-3">
<Button asChild size="sm">
<Link href="/episodes/new">
<Plus className="h-4 w-4" /> New episode
</Link>
</Button>
<UserMenu
name={session.user.name}
email={session.user.email}
image={session.user.image}
isAdmin={isAdmin}
/>
</div>
</header>
<div className="flex flex-1">
<aside className="hidden w-64 shrink-0 border-r border-border bg-background md:block">
<div className="sticky top-16">
<SidebarNav plan={plan} />
</div>
</aside>
<main className="flex-1 bg-secondary/50">
<div className="container max-w-6xl py-8 md:py-10">{children}</div>
{branding && !branding.removePoweredBy && (
<p className="pb-8 text-center text-xs text-muted-foreground">Powered by PodcastYes</p>
)}
</main>
</div>
<CommandPalette />
</div>
</div>
</ThemeProvider>
);
}
app/(app)/series/actions.ts
+8
View File
@@ -10,6 +10,7 @@ import { enforceLimit, LimitExceededError } from "@/lib/usage/limits";
import { enqueueEpisodeGeneration } from "@/lib/queue/pgboss";
import { FORMAT_SPEAKERS } from "@/lib/episodes/options";
import { DEFAULT_VOICE_IDS, VOICE_CATALOG } from "@/lib/ai/voices";
import { isFlagEnabled } from "@/lib/flags";
const createSchema = z.object({
theme: z.string().min(5).max(500),
@@ -27,6 +28,9 @@ export async function createSeriesAction(
if (!(await subjectHasFeature(session.user.id, "series_generator", session.session.activeOrganizationId))) {
return { ok: false, error: "The series generator requires the Pro plan." };
}
if (!(await isFlagEnabled("episode_generation_enabled"))) {
return { ok: false, error: "Generation is temporarily paused. Please try again shortly." };
}
const parsed = createSchema.safeParse(input);
if (!parsed.success) return { ok: false, error: parsed.error.issues[0]?.message ?? "Invalid input." };
@@ -54,6 +58,10 @@ export async function generateFromSeriesAction(
const session = await getServerSession();
if (!session) return { ok: false, error: "You must be signed in." };
if (!(await isFlagEnabled("episode_generation_enabled"))) {
return { ok: false, error: "Episode generation is temporarily paused. Please try again shortly." };
}
const series = await prisma.series.findUnique({ where: { id: seriesId } });
if (!series || series.userId !== session.user.id) return { ok: false, error: "Not allowed." };
app/(app)/series/loading.tsx
+15
View File
@@ -0,0 +1,15 @@
import { HeaderSkeleton, Skeleton } from "@/components/ui/skeleton";
export default function SeriesLoading() {
return (
<>
<HeaderSkeleton />
<Skeleton className="h-72 max-w-2xl rounded-2xl" />
<div className="mt-8 grid gap-3 sm:grid-cols-2">
{Array.from({ length: 2 }).map((_, i) => (
<Skeleton key={i} className="h-20 rounded-2xl" />
))}
</div>
</>
);
}
app/(app)/series/page.tsx
+13 -6
View File
@@ -8,6 +8,7 @@ import { PageHeader } from "@/components/app/page-header";
import { UpgradeGate } from "@/components/app/upgrade-gate";
import { SeriesCreateForm } from "@/components/app/series-create-form";
import { Card, CardContent } from "@/components/ui/card";
import { EmptyState } from "@/components/ui/empty-state";
export const metadata: Metadata = { title: "Series" };
@@ -47,13 +48,13 @@ export default async function SeriesPage() {
<SeriesCreateForm />
{series.length > 0 && (
<div className="mt-8 space-y-3">
<h2 className="text-sm font-semibold text-muted-foreground">Your seasons</h2>
<div className="mt-8 space-y-3">
<h2 className="text-sm font-semibold text-muted-foreground">Your seasons</h2>
{series.length > 0 ? (
<div className="grid gap-3 sm:grid-cols-2">
{series.map((s) => (
<Link key={s.id} href={`/series/${s.id}`}>
<Card className="transition-shadow hover:shadow-md">
<Card className="transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
<CardContent className="flex items-center gap-3 py-4">
<span className="flex h-11 w-11 items-center justify-center rounded-xl bg-brand/10 text-brand">
<ListMusic className="h-5 w-5" />
@@ -69,8 +70,14 @@ export default async function SeriesPage() {
</Link>
))}
</div>
</div>
)}
) : (
<EmptyState
icon={ListMusic}
title="No seasons yet"
description="Plan a cohesive season above, then generate each episode in a couple of clicks."
/>
)}
</div>
</>
);
}
app/(app)/settings/actions.ts
+91
View File
@@ -0,0 +1,91 @@
"use server";
import { revalidatePath } from "next/cache";
import { z } from "zod";
import { getServerSession } from "@/lib/auth/guards";
import { prisma } from "@/lib/db";
import { LANGUAGES } from "@/lib/episodes/options";
import { VOICE_CATALOG } from "@/lib/ai/voices";
const VALID_LANGUAGES = new Set<string>(LANGUAGES.map((l) => l.code));
const VALID_VOICES = new Set<string>(VOICE_CATALOG.map((v) => v.id));
const preferencesSchema = z.object({
defaultVoiceId: z.string().nullable().optional(),
defaultLanguage: z.string().min(2).max(5).optional(),
emailOnEpisodeReady: z.boolean().optional(),
productEmails: z.boolean().optional(),
});
export type PreferencesInput = z.infer<typeof preferencesSchema>;
/**
* Persist the current user's editor defaults and notification preferences.
* Auth-checked; upserts the single per-user preferences row. Only validated,
* known voice/language values are stored.
*/
export async function savePreferencesAction(
input: PreferencesInput
): Promise<{ ok: boolean; error?: string }> {
const session = await getServerSession();
if (!session) return { ok: false, error: "You must be signed in." };
const parsed = preferencesSchema.safeParse(input);
if (!parsed.success) return { ok: false, error: "Invalid settings." };
const data = parsed.data;
if (data.defaultVoiceId && !VALID_VOICES.has(data.defaultVoiceId)) {
return { ok: false, error: "Unknown voice." };
}
if (data.defaultLanguage && !VALID_LANGUAGES.has(data.defaultLanguage)) {
return { ok: false, error: "Unsupported language." };
}
const userId = session.user.id;
// Normalize "none"/empty voice to null.
const defaultVoiceId =
data.defaultVoiceId === undefined ? undefined : data.defaultVoiceId || null;
await prisma.userPreferences.upsert({
where: { userId },
create: {
userId,
defaultVoiceId: defaultVoiceId ?? null,
defaultLanguage: data.defaultLanguage ?? "en",
emailOnEpisodeReady: data.emailOnEpisodeReady ?? true,
productEmails: data.productEmails ?? true,
},
update: {
...(defaultVoiceId !== undefined ? { defaultVoiceId } : {}),
...(data.defaultLanguage !== undefined ? { defaultLanguage: data.defaultLanguage } : {}),
...(data.emailOnEpisodeReady !== undefined
? { emailOnEpisodeReady: data.emailOnEpisodeReady }
: {}),
...(data.productEmails !== undefined ? { productEmails: data.productEmails } : {}),
},
});
revalidatePath("/settings");
return { ok: true };
}
/**
* Permanently delete the current user's account. Auth-checked and gated by a
* typed email confirmation that must match the session email. The User delete
* cascades to sessions, accounts, episodes, series, usage and preferences. The
* client signs out after a successful response.
*/
export async function deleteAccountAction(
confirmEmail: string
): Promise<{ ok: boolean; error?: string }> {
const session = await getServerSession();
if (!session) return { ok: false, error: "You must be signed in." };
if (confirmEmail.trim().toLowerCase() !== session.user.email.toLowerCase()) {
return { ok: false, error: "The email you typed doesn't match your account." };
}
// Deleting the User row cascades to all owned data via onDelete: Cascade.
await prisma.user.delete({ where: { id: session.user.id } });
return { ok: true };
}
app/(app)/settings/page.tsx
+16 -1
View File
@@ -1,5 +1,6 @@
import type { Metadata } from "next";
import { requireAuth } from "@/lib/auth/guards";
import { prisma } from "@/lib/db";
import { PageHeader } from "@/components/app/page-header";
import { SettingsClient } from "@/components/app/settings-client";
@@ -7,10 +8,24 @@ export const metadata: Metadata = { title: "Settings" };
export default async function SettingsPage() {
const session = await requireAuth();
const prefs = await prisma.userPreferences.findUnique({
where: { userId: session.user.id },
});
return (
<>
<PageHeader title="Settings" description="Manage your account." />
<SettingsClient name={session.user.name} email={session.user.email} />
<SettingsClient
name={session.user.name}
email={session.user.email}
preferences={{
defaultVoiceId: prefs?.defaultVoiceId ?? null,
defaultLanguage: prefs?.defaultLanguage ?? "en",
emailOnEpisodeReady: prefs?.emailOnEpisodeReady ?? true,
productEmails: prefs?.productEmails ?? true,
}}
/>
</>
);
}
app/(app)/team/actions.ts
+78 -1
View File
@@ -1,10 +1,29 @@
"use server";
import { revalidatePath } from "next/cache";
import { headers } from "next/headers";
import { z } from "zod";
import { auth } from "@/lib/auth/auth";
import { getServerSession } from "@/lib/auth/guards";
import { getEffectivePlan } from "@/lib/billing/subscription";
import { prisma } from "@/lib/db";
/** http(s)-only URL guard: rejects javascript:/data: and other schemes. */
const httpUrl = z
.string()
.url()
.refine(
(v) => {
try {
const proto = new URL(v).protocol;
return proto === "http:" || proto === "https:";
} catch {
return false;
}
},
{ message: "Logo URL must be an http(s) URL." }
);
const brandingSchema = z.object({
brandName: z.string().max(60).optional(),
primaryColor: z
@@ -12,10 +31,68 @@ const brandingSchema = z.object({
.regex(/^#([0-9a-fA-F]{6})$/, "Use a hex colour like #7c3aed")
.optional()
.or(z.literal("")),
logoUrl: z.string().url().optional().or(z.literal("")),
logoUrl: httpUrl.optional().or(z.literal("")),
removePoweredBy: z.boolean().optional(),
});
const inviteSchema = z.object({
email: z.string().email("Enter a valid email address."),
});
/**
* Invite a member — the server is the authority on the seat check.
*
* Better Auth only enforces `membershipLimit: 5` (see lib/auth/auth.ts), which is
* NOT the same as the plan's `seats`. So we enforce the plan seat count here before
* delegating to Better Auth's server API (`auth.api.createInvitation`), which itself
* re-verifies that the caller is allowed to invite. The client-side check in
* team-client.tsx remains only as a fast UX guard.
*/
export async function inviteMemberAction(
organizationId: string,
email: string
): Promise<{ ok: boolean; error?: string }> {
const session = await getServerSession();
if (!session) return { ok: false, error: "You must be signed in." };
const parsed = inviteSchema.safeParse({ email });
if (!parsed.success) return { ok: false, error: parsed.error.issues[0]?.message ?? "Invalid email." };
// Caller must be an owner/admin of this organization.
const member = await prisma.member.findFirst({
where: { organizationId, userId: session.user.id },
select: { role: true },
});
if (!member || !["owner", "admin"].includes(member.role)) {
return { ok: false, error: "Only workspace owners can invite members." };
}
// Seat enforcement against the effective plan, counting members + pending invites.
const { plan } = await getEffectivePlan(session.user.id, organizationId);
const [memberCount, pendingInvites] = await Promise.all([
prisma.member.count({ where: { organizationId } }),
prisma.invitation.count({ where: { organizationId, status: "pending" } }),
]);
if (memberCount + pendingInvites >= plan.limits.seats) {
return { ok: false, error: `Your plan includes ${plan.limits.seats} seats.` };
}
// Server-side invite via Better Auth's organization plugin API. Passing the
// request headers authenticates the call; Better Auth also re-checks permissions.
try {
await auth.api.createInvitation({
body: { email: parsed.data.email, role: "member", organizationId },
headers: await headers(),
});
} catch (err) {
const message = err instanceof Error ? err.message : "Could not send invitation.";
return { ok: false, error: message };
}
revalidatePath("/team");
return { ok: true };
}
export async function saveBrandingAction(
organizationId: string,
data: z.infer<typeof brandingSchema>
app/(app)/team/loading.tsx
+13
View File
@@ -0,0 +1,13 @@
import { HeaderSkeleton, Skeleton } from "@/components/ui/skeleton";
export default function TeamLoading() {
return (
<>
<HeaderSkeleton />
<div className="space-y-6">
<Skeleton className="h-64 rounded-2xl" />
<Skeleton className="h-80 rounded-2xl" />
</div>
</>
);
}
app/(app)/usage/loading.tsx
+15
View File
@@ -0,0 +1,15 @@
import { HeaderSkeleton, Skeleton } from "@/components/ui/skeleton";
export default function UsageLoading() {
return (
<>
<HeaderSkeleton />
<Skeleton className="mb-6 h-6 w-44" />
<div className="grid gap-4 sm:grid-cols-2">
{Array.from({ length: 4 }).map((_, i) => (
<Skeleton key={i} className="h-36 rounded-2xl" />
))}
</div>
</>
);
}