kunthawat/ALwrity
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge PR #379: fix preflight pricing/model drift and usage UI

Browse Source
This commit is contained in:
ajaysi
2026-03-05 12:22:21 +05:30
parent 6121ae1a92 01bf56837f
commit 6205ff8bbe
5 changed files with 124 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
frontend/src/components/billing/CompactBillingDashboard/components/UsageLimitRings.tsx
View File

@@ -69,21 +69,24 @@ export const UsageLimitRings: React.FC<UsageLimitRingsProps> = ({
label: 'AI Calls',
used: currentUsage.total_calls,
limit: limits.limits.gemini_calls || limits.limits.openai_calls || 50,
color: '#3b82f6'
color: '#3b82f6',
unlimited: false,
},
{
label: 'Images',
used: imageCalls,
limit: limits.limits.stability_calls || 50,
color: '#a855f7'
color: '#a855f7',
unlimited: false,
},
{
label: 'Videos',
used: videoCalls,
limit: limits.limits.video_calls || 30,
color: '#ec4899'
limit: limits.limits.video_calls,
color: '#ec4899',
unlimited: limits.limits.video_calls === 0,
}
].filter(item => item.limit > 0);
].filter(item => item.unlimited || item.limit > 0);
if (keyLimits.length === 0) return null;
@@ -104,15 +107,34 @@ export const UsageLimitRings: React.FC<UsageLimitRingsProps> = ({
animate={{ opacity: 1, scale: 1 }}
transition={{ delay: index * 0.1, duration: 0.4 }}
>
<UsageLimitRing
used={item.used}
limit={item.limit}
label={item.label}
color={item.color}
size={100}
terminalTheme={terminalTheme}
terminalColors={terminalColors}
/>
{item.unlimited ? (
<Box
sx={{
width: 100,
height: 100,
borderRadius: '50%',
border: `2px dashed ${item.color}`,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
background: 'rgba(255,255,255,0.04)',
}}
>
<TypographyComponent sx={{ fontSize: 26, fontWeight: 700, color: item.color, lineHeight: 1 }}>∞</TypographyComponent>
<TypographyComponent sx={{ fontSize: 10, opacity: 0.8, mt: 0.5 }}>{item.label}</TypographyComponent>
</Box>
) : (
<UsageLimitRing
used={item.used}
limit={item.limit}
label={item.label}
color={item.color}
size={100}
terminalTheme={terminalTheme}
terminalColors={terminalColors}
/>
)}
</motion.div>
))}
</Box>