34b0f2ade9
- Replace all rgba(6,182,212,...) cyan focus borders and accents with rgba(249,115,22,...) ember orange across 21+ component files - Remove all var(--glass-border) references (undefined variable) with var(--color-border-default) across 24 files - Remove deprecated blur orbs and glass-morphism effects from SurveyPage, SurveyThankYouPage, and LoginPage - Migrate landing.css from hardcoded hex to CSS custom properties (~97 replacements for single-source theming) - Fix off-palette grays in FlowPilotAnalyticsPage chart styling (#8891a0 → #848b9b, #18191f → var(--color-bg-card)) - Update stale comments: "cyan brand" → "accent brand" in GlowEdge, "gradient cyan square" → "gradient orange square" in BrandLogo - Rename glow-cyan SVG filter ID to glow-accent - Fix category color comment: "cyan" → "deep orange" Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
62 lines
2.5 KiB
TypeScript
62 lines
2.5 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import { Users, AlertTriangle, Activity, ArrowRight } from 'lucide-react'
|
|
import { usePermissions } from '@/hooks/usePermissions'
|
|
import { aiSessionsApi } from '@/api/aiSessions'
|
|
|
|
export function TeamSummary() {
|
|
const { isAccountOwner } = usePermissions()
|
|
const navigate = useNavigate()
|
|
const [escalationCount, setEscalationCount] = useState(0)
|
|
|
|
useEffect(() => {
|
|
if (!isAccountOwner) return
|
|
aiSessionsApi.getEscalationQueue()
|
|
.then((esc) => setEscalationCount(esc.length))
|
|
.catch(() => {})
|
|
}, [isAccountOwner])
|
|
|
|
if (!isAccountOwner) return null
|
|
|
|
const items = [
|
|
{ label: 'Escalations', value: escalationCount, icon: AlertTriangle, color: '#eab308', href: '/escalations' },
|
|
{ label: 'Team Activity', value: '\u2014', icon: Activity, color: '#f97316', href: '/analytics' },
|
|
{ label: 'Members', value: '\u2014', icon: Users, color: '#a78bfa', href: '/account' },
|
|
]
|
|
|
|
return (
|
|
<div className="card-flat">
|
|
<div
|
|
className="flex items-center justify-between px-5 py-3"
|
|
style={{ borderBottom: '1px solid var(--color-border-default)' }}
|
|
>
|
|
<h3 className="font-heading text-sm font-bold text-foreground">Team Summary</h3>
|
|
<button
|
|
onClick={() => navigate('/analytics')}
|
|
className="flex items-center gap-1 text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
Manage <ArrowRight size={10} />
|
|
</button>
|
|
</div>
|
|
<div className="grid grid-cols-3 divide-x" style={{ borderColor: 'var(--color-border-default)' }}>
|
|
{items.map((item) => (
|
|
<button
|
|
key={item.label}
|
|
onClick={() => navigate(item.href)}
|
|
className="flex flex-col items-center gap-2 py-5 rounded-lg hover:bg-card-hover transition-all duration-350"
|
|
style={{ transition: 'transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1), background 200ms ease' }}
|
|
onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-4px)' }}
|
|
onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)' }}
|
|
>
|
|
<item.icon size={20} style={{ color: item.color }} />
|
|
<p className="font-heading text-xl font-extrabold text-foreground">{item.value}</p>
|
|
<p className="font-sans text-xs text-[0.5625rem] uppercase tracking-[0.1em] text-muted-foreground">
|
|
{item.label}
|
|
</p>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|