58 lines
1.8 KiB
TypeScript
58 lines
1.8 KiB
TypeScript
import PricingList from "@/components/PricingPlan";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Progress } from "@/components/ui/progress";
|
|
import { getCurrentPlanWithAuth } from "@/server/getCurrentPlan";
|
|
import { stripe } from "@/server/stripe";
|
|
|
|
const freeTierSeconds = 30000;
|
|
|
|
export default async function Home() {
|
|
const sub = await getCurrentPlanWithAuth();
|
|
|
|
const data = sub?.subscription_item_api_id
|
|
? await stripe.subscriptionItems.listUsageRecordSummaries(
|
|
sub?.subscription_item_api_id,
|
|
)
|
|
: null;
|
|
|
|
return (
|
|
<div className="mt-4 flex items-center justify-center">
|
|
<Card className="p-4 w-full max-w-[600px]">
|
|
<CardHeader>
|
|
<CardTitle>Account Usage</CardTitle>
|
|
<CardDescription>View you account usage</CardDescription>
|
|
<Badge className="w-fit">{sub?.plan}</Badge>
|
|
</CardHeader>
|
|
{data && (
|
|
<CardContent className="text-sm flex flex-col gap-2">
|
|
<div className="flex justify-between gap-2">
|
|
<span>Current free gpu usage:</span>
|
|
{
|
|
<div className="flex gap-2">
|
|
<Badge>
|
|
{data.data[0].total_usage}s /{Math.floor(freeTierSeconds)}s
|
|
</Badge>
|
|
<Badge>
|
|
{Math.floor(data.data[0].total_usage / 60 / 60)}hr /
|
|
{Math.floor(freeTierSeconds / 60 / 60)}hr
|
|
</Badge>
|
|
</div>
|
|
}
|
|
</div>
|
|
<Progress
|
|
value={(data.data[0].total_usage / freeTierSeconds) * 100}
|
|
></Progress>
|
|
</CardContent>
|
|
)}
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|