f4ce1595d6
Migrate all 84 frontend files from the old themed/colored design to a monochrome glass-morphism design system. Pure black backgrounds, white text with opacity levels, glass-card components with backdrop-blur, and functional color reserved for status indicators only. Foundation: remap CSS variables to monochrome, simplify Tailwind config, remove theme toggle, convert brand logo/wordmark to white. Pages: all 14 pages updated. Components: all common, library, session, step-library, tree-editor, tree-preview, admin, and subscription components converted. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
316 lines
15 KiB
TypeScript
316 lines
15 KiB
TypeScript
import { useState, useEffect, useRef } from 'react'
|
|
import { useNavigate, Link } from 'react-router-dom'
|
|
import { Search, Clock, ArrowRight, Play, Loader2, TrendingUp, Sparkles, Zap } from 'lucide-react'
|
|
import { treesApi } from '@/api/trees'
|
|
import { sessionsApi } from '@/api/sessions'
|
|
import type { TreeListItem } from '@/types'
|
|
import type { Session } from '@/types/session'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
function timeAgo(dateStr: string): string {
|
|
const now = Date.now()
|
|
const then = new Date(dateStr).getTime()
|
|
const diffMs = now - then
|
|
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)
|
|
return `${days}d ago`
|
|
}
|
|
|
|
export function QuickStartPage() {
|
|
const navigate = useNavigate()
|
|
const [query, setQuery] = useState('')
|
|
const [searchResults, setSearchResults] = useState<TreeListItem[]>([])
|
|
const [isSearching, setIsSearching] = useState(false)
|
|
const [showResults, setShowResults] = useState(false)
|
|
const [activeSessions, setActiveSessions] = useState<Session[]>([])
|
|
const [recentTrees, setRecentTrees] = useState<{ tree_id: string; name: string; lastUsed: string }[]>([])
|
|
const [isLoading, setIsLoading] = useState(true)
|
|
const searchRef = useRef<HTMLDivElement>(null)
|
|
const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
|
|
|
|
// Load sessions on mount
|
|
useEffect(() => {
|
|
async function loadData() {
|
|
try {
|
|
const [active, recent] = await Promise.all([
|
|
sessionsApi.list({ completed: false, size: 5 }),
|
|
sessionsApi.list({ size: 10 }),
|
|
])
|
|
setActiveSessions(active.slice(0, 3))
|
|
|
|
// Deduplicate recent sessions by tree_id, max 5
|
|
const seen = new Set<string>()
|
|
const deduped: { tree_id: string; name: string; lastUsed: string }[] = []
|
|
for (const s of recent) {
|
|
if (!seen.has(s.tree_id) && deduped.length < 5) {
|
|
seen.add(s.tree_id)
|
|
deduped.push({
|
|
tree_id: s.tree_id,
|
|
name: s.tree_snapshot?.name || 'Unnamed Tree',
|
|
lastUsed: s.started_at,
|
|
})
|
|
}
|
|
}
|
|
setRecentTrees(deduped)
|
|
} catch (err) {
|
|
console.error('Failed to load sessions:', err)
|
|
} finally {
|
|
setIsLoading(false)
|
|
}
|
|
}
|
|
loadData()
|
|
}, [])
|
|
|
|
// Debounced search
|
|
useEffect(() => {
|
|
if (debounceRef.current) clearTimeout(debounceRef.current)
|
|
|
|
if (query.length < 2) {
|
|
setSearchResults([])
|
|
setShowResults(false)
|
|
setIsSearching(false)
|
|
return
|
|
}
|
|
|
|
setIsSearching(true)
|
|
setShowResults(true)
|
|
debounceRef.current = setTimeout(async () => {
|
|
try {
|
|
const results = await treesApi.search(query, 8)
|
|
setSearchResults(results)
|
|
} catch (err) {
|
|
console.error('Search failed:', err)
|
|
setSearchResults([])
|
|
} finally {
|
|
setIsSearching(false)
|
|
}
|
|
}, 300)
|
|
|
|
return () => {
|
|
if (debounceRef.current) clearTimeout(debounceRef.current)
|
|
}
|
|
}, [query])
|
|
|
|
// Close dropdown on outside click
|
|
useEffect(() => {
|
|
function handleClick(e: MouseEvent) {
|
|
if (searchRef.current && !searchRef.current.contains(e.target as Node)) {
|
|
setShowResults(false)
|
|
}
|
|
}
|
|
document.addEventListener('mousedown', handleClick)
|
|
return () => document.removeEventListener('mousedown', handleClick)
|
|
}, [])
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950">
|
|
{/* Animated background grid */}
|
|
<div className="pointer-events-none absolute inset-0 bg-[linear-gradient(to_right,#4f4f4f12_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f12_1px,transparent_1px)] bg-[size:64px_64px] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]" />
|
|
|
|
<div className="relative container mx-auto px-4 py-12">
|
|
{/* Hero Section */}
|
|
<div className="mx-auto max-w-3xl">
|
|
{/* Badge */}
|
|
<div className="flex justify-center mb-6 animate-in fade-in slide-in-from-bottom-4 duration-700">
|
|
<div className="inline-flex items-center gap-2 rounded-full bg-gradient-to-r from-violet-500/10 to-purple-500/10 px-4 py-2 border border-violet-500/20 backdrop-blur-sm">
|
|
<Sparkles className="h-4 w-4 text-violet-400" />
|
|
<span className="text-sm font-medium text-violet-300">AI-Powered Troubleshooting</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<h1 className="font-heading text-5xl font-bold text-center bg-clip-text text-transparent bg-gradient-to-br from-white via-slate-200 to-slate-400 leading-tight animate-in fade-in slide-in-from-bottom-4 duration-700 delay-100">
|
|
What are you troubleshooting?
|
|
</h1>
|
|
|
|
<p className="text-center text-slate-400 mt-4 text-lg animate-in fade-in slide-in-from-bottom-4 duration-700 delay-200">
|
|
Search our library of proven decision trees or continue where you left off
|
|
</p>
|
|
|
|
{/* Enhanced Search Bar */}
|
|
<div ref={searchRef} className="relative mt-8 animate-in fade-in slide-in-from-bottom-4 duration-700 delay-300">
|
|
<div className="relative group">
|
|
{/* Glow effect */}
|
|
<div className="absolute -inset-0.5 bg-gradient-to-r from-violet-600 to-purple-600 rounded-xl blur opacity-20 group-hover:opacity-40 transition duration-300" />
|
|
|
|
<div className="relative">
|
|
<Search className="absolute left-5 top-1/2 h-5 w-5 -translate-y-1/2 text-slate-400 transition-colors group-hover:text-violet-400" />
|
|
<input
|
|
type="text"
|
|
autoFocus
|
|
value={query}
|
|
onChange={(e) => setQuery(e.target.value)}
|
|
onFocus={() => query.length >= 2 && setShowResults(true)}
|
|
placeholder="Paste ticket subject or search for a tree..."
|
|
className={cn(
|
|
'w-full rounded-xl border border-slate-700/50 bg-slate-900/90 backdrop-blur-xl py-5 pl-14 pr-5 text-lg',
|
|
'text-white placeholder:text-slate-500',
|
|
'focus:outline-none focus:ring-2 focus:ring-violet-500/50 focus:border-violet-500/50',
|
|
'transition-all duration-300'
|
|
)}
|
|
/>
|
|
{query && (
|
|
<Zap className="absolute right-5 top-1/2 h-5 w-5 -translate-y-1/2 text-violet-400 animate-pulse" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Enhanced Search Results Dropdown */}
|
|
{showResults && (
|
|
<div className="absolute z-10 mt-2 w-full rounded-xl border border-slate-700/50 bg-slate-900/95 backdrop-blur-xl shadow-2xl animate-in fade-in slide-in-from-top-2 duration-200">
|
|
{isSearching ? (
|
|
<div className="flex items-center justify-center py-8">
|
|
<Loader2 className="h-6 w-6 animate-spin text-violet-400" />
|
|
</div>
|
|
) : searchResults.length === 0 ? (
|
|
<div className="px-4 py-8 text-center">
|
|
<div className="text-slate-400 text-sm">No results found</div>
|
|
<div className="text-slate-500 text-xs mt-1">Try a different search term</div>
|
|
</div>
|
|
) : (
|
|
<ul className="max-h-96 overflow-y-auto py-2">
|
|
{searchResults.map((tree, idx) => (
|
|
<li key={tree.id} style={{ animationDelay: `${idx * 50}ms` }} className="animate-in fade-in slide-in-from-top-1 duration-200">
|
|
<button
|
|
onClick={() => navigate(`/trees/${tree.id}/navigate`)}
|
|
className="w-full px-5 py-4 text-left transition-all hover:bg-slate-800/50 group border-b border-slate-800/50 last:border-0"
|
|
>
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="flex-1 min-w-0">
|
|
<div className="text-sm font-semibold text-white group-hover:text-violet-300 transition-colors">
|
|
{tree.name}
|
|
</div>
|
|
{tree.description && (
|
|
<div className="mt-1 line-clamp-2 text-xs text-slate-400">
|
|
{tree.description}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<ArrowRight className="h-4 w-4 flex-shrink-0 text-slate-600 group-hover:text-violet-400 group-hover:translate-x-1 transition-all" />
|
|
</div>
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Continue Session Section */}
|
|
{activeSessions.length > 0 && (
|
|
<div className="mx-auto mt-16 max-w-6xl animate-in fade-in slide-in-from-bottom-4 duration-700 delay-500">
|
|
<div className="flex items-center gap-3 mb-5">
|
|
<div className="flex items-center gap-2">
|
|
<div className="h-8 w-1 bg-gradient-to-b from-violet-500 to-purple-600 rounded-full" />
|
|
<h2 className="font-heading text-xl font-bold text-white">
|
|
Continue Session
|
|
</h2>
|
|
</div>
|
|
<div className="flex-1 h-px bg-gradient-to-r from-slate-700/50 to-transparent" />
|
|
</div>
|
|
|
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
|
{activeSessions.map((session, idx) => (
|
|
<button
|
|
key={session.id}
|
|
onClick={() =>
|
|
navigate(`/trees/${session.tree_id}/navigate`, {
|
|
state: { sessionId: session.id },
|
|
})
|
|
}
|
|
style={{ animationDelay: `${(idx + 5) * 100}ms` }}
|
|
className="group relative rounded-xl border border-slate-700/50 bg-slate-900/50 backdrop-blur-sm p-5 text-left transition-all hover:border-violet-500/50 hover:shadow-lg hover:shadow-violet-500/10 hover:-translate-y-1 animate-in fade-in slide-in-from-bottom-2 duration-500"
|
|
>
|
|
{/* Animated corner accent */}
|
|
<div className="absolute top-0 right-0 h-16 w-16 bg-gradient-to-bl from-violet-500/20 to-transparent rounded-tr-xl opacity-0 group-hover:opacity-100 transition-opacity" />
|
|
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="min-w-0 flex-1">
|
|
<div className="truncate text-base font-semibold text-white group-hover:text-violet-300 transition-colors">
|
|
{session.tree_snapshot?.name || 'Unnamed Tree'}
|
|
</div>
|
|
{(session.ticket_number || session.client_name) && (
|
|
<div className="mt-1.5 truncate text-sm text-slate-400">
|
|
{[session.ticket_number, session.client_name]
|
|
.filter(Boolean)
|
|
.join(' • ')}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex-shrink-0 rounded-full bg-violet-500/10 p-2 group-hover:bg-violet-500/20 transition-colors">
|
|
<Play className="h-4 w-4 text-violet-400 group-hover:scale-110 transition-transform" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-4 flex items-center gap-2 text-xs text-slate-500">
|
|
<Clock className="h-3.5 w-3.5" />
|
|
<span>Started {timeAgo(session.started_at)}</span>
|
|
</div>
|
|
|
|
{/* Progress indicator (optional - you can remove this) */}
|
|
<div className="absolute bottom-0 left-0 right-0 h-1 bg-slate-800/50 rounded-b-xl overflow-hidden">
|
|
<div className="h-full bg-gradient-to-r from-violet-500 to-purple-600 w-2/3" />
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Recent Trees Section */}
|
|
{!isLoading && recentTrees.length > 0 && (
|
|
<div className="mx-auto mt-12 max-w-6xl animate-in fade-in slide-in-from-bottom-4 duration-700 delay-700">
|
|
<div className="flex items-center gap-3 mb-5">
|
|
<div className="flex items-center gap-2">
|
|
<TrendingUp className="h-5 w-5 text-violet-400" />
|
|
<h2 className="font-heading text-xl font-bold text-white">
|
|
Recent Trees
|
|
</h2>
|
|
</div>
|
|
<div className="flex-1 h-px bg-gradient-to-r from-slate-700/50 to-transparent" />
|
|
</div>
|
|
|
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5">
|
|
{recentTrees.map((tree, idx) => (
|
|
<button
|
|
key={tree.tree_id}
|
|
onClick={() => navigate(`/trees/${tree.tree_id}/navigate`)}
|
|
style={{ animationDelay: `${(idx + 8) * 100}ms` }}
|
|
className="group relative rounded-xl border border-slate-700/50 bg-slate-900/30 backdrop-blur-sm p-4 text-left transition-all hover:border-violet-500/50 hover:bg-slate-900/50 hover:-translate-y-1 animate-in fade-in slide-in-from-bottom-2 duration-500"
|
|
>
|
|
<div className="truncate text-sm font-medium text-white group-hover:text-violet-300 transition-colors">
|
|
{tree.name}
|
|
</div>
|
|
<div className="mt-2 flex items-center gap-1.5 text-xs text-slate-500">
|
|
<Clock className="h-3 w-3" />
|
|
<span>{timeAgo(tree.lastUsed)}</span>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Footer CTA */}
|
|
<div className="mx-auto mt-16 max-w-4xl text-center animate-in fade-in duration-700 delay-1000">
|
|
<Link
|
|
to="/trees"
|
|
className="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-gradient-to-r from-violet-600 to-purple-600 text-white font-medium hover:from-violet-500 hover:to-purple-500 transition-all hover:shadow-lg hover:shadow-violet-500/25 hover:scale-105"
|
|
>
|
|
Browse All Trees
|
|
<ArrowRight className="h-4 w-4" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default QuickStartPage
|