bd495be965
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 12s
- Sidebar: dynamic brand-accent colors, brainstorm section restyled - AI chat general: popup panel with expand/collapse, hides when contextual AI open - AI chat contextual: tabs reordered (Actions first), X close button, height fix - Settings: all tabs restyled, 6 new color presets (sage, terracotta, iron, etc.) - Global color cleanup: emerald/orange hardcoded → brand-accent dynamic - Brainstorm page: orange → brand-accent throughout - PageEntry animation component added to key pages - Floating AI button: bg-brand-accent instead of hardcoded black - i18n: all 15 locales updated with new AI/billing keys - Billing: freemium quota tracking, BYOK, stripe subscription scaffolding - Admin: integrated into new design - AGENTS.md + CLAUDE.md project rules added
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-emerald-500';
|
|
|
|
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-emerald-600 dark:text-emerald-400">{t('billing.unlimited')}</span>
|
|
) : (
|
|
`${quota.used} / ${quota.limit}`
|
|
)}
|
|
</span>
|
|
</div>
|
|
<UsageBar used={quota.used} limit={quota.limit} isUnlimited={isUnlimited} />
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|