feat(dashboard): cache snapshot data and add credits activity analytics
This commit is contained in:
Matthias
@@ -1,8 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect } from "react";
|
||||
import { useAuthQuery } from "@/hooks/use-auth-query";
|
||||
import { useFormatter, useTranslations } from "next-intl";
|
||||
import { useLocale, useTranslations } from "next-intl";
|
||||
import { CreditCard } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
@@ -10,8 +9,9 @@ import { useRouter } from "next/navigation";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import { api } from "@/convex/_generated/api";
|
||||
import { normalizeTier, TIER_MONTHLY_CREDITS } from "@/lib/polar-products";
|
||||
import type { DashboardSnapshot } from "@/hooks/use-dashboard-snapshot";
|
||||
import { normalizeTier } from "@/lib/polar-products";
|
||||
import { formatCredits } from "@/lib/credits-activity";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { toast } from "@/lib/toast";
|
||||
|
||||
@@ -28,16 +28,16 @@ const TIER_BADGE_STYLES: Record<string, string> = {
|
||||
|
||||
const LOW_CREDITS_THRESHOLD = 20;
|
||||
|
||||
export function CreditOverview() {
|
||||
type CreditOverviewProps = {
|
||||
balance?: DashboardSnapshot["balance"];
|
||||
subscription?: DashboardSnapshot["subscription"];
|
||||
usageStats?: DashboardSnapshot["usageStats"];
|
||||
};
|
||||
|
||||
export function CreditOverview({ balance, subscription, usageStats }: CreditOverviewProps) {
|
||||
const t = useTranslations('toasts');
|
||||
const router = useRouter();
|
||||
const format = useFormatter();
|
||||
|
||||
const formatEurFromCents = (cents: number) =>
|
||||
format.number(cents / 100, { style: "currency", currency: "EUR" });
|
||||
const balance = useAuthQuery(api.credits.getBalance);
|
||||
const subscription = useAuthQuery(api.credits.getSubscription);
|
||||
const usageStats = useAuthQuery(api.credits.getUsageStats);
|
||||
const locale = useLocale();
|
||||
|
||||
useEffect(() => {
|
||||
if (balance === undefined) return;
|
||||
@@ -79,7 +79,7 @@ export function CreditOverview() {
|
||||
|
||||
// ── Computed Values ────────────────────────────────────────────────────
|
||||
const tier = normalizeTier(subscription.tier);
|
||||
const monthlyCredits = TIER_MONTHLY_CREDITS[tier];
|
||||
const monthlyCredits = usageStats.monthlyCredits;
|
||||
const usagePercent = monthlyCredits > 0
|
||||
? Math.min(100, Math.round((usageStats.monthlyUsage / monthlyCredits) * 100))
|
||||
: 0;
|
||||
@@ -98,9 +98,9 @@ export function CreditOverview() {
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm text-muted-foreground">Verfügbare Credits</p>
|
||||
<div className="flex items-baseline gap-3">
|
||||
<span className="text-3xl font-semibold tabular-nums tracking-tight">
|
||||
{formatEurFromCents(balance.available)}
|
||||
</span>
|
||||
<span className="text-3xl font-semibold tabular-nums tracking-tight">
|
||||
{formatCredits(balance.available, locale)}
|
||||
</span>
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className={cn(
|
||||
@@ -113,7 +113,7 @@ export function CreditOverview() {
|
||||
</div>
|
||||
{balance.reserved > 0 && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
({formatEurFromCents(balance.reserved)} reserviert)
|
||||
({formatCredits(balance.reserved, locale)} reserviert)
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
@@ -132,8 +132,8 @@ export function CreditOverview() {
|
||||
/>
|
||||
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
||||
<span>
|
||||
{formatEurFromCents(usageStats.monthlyUsage)} von{" "}
|
||||
{formatEurFromCents(monthlyCredits)} verwendet
|
||||
{formatCredits(usageStats.monthlyUsage, locale)} von{" "}
|
||||
{formatCredits(monthlyCredits, locale)} verwendet
|
||||
</span>
|
||||
<span className="tabular-nums">
|
||||
{usageStats.totalGenerations} Generierungen
|
||||
|
||||
150
components/dashboard/credits-activity-chart.tsx
Normal file
150
components/dashboard/credits-activity-chart.tsx
Normal file
@@ -0,0 +1,150 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo } from "react";
|
||||
import { useLocale } from "next-intl";
|
||||
import { Area, AreaChart, CartesianGrid, Line, XAxis, YAxis } from "recharts";
|
||||
import { ChartNoAxesCombined } from "lucide-react";
|
||||
|
||||
import {
|
||||
buildCreditsActivitySeries,
|
||||
calculateUsageActivityDomain,
|
||||
formatCredits,
|
||||
prioritizeRecentCreditTransactions,
|
||||
} from "@/lib/credits-activity";
|
||||
import type { DashboardSnapshot } from "@/hooks/use-dashboard-snapshot";
|
||||
import {
|
||||
ChartContainer,
|
||||
ChartLegend,
|
||||
ChartLegendContent,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
type ChartConfig,
|
||||
} from "@/components/ui/chart";
|
||||
|
||||
const chartConfig = {
|
||||
usage: {
|
||||
label: "Verbrauch",
|
||||
color: "hsl(var(--primary))",
|
||||
},
|
||||
activity: {
|
||||
label: "Aktivität",
|
||||
color: "hsl(var(--accent-foreground))",
|
||||
},
|
||||
available: {
|
||||
label: "Verfügbar",
|
||||
color: "hsl(var(--muted-foreground))",
|
||||
},
|
||||
} satisfies ChartConfig;
|
||||
|
||||
type CreditsActivityChartProps = {
|
||||
balance?: DashboardSnapshot["balance"];
|
||||
recentTransactions?: DashboardSnapshot["recentTransactions"];
|
||||
};
|
||||
|
||||
export function CreditsActivityChart({ balance, recentTransactions }: CreditsActivityChartProps) {
|
||||
const locale = useLocale();
|
||||
|
||||
const chartData = useMemo(() => {
|
||||
if (balance === undefined || recentTransactions === undefined) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const prioritized = prioritizeRecentCreditTransactions(recentTransactions, 40);
|
||||
|
||||
return buildCreditsActivitySeries(prioritized, balance.available, locale, 7);
|
||||
}, [balance, recentTransactions, locale]);
|
||||
|
||||
const usageDomain = useMemo(
|
||||
() => calculateUsageActivityDomain(chartData),
|
||||
[chartData],
|
||||
);
|
||||
|
||||
if (balance === undefined || recentTransactions === undefined) {
|
||||
return (
|
||||
<div className="rounded-xl border bg-card p-6 shadow-sm shadow-foreground/3">
|
||||
<div className="h-[240px] animate-pulse rounded bg-muted" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (chartData.length === 0) {
|
||||
return (
|
||||
<div className="rounded-xl border bg-card p-6 shadow-sm shadow-foreground/3">
|
||||
<div className="mb-3 flex items-center gap-2 text-sm font-medium">
|
||||
<ChartNoAxesCombined className="size-3.5 text-muted-foreground" />
|
||||
Credits Verlauf
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">Noch keine verbrauchsrelevante Aktivität vorhanden.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-w-0 rounded-xl border bg-card p-5 shadow-sm shadow-foreground/3">
|
||||
<div className="mb-2 flex items-center justify-between gap-3">
|
||||
<div className="flex items-center gap-2 text-sm font-medium">
|
||||
<ChartNoAxesCombined className="size-3.5 text-muted-foreground" />
|
||||
Credits Verlauf
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Verfügbar: {formatCredits(balance.available, locale)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ChartContainer
|
||||
config={chartConfig}
|
||||
className="h-[240px] w-full min-w-0 aspect-auto"
|
||||
>
|
||||
<AreaChart accessibilityLayer data={chartData}>
|
||||
<CartesianGrid vertical={false} />
|
||||
<XAxis dataKey="day" tickLine={false} axisLine={false} tickMargin={8} />
|
||||
<YAxis
|
||||
yAxisId="usage"
|
||||
orientation="right"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={8}
|
||||
width={44}
|
||||
allowDecimals={false}
|
||||
domain={usageDomain}
|
||||
/>
|
||||
<YAxis yAxisId="available" hide />
|
||||
<ChartTooltip
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
formatter={(value: number) => formatCredits(Number(value), locale)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Area
|
||||
dataKey="activity"
|
||||
yAxisId="usage"
|
||||
type="monotone"
|
||||
fill="var(--color-activity)"
|
||||
fillOpacity={0.15}
|
||||
stroke="var(--color-activity)"
|
||||
strokeWidth={2}
|
||||
/>
|
||||
<Area
|
||||
dataKey="usage"
|
||||
yAxisId="usage"
|
||||
type="monotone"
|
||||
fill="var(--color-usage)"
|
||||
fillOpacity={0.25}
|
||||
stroke="var(--color-usage)"
|
||||
strokeWidth={2}
|
||||
/>
|
||||
<Line
|
||||
dataKey="available"
|
||||
yAxisId="available"
|
||||
type="monotone"
|
||||
dot={false}
|
||||
stroke="var(--color-available)"
|
||||
strokeWidth={2}
|
||||
/>
|
||||
<ChartLegend content={<ChartLegendContent />} />
|
||||
</AreaChart>
|
||||
</ChartContainer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,12 +1,12 @@
|
||||
"use client";
|
||||
|
||||
import { useAuthQuery } from "@/hooks/use-auth-query";
|
||||
import { useFormatter } from "next-intl";
|
||||
import { useFormatter, useLocale } from "next-intl";
|
||||
import { Activity, Coins } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { api } from "@/convex/_generated/api";
|
||||
import type { DashboardSnapshot } from "@/hooks/use-dashboard-snapshot";
|
||||
import { formatCredits } from "@/lib/credits-activity";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
@@ -45,12 +45,14 @@ function truncatedDescription(text: string, maxLen = 40) {
|
||||
// Component
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export function RecentTransactions() {
|
||||
type RecentTransactionsProps = {
|
||||
recentTransactions?: DashboardSnapshot["recentTransactions"];
|
||||
};
|
||||
|
||||
export function RecentTransactions({ recentTransactions }: RecentTransactionsProps) {
|
||||
const format = useFormatter();
|
||||
const locale = useLocale();
|
||||
const [now, setNow] = useState<number | null>(null);
|
||||
const transactions = useAuthQuery(api.credits.getRecentTransactions, {
|
||||
limit: 10,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const updateNow = () => {
|
||||
@@ -67,8 +69,7 @@ export function RecentTransactions() {
|
||||
};
|
||||
}, []);
|
||||
|
||||
const formatEurFromCents = (cents: number) =>
|
||||
format.number(cents / 100, { style: "currency", currency: "EUR" });
|
||||
const transactions = recentTransactions ?? [];
|
||||
|
||||
const formatRelativeTime = (timestamp: number) => {
|
||||
const referenceNow = now ?? timestamp;
|
||||
@@ -85,7 +86,7 @@ export function RecentTransactions() {
|
||||
};
|
||||
|
||||
// ── Loading State ──────────────────────────────────────────────────────
|
||||
if (transactions === undefined) {
|
||||
if (recentTransactions === undefined) {
|
||||
return (
|
||||
<div className="rounded-xl border bg-card p-6 shadow-sm shadow-foreground/3">
|
||||
<div className="mb-4 flex items-center gap-2 text-sm font-medium">
|
||||
@@ -173,7 +174,7 @@ export function RecentTransactions() {
|
||||
)}
|
||||
>
|
||||
{isCredit ? "+" : "−"}
|
||||
{formatEurFromCents(Math.abs(t.amount))}
|
||||
{formatCredits(Math.abs(t.amount), locale)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user