Spaces:
Paused
Paused
File size: 2,975 Bytes
bcf46c3 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | import React, { useState, useEffect, useRef } from 'react';
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';
import { initLocalEngine, routeInference } from '../utils/inferenceRouter';
import HCaptcha from '@hcaptcha/react-hcaptcha';
import { supabase, useAuth, GATEWAY_URL, LEMON_CHECKOUT_URL } from '../context';
export default function UsageCard({ usage, user, apiKey }) {
const [usageHistory, setUsageHistory] = useState([]);
useEffect(() => {
const fetchHistory = async () => {
if (!user) return;
try {
const res = await fetch(
`${import.meta.env.VITE_GATEWAY_URL}/gateway/usage/${user.id}/history`,
{
headers: { 'X-API-Key': apiKey }
}
);
if (res.ok) {
const data = await res.json();
const formatted = data.history.map(d => ({
day: d.date.slice(5),
requests: d.count
}));
setUsageHistory(formatted);
}
} catch (err) {
console.error('Usage history fetch failed:', err);
}
};
if (apiKey) fetchHistory();
}, [apiKey, user]);
const percent = usage.monthly_limit > 0 ? (usage.current_usage / usage.monthly_limit) * 100 : 0
const fillClass = percent > 90 ? 'danger' : percent > 70 ? 'warning' : ''
return (
<div className="card animate-in">
<div className="flex justify-between items-center mb-1">
<div className="card-label" style={{ margin: 0 }}>API Usage</div>
<span className={`tier-badge ${usage.tier}`}>{usage.tier}</span>
</div>
<div className="progress-container">
<div className="progress-label">
<span>{usage.current_usage.toLocaleString()} calls used</span>
<span>{usage.monthly_limit.toLocaleString()} limit</span>
</div>
<div className="progress-bar">
<div className={`progress-fill ${fillClass}`} style={{ width: `${Math.min(percent, 100)}%` }} />
</div>
</div>
<div style={{ width: '100%', height: 100, marginTop: '1.5rem' }}>
<ResponsiveContainer>
<BarChart data={usageHistory}>
<XAxis dataKey="day" stroke="var(--muted)" fontSize={10} tickLine={false} axisLine={false} />
<Tooltip cursor={{ fill: 'rgba(255,255,255,0.05)' }} contentStyle={{ background: 'var(--bg2)', border: 'none', borderRadius: '4px', color: '#fff', fontSize: '12px' }} />
<Bar dataKey="requests" fill="var(--primary)" radius={[2, 2, 0, 0]} />
</BarChart>
</ResponsiveContainer>
</div>
<div className="text-muted" style={{ fontSize: '0.75rem', marginTop: '1rem' }}>
Resets: {usage.usage_reset_at ? new Date(usage.usage_reset_at).toLocaleDateString() : 'End of month'}
</div>
</div>
)
}
|