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

refactor: migrate session, script-builder, account 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:08:57 -04:00
parent e4ef904707
commit 858f890ed3
30 changed files with 441 additions and 441 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
frontend/src/components/session/TicketContextPanel.tsx
View File

@@ -38,14 +38,14 @@ function AccordionSection({ label, icon, count, children }: AccordionSectionProp
onClick={() => setOpen(!open)}
className="flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-[rgba(255,255,255,0.03)] transition-colors"
>
<span className="text-muted-foreground">{icon}</span>
<span className="flex-1 text-xs font-medium text-foreground">{label}</span>
<span className="text-[#848b9b]">{icon}</span>
<span className="flex-1 text-xs font-medium text-[#e2e5eb]">{label}</span>
{count !== undefined && count > 0 && (
<span className="rounded-full bg-primary/10 px-1.5 py-0.5 text-[0.6rem] font-label text-primary">
<span className="rounded-full bg-[rgba(34,211,238,0.10)] px-1.5 py-0.5 text-[0.6rem] font-sans text-xs text-[#22d3ee]">
{count}
</span>
)}
<span className="text-muted-foreground">
<span className="text-[#848b9b]">
{open ? <ChevronDown className="h-3.5 w-3.5" /> : <ChevronRight className="h-3.5 w-3.5" />}
</span>
</button>
@@ -60,18 +60,18 @@ function AccordionSection({ label, icon, count, children }: AccordionSectionProp
export function TicketContextPanel({ context, loading, error, onRefresh }: TicketContextPanelProps) {
return (
<div className="glass-card-static overflow-hidden rounded-2xl">
<div className="card-flat overflow-hidden rounded-lg">
{/* Header */}
<div className="flex items-center gap-2 bg-primary/5 px-3 py-2.5">
<Ticket className="h-3.5 w-3.5 text-primary" />
<span className="flex-1 font-label text-[0.625rem] uppercase tracking-[0.1em] text-primary">
<div className="flex items-center gap-2 bg-[rgba(34,211,238,0.05)] px-3 py-2.5">
<Ticket className="h-3.5 w-3.5 text-[#22d3ee]" />
<span className="flex-1 font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#22d3ee]">
Ticket Context
</span>
<button
onClick={onRefresh}
disabled={loading}
title="Refresh ticket context"
className="rounded p-0.5 text-muted-foreground hover:text-foreground disabled:cursor-not-allowed transition-colors"
className="rounded p-0.5 text-[#848b9b] hover:text-[#e2e5eb] disabled:cursor-not-allowed transition-colors"
>
<RefreshCw className={cn('h-3 w-3', loading && 'animate-spin')} />
</button>
@@ -80,7 +80,7 @@ export function TicketContextPanel({ context, loading, error, onRefresh }: Ticke
{/* Loading */}
{loading && !context && (
<div className="flex items-center justify-center py-6">
<Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
<Loader2 className="h-5 w-5 animate-spin text-[#848b9b]" />
</div>
)}
@@ -98,43 +98,43 @@ export function TicketContextPanel({ context, loading, error, onRefresh }: Ticke
{/* Compact summary */}
<div className="px-3 py-2.5">
<div className="flex items-baseline gap-2">
<span className="font-label text-xs font-medium text-primary">#{context.ticket.id}</span>
<span className="flex-1 truncate text-xs text-foreground">{context.ticket.summary}</span>
<span className="font-sans text-xs text-xs font-medium text-[#22d3ee]">#{context.ticket.id}</span>
<span className="flex-1 truncate text-xs text-[#e2e5eb]">{context.ticket.summary}</span>
</div>
<div className="mt-1.5 flex flex-wrap gap-1.5">
<span className="rounded-md bg-card px-1.5 py-0.5 font-label text-[0.6rem] text-muted-foreground border border-[rgba(255,255,255,0.06)]">
<span className="rounded-md bg-[#14161d] px-1.5 py-0.5 font-sans text-xs text-[0.6rem] text-[#848b9b] border border-[rgba(255,255,255,0.06)]">
{context.ticket.status}
</span>
<span className="rounded-md bg-card px-1.5 py-0.5 font-label text-[0.6rem] text-muted-foreground border border-[rgba(255,255,255,0.06)]">
<span className="rounded-md bg-[#14161d] px-1.5 py-0.5 font-sans text-xs text-[0.6rem] text-[#848b9b] border border-[rgba(255,255,255,0.06)]">
{context.ticket.priority}
</span>
{context.ticket.sla && (
<span className="rounded-md bg-amber-400/10 px-1.5 py-0.5 font-label text-[0.6rem] text-amber-400 border border-amber-400/20">
<span className="rounded-md bg-amber-400/10 px-1.5 py-0.5 font-sans text-xs text-[0.6rem] text-amber-400 border border-amber-400/20">
SLA: {context.ticket.sla}
</span>
)}
</div>
<p className="mt-1 text-[0.6875rem] text-muted-foreground">{context.company.name}</p>
<p className="mt-1 text-[0.6875rem] text-[#848b9b]">{context.company.name}</p>
</div>
{/* Client */}
<AccordionSection label="Client" icon={<Building2 className="h-3.5 w-3.5" />}>
<div className="space-y-1 text-xs">
<p className="font-medium text-foreground">{context.company.name}</p>
<p className="font-medium text-[#e2e5eb]">{context.company.name}</p>
{context.company.type && (
<p className="text-muted-foreground">Type: {context.company.type}</p>
<p className="text-[#848b9b]">Type: {context.company.type}</p>
)}
{context.company.territory && (
<p className="text-muted-foreground">Territory: {context.company.territory}</p>
<p className="text-[#848b9b]">Territory: {context.company.territory}</p>
)}
{context.company.site && (
<p className="text-muted-foreground">Site: {context.company.site}</p>
<p className="text-[#848b9b]">Site: {context.company.site}</p>
)}
{context.company.address && (
<p className="text-muted-foreground">{context.company.address}</p>
<p className="text-[#848b9b]">{context.company.address}</p>
)}
{context.company.phone && (
<p className="text-muted-foreground">{context.company.phone}</p>
<p className="text-[#848b9b]">{context.company.phone}</p>
)}
</div>
</AccordionSection>
@@ -143,15 +143,15 @@ export function TicketContextPanel({ context, loading, error, onRefresh }: Ticke
{context.contact && (
<AccordionSection label="Contact" icon={<UserCircle className="h-3.5 w-3.5" />}>
<div className="space-y-1 text-xs">
<p className="font-medium text-foreground">{context.contact.name}</p>
<p className="font-medium text-[#e2e5eb]">{context.contact.name}</p>
{context.contact.title && (
<p className="text-muted-foreground">{context.contact.title}</p>
<p className="text-[#848b9b]">{context.contact.title}</p>
)}
{context.contact.email && (
<p className="text-muted-foreground">{context.contact.email}</p>
<p className="text-[#848b9b]">{context.contact.email}</p>
)}
{context.contact.phone && (
<p className="text-muted-foreground">{context.contact.phone}</p>
<p className="text-[#848b9b]">{context.contact.phone}</p>
)}
</div>
</AccordionSection>
@@ -166,9 +166,9 @@ export function TicketContextPanel({ context, loading, error, onRefresh }: Ticke
>
<div className="space-y-2">
{context.configurations.map((cfg, i) => (
<div key={i} className="rounded-md border border-[rgba(255,255,255,0.06)] bg-card p-2">
<p className="text-xs font-medium text-foreground">{cfg.device_identifier}</p>
<div className="mt-0.5 space-y-0.5 text-[0.6875rem] text-muted-foreground">
<div key={i} className="rounded-md border border-[rgba(255,255,255,0.06)] bg-[#14161d] p-2">
<p className="text-xs font-medium text-[#e2e5eb]">{cfg.device_identifier}</p>
<div className="mt-0.5 space-y-0.5 text-[0.6875rem] text-[#848b9b]">
{cfg.type && <p>Type: {cfg.type}</p>}
{cfg.os_type && <p>OS: {cfg.os_type}</p>}
{cfg.ip_address && <p>IP: {cfg.ip_address}</p>}
@@ -190,16 +190,16 @@ export function TicketContextPanel({ context, loading, error, onRefresh }: Ticke
>
<div className="space-y-2">
{context.notes.map((note, i) => (
<div key={i} className="rounded-md border border-[rgba(255,255,255,0.06)] bg-card p-2">
<div key={i} className="rounded-md border border-[rgba(255,255,255,0.06)] bg-[#14161d] p-2">
<div className="mb-1 flex items-center justify-between gap-2">
{note.member && (
<span className="text-[0.6rem] font-label text-muted-foreground">{note.member}</span>
<span className="text-[0.6rem] font-sans text-xs text-[#848b9b]">{note.member}</span>
)}
<span className="ml-auto text-[0.6rem] font-label text-muted-foreground">
<span className="ml-auto text-[0.6rem] font-sans text-xs text-[#848b9b]">
{new Date(note.date_created).toLocaleDateString()}
</span>
</div>
<p className="whitespace-pre-wrap text-[0.6875rem] text-foreground line-clamp-4">
<p className="whitespace-pre-wrap text-[0.6875rem] text-[#e2e5eb] line-clamp-4">
{note.text}
</p>
</div>
@@ -219,16 +219,16 @@ export function TicketContextPanel({ context, loading, error, onRefresh }: Ticke
{context.related_tickets.map((rt) => (
<div
key={rt.id}
className="rounded-md border border-[rgba(255,255,255,0.06)] bg-card px-2 py-1.5"
className="rounded-md border border-[rgba(255,255,255,0.06)] bg-[#14161d] px-2 py-1.5"
>
<div className="flex items-baseline gap-1.5">
<span className="font-label text-[0.6rem] text-primary">#{rt.id}</span>
<span className="flex-1 truncate text-[0.6875rem] text-foreground">{rt.summary}</span>
<span className="font-sans text-xs text-[0.6rem] text-[#22d3ee]">#{rt.id}</span>
<span className="flex-1 truncate text-[0.6875rem] text-[#e2e5eb]">{rt.summary}</span>
</div>
<div className="mt-0.5 flex gap-1">
<span className="text-[0.6rem] text-muted-foreground">{rt.status}</span>
<span className="text-[0.6rem] text-muted-foreground">·</span>
<span className="text-[0.6rem] text-muted-foreground">{rt.priority}</span>
<span className="text-[0.6rem] text-[#848b9b]">{rt.status}</span>
<span className="text-[0.6rem] text-[#848b9b]">·</span>
<span className="text-[0.6rem] text-[#848b9b]">{rt.priority}</span>
</div>
</div>
))}