@@ -13,6 +13,8 @@ import {
1313} from 'lucide-react'
1414import { useEffect , useState } from 'react'
1515
16+ import { pluralize } from '@codebuff/common/util/string'
17+
1618import { Badge } from '@/components/ui/badge'
1719import { Button } from '@/components/ui/button'
1820import { Card , CardContent , CardHeader , CardTitle } from '@/components/ui/card'
@@ -206,7 +208,7 @@ export function AdvancedMonitor({
206208 < div className = "flex items-center space-x-2" >
207209 { getTrendIcon ( data . creditVelocity . trend ) }
208210 < span className = "text-lg font-bold" >
209- { data . creditVelocity . current . toLocaleString ( ) } credits /hour
211+ { pluralize ( data . creditVelocity . current , 'credit' ) } /hour
210212 </ span >
211213 </ div >
212214 </ div >
@@ -250,26 +252,32 @@ export function AdvancedMonitor({
250252 < p className = "text-2xl font-bold" >
251253 { data . burnRate . daily . toLocaleString ( ) }
252254 </ p >
253- < p className = "text-xs text-muted-foreground" > Daily</ p >
255+ < p className = "text-xs text-muted-foreground" >
256+ { pluralize ( data . burnRate . daily , 'credit' ) } daily
257+ </ p >
254258 </ div >
255259 < div className = "text-center" >
256260 < p className = "text-2xl font-bold" >
257261 { data . burnRate . weekly . toLocaleString ( ) }
258262 </ p >
259- < p className = "text-xs text-muted-foreground" > Weekly</ p >
263+ < p className = "text-xs text-muted-foreground" >
264+ { pluralize ( data . burnRate . weekly , 'credit' ) } weekly
265+ </ p >
260266 </ div >
261267 < div className = "text-center" >
262268 < p className = "text-2xl font-bold" >
263269 { data . burnRate . monthly . toLocaleString ( ) }
264270 </ p >
265- < p className = "text-xs text-muted-foreground" > Monthly</ p >
271+ < p className = "text-xs text-muted-foreground" >
272+ { pluralize ( data . burnRate . monthly , 'credit' ) } monthly
273+ </ p >
266274 </ div >
267275 </ div >
268276 < div className = "pt-4 border-t" >
269277 < div className = "flex items-center justify-between" >
270278 < span className = "text-sm font-medium" > Credits Remaining</ span >
271279 < span className = "text-lg font-bold" >
272- { data . burnRate . daysRemaining } days
280+ { pluralize ( data . burnRate . daysRemaining , 'day' ) }
273281 </ span >
274282 </ div >
275283 < Progress
@@ -330,17 +338,23 @@ export function AdvancedMonitor({
330338 < p className = "text-2xl font-bold text-red-600" >
331339 { data . alerts . critical }
332340 </ p >
333- < p className = "text-xs text-muted-foreground" > Critical</ p >
341+ < p className = "text-xs text-muted-foreground" >
342+ { pluralize ( data . alerts . critical , 'Critical Alert' ) }
343+ </ p >
334344 </ div >
335345 < div className = "text-center" >
336346 < p className = "text-2xl font-bold text-yellow-600" >
337347 { data . alerts . warnings }
338348 </ p >
339- < p className = "text-xs text-muted-foreground" > Warnings</ p >
349+ < p className = "text-xs text-muted-foreground" >
350+ { pluralize ( data . alerts . warnings , 'Warning' ) }
351+ </ p >
340352 </ div >
341353 < div className = "text-center" >
342354 < p className = "text-2xl font-bold" > { data . alerts . active } </ p >
343- < p className = "text-xs text-muted-foreground" > Total</ p >
355+ < p className = "text-xs text-muted-foreground" >
356+ { pluralize ( data . alerts . active , 'Alert' ) } Total
357+ </ p >
344358 </ div >
345359 </ div >
346360 </ CardContent >
0 commit comments