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

refactor: migrate page 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:04:16 -04:00
parent fd28921373
commit e4ef904707
58 changed files with 1416 additions and 1416 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
frontend/src/pages/MaintenanceFlowDetailPage.tsx
View File

@@ -101,7 +101,7 @@ export default function MaintenanceFlowDetailPage() {
action={(
<button
onClick={() => navigate('/trees?type=maintenance')}
className="rounded-md border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
className="rounded-md border border-[#1e2130] px-4 py-2 text-sm text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
>
Back to Maintenance Flows
</button>
@@ -148,7 +148,7 @@ export default function MaintenanceFlowDetailPage() {
<div className="flex gap-2">
<button
onClick={() => navigate(`/flows/${id}/edit`)}
className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-[0.875rem] text-muted-foreground hover:bg-accent hover:text-foreground"
className="flex items-center gap-1.5 rounded-lg border border-[#1e2130] px-3 py-2 text-[0.875rem] text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
>
<Settings className="h-3.5 w-3.5" />
Edit Flow
@@ -156,7 +156,7 @@ export default function MaintenanceFlowDetailPage() {
<button
onClick={handleRun}
disabled={isRunning}
className="flex items-center gap-1.5 rounded-lg bg-gradient-brand px-4 py-2 text-[0.875rem] font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90 disabled:opacity-70"
className="flex items-center gap-1.5 rounded-lg bg-[#22d3ee] px-4 py-2 text-[0.875rem] font-medium text-white hover:brightness-110 disabled:opacity-70"
>
{isRunning
? <Spinner size="sm" className="h-3.5 w-3.5 border-white border-t-transparent" />
@@ -165,7 +165,7 @@ export default function MaintenanceFlowDetailPage() {
</button>
<button
onClick={() => setShowBatchModal(true)}
className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-[0.875rem] text-muted-foreground hover:bg-accent hover:text-foreground"
className="flex items-center gap-1.5 rounded-lg border border-[#1e2130] px-3 py-2 text-[0.875rem] text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
>
Batch Launch
</button>
@@ -174,51 +174,51 @@ export default function MaintenanceFlowDetailPage() {
/>
{/* Schedule Panel */}
<div className="rounded-xl border border-border bg-card p-5">
<div className="rounded-xl border border-[#1e2130] bg-[#14161d] p-5">
<div className="flex items-center gap-2 mb-3">
<Calendar className="h-4 w-4 text-muted-foreground" />
<h2 className="font-semibold text-foreground">Schedule</h2>
<Calendar className="h-4 w-4 text-[#848b9b]" />
<h2 className="font-semibold text-[#e2e5eb]">Schedule</h2>
</div>
{schedule ? (
<div className="space-y-2 text-[0.875rem]">
<div className="flex flex-wrap items-center gap-2">
<span className={cn(
"inline-flex items-center gap-1 rounded-full px-2 py-0.5 font-label text-[0.625rem] uppercase tracking-wide",
"inline-flex items-center gap-1 rounded-full px-2 py-0.5 font-sans text-xs text-[0.625rem] uppercase tracking-wide",
schedule.is_active
? "bg-emerald-500/10 text-emerald-400"
: "bg-muted text-muted-foreground"
: "bg-muted text-[#848b9b]"
)}>
{schedule.is_active
? <CheckCircle className="h-3 w-3" />
: <AlertCircle className="h-3 w-3" />}
{schedule.is_active ? 'Active' : 'Paused'}
</span>
<code className="rounded bg-accent px-1.5 py-0.5 text-[0.8125rem] text-foreground">
<code className="rounded bg-accent px-1.5 py-0.5 text-[0.8125rem] text-[#e2e5eb]">
{schedule.cron_expression}
</code>
<span className="text-muted-foreground">({schedule.timezone})</span>
<span className="text-[#848b9b]">({schedule.timezone})</span>
</div>
{schedule.next_run_at && (
<p className="text-muted-foreground">
<p className="text-[#848b9b]">
Next run: {new Date(schedule.next_run_at).toLocaleString()}
</p>
)}
</div>
) : (
<p className="text-[0.875rem] text-muted-foreground">
<p className="text-[0.875rem] text-[#848b9b]">
No schedule configured. Sessions can still be launched manually via Batch Launch.
</p>
)}
</div>
{/* Run History */}
<div className="rounded-xl border border-border bg-card p-5">
<div className="rounded-xl border border-[#1e2130] bg-[#14161d] p-5">
<div className="flex items-center gap-2 mb-4">
<Clock className="h-4 w-4 text-muted-foreground" />
<h2 className="font-semibold text-foreground">Run History</h2>
<Clock className="h-4 w-4 text-[#848b9b]" />
<h2 className="font-semibold text-[#e2e5eb]">Run History</h2>
</div>
{batches.length === 0 ? (
<p className="text-[0.875rem] text-muted-foreground">No runs yet. Launch a batch to get started.</p>
<p className="text-[0.875rem] text-[#848b9b]">No runs yet. Launch a batch to get started.</p>
) : (
<div className="space-y-2">
{batches.map(([batchKey, batchSessions]) => {
@@ -253,25 +253,25 @@ export default function MaintenanceFlowDetailPage() {
<button
key={batchKey}
onClick={handleRowClick}
className="w-full flex items-center justify-between rounded-lg border border-border px-4 py-3 hover:bg-accent transition-colors text-left"
className="w-full flex items-center justify-between rounded-lg border border-[#1e2130] px-4 py-3 hover:bg-accent transition-colors text-left"
>
<div>
<div className="flex items-center gap-2">
{isActive && (
<span className="inline-block h-2 w-2 rounded-full bg-amber-400 animate-pulse" />
)}
<p className="text-[0.875rem] font-medium text-foreground">
<p className="text-[0.875rem] font-medium text-[#e2e5eb]">
{isSingleRun ? 'Manual run' : `${total} target${total !== 1 ? 's' : ''}`}
</p>
</div>
<div className="flex items-center gap-2 mt-0.5">
{date && (
<p className="text-[0.8125rem] text-muted-foreground">
<p className="text-[0.8125rem] text-[#848b9b]">
{new Date(date).toLocaleDateString()}
</p>
)}
{outcomeParts.length > 0 && (
<p className="text-[0.8125rem] text-muted-foreground">
<p className="text-[0.8125rem] text-[#848b9b]">
· {outcomeParts.join(' · ')}
</p>
)}
@@ -290,13 +290,13 @@ export default function MaintenanceFlowDetailPage() {
/>
))}
{extraDots > 0 && (
<span className="ml-1 text-[0.6875rem] text-muted-foreground">+{extraDots}</span>
<span className="ml-1 text-[0.6875rem] text-[#848b9b]">+{extraDots}</span>
)}
</div>
)}
<span className={cn(
"font-label text-[0.75rem] uppercase tracking-wide",
isActive ? "text-amber-400" : completed === total ? "text-emerald-400" : "text-muted-foreground"
"font-sans text-xs text-[0.75rem] uppercase tracking-wide",
isActive ? "text-amber-400" : completed === total ? "text-emerald-400" : "text-[#848b9b]"
)}>
{isActive ? 'In Progress' : `${completed}/${total}`}
</span>