feat(l1): real L1 dashboard with empty-state + resume widget
Replaces the T20 stub. L1 dashboard renders greeting, "Describe the problem" intake card (autofocus textarea, optional customer fields, primary "Start walk" CTA), open-tickets queue (Phase 1: display-only), and a "Resume in progress" widget listing the L1's active sessions ordered by last_step_at DESC. Empty-state card shows on accounts with no queue + no active sessions (first-run nudge to upload KB or auth flows). Adds /api/l1.ts (full L1 API client surface) and /types/l1.ts. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -1,12 +1,161 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { PageMeta } from '@/components/common/PageMeta'
|
||||
import { useAuthStore } from '@/store/authStore'
|
||||
import { l1Api } from '@/api/l1'
|
||||
import { EmptyStateCard } from '@/components/l1/EmptyStateCard'
|
||||
import { ResumeInProgress } from '@/components/l1/ResumeInProgress'
|
||||
import type { QueueRow } from '@/types/l1'
|
||||
|
||||
export default function L1Dashboard() {
|
||||
const user = useAuthStore((s) => s.user)
|
||||
const navigate = useNavigate()
|
||||
const [problem, setProblem] = useState('')
|
||||
const [customerName, setCustomerName] = useState('')
|
||||
const [customerContact, setCustomerContact] = useState('')
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [queue, setQueue] = useState<QueueRow[]>([])
|
||||
const [isEmpty, setIsEmpty] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
l1Api.queue('open').then(setQueue).catch(() => setQueue([]))
|
||||
// Phase 1: emptiness detection is just "is the queue empty AND no resumable sessions" —
|
||||
// we conservatively show the empty-state card on accounts with literally no L1 activity yet.
|
||||
// (A stricter KB-empty detection arrives in Phase 2 when the kb_documents table exists.)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
// Show empty-state ONLY for first-run state — no queue items and no active sessions
|
||||
if (queue.length === 0) {
|
||||
l1Api
|
||||
.listActiveSessions()
|
||||
.then((active) => setIsEmpty(active.length === 0))
|
||||
.catch(() => setIsEmpty(false))
|
||||
} else {
|
||||
setIsEmpty(false)
|
||||
}
|
||||
}, [queue])
|
||||
|
||||
const handleStart = async () => {
|
||||
if (!problem.trim()) return
|
||||
setSubmitting(true)
|
||||
try {
|
||||
const response = await l1Api.intake({
|
||||
problem_statement: problem.trim(),
|
||||
customer_name: customerName.trim() || undefined,
|
||||
customer_contact: customerContact.trim() || undefined,
|
||||
})
|
||||
navigate(`/l1/walk/${response.session_id}`)
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const now = new Date()
|
||||
const greeting =
|
||||
now.getHours() < 12 ? 'morning' : now.getHours() < 18 ? 'afternoon' : 'evening'
|
||||
const firstName = user?.name?.split(' ')[0] || 'there'
|
||||
|
||||
return (
|
||||
<div className="overflow-y-auto h-full">
|
||||
<PageMeta title="L1 Workspace" />
|
||||
<div className="max-w-4xl mx-auto px-6 pt-12 pb-12">
|
||||
<h1 className="font-heading text-2xl font-bold">L1 Workspace</h1>
|
||||
<p className="text-muted-foreground mt-2">Loading…</p>
|
||||
<div className="max-w-4xl mx-auto px-6 pt-12 pb-12 space-y-8">
|
||||
{/* Greeting */}
|
||||
<div>
|
||||
<p className="font-sans text-xs uppercase tracking-[0.12em] text-muted-foreground mb-1">
|
||||
{now.toLocaleDateString('en-US', {
|
||||
weekday: 'long',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
})}
|
||||
</p>
|
||||
<h1 className="font-heading text-3xl sm:text-4xl font-extrabold tracking-tight text-heading leading-tight">
|
||||
Good {greeting}, {firstName}.
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Empty state (first-run) */}
|
||||
{isEmpty && <EmptyStateCard />}
|
||||
|
||||
{/* Describe the problem */}
|
||||
<section>
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<span className="w-1 h-4 bg-accent rounded-sm" />
|
||||
<span className="font-sans text-[0.625rem] uppercase tracking-[0.12em] font-semibold text-muted-foreground">
|
||||
Describe the problem
|
||||
</span>
|
||||
</div>
|
||||
<div className="rounded-lg border border-default bg-card p-4 space-y-3">
|
||||
<textarea
|
||||
value={problem}
|
||||
onChange={(e) => setProblem(e.target.value)}
|
||||
placeholder="What's the user calling about?"
|
||||
autoFocus
|
||||
rows={3}
|
||||
className="w-full bg-page border border-default rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-accent/40"
|
||||
/>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<input
|
||||
value={customerName}
|
||||
onChange={(e) => setCustomerName(e.target.value)}
|
||||
placeholder="Customer name (optional)"
|
||||
className="bg-page border border-default rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-accent/40"
|
||||
/>
|
||||
<input
|
||||
value={customerContact}
|
||||
onChange={(e) => setCustomerContact(e.target.value)}
|
||||
placeholder="Email or phone (optional)"
|
||||
className="bg-page border border-default rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-accent/40"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleStart}
|
||||
disabled={!problem.trim() || submitting}
|
||||
className="rounded-md bg-accent text-white px-5 py-2 text-sm font-medium hover:bg-accent/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{submitting ? 'Starting…' : 'Start walk →'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Open tickets */}
|
||||
{queue.length > 0 && (
|
||||
<section>
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<span className="font-sans text-[0.625rem] uppercase tracking-[0.12em] font-semibold text-muted-foreground">
|
||||
Open tickets · {queue.length}
|
||||
</span>
|
||||
<div className="flex-1 h-px bg-border" />
|
||||
</div>
|
||||
<div className="rounded-lg border border-default bg-card overflow-hidden">
|
||||
{queue.map((row) => (
|
||||
/* Phase 1: display-only rows. Phase 2 makes them clickable to claim. */
|
||||
<div
|
||||
key={row.ticket_id}
|
||||
className="px-4 py-3 border-b border-default last:border-b-0"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<span className="font-mono text-xs text-muted-foreground mr-2">
|
||||
#{row.ticket_id.slice(0, 8)}
|
||||
</span>
|
||||
<span className="text-sm">{row.problem_statement}</span>
|
||||
</div>
|
||||
<span className="text-xs px-2 py-0.5 rounded bg-elevated text-muted-foreground">
|
||||
{row.ticket_kind === 'psa' ? 'PSA' : 'Internal'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Resume in progress */}
|
||||
<ResumeInProgress />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user