chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: migrate dashboard components to Design System v4

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-03-22 02:00:35 -04:00
parent 56ff792f8e
commit 96a4130c0e
18 changed files with 116 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/components/dashboard/ActiveFlowPilotSessions.tsx
View File

@@ -29,13 +29,13 @@ export function ActiveFlowPilotSessions() {
if (loading) {
return (
<div className="glass-card-static">
<div className="card-flat">
<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>
<h3 className="font-heading text-sm font-bold text-[#e2e5eb]">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 key={i} className="h-24 rounded-xl bg-[#14161d] border border-[#1e2130] animate-pulse" />
))}
</div>
</div>
@@ -43,22 +43,22 @@ export function ActiveFlowPilotSessions() {
}
return (
<div className="glass-card-static">
<div className="card-flat">
<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>
<h3 className="font-heading text-sm font-bold text-[#e2e5eb]">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">
<span className="inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-[rgba(34,211,238,0.10)] px-1.5 text-[0.625rem] font-bold text-[#22d3ee]">
{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"
className="flex items-center gap-1 text-[0.6875rem] text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
>
View all <ArrowRight size={10} />
</Link>
@@ -66,7 +66,7 @@ export function ActiveFlowPilotSessions() {
{sessions.length === 0 ? (
<div className="px-5 py-8 text-center">
<p className="text-sm text-muted-foreground">No active sessions</p>
<p className="text-sm text-[#848b9b]">No active sessions</p>
<p className="mt-1 text-[0.6875rem] text-[#5a6170]">Start typing above to begin troubleshooting</p>
</div>
) : (
@@ -75,26 +75,26 @@ export function ActiveFlowPilotSessions() {
<button
key={session.id}
onClick={() => navigate(`/pilot/${session.id}`)}
className="glass-card p-4 text-left"
className="card-interactive 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" />
<Sparkles size={14} className="shrink-0 text-[#22d3ee] mt-0.5" />
<span
className={cn(
'font-label text-[0.5625rem] uppercase px-1.5 py-0.5 rounded',
'font-sans text-xs 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 && 'bg-[#14161d] text-[#848b9b]',
)}
>
{session.confidence_tier || 'starting'}
</span>
</div>
<p className="text-sm font-medium text-foreground truncate">
<p className="text-sm font-medium text-[#e2e5eb] truncate">
{session.problem_summary || 'Session in progress'}
</p>
<div className="mt-2 flex items-center gap-2 text-[0.625rem] text-muted-foreground">
<div className="mt-2 flex items-center gap-2 text-[0.625rem] text-[#848b9b]">
<span className="flex items-center gap-1">
<Clock size={10} />
{timeAgo(session.created_at)}

8
frontend/src/components/dashboard/FiltersBar.tsx
View File

@@ -22,15 +22,15 @@ export function FiltersBar({ filters, activeFilter, onFilterChange }: FiltersBar
className={cn(
'shrink-0 rounded-lg border px-3 py-1.5 text-[0.8125rem] font-medium transition-colors',
activeFilter === f.id
? 'border-primary/30 bg-primary/10 text-primary'
: 'border-border bg-card text-muted-foreground hover:border-border/80 hover:text-foreground'
? 'border-[#22d3ee]/30 bg-[rgba(34,211,238,0.10)] text-[#22d3ee]'
: 'border-[#1e2130] bg-[#14161d] text-[#848b9b] hover:border-[#1e2130]/80 hover:text-[#e2e5eb]'
)}
>
{f.label}
</button>
))}
<div className="mx-1.5 h-5 w-px shrink-0 bg-border" />
<button className="flex shrink-0 items-center gap-1.5 rounded-lg border border-border bg-card px-3 py-1.5 text-[0.8125rem] text-muted-foreground hover:text-foreground transition-colors">
<div className="mx-1.5 h-5 w-px shrink-0 bg-[#1e2130]" />
<button className="flex shrink-0 items-center gap-1.5 rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-1.5 text-[0.8125rem] text-[#848b9b] hover:text-[#e2e5eb] transition-colors">
<Filter size={14} />
More Filters
</button>

10
frontend/src/components/dashboard/KnowledgeBaseCards.tsx
View File

@@ -20,15 +20,15 @@ export function KnowledgeBaseCards() {
]
return (
<div className="glass-card-static">
<div className="card-flat">
<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>
<h3 className="font-heading text-sm font-bold text-[#e2e5eb]">Knowledge Base</h3>
<button
onClick={() => navigate('/trees')}
className="flex items-center gap-1 text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors"
className="flex items-center gap-1 text-[0.6875rem] text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
>
Browse <ArrowRight size={10} />
</button>
@@ -41,8 +41,8 @@ export function KnowledgeBaseCards() {
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">
<p className="font-heading text-xl font-extrabold text-[#e2e5eb]">{item.value}</p>
<p className="font-sans text-xs text-[0.5625rem] uppercase tracking-[0.1em] text-[#848b9b]">
{item.label}
</p>
</button>

26
frontend/src/components/dashboard/OnboardingChecklist.tsx
View File

@@ -69,11 +69,11 @@ export function OnboardingChecklist() {
}
return (
<div className="glass-card overflow-hidden fade-in" style={{ animationDelay: '150ms' }}>
<div className="card-interactive overflow-hidden fade-in" style={{ animationDelay: '150ms' }}>
{/* Progress bar */}
<div className="h-1 w-full bg-[rgba(255,255,255,0.04)]">
<div
className="h-full bg-gradient-brand transition-all duration-500 ease-out"
className="h-full bg-[#22d3ee] transition-all duration-500 ease-out"
style={{ width: `${progressPercent}%` }}
/>
</div>
@@ -82,15 +82,15 @@ export function OnboardingChecklist() {
{/* Header */}
<div className="flex items-center justify-between mb-3">
<div>
<p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
<p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
Getting Started
</p>
<p className="text-sm text-foreground mt-0.5">
<p className="text-sm text-[#e2e5eb] mt-0.5">
{isAllDone ? (
<span className="text-gradient-brand font-semibold">You're all set!</span>
<span className="text-[#67e8f9] font-semibold">You're all set!</span>
) : (
<span>
<span className="text-gradient-brand font-semibold">{completedCount}</span>
<span className="text-[#67e8f9] font-semibold">{completedCount}</span>
{' '}of {totalCount} complete
</span>
)}
@@ -98,7 +98,7 @@ export function OnboardingChecklist() {
</div>
<button
onClick={handleDismiss}
className="rounded-md p-1 text-muted-foreground hover:text-foreground hover:bg-[rgba(255,255,255,0.04)] transition-colors"
className="rounded-md p-1 text-[#848b9b] hover:text-[#e2e5eb] hover:bg-[rgba(255,255,255,0.04)] transition-colors"
aria-label="Dismiss onboarding checklist"
>
<X size={16} />
@@ -126,11 +126,11 @@ export function OnboardingChecklist() {
className={cn(
'flex h-5 w-5 shrink-0 items-center justify-center rounded-md border transition-colors',
done
? 'bg-gradient-brand border-transparent'
: 'border-border'
? 'bg-[#22d3ee] border-transparent'
: 'border-[#1e2130]'
)}
>
{done && <Check size={12} className="text-[#101114]" />}
{done && <Check size={12} className="text-white" />}
</span>
{/* Label */}
@@ -138,8 +138,8 @@ export function OnboardingChecklist() {
className={cn(
'flex-1',
done
? 'text-muted-foreground line-through'
: 'text-foreground'
? 'text-[#848b9b] line-through'
: 'text-[#e2e5eb]'
)}
>
{item.label}
@@ -147,7 +147,7 @@ export function OnboardingChecklist() {
{/* Arrow for incomplete items */}
{!done && (
<ChevronRight size={14} className="text-muted-foreground shrink-0" />
<ChevronRight size={14} className="text-[#848b9b] shrink-0" />
)}
</button>
</li>

16
frontend/src/components/dashboard/OpenSessions.tsx
View File

@@ -17,17 +17,17 @@ interface OpenSessionsProps {
export function OpenSessions({ sessions }: OpenSessionsProps) {
return (
<div className="glass-card-static flex flex-col h-full">
<div className="card-flat flex flex-col h-full">
<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">My Open Sessions</h3>
<Link to="/sessions" className="text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors">
<h3 className="font-heading text-sm font-bold text-[#e2e5eb]">My Open Sessions</h3>
<Link to="/sessions" className="text-[0.6875rem] text-[#848b9b] hover:text-[#e2e5eb] transition-colors">
View All
</Link>
</div>
<div className="flex-1 flex flex-col">
{sessions.length === 0 ? (
<div className="flex-1 flex items-center justify-center">
<p className="text-sm text-muted-foreground">No open sessions</p>
<p className="text-sm text-[#848b9b]">No open sessions</p>
</div>
) : (
sessions.map((session, i) => (
@@ -40,19 +40,19 @@ export function OpenSessions({ sessions }: OpenSessionsProps) {
>
<span className="h-2 w-2 shrink-0 rounded-full bg-amber-400" />
<div className="flex-1 min-w-0">
<div className="text-sm text-foreground truncate">{session.treeName}</div>
<div className="text-[0.6875rem] text-muted-foreground">
<div className="text-sm text-[#e2e5eb] truncate">{session.treeName}</div>
<div className="text-[0.6875rem] text-[#848b9b]">
{session.stepNumber && session.totalSteps
? `Step ${session.stepNumber} of ${session.totalSteps}`
: 'In progress'}
<span className="mx-1.5 text-[var(--text-dimmed)]">&middot;</span>
<span className="font-label text-[0.625rem]">{session.timeAgo}</span>
<span className="font-sans text-xs text-[0.625rem]">{session.timeAgo}</span>
</div>
</div>
<Link
to={getTreeNavigatePath(session.treeId, session.treeType)}
state={{ sessionId: session.id }}
className="shrink-0 rounded-lg bg-gradient-brand px-3 py-1 text-[0.6875rem] font-medium text-primary-foreground hover:opacity-90 transition-opacity"
className="shrink-0 rounded-lg bg-[#22d3ee] px-3 py-1 text-[0.6875rem] font-medium text-white hover:brightness-110 transition-opacity"
>
Resume
</Link>

12
frontend/src/components/dashboard/PendingEscalations.tsx
View File

@@ -28,7 +28,7 @@ export function PendingEscalations() {
return (
<div
className="glass-card-static overflow-hidden"
className="card-flat overflow-hidden"
style={{ borderColor: 'rgba(251, 191, 36, 0.2)' }}
>
<div
@@ -37,7 +37,7 @@ export function PendingEscalations() {
>
<div className="flex items-center gap-2">
<AlertTriangle size={14} className="text-amber-400" />
<h3 className="font-heading text-sm font-bold text-foreground">
<h3 className="font-heading text-sm font-bold text-[#e2e5eb]">
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}
@@ -46,7 +46,7 @@ export function PendingEscalations() {
</div>
<Link
to="/escalations"
className="text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors"
className="text-[0.6875rem] text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
>
View all
</Link>
@@ -64,13 +64,13 @@ export function PendingEscalations() {
>
<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">
<div className="text-sm text-[#e2e5eb] truncate">
{esc.problem_summary || 'Escalated session'}
</div>
<div className="text-[0.6875rem] text-muted-foreground">
<div className="text-[0.6875rem] text-[#848b9b]">
{esc.problem_domain || 'General'}
<span className="mx-1.5 text-[var(--text-dimmed)]">&middot;</span>
<span className="font-label text-[0.625rem]">{timeAgo(esc.created_at)}</span>
<span className="font-sans text-xs">{timeAgo(esc.created_at)}</span>
</div>
</div>
<button

6
frontend/src/components/dashboard/PerformanceCards.tsx
View File

@@ -71,20 +71,20 @@ export function PerformanceCards() {
key={card.label}
onClick={() => navigate(card.href)}
className={cn(
'glass-card p-4 text-left fade-in',
'card-interactive 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">
<p className="font-sans text-xs text-[0.5625rem] uppercase tracking-[0.1em] text-[#848b9b]">
{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.highlight ? 'text-[#67e8f9]' : 'text-[#e2e5eb]'
)}>
{card.value}
</p>

12
frontend/src/components/dashboard/PreparedSessions.tsx
View File

@@ -28,11 +28,11 @@ export function PreparedSessions() {
}
return (
<div className="glass-card-static p-5 fade-in" style={{ animationDelay: '200ms' }}>
<div className="card-flat p-5 fade-in" style={{ animationDelay: '200ms' }}>
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-2">
<ClipboardList className="h-4 w-4 text-cyan-400" />
<h3 className="font-heading text-sm font-semibold text-foreground">Prepared for You</h3>
<h3 className="font-heading text-sm font-semibold text-[#e2e5eb]">Prepared for You</h3>
<span className="flex h-5 w-5 items-center justify-center rounded-full bg-cyan-400/20 text-[0.625rem] font-bold text-cyan-400">
{sessions.length}
</span>
@@ -51,13 +51,13 @@ export function PreparedSessions() {
key={session.id}
onClick={() => handleStart(session)}
className={cn(
'group flex w-full items-center justify-between gap-3 rounded-lg border border-border px-4 py-3',
'group flex w-full items-center justify-between gap-3 rounded-lg border border-[#1e2130] px-4 py-3',
'text-left transition-all hover:border-cyan-500/30 hover:bg-cyan-500/5'
)}
>
<div className="min-w-0 flex-1">
<p className="text-sm font-medium text-foreground truncate">{flowName}</p>
<div className="mt-1 flex items-center gap-3 text-xs text-muted-foreground">
<p className="text-sm font-medium text-[#e2e5eb] truncate">{flowName}</p>
<div className="mt-1 flex items-center gap-3 text-xs text-[#848b9b]">
{session.ticket_number && (
<span>{session.ticket_number}</span>
)}
@@ -73,7 +73,7 @@ export function PreparedSessions() {
</span>
</div>
</div>
<ArrowRight className="h-4 w-4 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100" />
<ArrowRight className="h-4 w-4 shrink-0 text-[#848b9b] opacity-0 transition-opacity group-hover:opacity-100" />
</button>
)
})}

10
frontend/src/components/dashboard/QuickActions.tsx
View File

@@ -12,16 +12,16 @@ export function QuickActions() {
const navigate = useNavigate()
return (
<div className="glass-card-static flex flex-col h-full">
<div className="card-flat flex flex-col h-full">
<div className="px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
<h3 className="font-heading text-sm font-bold text-foreground">Quick Actions</h3>
<h3 className="font-heading text-sm font-bold text-[#e2e5eb]">Quick Actions</h3>
</div>
<div className="flex-1 flex flex-col justify-between p-3 gap-2">
{ACTIONS.map(({ icon: Icon, label, description, href, color }) => (
<button
key={label}
onClick={() => navigate(href)}
className="glass-card flex items-center gap-3 px-4 py-3 text-left"
className="card-interactive flex items-center gap-3 px-4 py-3 text-left"
>
<span
className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg"
@@ -30,8 +30,8 @@ export function QuickActions() {
<Icon size={18} style={{ color }} />
</span>
<div className="min-w-0">
<div className="text-sm font-medium text-foreground">{label}</div>
<div className="text-[0.6875rem] text-muted-foreground truncate">{description}</div>
<div className="text-sm font-medium text-[#e2e5eb]">{label}</div>
<div className="text-[0.6875rem] text-[#848b9b] truncate">{description}</div>
</div>
</button>
))}

6
frontend/src/components/dashboard/QuickStats.tsx
View File

@@ -18,16 +18,16 @@ export function QuickStats({ stats }: QuickStatsProps) {
{stats.map((stat, i) => (
<div
key={stat.label}
className={cn('glass-card p-4 fade-in', i === 0 && 'active-glow')}
className={cn('card-interactive p-4 fade-in', i === 0 && 'active-glow')}
style={{ animationDelay: `${50 + i * 30}ms` }}
>
<p className="font-label text-[0.625rem] font-medium uppercase tracking-widest text-muted-foreground">
<p className="font-sans text-xs text-[0.625rem] font-medium uppercase tracking-widest text-[#848b9b]">
{stat.label}
</p>
<p
className={cn(
'mt-1 font-heading text-2xl font-extrabold tracking-tight',
stat.gradient && 'text-gradient-brand',
stat.gradient && 'text-[#67e8f9]',
stat.color
)}
style={stat.color && !stat.color.startsWith('text-') ? { color: stat.color } : undefined}

10
frontend/src/components/dashboard/RecentActivity.tsx
View File

@@ -24,9 +24,9 @@ const DEFAULT_ACTIVITIES: ActivityItem[] = [
export function RecentActivity({ activities = DEFAULT_ACTIVITIES }: RecentActivityProps) {
return (
<div className="glass-card-static">
<div className="card-flat">
<div className="px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
<h3 className="font-heading text-sm font-bold text-foreground">Recent Activity</h3>
<h3 className="font-heading text-sm font-bold text-[#e2e5eb]">Recent Activity</h3>
</div>
<div>
{activities.map((item, i) => (
@@ -39,15 +39,15 @@ export function RecentActivity({ activities = DEFAULT_ACTIVITIES }: RecentActivi
}}
>
<span
className="flex h-9 w-9 shrink-0 items-center justify-center rounded-[10px]"
className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg"
style={{ background: item.iconBg }}
>
<item.icon size={16} style={{ color: item.iconColor }} />
</span>
<div className="flex-1 min-w-0 pt-0.5">
<p className="text-sm text-foreground">{item.description}</p>
<p className="text-sm text-[#e2e5eb]">{item.description}</p>
</div>
<span className="shrink-0 font-label text-[0.625rem] text-muted-foreground pt-1">
<span className="shrink-0 font-sans text-xs text-[0.625rem] text-[#848b9b] pt-1">
{item.timestamp}
</span>
</div>

10
frontend/src/components/dashboard/RecentFlowPilotSessions.tsx
View File

@@ -41,15 +41,15 @@ export function RecentFlowPilotSessions() {
if (sessions.length === 0) return null
return (
<div className="glass-card-static">
<div className="card-flat">
<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>
<h3 className="font-heading text-sm font-bold text-[#e2e5eb]">Recent Sessions</h3>
<Link
to="/sessions"
className="flex items-center gap-1 text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors"
className="flex items-center gap-1 text-[0.6875rem] text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
>
History <ArrowRight size={10} />
</Link>
@@ -69,11 +69,11 @@ export function RecentFlowPilotSessions() {
>
<StatusIcon size={14} style={{ color: config.color }} className="shrink-0" />
<div className="flex-1 min-w-0">
<p className="text-sm text-foreground truncate">
<p className="text-sm text-[#e2e5eb] truncate">
{session.problem_summary || 'Session'}
</p>
</div>
<span className="shrink-0 font-label text-[0.625rem] text-muted-foreground">
<span className="shrink-0 font-sans text-xs text-[#848b9b]">
{timeAgo(session.resolved_at || session.created_at)}
</span>
</button>

8
frontend/src/components/dashboard/SectionGroup.tsx
View File

@@ -19,19 +19,19 @@ export function SectionGroup({ title, count, defaultOpen = true, delay = 150, ch
onClick={() => setOpen(!open)}
className="flex w-full items-center gap-2 py-2"
>
<span className="h-2 w-2 shrink-0 rounded-full bg-gradient-brand" />
<span className="font-heading text-[0.8125rem] font-bold uppercase tracking-[0.04em] text-foreground">
<span className="h-2 w-2 shrink-0 rounded-full bg-[#22d3ee]" />
<span className="font-heading text-[0.8125rem] font-bold uppercase tracking-[0.04em] text-[#e2e5eb]">
{title}
</span>
{count !== undefined && (
<span className="rounded-full bg-secondary px-2 py-0.5 font-label text-[0.6875rem] text-muted-foreground">
<span className="rounded-full bg-secondary px-2 py-0.5 font-sans text-xs text-[#848b9b]">
{count}
</span>
)}
<div className="flex-1" />
<ChevronDown
size={14}
className={cn('text-muted-foreground transition-transform', !open && '-rotate-90')}
className={cn('text-[#848b9b] transition-transform', !open && '-rotate-90')}
/>
</button>
{open && <div className="mt-1 space-y-1">{children}</div>}

16
frontend/src/components/dashboard/SessionsPanel.tsx
View File

@@ -21,14 +21,14 @@ export function SessionsPanel({ sessions, delay = 200 }: SessionsPanelProps) {
if (sessions.length === 0) return null
return (
<div className="glass-card-static fade-in" style={{ animationDelay: `${delay}ms` }}>
<div className="card-flat fade-in" style={{ animationDelay: `${delay}ms` }}>
<div className="flex items-center justify-between px-4 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
<h3 className="font-heading text-sm font-semibold text-foreground">Recent Sessions</h3>
<Link to="/sessions" className="text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors">
<h3 className="font-heading text-sm font-semibold text-[#e2e5eb]">Recent Sessions</h3>
<Link to="/sessions" className="text-[0.6875rem] text-[#848b9b] hover:text-[#e2e5eb] transition-colors">
View All
</Link>
</div>
<div className="divide-y divide-border">
<div className="divide-y divide-[#1e2130]">
{sessions.map(session => (
<Link
key={session.id}
@@ -42,15 +42,15 @@ export function SessionsPanel({ sessions, delay = 200 }: SessionsPanelProps) {
'h-2 w-2 rounded-full',
session.status === 'completed' ? 'bg-green-500' :
session.status === 'in_progress' ? 'bg-amber-500' :
'bg-muted-foreground'
'bg-[#848b9b]'
)}
/>
{/* Name */}
<span className="text-sm text-foreground truncate">{session.treeName}</span>
<span className="text-sm text-[#e2e5eb] truncate">{session.treeName}</span>
{/* Progress */}
<span className="text-[0.6875rem] text-muted-foreground truncate">
<span className="text-[0.6875rem] text-[#848b9b] truncate">
{session.status === 'completed'
? '✓ Resolved'
: session.stepNumber && session.totalSteps
@@ -59,7 +59,7 @@ export function SessionsPanel({ sessions, delay = 200 }: SessionsPanelProps) {
</span>
{/* Ticket */}
<span className="font-label text-[0.6875rem] text-muted-foreground truncate">
<span className="font-sans text-xs text-[0.6875rem] text-[#848b9b] truncate">
{session.ticketNumber || '—'}
</span>

16
frontend/src/components/dashboard/StartSessionInput.tsx
View File

@@ -32,12 +32,12 @@ export function StartSessionInput() {
}
return (
<div className="glass-card-static overflow-hidden">
<div className="card-flat 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"
className="absolute left-4 top-1/2 -translate-y-1/2 text-[#848b9b]"
/>
<input
ref={inputRef}
@@ -46,7 +46,7 @@ export function StartSessionInput() {
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"
className="w-full rounded-xl border border-[#1e2130] bg-[#0c0d10] py-3.5 pl-11 pr-4 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] 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">
@@ -57,8 +57,8 @@ export function StartSessionInput() {
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'
? 'bg-[rgba(34,211,238,0.10)] text-[#e2e5eb]'
: 'text-[#848b9b] hover:text-[#e2e5eb]'
)}
>
<Sparkles size={12} />
@@ -70,15 +70,15 @@ export function StartSessionInput() {
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'
? 'bg-[rgba(34,211,238,0.10)] text-[#e2e5eb]'
: 'text-[#848b9b] hover:text-[#e2e5eb]'
)}
>
<MessageCircle size={12} />
Open Chat
</button>
</div>
<span className="text-[0.625rem] text-muted-foreground">
<span className="text-[0.625rem] text-[#848b9b]">
Press Enter to start
</span>
</div>

10
frontend/src/components/dashboard/TeamSummary.tsx
View File

@@ -25,15 +25,15 @@ export function TeamSummary() {
]
return (
<div className="glass-card-static">
<div className="card-flat">
<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>
<h3 className="font-heading text-sm font-bold text-[#e2e5eb]">Team Summary</h3>
<button
onClick={() => navigate('/analytics')}
className="flex items-center gap-1 text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors"
className="flex items-center gap-1 text-[0.6875rem] text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
>
Manage <ArrowRight size={10} />
</button>
@@ -46,8 +46,8 @@ export function TeamSummary() {
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">
<p className="font-heading text-xl font-extrabold text-[#e2e5eb]">{item.value}</p>
<p className="font-sans text-xs text-[0.5625rem] uppercase tracking-[0.1em] text-[#848b9b]">
{item.label}
</p>
</button>

14
frontend/src/components/dashboard/TreeListItem.tsx
View File

@@ -33,7 +33,7 @@ export function TreeListItem({
return (
<div
onClick={() => navigate(getTreeNavigatePath(id, treeType))}
className="group grid cursor-pointer items-center gap-3 rounded-lg border border-transparent bg-card px-4 py-3 transition-colors hover:border-border hover:bg-[var(--sidebar-hover)]"
className="group grid cursor-pointer items-center gap-3 rounded-lg border border-transparent bg-[#14161d] px-4 py-3 transition-colors hover:border-[#1e2130] hover:bg-[var(--sidebar-hover)]"
style={{ gridTemplateColumns: '40px 1fr 130px 80px 100px 40px' }}
>
{/* Icon box */}
@@ -46,15 +46,15 @@ export function TreeListItem({
{/* Info */}
<div className="min-w-0">
<p className="font-heading text-sm font-semibold text-foreground truncate">{name}</p>
<p className="font-heading text-sm font-semibold text-[#e2e5eb] truncate">{name}</p>
<div className="mt-0.5 flex items-center gap-2">
{tags.slice(0, 3).map(tag => (
<span key={tag} className="rounded border border-border bg-secondary px-1.5 py-px font-label text-[0.625rem] text-muted-foreground">
<span key={tag} className="rounded border border-[#1e2130] bg-secondary px-1.5 py-px font-sans text-xs text-[0.625rem] text-[#848b9b]">
{tag}
</span>
))}
{description && tags.length === 0 && (
<span className="text-[0.6875rem] text-muted-foreground truncate">{description}</span>
<span className="text-[0.6875rem] text-[#848b9b] truncate">{description}</span>
)}
</div>
</div>
@@ -64,13 +64,13 @@ export function TreeListItem({
{category && (
<>
<span className="h-2 w-2 shrink-0 rounded-full" style={{ backgroundColor: categoryColor }} />
<span className="font-label text-xs text-muted-foreground truncate">{category.name}</span>
<span className="font-sans text-xs text-[#848b9b] truncate">{category.name}</span>
</>
)}
</div>
{/* Usage count */}
<div className="text-right font-label text-xs text-muted-foreground">
<div className="text-right font-sans text-xs text-[#848b9b]">
{usageCount} uses
</div>
@@ -85,7 +85,7 @@ export function TreeListItem({
e.stopPropagation()
navigate(getTreeEditorPath(id, treeType))
}}
className="flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground opacity-0 transition-opacity hover:bg-accent group-hover:opacity-100"
className="flex h-8 w-8 items-center justify-center rounded-md text-[#848b9b] opacity-0 transition-opacity hover:bg-accent group-hover:opacity-100"
>
<MoreHorizontal size={16} />
</button>

14
frontend/src/components/dashboard/WeeklyCalendar.tsx
View File

@@ -34,10 +34,10 @@ export function WeeklyCalendar({ events = {} }: WeeklyCalendarProps) {
const days = useMemo(() => getWeekDays(), [])
return (
<div className="glass-card-static flex flex-col h-full">
<div className="card-flat flex flex-col h-full">
<div className="flex items-center gap-2 px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
<Calendar size={16} className="text-muted-foreground" />
<h3 className="font-heading text-sm font-bold text-foreground">This Week</h3>
<Calendar size={16} className="text-[#848b9b]" />
<h3 className="font-heading text-sm font-bold text-[#e2e5eb]">This Week</h3>
</div>
<div className="flex flex-1 min-h-0">
{days.map((day, i) => {
@@ -56,10 +56,10 @@ export function WeeklyCalendar({ events = {} }: WeeklyCalendarProps) {
borderBottom: day.isToday ? '2px solid #06b6d4' : '1px solid var(--glass-border)',
}}
>
<span className={`font-label text-[0.625rem] uppercase tracking-widest ${day.isToday ? 'text-cyan-400' : 'text-muted-foreground'}`}>
<span className={`font-sans text-xs text-[0.625rem] uppercase tracking-widest ${day.isToday ? 'text-cyan-400' : 'text-[#848b9b]'}`}>
{day.label}
</span>
<div className={`text-sm font-heading font-bold ${day.isToday ? 'text-foreground' : 'text-muted-foreground'}`}>
<div className={`text-sm font-heading font-bold ${day.isToday ? 'text-[#e2e5eb]' : 'text-[#848b9b]'}`}>
{day.date.getDate()}
</div>
</div>
@@ -76,8 +76,8 @@ export function WeeklyCalendar({ events = {} }: WeeklyCalendarProps) {
background: 'rgba(255, 255, 255, 0.02)',
}}
>
<div className="font-medium text-foreground truncate">{event.title}</div>
<div className="font-label text-[0.5625rem] text-muted-foreground">{event.time}</div>
<div className="font-medium text-[#e2e5eb] truncate">{event.title}</div>
<div className="font-sans text-xs text-[0.5625rem] text-[#848b9b]">{event.time}</div>
</div>
))
)}