912075cd43
- Remove GreetingStatStrip (duplicated PerformanceCards data) - Strip left-border accent from stat cards (AI slop pattern) - Redesign KnowledgeBaseCards: icon grid → compact row list with icon badges - Redesign TeamSummary: distinct inline-row layout, no longer identical twin - Differentiate hover: stat cards use subtle border-hover, sessions keep springy lift - Add loading skeletons to PerformanceCards, KnowledgeBaseCards, TeamSummary - Add error state to PerformanceCards - Extract timeAgo() to shared lib/timeAgo.ts (replaced 4 duplicates) - Fix Skeleton bg-brand-border (undefined CSS var) → border-default - Fix double text-xs text-[0.5625rem] class conflicts across dashboard Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
79 lines
2.8 KiB
TypeScript
79 lines
2.8 KiB
TypeScript
import { PageMeta } from '@/components/common/PageMeta'
|
|
import { useAuthStore } from '@/store/authStore'
|
|
import { StartSessionInput } from '@/components/dashboard/StartSessionInput'
|
|
import { PendingEscalations } from '@/components/dashboard/PendingEscalations'
|
|
import { ActiveFlowPilotSessions } from '@/components/dashboard/ActiveFlowPilotSessions'
|
|
import { PerformanceCards } from '@/components/dashboard/PerformanceCards'
|
|
import { KnowledgeBaseCards } from '@/components/dashboard/KnowledgeBaseCards'
|
|
import { TeamSummary } from '@/components/dashboard/TeamSummary'
|
|
|
|
function SectionLabel({ children, action }: { children: React.ReactNode; action?: React.ReactNode }) {
|
|
return (
|
|
<div className="flex items-center gap-3">
|
|
<span className="font-sans text-[0.625rem] uppercase tracking-[0.12em] font-semibold text-muted-foreground">
|
|
{children}
|
|
</span>
|
|
<div className="flex-1 h-px bg-border" />
|
|
{action && <div className="shrink-0">{action}</div>}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function QuickStartPage() {
|
|
const user = useAuthStore((s) => s.user)
|
|
|
|
const now = new Date()
|
|
const greeting = now.getHours() < 12
|
|
? 'morning'
|
|
: now.getHours() < 18
|
|
? 'afternoon'
|
|
: 'evening'
|
|
const dayOfWeek = now.toLocaleDateString('en-US', { weekday: 'long' })
|
|
const formattedDate = now.toLocaleDateString('en-US', { month: 'long', day: 'numeric' })
|
|
const firstName = user?.name?.split(' ')[0] || 'there'
|
|
|
|
return (
|
|
<div className="overflow-y-auto h-full">
|
|
<PageMeta title="ResolutionFlow" />
|
|
<div className="max-w-4xl mx-auto px-6 pt-12 pb-12">
|
|
{/* Hero: Greeting */}
|
|
<div className="mb-8 animate-fade-in-up">
|
|
<p className="font-sans text-xs uppercase tracking-[0.12em] text-muted-foreground mb-1">
|
|
{dayOfWeek}, {formattedDate}
|
|
</p>
|
|
<h1 className="font-heading text-3xl sm:text-4xl font-extrabold tracking-tight text-[#f0f2f5] leading-tight">
|
|
Good {greeting}, {firstName}.
|
|
</h1>
|
|
</div>
|
|
|
|
{/* Chat-style input */}
|
|
<StartSessionInput />
|
|
|
|
{/* Pending Escalations (auto-hides if none) */}
|
|
<div className="mt-6">
|
|
<PendingEscalations />
|
|
</div>
|
|
|
|
{/* Active Sessions (auto-hides if none) */}
|
|
<div className="mt-8">
|
|
<ActiveFlowPilotSessions />
|
|
</div>
|
|
|
|
{/* Dashboard — always visible */}
|
|
<div className="mt-10">
|
|
<SectionLabel>Dashboard</SectionLabel>
|
|
<div className="mt-3 space-y-4 animate-fade-in">
|
|
<PerformanceCards />
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
|
<KnowledgeBaseCards />
|
|
<TeamSummary />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default QuickStartPage
|