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>
|
||||
)
|
||||
}
|
||||
@@ -10,10 +10,11 @@ import type { FileUploadResponse } from '@/types/upload'
|
||||
interface FlowPilotIntakeProps {
|
||||
onSubmit: (request: AISessionCreateRequest) => void
|
||||
isLoading: boolean
|
||||
defaultProblem?: string
|
||||
}
|
||||
|
||||
export function FlowPilotIntake({ onSubmit, isLoading }: FlowPilotIntakeProps) {
|
||||
const [text, setText] = useState('')
|
||||
export function FlowPilotIntake({ onSubmit, isLoading, defaultProblem }: FlowPilotIntakeProps) {
|
||||
const [text, setText] = useState(defaultProblem || '')
|
||||
const [showLogs, setShowLogs] = useState(false)
|
||||
const [logContent, setLogContent] = useState('')
|
||||
const [showTicketPicker, setShowTicketPicker] = useState(false)
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
import { useLocation, useNavigate, Link } from 'react-router-dom'
|
||||
import { Menu, X, LayoutGrid, Box, PenLine, Clock, FileText, Bookmark, Settings, LogOut, Shield, Terminal } from 'lucide-react'
|
||||
import { Menu, X, LayoutGrid, Clock, Network, AlertTriangle, Code2, BarChart3, Settings, LogOut, Shield, Library } from 'lucide-react'
|
||||
import { useAuthStore } from '@/store/authStore'
|
||||
import { usePermissions } from '@/hooks/usePermissions'
|
||||
import { useUserPreferencesStore } from '@/store/userPreferencesStore'
|
||||
@@ -52,12 +52,12 @@ export function AppLayout() {
|
||||
|
||||
const mobileNavItems = [
|
||||
{ path: '/', label: 'Dashboard', icon: LayoutGrid },
|
||||
{ path: '/trees', label: 'All Flows', icon: Box },
|
||||
{ path: '/my-trees', label: 'My Flows', icon: PenLine },
|
||||
{ path: '/sessions', label: 'Sessions', icon: Clock },
|
||||
{ path: '/shares', label: 'Exports', icon: FileText },
|
||||
{ path: '/step-library', label: 'Step Library', icon: Bookmark },
|
||||
{ path: '/scripts', label: 'Script Library', icon: Terminal },
|
||||
{ path: '/sessions', label: 'Active Sessions', icon: Clock },
|
||||
{ path: '/escalations', label: 'Escalations', icon: AlertTriangle },
|
||||
{ path: '/trees', label: 'Flows', icon: Network },
|
||||
{ path: '/step-library', label: 'Step Library', icon: Library },
|
||||
{ path: '/scripts', label: 'Scripts', icon: Code2 },
|
||||
{ path: '/analytics', label: 'Analytics', icon: BarChart3 },
|
||||
{ path: '/account', label: 'Account', icon: Settings },
|
||||
]
|
||||
|
||||
|
||||
@@ -1,30 +1,24 @@
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { useLocation } from 'react-router-dom'
|
||||
import {
|
||||
LayoutGrid, Network, Wrench, Clock, FileOutput, BarChart3, TrendingUp,
|
||||
LayoutGrid, Network, Clock, FileOutput, BarChart3, TrendingUp,
|
||||
Settings, PanelLeftClose, PanelLeftOpen, MessageSquareText, ListChecks,
|
||||
BookOpen, Lightbulb, Code2, Library, Brain, WandSparkles, Sparkles, AlertTriangle,
|
||||
BookOpen, Code2, Library, AlertTriangle,
|
||||
} from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { useUserPreferencesStore } from '@/store/userPreferencesStore'
|
||||
import { sidebarApi } from '@/api'
|
||||
import type { SidebarStatsResponse } from '@/api/sidebar'
|
||||
import { SidebarStatsBar } from '@/components/sidebar/SidebarStatsBar'
|
||||
import { SidebarActivityFeed } from '@/components/sidebar/SidebarActivityFeed'
|
||||
import { NavItem } from './NavItem'
|
||||
|
||||
// Semantic icon colors — each nav item gets a unique color for visual landmarks
|
||||
const NAV_COLORS = {
|
||||
dashboard: '#22d3ee', // cyan-400
|
||||
flows: '#a78bfa', // violet-400
|
||||
editor: '#f59e0b', // amber-500
|
||||
sessions: '#34d399', // emerald-400
|
||||
exports: '#60a5fa', // blue-400
|
||||
flowPilot: '#e879f9', // fuchsia-400
|
||||
flowAssist:'#f472b6', // pink-400
|
||||
stepLib: '#fb923c', // orange-400
|
||||
scripts: '#2dd4bf', // teal-400
|
||||
kb: '#fb7185', // rose-400
|
||||
analytics: '#38bdf8', // sky-400
|
||||
guides: '#a3e635', // lime-400
|
||||
feedback: '#818cf8', // indigo-400
|
||||
@@ -83,17 +77,12 @@ export function Sidebar() {
|
||||
<>
|
||||
{/* Collapsed: icon-only nav */}
|
||||
<div className="flex flex-col items-center px-1.5 py-3 space-y-1">
|
||||
<NavItem href="/pilot" icon={Sparkles} label="New Session" iconColor={NAV_COLORS.dashboard} collapsed />
|
||||
<NavItem href="/" icon={LayoutGrid} label="Dashboard" iconColor={NAV_COLORS.dashboard} collapsed />
|
||||
<NavItem href="/sessions" icon={Clock} label="Sessions" badge={stats?.active_count || undefined} iconColor={NAV_COLORS.sessions} collapsed />
|
||||
<NavItem href="/sessions" icon={Clock} label="Active Sessions" badge={stats?.active_count || undefined} iconColor={NAV_COLORS.sessions} collapsed />
|
||||
<NavItem href="/escalations" icon={AlertTriangle} label="Escalations" iconColor="#fbbf24" collapsed />
|
||||
<NavItem href="/trees" icon={Network} label="All Flows" matchPaths={['/trees', '/flows']} iconColor={NAV_COLORS.flows} collapsed />
|
||||
<NavItem href="/assistant" icon={Brain} label="FlowPilot" iconColor={NAV_COLORS.flowPilot} collapsed />
|
||||
<NavItem href="/scripts" icon={Code2} label="Script Library" iconColor={NAV_COLORS.scripts} collapsed />
|
||||
<NavItem href="/my-trees" icon={Wrench} label="Flow Editor" iconColor={NAV_COLORS.editor} collapsed />
|
||||
<NavItem href="/flow-assist" icon={WandSparkles} label="Flow Assist" iconColor={NAV_COLORS.flowAssist} collapsed />
|
||||
<NavItem href="/trees" icon={Network} label="Flows" matchPaths={['/trees', '/flows', '/my-trees']} iconColor={NAV_COLORS.flows} collapsed />
|
||||
<NavItem href="/step-library" icon={Library} label="Step Library" iconColor={NAV_COLORS.stepLib} collapsed />
|
||||
<NavItem href="/kb-accelerator" icon={Lightbulb} label="KB Accelerator" iconColor={NAV_COLORS.kb} collapsed />
|
||||
<NavItem href="/scripts" icon={Code2} label="Scripts" iconColor={NAV_COLORS.scripts} collapsed />
|
||||
<NavItem href="/review-queue" icon={ListChecks} label="Review Queue" iconColor="#fbbf24" collapsed />
|
||||
<NavItem href="/shares" icon={FileOutput} label="Exports" iconColor={NAV_COLORS.exports} collapsed />
|
||||
<NavItem href="/analytics" icon={BarChart3} label="Analytics" iconColor={NAV_COLORS.analytics} collapsed />
|
||||
@@ -104,65 +93,37 @@ export function Sidebar() {
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{/* Stats Bar */}
|
||||
<SidebarStatsBar
|
||||
resolved={stats?.resolved_today ?? 0}
|
||||
active={stats?.active_count ?? 0}
|
||||
completedMinutes={stats?.total_session_minutes_today ?? 0}
|
||||
activeSessionStartTimes={stats?.active_sessions.map(s => s.started_at) ?? []}
|
||||
/>
|
||||
|
||||
{/* Activity Feed */}
|
||||
<SidebarActivityFeed
|
||||
activeSessions={stats?.active_sessions ?? []}
|
||||
recentCompletions={stats?.recent_completions ?? []}
|
||||
totalActive={stats?.active_count ?? 0}
|
||||
/>
|
||||
|
||||
<div style={{ borderBottom: '1px solid var(--glass-border)' }} />
|
||||
|
||||
{/* New Session CTA */}
|
||||
<div className="px-3 pt-2 pb-1">
|
||||
<NavItem href="/pilot" icon={Sparkles} label="New Session" iconColor={NAV_COLORS.dashboard} />
|
||||
</div>
|
||||
|
||||
<div style={{ borderBottom: '1px solid var(--glass-border)' }} />
|
||||
|
||||
{/* Navigation */}
|
||||
<div className="px-3 py-2 space-y-0.5">
|
||||
{/* Dashboard (standalone) */}
|
||||
{/* Dashboard */}
|
||||
<NavItem href="/" icon={LayoutGrid} label="Dashboard" iconColor={NAV_COLORS.dashboard} />
|
||||
|
||||
{/* Resolve */}
|
||||
<div className="font-label text-[0.5625rem] uppercase tracking-[0.12em] text-[#5a6170] px-3 pt-3 pb-1">
|
||||
Resolve
|
||||
</div>
|
||||
<NavItem href="/sessions" icon={Clock} label="Sessions" badge={stats?.active_count || undefined} iconColor={NAV_COLORS.sessions} />
|
||||
<NavItem href="/sessions" icon={Clock} label="Active Sessions" badge={stats?.active_count || undefined} iconColor={NAV_COLORS.sessions} matchPaths={['/sessions']} />
|
||||
<NavItem href="/escalations" icon={AlertTriangle} label="Escalations" iconColor="#fbbf24" />
|
||||
|
||||
{/* Knowledge */}
|
||||
<div className="font-label text-[0.5625rem] uppercase tracking-[0.12em] text-[#5a6170] px-3 pt-3 pb-1">
|
||||
Knowledge
|
||||
</div>
|
||||
<NavItem
|
||||
href="/trees"
|
||||
icon={Network}
|
||||
label="All Flows"
|
||||
label="Flows"
|
||||
badge={stats?.tree_counts.total || undefined}
|
||||
iconColor={NAV_COLORS.flows}
|
||||
matchPaths={['/trees', '/flows']}
|
||||
matchPaths={['/trees', '/flows', '/my-trees']}
|
||||
children={[
|
||||
{ href: '/trees?type=troubleshooting', label: 'Troubleshooting', count: stats?.tree_counts.troubleshooting || undefined },
|
||||
{ href: '/trees?type=procedural', label: 'Projects', count: stats?.tree_counts.procedural || undefined },
|
||||
{ href: '/trees?type=maintenance', label: 'Maintenance', count: stats?.tree_counts.maintenance || undefined },
|
||||
]}
|
||||
/>
|
||||
<NavItem href="/assistant" icon={Brain} label="FlowPilot" iconColor={NAV_COLORS.flowPilot} />
|
||||
<NavItem href="/scripts" icon={Code2} label="Script Library" iconColor={NAV_COLORS.scripts} />
|
||||
|
||||
{/* Build */}
|
||||
<div className="font-label text-[0.5625rem] uppercase tracking-[0.12em] text-[#5a6170] px-3 pt-3 pb-1">
|
||||
Build
|
||||
</div>
|
||||
<NavItem href="/my-trees" icon={Wrench} label="Flow Editor" iconColor={NAV_COLORS.editor} />
|
||||
<NavItem href="/flow-assist" icon={WandSparkles} label="Flow Assist" iconColor={NAV_COLORS.flowAssist} />
|
||||
<NavItem href="/step-library" icon={Library} label="Step Library" iconColor={NAV_COLORS.stepLib} />
|
||||
<NavItem href="/kb-accelerator" icon={Lightbulb} label="KB Accelerator" iconColor={NAV_COLORS.kb} />
|
||||
<NavItem href="/scripts" icon={Code2} label="Scripts" iconColor={NAV_COLORS.scripts} />
|
||||
<NavItem href="/review-queue" icon={ListChecks} label="Review Queue" iconColor="#fbbf24" />
|
||||
|
||||
{/* Insights */}
|
||||
|
||||
Reference in New Issue
Block a user