1152b023bf
BrandLogo gradient, EmptyStateIllustrations SVGs, categoryColors, landing page, brand SVG assets, and all remaining files. Warning #eab308 → #fbbf24 (amber). categoryColors deduped. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
55 lines
1.8 KiB
TypeScript
55 lines
1.8 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import { CheckCircle, Clock, Zap } from 'lucide-react'
|
|
import type { LucideIcon } from 'lucide-react'
|
|
import { sidebarApi } from '@/api'
|
|
|
|
interface StatItem {
|
|
icon: LucideIcon
|
|
value: string | number | null
|
|
label: string
|
|
color: string
|
|
}
|
|
|
|
export function GreetingStatStrip() {
|
|
const [resolved, setResolved] = useState<number | null>(null)
|
|
const [active, setActive] = useState<number | null>(null)
|
|
const [avgMttr, setAvgMttr] = useState<string | null>(null)
|
|
|
|
useEffect(() => {
|
|
sidebarApi.getStats()
|
|
.then((stats) => {
|
|
setResolved(stats.resolved_today)
|
|
setActive(stats.active_count)
|
|
const avg = stats.resolved_today > 0
|
|
? Math.round(stats.total_session_minutes_today / stats.resolved_today)
|
|
: null
|
|
setAvgMttr(avg != null ? `${avg}m` : null)
|
|
})
|
|
.catch(() => {})
|
|
}, [])
|
|
|
|
const stats: StatItem[] = [
|
|
{ icon: CheckCircle, value: resolved, label: 'resolved today', color: '#34d399' },
|
|
{ icon: Zap, value: active, label: 'active now', color: '#60a5fa' },
|
|
{ icon: Clock, value: avgMttr, label: 'avg MTTR', color: '#848b9b' },
|
|
]
|
|
|
|
return (
|
|
<div className="hidden sm:flex items-center gap-5 pb-1">
|
|
{stats.map(({ icon: Icon, value, label, color }) => (
|
|
<div key={label} className="flex items-center gap-2">
|
|
<Icon size={13} style={{ color }} className="shrink-0" />
|
|
<div className="text-right">
|
|
<p className="font-heading text-lg font-extrabold leading-none text-[#f0f2f5]">
|
|
{value ?? '\u2014'}
|
|
</p>
|
|
<p className="font-sans text-[0.5625rem] uppercase tracking-[0.1em] text-muted-foreground mt-0.5">
|
|
{label}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|