100 lines
3.2 KiB
TypeScript
100 lines
3.2 KiB
TypeScript
'use client';
|
|
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { Loader2, BarChart2 } from 'lucide-react';
|
|
import { useLanguage } from '@/lib/i18n';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface QuotaEntry {
|
|
remaining: number;
|
|
limit: number;
|
|
used: number;
|
|
}
|
|
|
|
type Quotas = Record<string, QuotaEntry>;
|
|
|
|
const FEATURE_LABEL_KEYS: Record<string, string> = {
|
|
aiSummary: 'sidebar.aiSummary',
|
|
aiFlashcards: 'sidebar.aiFlashcards',
|
|
aiMindmap: 'sidebar.aiMindmap',
|
|
aiTranscribe: 'sidebar.aiTranscribe',
|
|
aiDiagram: 'sidebar.aiDiagram',
|
|
aiAgent: 'sidebar.aiAgent',
|
|
};
|
|
|
|
function UsageBar({ used, limit, isUnlimited }: { used: number; limit: number; isUnlimited: boolean }) {
|
|
const pct = isUnlimited ? 0 : Math.min(100, limit > 0 ? (used / limit) * 100 : 0);
|
|
const color =
|
|
pct >= 90 ? 'bg-rose-500' : pct >= 70 ? 'bg-amber-500' : 'bg-primary';
|
|
|
|
return (
|
|
<div className="h-1.5 w-full rounded-full bg-foreground/10 overflow-hidden">
|
|
{!isUnlimited && (
|
|
<div
|
|
className={cn('h-full rounded-full transition-all', color)}
|
|
style={{ width: `${pct}%` }}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function UsageBreakdown() {
|
|
const { t } = useLanguage();
|
|
|
|
const { data, isLoading } = useQuery<{ quotas: Quotas }>({
|
|
queryKey: ['usage', 'current'],
|
|
queryFn: async () => {
|
|
const res = await fetch('/api/usage/current');
|
|
if (!res.ok) throw new Error('Failed to fetch usage');
|
|
return res.json();
|
|
},
|
|
});
|
|
|
|
const quotas = data?.quotas ?? {};
|
|
const entries = Object.entries(quotas);
|
|
|
|
return (
|
|
<div className="rounded-xl border border-border/40 bg-paper p-6 space-y-4">
|
|
<div className="flex items-center gap-2">
|
|
<BarChart2 className="h-4 w-4 text-muted-foreground" />
|
|
<h3 className="text-sm font-semibold text-foreground">
|
|
{t('billing.usageThisPeriod')}
|
|
</h3>
|
|
</div>
|
|
|
|
{isLoading ? (
|
|
<div className="flex justify-center py-4">
|
|
<Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
|
|
</div>
|
|
) : entries.length === 0 ? (
|
|
<p className="text-xs text-muted-foreground py-2">{t('billing.noUsage')}</p>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{entries.map(([feature, quota]) => {
|
|
const isUnlimited = quota.limit === -1 || !isFinite(quota.limit);
|
|
const labelKey = FEATURE_LABEL_KEYS[feature];
|
|
const label = labelKey ? t(labelKey) : feature;
|
|
|
|
return (
|
|
<div key={feature} className="space-y-1">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-xs text-muted-foreground">{label}</span>
|
|
<span className="text-xs font-medium text-foreground tabular-nums">
|
|
{isUnlimited ? (
|
|
<span className="text-primary/80 dark:text-primary">{t('billing.unlimited')}</span>
|
|
) : (
|
|
`${quota.used} / ${quota.limit}`
|
|
)}
|
|
</span>
|
|
</div>
|
|
<UsageBar used={quota.used} limit={quota.limit} isUnlimited={isUnlimited} />
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|