feat(dashboard): FlowPilot cockpit dashboard + sidebar redesign
- Replace QuickStartPage with FlowPilot-centric dashboard - Add StartSessionInput with Guided/Chat mode toggle - Add PendingEscalations, ActiveFlowPilotSessions, PerformanceCards - Add KnowledgeBaseCards, TeamSummary, RecentFlowPilotSessions - Every number/card is a portal to its detail page - Restructure sidebar: Resolve/Knowledge/Insights sections - Remove redundant nav items (FlowPilot, Flow Editor, Flow Assist, etc.) - Wire prefill from dashboard input to FlowPilot intake - Update mobile nav to match new sidebar structure Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
111
frontend/src/components/dashboard/ActiveFlowPilotSessions.tsx
Normal file
111
frontend/src/components/dashboard/ActiveFlowPilotSessions.tsx
Normal file
@@ -0,0 +1,111 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Link, useNavigate } from 'react-router-dom'
|
||||
import { Sparkles, Clock, ArrowRight } from 'lucide-react'
|
||||
import { aiSessionsApi } from '@/api/aiSessions'
|
||||
import type { AISessionSummary } from '@/types/ai-session'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
function timeAgo(dateStr: string): string {
|
||||
const diffMs = Date.now() - new Date(dateStr).getTime()
|
||||
const minutes = Math.floor(diffMs / 60000)
|
||||
if (minutes < 1) return 'just now'
|
||||
if (minutes < 60) return `${minutes}m ago`
|
||||
const hours = Math.floor(minutes / 60)
|
||||
if (hours < 24) return `${hours}h ago`
|
||||
return `${Math.floor(hours / 24)}d ago`
|
||||
}
|
||||
|
||||
export function ActiveFlowPilotSessions() {
|
||||
const [sessions, setSessions] = useState<AISessionSummary[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const navigate = useNavigate()
|
||||
|
||||
useEffect(() => {
|
||||
aiSessionsApi.listSessions({ status: 'active', limit: 6 })
|
||||
.then(setSessions)
|
||||
.catch(() => {})
|
||||
.finally(() => setLoading(false))
|
||||
}, [])
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="glass-card-static">
|
||||
<div className="px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
|
||||
<h3 className="font-heading text-sm font-bold text-foreground">Active Sessions</h3>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 p-4">
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<div key={i} className="h-24 rounded-xl bg-card border border-border animate-pulse" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="glass-card-static">
|
||||
<div
|
||||
className="flex items-center justify-between px-5 py-3"
|
||||
style={{ borderBottom: '1px solid var(--glass-border)' }}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="font-heading text-sm font-bold text-foreground">Active Sessions</h3>
|
||||
{sessions.length > 0 && (
|
||||
<span className="inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary/10 px-1.5 text-[0.625rem] font-bold text-primary">
|
||||
{sessions.length}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<Link
|
||||
to="/sessions?filter=active"
|
||||
className="flex items-center gap-1 text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
View all <ArrowRight size={10} />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{sessions.length === 0 ? (
|
||||
<div className="px-5 py-8 text-center">
|
||||
<p className="text-sm text-muted-foreground">No active sessions</p>
|
||||
<p className="mt-1 text-[0.6875rem] text-[#5a6170]">Start typing above to begin troubleshooting</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 p-4">
|
||||
{sessions.map((session) => (
|
||||
<button
|
||||
key={session.id}
|
||||
onClick={() => navigate(`/pilot/${session.id}`)}
|
||||
className="glass-card p-4 text-left"
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2 mb-2">
|
||||
<Sparkles size={14} className="shrink-0 text-primary mt-0.5" />
|
||||
<span
|
||||
className={cn(
|
||||
'font-label text-[0.5625rem] uppercase px-1.5 py-0.5 rounded',
|
||||
session.confidence_tier === 'guided' && 'bg-emerald-400/10 text-emerald-400',
|
||||
session.confidence_tier === 'exploring' && 'bg-amber-400/10 text-amber-400',
|
||||
session.confidence_tier === 'discovery' && 'bg-blue-400/10 text-blue-400',
|
||||
!session.confidence_tier && 'bg-card text-muted-foreground',
|
||||
)}
|
||||
>
|
||||
{session.confidence_tier || 'starting'}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm font-medium text-foreground truncate">
|
||||
{session.problem_summary || 'Session in progress'}
|
||||
</p>
|
||||
<div className="mt-2 flex items-center gap-2 text-[0.625rem] text-muted-foreground">
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock size={10} />
|
||||
{timeAgo(session.created_at)}
|
||||
</span>
|
||||
<span>·</span>
|
||||
<span>{session.step_count} steps</span>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
53
frontend/src/components/dashboard/KnowledgeBaseCards.tsx
Normal file
53
frontend/src/components/dashboard/KnowledgeBaseCards.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { Network, Code2, ListChecks, ArrowRight } from 'lucide-react'
|
||||
import { sidebarApi } from '@/api'
|
||||
|
||||
export function KnowledgeBaseCards() {
|
||||
const navigate = useNavigate()
|
||||
const [flowCount, setFlowCount] = useState(0)
|
||||
|
||||
useEffect(() => {
|
||||
sidebarApi.getStats()
|
||||
.then((stats) => setFlowCount(stats.tree_counts.total))
|
||||
.catch(() => {})
|
||||
}, [])
|
||||
|
||||
const items = [
|
||||
{ label: 'Flows', value: flowCount, icon: Network, color: '#a78bfa', href: '/trees' },
|
||||
{ label: 'Scripts', value: '\u2014', icon: Code2, color: '#2dd4bf', href: '/scripts' },
|
||||
{ label: 'Pending Review', value: '\u2014', icon: ListChecks, color: '#fbbf24', href: '/review-queue' },
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="glass-card-static">
|
||||
<div
|
||||
className="flex items-center justify-between px-5 py-3"
|
||||
style={{ borderBottom: '1px solid var(--glass-border)' }}
|
||||
>
|
||||
<h3 className="font-heading text-sm font-bold text-foreground">Knowledge Base</h3>
|
||||
<button
|
||||
onClick={() => navigate('/trees')}
|
||||
className="flex items-center gap-1 text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
Browse <ArrowRight size={10} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 divide-x" style={{ borderColor: 'var(--glass-border)' }}>
|
||||
{items.map((item) => (
|
||||
<button
|
||||
key={item.label}
|
||||
onClick={() => navigate(item.href)}
|
||||
className="flex flex-col items-center gap-2 py-5 hover:bg-[rgba(255,255,255,0.02)] transition-colors"
|
||||
>
|
||||
<item.icon size={20} style={{ color: item.color }} />
|
||||
<p className="font-heading text-xl font-extrabold text-foreground">{item.value}</p>
|
||||
<p className="font-label text-[0.5625rem] uppercase tracking-[0.1em] text-muted-foreground">
|
||||
{item.label}
|
||||
</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
87
frontend/src/components/dashboard/PendingEscalations.tsx
Normal file
87
frontend/src/components/dashboard/PendingEscalations.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Link, useNavigate } from 'react-router-dom'
|
||||
import { AlertTriangle } from 'lucide-react'
|
||||
import { aiSessionsApi } from '@/api/aiSessions'
|
||||
import type { AISessionSummary } from '@/types/ai-session'
|
||||
|
||||
function timeAgo(dateStr: string): string {
|
||||
const diffMs = Date.now() - new Date(dateStr).getTime()
|
||||
const minutes = Math.floor(diffMs / 60000)
|
||||
if (minutes < 1) return 'just now'
|
||||
if (minutes < 60) return `${minutes}m ago`
|
||||
const hours = Math.floor(minutes / 60)
|
||||
if (hours < 24) return `${hours}h ago`
|
||||
return `${Math.floor(hours / 24)}d ago`
|
||||
}
|
||||
|
||||
export function PendingEscalations() {
|
||||
const [escalations, setEscalations] = useState<AISessionSummary[]>([])
|
||||
const navigate = useNavigate()
|
||||
|
||||
useEffect(() => {
|
||||
aiSessionsApi.getEscalationQueue()
|
||||
.then(setEscalations)
|
||||
.catch(() => {})
|
||||
}, [])
|
||||
|
||||
if (escalations.length === 0) return null
|
||||
|
||||
return (
|
||||
<div
|
||||
className="glass-card-static overflow-hidden"
|
||||
style={{ borderColor: 'rgba(251, 191, 36, 0.2)' }}
|
||||
>
|
||||
<div
|
||||
className="flex items-center justify-between px-5 py-3"
|
||||
style={{ borderBottom: '1px solid var(--glass-border)' }}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<AlertTriangle size={14} className="text-amber-400" />
|
||||
<h3 className="font-heading text-sm font-bold text-foreground">
|
||||
Pending Escalations
|
||||
<span className="ml-2 inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-amber-400/10 px-1.5 text-[0.625rem] font-bold text-amber-400">
|
||||
{escalations.length}
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
<Link
|
||||
to="/escalations"
|
||||
className="text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
View all
|
||||
</Link>
|
||||
</div>
|
||||
<div>
|
||||
{escalations.slice(0, 3).map((esc, i) => (
|
||||
<div
|
||||
key={esc.id}
|
||||
className="flex items-center gap-3 px-5 py-3"
|
||||
style={{
|
||||
borderBottom: i < Math.min(escalations.length, 3) - 1
|
||||
? '1px solid var(--glass-border)'
|
||||
: undefined,
|
||||
}}
|
||||
>
|
||||
<span className="h-2 w-2 shrink-0 rounded-full bg-amber-400 animate-pulse" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-sm text-foreground truncate">
|
||||
{esc.problem_summary || 'Escalated session'}
|
||||
</div>
|
||||
<div className="text-[0.6875rem] text-muted-foreground">
|
||||
{esc.problem_domain || 'General'}
|
||||
<span className="mx-1.5 text-[var(--text-dimmed)]">·</span>
|
||||
<span className="font-label text-[0.625rem]">{timeAgo(esc.created_at)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => navigate(`/pilot/${esc.id}?pickup=true`)}
|
||||
className="shrink-0 rounded-lg border border-amber-400/30 bg-amber-400/10 px-3 py-1 text-[0.6875rem] font-medium text-amber-400 hover:bg-amber-400/20 transition-colors"
|
||||
>
|
||||
Pick up
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
95
frontend/src/components/dashboard/PerformanceCards.tsx
Normal file
95
frontend/src/components/dashboard/PerformanceCards.tsx
Normal file
@@ -0,0 +1,95 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { CheckCircle, Clock, TrendingUp, Timer } from 'lucide-react'
|
||||
import type { LucideIcon } from 'lucide-react'
|
||||
import { sidebarApi } from '@/api'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface StatCard {
|
||||
label: string
|
||||
value: string | number
|
||||
icon: LucideIcon
|
||||
iconColor: string
|
||||
href: string
|
||||
highlight?: boolean
|
||||
}
|
||||
|
||||
export function PerformanceCards() {
|
||||
const navigate = useNavigate()
|
||||
const [resolved, setResolved] = useState(0)
|
||||
const [active, setActive] = useState(0)
|
||||
const [totalMinutes, setTotalMinutes] = useState(0)
|
||||
|
||||
useEffect(() => {
|
||||
sidebarApi.getStats()
|
||||
.then((stats) => {
|
||||
setResolved(stats.resolved_today)
|
||||
setActive(stats.active_count)
|
||||
setTotalMinutes(stats.total_session_minutes_today)
|
||||
})
|
||||
.catch(() => {})
|
||||
}, [])
|
||||
|
||||
const avgMttr = resolved > 0 ? Math.round(totalMinutes / resolved) : 0
|
||||
|
||||
const cards: StatCard[] = [
|
||||
{
|
||||
label: 'Resolved Today',
|
||||
value: resolved,
|
||||
icon: CheckCircle,
|
||||
iconColor: '#34d399',
|
||||
href: '/analytics',
|
||||
highlight: true,
|
||||
},
|
||||
{
|
||||
label: 'Avg Resolution',
|
||||
value: avgMttr > 0 ? `${avgMttr}m` : '\u2014',
|
||||
icon: Clock,
|
||||
iconColor: '#22d3ee',
|
||||
href: '/analytics',
|
||||
},
|
||||
{
|
||||
label: 'Active Now',
|
||||
value: active,
|
||||
icon: TrendingUp,
|
||||
iconColor: '#38bdf8',
|
||||
href: '/sessions?filter=active',
|
||||
},
|
||||
{
|
||||
label: 'Session Time',
|
||||
value: totalMinutes > 0 ? `${totalMinutes}m` : '\u2014',
|
||||
icon: Timer,
|
||||
iconColor: '#fbbf24',
|
||||
href: '/analytics',
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
|
||||
{cards.map((card, i) => (
|
||||
<button
|
||||
key={card.label}
|
||||
onClick={() => navigate(card.href)}
|
||||
className={cn(
|
||||
'glass-card p-4 text-left fade-in',
|
||||
i === 0 && 'active-glow'
|
||||
)}
|
||||
style={{ animationDelay: `${400 + i * 60}ms` }}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<p className="font-label text-[0.5625rem] uppercase tracking-[0.1em] text-muted-foreground">
|
||||
{card.label}
|
||||
</p>
|
||||
<card.icon size={14} style={{ color: card.iconColor }} />
|
||||
</div>
|
||||
<p className={cn(
|
||||
'font-heading text-2xl font-extrabold tracking-tight',
|
||||
card.highlight ? 'text-gradient-brand' : 'text-foreground'
|
||||
)}>
|
||||
{card.value}
|
||||
</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Link, useNavigate } from 'react-router-dom'
|
||||
import { CheckCircle, AlertTriangle, XCircle, ArrowRight } from 'lucide-react'
|
||||
import { aiSessionsApi } from '@/api/aiSessions'
|
||||
import type { AISessionSummary } from '@/types/ai-session'
|
||||
|
||||
function timeAgo(dateStr: string): string {
|
||||
const diffMs = Date.now() - new Date(dateStr).getTime()
|
||||
const minutes = Math.floor(diffMs / 60000)
|
||||
if (minutes < 1) return 'just now'
|
||||
if (minutes < 60) return `${minutes}m ago`
|
||||
const hours = Math.floor(minutes / 60)
|
||||
if (hours < 24) return `${hours}h ago`
|
||||
const days = Math.floor(hours / 24)
|
||||
if (days === 1) return 'yesterday'
|
||||
return `${days}d ago`
|
||||
}
|
||||
|
||||
const STATUS_CONFIG: Record<string, { icon: typeof CheckCircle; color: string }> = {
|
||||
resolved: { icon: CheckCircle, color: '#34d399' },
|
||||
escalated: { icon: AlertTriangle, color: '#fbbf24' },
|
||||
abandoned: { icon: XCircle, color: '#8891a0' },
|
||||
}
|
||||
|
||||
export function RecentFlowPilotSessions() {
|
||||
const [sessions, setSessions] = useState<AISessionSummary[]>([])
|
||||
const navigate = useNavigate()
|
||||
|
||||
useEffect(() => {
|
||||
Promise.all([
|
||||
aiSessionsApi.listSessions({ status: 'resolved', limit: 5 }).catch(() => []),
|
||||
aiSessionsApi.listSessions({ status: 'escalated', limit: 3 }).catch(() => []),
|
||||
]).then(([resolved, escalated]) => {
|
||||
const all = [...resolved, ...escalated]
|
||||
.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
|
||||
.slice(0, 5)
|
||||
setSessions(all)
|
||||
})
|
||||
}, [])
|
||||
|
||||
if (sessions.length === 0) return null
|
||||
|
||||
return (
|
||||
<div className="glass-card-static">
|
||||
<div
|
||||
className="flex items-center justify-between px-5 py-3"
|
||||
style={{ borderBottom: '1px solid var(--glass-border)' }}
|
||||
>
|
||||
<h3 className="font-heading text-sm font-bold text-foreground">Recent Sessions</h3>
|
||||
<Link
|
||||
to="/sessions"
|
||||
className="flex items-center gap-1 text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
History <ArrowRight size={10} />
|
||||
</Link>
|
||||
</div>
|
||||
<div>
|
||||
{sessions.map((session, i) => {
|
||||
const config = STATUS_CONFIG[session.status] || STATUS_CONFIG.abandoned
|
||||
const StatusIcon = config.icon
|
||||
return (
|
||||
<button
|
||||
key={session.id}
|
||||
onClick={() => navigate(`/pilot/${session.id}`)}
|
||||
className="flex w-full items-center gap-3 px-5 py-3 text-left hover:bg-[rgba(255,255,255,0.02)] transition-colors"
|
||||
style={{
|
||||
borderBottom: i < sessions.length - 1 ? '1px solid var(--glass-border)' : undefined,
|
||||
}}
|
||||
>
|
||||
<StatusIcon size={14} style={{ color: config.color }} className="shrink-0" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm text-foreground truncate">
|
||||
{session.problem_summary || 'Session'}
|
||||
</p>
|
||||
</div>
|
||||
<span className="shrink-0 font-label text-[0.625rem] text-muted-foreground">
|
||||
{timeAgo(session.resolved_at || session.created_at)}
|
||||
</span>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
88
frontend/src/components/dashboard/StartSessionInput.tsx
Normal file
88
frontend/src/components/dashboard/StartSessionInput.tsx
Normal file
@@ -0,0 +1,88 @@
|
||||
import { useState, useRef, useEffect } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { Sparkles, MessageCircle } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
type SessionMode = 'guided' | 'chat'
|
||||
|
||||
export function StartSessionInput() {
|
||||
const [mode, setMode] = useState<SessionMode>('guided')
|
||||
const [value, setValue] = useState('')
|
||||
const navigate = useNavigate()
|
||||
const inputRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
useEffect(() => { inputRef.current?.focus() }, [])
|
||||
|
||||
const handleSubmit = () => {
|
||||
const trimmed = value.trim()
|
||||
if (!trimmed) return
|
||||
|
||||
if (mode === 'guided') {
|
||||
navigate('/pilot', { state: { prefill: trimmed } })
|
||||
} else {
|
||||
navigate('/assistant', { state: { prefill: trimmed } })
|
||||
}
|
||||
}
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault()
|
||||
handleSubmit()
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="glass-card-static overflow-hidden">
|
||||
<div className="px-5 py-4 sm:px-6 sm:py-5">
|
||||
<div className="relative">
|
||||
<Sparkles
|
||||
size={18}
|
||||
className="absolute left-4 top-1/2 -translate-y-1/2 text-muted-foreground"
|
||||
/>
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={value}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder="What are you troubleshooting?"
|
||||
className="w-full rounded-xl border border-border bg-background py-3.5 pl-11 pr-4 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-3 flex items-center justify-between">
|
||||
<div className="flex items-center gap-1 rounded-lg bg-[rgba(255,255,255,0.04)] p-0.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMode('guided')}
|
||||
className={cn(
|
||||
'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors',
|
||||
mode === 'guided'
|
||||
? 'bg-primary/10 text-foreground'
|
||||
: 'text-muted-foreground hover:text-foreground'
|
||||
)}
|
||||
>
|
||||
<Sparkles size={12} />
|
||||
Guided
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMode('chat')}
|
||||
className={cn(
|
||||
'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors',
|
||||
mode === 'chat'
|
||||
? 'bg-primary/10 text-foreground'
|
||||
: 'text-muted-foreground hover:text-foreground'
|
||||
)}
|
||||
>
|
||||
<MessageCircle size={12} />
|
||||
Open Chat
|
||||
</button>
|
||||
</div>
|
||||
<span className="text-[0.625rem] text-muted-foreground">
|
||||
Press Enter to start
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
58
frontend/src/components/dashboard/TeamSummary.tsx
Normal file
58
frontend/src/components/dashboard/TeamSummary.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
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: '#fbbf24', href: '/escalations' },
|
||||
{ label: 'Team Activity', value: '\u2014', icon: Activity, color: '#22d3ee', href: '/analytics' },
|
||||
{ label: 'Members', value: '\u2014', icon: Users, color: '#a78bfa', href: '/account' },
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="glass-card-static">
|
||||
<div
|
||||
className="flex items-center justify-between px-5 py-3"
|
||||
style={{ borderBottom: '1px solid var(--glass-border)' }}
|
||||
>
|
||||
<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(--glass-border)' }}>
|
||||
{items.map((item) => (
|
||||
<button
|
||||
key={item.label}
|
||||
onClick={() => navigate(item.href)}
|
||||
className="flex flex-col items-center gap-2 py-5 hover:bg-[rgba(255,255,255,0.02)] transition-colors"
|
||||
>
|
||||
<item.icon size={20} style={{ color: item.color }} />
|
||||
<p className="font-heading text-xl font-extrabold text-foreground">{item.value}</p>
|
||||
<p className="font-label text-[0.5625rem] uppercase tracking-[0.1em] text-muted-foreground">
|
||||
{item.label}
|
||||
</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user