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

Fix unlimited video limit display in usage rings

Browse Source
This commit is contained in:
ي
2026-03-05 11:36:04 +05:30
parent 7d530b3220
commit 01bf56837f
1 changed files with 37 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -69,21 +69,25 @@ export const UsageLimitRings: React.FC<UsageLimitRingsProps> = ({
label: 'AI Calls', label: 'AI Calls',
used: currentUsage.total_calls, used: currentUsage.total_calls,
limit: limits.limits.gemini_calls || limits.limits.openai_calls || 50, limit: limits.limits.gemini_calls || limits.limits.openai_calls || 50,
color: '#3b82f6' color: '#3b82f6',
unlimited: false,
}, },
{ {
label: 'Images', label: 'Images',
used: imageCalls, used: imageCalls,
limit: limits.limits.stability_calls || 50, limit: limits.limits.stability_calls || 50,
color: '#a855f7' color: '#a855f7',
unlimited: false,
}, },
{ {
label: 'Videos', label: 'Videos',
used: videoCalls, used: videoCalls,
limit: limits.limits.video_calls || 30, // IMPORTANT: 0 means unlimited (do not coerce to fallback finite value)
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; if (keyLimits.length === 0) return null;
@@ -104,15 +108,34 @@ export const UsageLimitRings: React.FC<UsageLimitRingsProps> = ({
animate={{ opacity: 1, scale: 1 }} animate={{ opacity: 1, scale: 1 }}
transition={{ delay: index * 0.1, duration: 0.4 }} transition={{ delay: index * 0.1, duration: 0.4 }}
> >
<UsageLimitRing {item.unlimited ? (
used={item.used} <Box
limit={item.limit} sx={{
label={item.label} width: 100,
color={item.color} height: 100,
size={100} borderRadius: '50%',
terminalTheme={terminalTheme} border: `2px dashed ${item.color}`,
terminalColors={terminalColors} 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> </motion.div>
))} ))}
</Box> </Box>