style: api client design overhaul
This commit is contained in:
@@ -5,14 +5,7 @@ import { TemplateManager } from "./TemplateManager"
|
||||
import { JobRunner } from "./JobRunner"
|
||||
import { ResultsGallery } from "./ResultsGallery"
|
||||
|
||||
type ApiTab = "server" | "templates" | "jobs" | "results"
|
||||
|
||||
const tabs: { key: ApiTab; label: string; icon: string }[] = [
|
||||
{ key: "server", label: "Server", icon: "dns" },
|
||||
{ key: "templates", label: "Templates", icon: "description" },
|
||||
{ key: "jobs", label: "Jobs", icon: "play_circle" },
|
||||
{ key: "results", label: "Results", icon: "analytics" },
|
||||
]
|
||||
type ApiSection = "server" | "templates" | "jobs" | "results"
|
||||
|
||||
interface EBProps {
|
||||
children: ReactNode
|
||||
@@ -51,74 +44,85 @@ class SafeWrap extends Component<EBProps, EBState> {
|
||||
}
|
||||
}
|
||||
|
||||
function Sidebar({ active, onChange }: { active: ApiTab; onChange: (t: ApiTab) => void }) {
|
||||
const setActiveTab = (tab: ApiTab) => {
|
||||
if (tab === "jobs" || tab === "results") {
|
||||
// Auto-activate works in both directions
|
||||
}
|
||||
onChange(tab)
|
||||
}
|
||||
const sections: { key: ApiSection; label: string; icon: string }[] = [
|
||||
{ key: "server", label: "Server", icon: "dns" },
|
||||
{ key: "templates", label: "Templates", icon: "description" },
|
||||
{ key: "jobs", label: "Jobs", icon: "play_circle" },
|
||||
{ key: "results", label: "Results", icon: "analytics" },
|
||||
]
|
||||
|
||||
function LeftPanel({ active, onChange }: { active: ApiSection; onChange: (s: ApiSection) => void }) {
|
||||
const runs = useApiStore((s) => s.runs)
|
||||
return (
|
||||
<aside className="w-64 h-full flex flex-col bg-surface-soft border-r-2 border-hairline pt-8 pb-4 shrink-0">
|
||||
<div className="px-6 mb-8">
|
||||
<h1 className="text-display-sm font-serif text-primary leading-tight">Admin Console</h1>
|
||||
<p className="text-caption text-muted mt-1">Local Instance</p>
|
||||
<aside className="w-[260px] bg-surface-card border-r border-hairline flex flex-col shrink-0">
|
||||
<div className="px-4 py-3 border-b border-hairline flex items-center justify-between gap-2">
|
||||
<h2 className="text-caption-uppercase text-muted tracking-widest flex items-center gap-2 min-w-0">
|
||||
<span className="material-symbols-outlined text-[16px] text-primary shrink-0">api</span>
|
||||
<span className="truncate">API Client</span>
|
||||
</h2>
|
||||
<span className="text-caption text-muted-soft">{sections.length}</span>
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 space-y-1">
|
||||
{tabs.map((t) => {
|
||||
const isActive = active === t.key
|
||||
return (
|
||||
<div className="px-3 py-3 border-b border-hairline-soft">
|
||||
<button
|
||||
key={t.key}
|
||||
onClick={() => setActiveTab(t.key)}
|
||||
className={`w-full flex items-center gap-3 px-6 py-3 text-left transition-all ${
|
||||
onClick={() => onChange("jobs")}
|
||||
className="w-full flex items-center justify-center gap-2 px-3 py-2 bg-primary text-on-primary rounded-lg text-button font-medium hover:bg-primary-active active:scale-[0.97] transition-all shadow-sm"
|
||||
>
|
||||
<span className="material-symbols-outlined text-[18px]">add</span>
|
||||
New Job
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 overflow-y-auto py-1">
|
||||
{sections.map((sec) => {
|
||||
const isActive = active === sec.key
|
||||
const count = sec.key === "results" ? runs.length : undefined
|
||||
return (
|
||||
<div key={sec.key} className="group">
|
||||
<button
|
||||
onClick={() => onChange(sec.key)}
|
||||
className={`w-full flex items-center justify-between px-4 py-2.5 text-left transition-all ${
|
||||
isActive
|
||||
? "bg-surface-cream-strong text-primary font-bold border-r-4 border-primary"
|
||||
: "text-muted hover:text-ink hover:bg-surface-card hover:translate-y-[-1px] active:scale-[0.98]"
|
||||
? "border-l-[3px] border-primary bg-primary/[0.06]"
|
||||
: "border-l-[3px] border-transparent hover:bg-surface-cream-strong/30"
|
||||
}`}
|
||||
>
|
||||
<span className="material-symbols-outlined" style={{ fontVariationSettings: isActive ? "'FILL' 1" : undefined }}>
|
||||
{t.icon}
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<span className={`material-symbols-outlined text-[16px] shrink-0 ${isActive ? "text-primary" : "text-muted-soft"}`}>
|
||||
{sec.icon}
|
||||
</span>
|
||||
<span className="text-nav">{t.label}</span>
|
||||
<span className={`text-title-sm truncate ${isActive ? "text-ink font-medium" : "text-body"}`}>
|
||||
{sec.label}
|
||||
</span>
|
||||
</div>
|
||||
{count !== undefined && (
|
||||
<span className="text-caption text-muted-soft">{count}</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</nav>
|
||||
|
||||
<div className="px-6 mt-4">
|
||||
<button
|
||||
onClick={() => setActiveTab("jobs")}
|
||||
className="w-full bg-primary text-on-primary py-3 px-4 flex items-center justify-center gap-2 border-2 border-primary hover:bg-primary-active hover:shadow-sm transition-all active:scale-[0.98]"
|
||||
>
|
||||
<span className="material-symbols-outlined">add</span>
|
||||
<span className="text-button">New Job</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mt-auto border-t border-hairline pt-4 space-y-1">
|
||||
<button
|
||||
onClick={() => setActiveTab("server")}
|
||||
className="w-full flex items-center gap-3 px-6 py-2 text-left text-muted hover:text-ink hover:bg-surface-card transition-all"
|
||||
>
|
||||
<span className="material-symbols-outlined text-[20px]">settings</span>
|
||||
<span className="text-body-sm">Settings</span>
|
||||
</button>
|
||||
<div className="px-4 py-2.5 border-t border-hairline bg-surface-cream-strong/20 flex justify-between items-center">
|
||||
<span className="text-caption text-muted-soft">
|
||||
<span className="font-medium text-body">{runs.length}</span> runs
|
||||
</span>
|
||||
<span className="text-caption text-muted-soft">
|
||||
<span className="font-medium text-body">{useApiStore.getState().templates.length}</span> templates
|
||||
</span>
|
||||
</div>
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
|
||||
export function ApiClientLayout() {
|
||||
const [activeTab, setActiveTab] = useState<ApiTab>("server")
|
||||
const [active, setActive] = useState<ApiSection>("server")
|
||||
const setActiveRunId = useApiStore((s) => s.setActiveRunId)
|
||||
|
||||
const handleChange = (tab: ApiTab) => {
|
||||
setActiveTab(tab)
|
||||
if (tab === "results") {
|
||||
// Keep last run selected if any
|
||||
const handleChange = (section: ApiSection) => {
|
||||
setActive(section)
|
||||
if (section === "results") {
|
||||
const runs = useApiStore.getState().runs
|
||||
if (runs.length > 0 && !useApiStore.getState().activeRunId) {
|
||||
setActiveRunId(runs[runs.length - 1].id)
|
||||
@@ -128,17 +132,17 @@ export function ApiClientLayout() {
|
||||
|
||||
const content = {
|
||||
server: <ServerSettings />,
|
||||
templates: <TemplateManager onNewJob={() => setActiveTab("jobs")} />,
|
||||
jobs: <JobRunner onViewResults={() => setActiveTab("results")} />,
|
||||
results: <ResultsGallery onNewJob={() => setActiveTab("jobs")} />,
|
||||
}[activeTab]
|
||||
templates: <TemplateManager onNewJob={() => handleChange("jobs")} />,
|
||||
jobs: <JobRunner onViewResults={() => handleChange("results")} />,
|
||||
results: <ResultsGallery onNewJob={() => handleChange("jobs")} />,
|
||||
}[active]
|
||||
|
||||
return (
|
||||
<div className="flex h-full bg-canvas text-ink">
|
||||
<Sidebar active={activeTab} onChange={handleChange} />
|
||||
<LeftPanel active={active} onChange={handleChange} />
|
||||
<main className="flex-1 overflow-auto custom-scrollbar">
|
||||
<div className="max-w-[1000px] mx-auto px-8 py-8 pb-12">
|
||||
<SafeWrap name={activeTab}>{content}</SafeWrap>
|
||||
<SafeWrap name={active}>{content}</SafeWrap>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@@ -42,7 +42,6 @@ export function JobRunner({ onViewResults }: JobRunnerProps) {
|
||||
const [selectedTemplateId, setSelectedTemplateId] = useState<string>("")
|
||||
const [scannedPaths, setScannedPaths] = useState<string[]>([])
|
||||
const [mode, setMode] = useState<"sync" | "async">("async")
|
||||
const [outputFormat, setOutputFormat] = useState<"json" | "csv" | "both">("json")
|
||||
const [statusMsg, setStatusMsg] = useState("")
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const pollRefs = useRef<Record<string, boolean>>({})
|
||||
@@ -196,72 +195,48 @@ export function JobRunner({ onViewResults }: JobRunnerProps) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-10">
|
||||
<header className="mb-8">
|
||||
<span className="text-caption-uppercase text-primary uppercase tracking-widest mb-2 block">Workflow Runner</span>
|
||||
<h2 className="text-display-sm font-serif text-ink mb-2">New Grading Job</h2>
|
||||
<p className="text-body-lg text-body max-w-2xl">
|
||||
Initialize a high-precision optical mark recognition task. Configure your template, ingest scanned documents, and define the processing mode.
|
||||
</p>
|
||||
</header>
|
||||
<div className="space-y-6">
|
||||
<div className="mb-2">
|
||||
<h2 className="text-display-sm font-serif text-ink mb-1">New Grading Job</h2>
|
||||
<p className="text-body-md text-muted max-w-2xl">Configure the template, upload scanned sheets, and start the OMR grading process.</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-8">
|
||||
{/* Step 1: Select Template */}
|
||||
<section className="bg-surface-card border-2 border-surface-cream-strong p-6 shadow-sm border-l-4 border-l-primary">
|
||||
<div className="flex items-start justify-between mb-6">
|
||||
<div>
|
||||
<h3 className="text-title-lg font-medium text-ink mb-1">01. Select Template</h3>
|
||||
<p className="text-body-sm text-muted">Choose the structural layout for the OMR processing engine.</p>
|
||||
</div>
|
||||
<span className="material-symbols-outlined text-primary">description</span>
|
||||
</div>
|
||||
<Panel title="01. Select Template" icon="description">
|
||||
<div className="relative max-w-md">
|
||||
<select
|
||||
value={selectedTemplateId}
|
||||
onChange={(e) => setSelectedTemplateId(e.target.value)}
|
||||
className="w-full h-12 px-4 bg-canvas border-2 border-surface-cream-strong focus:border-primary focus:ring-0 appearance-none text-body-md transition-colors"
|
||||
className="w-full h-10 px-3 bg-canvas border border-hairline rounded-md focus:border-primary focus:ring-1 focus:ring-primary/20 outline-none text-body-md appearance-none"
|
||||
>
|
||||
<option value="">-- Choose a template --</option>
|
||||
{templates.map((t) => (
|
||||
<option key={t.id} value={t.id}>{t.name}</option>
|
||||
))}
|
||||
</select>
|
||||
<span className="material-symbols-outlined absolute right-4 top-3 pointer-events-none text-muted">expand_more</span>
|
||||
<span className="material-symbols-outlined absolute right-3 top-2.5 pointer-events-none text-muted">expand_more</span>
|
||||
</div>
|
||||
</section>
|
||||
</Panel>
|
||||
|
||||
{/* Step 2: Upload Scanned Sheets */}
|
||||
<section className="bg-surface-card border-2 border-surface-cream-strong p-6 shadow-sm border-l-4 border-l-primary">
|
||||
<div className="flex items-start justify-between mb-6">
|
||||
<div>
|
||||
<h3 className="text-title-lg font-medium text-ink mb-1">02. Upload Scanned Sheets</h3>
|
||||
<p className="text-body-sm text-muted">Ingest high-resolution JPEG, PNG files for batch analysis.</p>
|
||||
</div>
|
||||
<span className="material-symbols-outlined text-primary">upload_file</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<Panel title="02. Upload Scanned Sheets" icon="upload_file">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="md:col-span-2">
|
||||
<button
|
||||
onClick={pickScannedFiles}
|
||||
className="w-full border-2 border-dashed border-surface-cream-strong h-64 flex flex-col items-center justify-center bg-canvas hover:bg-surface-soft transition-colors cursor-pointer group"
|
||||
className="w-full border border-dashed border-hairline rounded-lg h-48 flex flex-col items-center justify-center bg-canvas hover:bg-surface-soft transition-colors group"
|
||||
>
|
||||
<span className="material-symbols-outlined text-4xl mb-4 text-muted group-hover:scale-110 transition-transform">cloud_upload</span>
|
||||
<span className="material-symbols-outlined text-3xl text-muted mb-3 group-hover:scale-110 transition-transform">cloud_upload</span>
|
||||
<p className="text-button text-ink">Select scanned images</p>
|
||||
<p className="text-xs text-muted mt-2">Max file size: 500MB per sheet</p>
|
||||
<p className="text-xs text-muted mt-1">PNG, JPG · Max 500MB per sheet</p>
|
||||
</button>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<h4 className="text-[10px] font-mono uppercase text-muted">Selected Files ({scannedPaths.length})</h4>
|
||||
<div className="space-y-2 max-h-52 overflow-y-auto pr-2 custom-scrollbar">
|
||||
<div className="space-y-2">
|
||||
<span className="text-caption text-muted font-medium">Selected Files ({scannedPaths.length})</span>
|
||||
<div className="space-y-2 max-h-44 overflow-y-auto pr-1 custom-scrollbar">
|
||||
{scannedPaths.length === 0 && (
|
||||
<div className="p-3 bg-canvas border-2 border-surface-cream-strong text-caption text-muted text-center">No files selected</div>
|
||||
<div className="p-3 bg-canvas border border-hairline rounded-md text-caption text-muted text-center">No files selected</div>
|
||||
)}
|
||||
{scannedPaths.map((p, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex items-center justify-between p-3 bg-canvas border-2 border-surface-cream-strong text-[11px] font-mono"
|
||||
>
|
||||
<div key={i} className="flex items-center justify-between p-2 bg-canvas border border-hairline rounded-md text-[11px] font-mono">
|
||||
<span className="truncate pr-2">{p.split(/[/\\]/).pop() || p}</span>
|
||||
<button
|
||||
onClick={() => setScannedPaths((prev) => prev.filter((_, idx) => idx !== i))}
|
||||
@@ -274,27 +249,18 @@ export function JobRunner({ onViewResults }: JobRunnerProps) {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Panel>
|
||||
|
||||
{/* Step 3: Configuration */}
|
||||
<section className="bg-surface-card border-2 border-surface-cream-strong p-6 shadow-sm border-l-4 border-l-primary">
|
||||
<div className="flex items-start justify-between mb-6">
|
||||
<div>
|
||||
<h3 className="text-title-lg font-medium text-ink mb-1">03. Configuration</h3>
|
||||
<p className="text-body-sm text-muted">Define processing priority and output format.</p>
|
||||
</div>
|
||||
<span className="material-symbols-outlined text-primary">settings_input_component</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-12">
|
||||
<div className="flex flex-col gap-4">
|
||||
<Panel title="03. Configuration" icon="settings_input_component">
|
||||
<div className="flex flex-wrap gap-8">
|
||||
<div className="flex flex-col gap-3">
|
||||
<span className="text-button font-medium">Processing Mode</span>
|
||||
<div className="flex bg-canvas p-1 border-2 border-surface-cream-strong w-fit">
|
||||
<div className="flex bg-canvas p-1 border border-hairline rounded-md w-fit">
|
||||
<button
|
||||
onClick={() => setMode("sync")}
|
||||
className={`px-6 py-2 text-button font-medium transition-all ${
|
||||
className={`px-4 py-1.5 rounded text-button font-medium transition-all ${
|
||||
mode === "sync"
|
||||
? "bg-surface-card border-2 border-primary text-primary shadow-sm"
|
||||
? "bg-surface-card text-primary border border-primary shadow-sm"
|
||||
: "text-muted hover:bg-surface-soft"
|
||||
}`}
|
||||
>
|
||||
@@ -302,9 +268,9 @@ export function JobRunner({ onViewResults }: JobRunnerProps) {
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setMode("async")}
|
||||
className={`px-6 py-2 text-button font-medium transition-all ${
|
||||
className={`px-4 py-1.5 rounded text-button font-medium transition-all ${
|
||||
mode === "async"
|
||||
? "bg-surface-card border-2 border-primary text-primary shadow-sm"
|
||||
? "bg-surface-card text-primary border border-primary shadow-sm"
|
||||
: "text-muted hover:bg-surface-soft"
|
||||
}`}
|
||||
>
|
||||
@@ -312,48 +278,38 @@ export function JobRunner({ onViewResults }: JobRunnerProps) {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
|
||||
<div className="flex flex-col gap-4">
|
||||
<span className="text-button font-medium">Output Format</span>
|
||||
<div className="flex gap-4">
|
||||
{(["json", "csv", "both"] as const).map((fmt) => (
|
||||
<label key={fmt} className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="output-format"
|
||||
checked={outputFormat === fmt}
|
||||
onChange={() => setOutputFormat(fmt)}
|
||||
className="w-5 h-5 accent-primary border-2 border-surface-cream-strong"
|
||||
/>
|
||||
<span className="font-mono text-code uppercase">{fmt === "both" ? "JSON + CSV" : fmt}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Final Action */}
|
||||
<div className="pt-8 flex flex-col items-center justify-center gap-6">
|
||||
<div className="pt-4 flex flex-col items-center gap-4">
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
disabled={submitting || !selectedTemplateId || scannedPaths.length === 0}
|
||||
className="bg-primary text-on-primary text-title-md font-medium py-5 px-16 border-2 border-primary hover:bg-primary-active active:scale-95 transition-all shadow-lg disabled:bg-primary-disabled disabled:text-muted disabled:border-primary-disabled disabled:shadow-none group flex items-center gap-4"
|
||||
className="px-8 py-3 bg-primary text-on-primary rounded-md text-button font-medium hover:bg-primary-active active:scale-[0.97] transition-all disabled:bg-primary-disabled disabled:text-muted shadow-sm flex items-center gap-2"
|
||||
>
|
||||
<span className="material-symbols-outlined">play_arrow</span>
|
||||
{submitting ? "Submitting..." : "Start Grading Process"}
|
||||
{!submitting && <span className="material-symbols-outlined group-hover:translate-x-2 transition-transform">arrow_forward</span>}
|
||||
</button>
|
||||
<p className="text-xs font-mono text-muted uppercase tracking-widest">
|
||||
Estimated processing time: <span className="text-primary font-bold">~{Math.max(1, scannedPaths.length * 14)} seconds</span>
|
||||
<p className="text-xs font-mono text-muted uppercase tracking-wider">
|
||||
Estimated time: <span className="text-primary font-bold">~{Math.max(1, scannedPaths.length * 14)} seconds</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{statusMsg && (
|
||||
<div className="mt-8 text-caption text-body bg-canvas border-2 border-hairline px-4 py-3 rounded-md font-medium">
|
||||
{statusMsg}
|
||||
</div>
|
||||
<div className="text-caption text-body bg-canvas border border-hairline px-3 py-2 rounded-md font-medium">{statusMsg}</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Panel({ title, icon, children }: { title: string; icon: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="bg-surface-card border border-hairline rounded-lg p-4">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<span className="material-symbols-outlined text-[18px] text-primary">{icon}</span>
|
||||
<h3 className="text-title-md font-medium text-ink">{title}</h3>
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -50,17 +50,22 @@ export function ResultsGallery({ onNewJob }: ResultsGalleryProps) {
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<header className="mb-8">
|
||||
<span className="text-caption-uppercase text-primary uppercase tracking-widest mb-2 block">Gallery</span>
|
||||
<h2 className="text-display-sm font-serif text-ink mb-2">Results Gallery</h2>
|
||||
<p className="text-body-lg text-body max-w-2xl">
|
||||
Browse and manage scanned batch results. Analyze extraction data, verify outputs, and export structured results.
|
||||
</p>
|
||||
</header>
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
|
||||
<div>
|
||||
<h2 className="text-display-sm font-serif text-ink mb-1">Results Gallery</h2>
|
||||
<p className="text-body-md text-muted max-w-2xl">Browse grading runs, inspect extracted data, and export results.</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={onNewJob}
|
||||
className="px-4 py-2 bg-primary text-on-primary rounded-md text-button font-medium hover:bg-primary-active active:scale-[0.97] transition-all flex items-center gap-2 shadow-sm"
|
||||
>
|
||||
<span className="material-symbols-outlined text-[18px]">add</span>
|
||||
New Job
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center justify-between gap-4 p-6 bg-surface-soft border-2 border-surface-cream-strong">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex flex-wrap items-center gap-3 p-4 bg-surface-card border border-hairline rounded-lg">
|
||||
<div className="relative">
|
||||
<span className="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-muted text-sm">search</span>
|
||||
<input
|
||||
@@ -68,27 +73,18 @@ export function ResultsGallery({ onNewJob }: ResultsGalleryProps) {
|
||||
value={filter}
|
||||
onChange={(e) => setFilter(e.target.value)}
|
||||
placeholder="Search batches..."
|
||||
className="pl-10 pr-4 py-2 bg-surface-card border-2 border-surface-cream-strong focus:border-primary focus:ring-0 transition-colors text-body-md w-64"
|
||||
className="pl-9 pr-3 py-2 bg-canvas border border-hairline rounded-md text-body-sm focus:border-primary focus:ring-1 focus:ring-primary/20 outline-none transition-all w-64"
|
||||
/>
|
||||
</div>
|
||||
<select className="px-4 py-2 bg-surface-card border-2 border-surface-cream-strong focus:border-primary focus:ring-0 transition-colors text-body-md">
|
||||
<select className="px-3 py-2 bg-canvas border border-hairline rounded-md text-body-sm focus:border-primary focus:ring-1 focus:ring-primary/20 outline-none">
|
||||
<option>All Templates</option>
|
||||
{Array.from(new Set(runs.map((r) => r.templateName))).map((name) => (
|
||||
<option key={name}>{name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={onNewJob}
|
||||
className="bg-primary text-on-primary px-5 py-2 text-button border-2 border-primary hover:bg-primary-active active:scale-[0.98] transition-all"
|
||||
>
|
||||
New Job
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex flex-col gap-4">
|
||||
{filteredRuns.map((run) => (
|
||||
<BatchCard
|
||||
key={run.id}
|
||||
@@ -102,17 +98,15 @@ export function ResultsGallery({ onNewJob }: ResultsGalleryProps) {
|
||||
/>
|
||||
))}
|
||||
|
||||
{loadingServer && (
|
||||
<div className="text-caption text-muted text-center py-8">Loading server history...</div>
|
||||
)}
|
||||
{loadingServer && <div className="text-caption text-muted text-center py-8">Loading server history...</div>}
|
||||
|
||||
{filteredRuns.length === 0 && !loadingServer && (
|
||||
<div className="text-center py-12 bg-canvas border-2 border-dashed border-hairline rounded-md">
|
||||
<div className="text-center py-12 rounded-lg border border-dashed border-hairline bg-canvas">
|
||||
<span className="material-symbols-outlined text-4xl text-muted mb-4 block">analytics</span>
|
||||
<p className="text-body-md text-muted mb-4">No grading runs yet.</p>
|
||||
<button
|
||||
onClick={onNewJob}
|
||||
className="bg-primary text-on-primary px-6 py-2 text-button border-2 border-primary hover:bg-primary-active active:scale-[0.98] transition-all"
|
||||
className="px-5 py-2 bg-primary text-on-primary rounded-md text-button font-medium hover:bg-primary-active active:scale-[0.97] transition-all"
|
||||
>
|
||||
Start a Job
|
||||
</button>
|
||||
@@ -121,35 +115,26 @@ export function ResultsGallery({ onNewJob }: ResultsGalleryProps) {
|
||||
</div>
|
||||
|
||||
{serverJobs.length > 0 && (
|
||||
<div className="mt-12 pt-8 border-t-2 border-surface-cream-strong">
|
||||
<div className="mt-8 pt-6 border-t border-hairline">
|
||||
<h3 className="text-title-md font-medium mb-4">Server Job History</h3>
|
||||
<div className="overflow-x-auto custom-scrollbar bg-surface-card border-2 border-surface-cream-strong">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<Table>
|
||||
<thead>
|
||||
<tr className="bg-canvas border-b-2 border-surface-cream-strong">
|
||||
<th className="p-4 text-[10px] font-mono uppercase text-muted">Job ID</th>
|
||||
<th className="p-4 text-[10px] font-mono uppercase text-muted">Status</th>
|
||||
<th className="p-4 text-[10px] font-mono uppercase text-muted">Created</th>
|
||||
<th className="p-4 text-[10px] font-mono uppercase text-muted text-right">Actions</th>
|
||||
<tr className="bg-canvas border-b border-hairline">
|
||||
<th className="p-3 text-[10px] font-mono uppercase text-muted">Job ID</th>
|
||||
<th className="p-3 text-[10px] font-mono uppercase text-muted">Status</th>
|
||||
<th className="p-3 text-[10px] font-mono uppercase text-muted">Created</th>
|
||||
<th className="p-3 text-[10px] font-mono uppercase text-muted text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="font-mono text-code">
|
||||
{serverJobs.slice(0, 10).map((job) => (
|
||||
<tr key={job.job_id} className="border-b border-hairline hover:bg-surface-soft transition-colors">
|
||||
<td className="p-4">{job.job_id.slice(0, 16)}...</td>
|
||||
<td className="p-4">
|
||||
<span className={`text-caption font-medium uppercase ${
|
||||
job.status === "completed"
|
||||
? "text-success"
|
||||
: job.status === "failed"
|
||||
? "text-error"
|
||||
: "text-warning"
|
||||
}`}>
|
||||
{job.status}
|
||||
</span>
|
||||
<td className="p-3">{job.job_id.slice(0, 16)}...</td>
|
||||
<td className="p-3">
|
||||
<StatusBadge status={job.status} />
|
||||
</td>
|
||||
<td className="p-4 text-muted-soft">{job.created_at || "—"}</td>
|
||||
<td className="p-4 text-right">
|
||||
<td className="p-3 text-muted-soft">{job.created_at || "—"}</td>
|
||||
<td className="p-3 text-right">
|
||||
<a
|
||||
href={getOutputUrl(serverUrl, job.job_id, "result.json")}
|
||||
target="_blank"
|
||||
@@ -162,8 +147,7 @@ export function ResultsGallery({ onNewJob }: ResultsGalleryProps) {
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -193,33 +177,28 @@ function BatchCard({
|
||||
|
||||
const completedCount = run.jobs.filter((j) => j.status === "completed").length
|
||||
const accuracy = overallStatus === "success" ? 99.2 : overallStatus === "partial-error" ? 84.5 : null
|
||||
const speed = "0.4s"
|
||||
|
||||
const statusConfig = {
|
||||
success: { label: "Success", bg: "bg-success/15", text: "text-success", border: "border-success", dot: "bg-success" },
|
||||
"partial-error": { label: "Partial Error", bg: "bg-warning/15", text: "text-warning", border: "border-warning", dot: "bg-warning" },
|
||||
running: { label: "Running", bg: "bg-warning/15", text: "text-warning", border: "border-warning", dot: "bg-warning animate-pulse" },
|
||||
success: { label: "Success", bg: "bg-success/10", text: "text-success", border: "border-success", dot: "bg-success" },
|
||||
"partial-error": { label: "Partial Error", bg: "bg-warning/10", text: "text-warning", border: "border-warning", dot: "bg-warning" },
|
||||
running: { label: "Running", bg: "bg-warning/10", text: "text-warning", border: "border-warning", dot: "bg-warning animate-pulse" },
|
||||
idle: { label: "Idle", bg: "bg-muted/10", text: "text-muted", border: "border-muted", dot: "bg-muted" },
|
||||
}[overallStatus]
|
||||
|
||||
return (
|
||||
<div className={`bg-surface-card border rounded-lg overflow-hidden transition-all ${active ? "border-primary" : "border-hairline"}`}>
|
||||
<div
|
||||
className={`bg-surface-card border-2 shadow-sm overflow-hidden transition-all ${
|
||||
active ? "border-primary" : "border-surface-cream-strong"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`flex items-center justify-between p-6 border-l-4 ${statusConfig.border} cursor-pointer hover:bg-surface-soft transition-colors`}
|
||||
className={`flex items-center justify-between p-4 border-l-[3px] ${statusConfig.border} cursor-pointer hover:bg-surface-soft transition-colors`}
|
||||
onClick={onActivate}
|
||||
>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-1">
|
||||
<h3 className="text-title-lg font-medium text-ink">{run.templateName}</h3>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h3 className="text-title-md font-medium text-ink truncate">{run.templateName}</h3>
|
||||
<span className={`text-[10px] font-mono px-2 py-0.5 rounded uppercase ${statusConfig.bg} ${statusConfig.text} border border-current`}>
|
||||
{statusConfig.label}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex gap-6 text-muted text-sm font-medium">
|
||||
<div className="flex gap-4 text-muted text-sm">
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="material-symbols-outlined text-base">calendar_today</span>
|
||||
{new Date(run.createdAt).toLocaleDateString()}
|
||||
@@ -231,23 +210,17 @@ function BatchCard({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-8 mr-6">
|
||||
<div className="flex items-center gap-6 mr-4 shrink-0">
|
||||
<div className="text-center">
|
||||
<p className="text-[10px] font-mono uppercase text-muted mb-1">Progress</p>
|
||||
<p className="text-title-md font-medium text-ink">
|
||||
{completedCount}/{run.jobs.length || run.scannedPaths.length}
|
||||
</p>
|
||||
<p className="text-[10px] font-mono uppercase text-muted mb-0.5">Progress</p>
|
||||
<p className="text-title-sm font-medium text-ink">{completedCount}/{run.jobs.length || run.scannedPaths.length}</p>
|
||||
</div>
|
||||
{accuracy !== null && (
|
||||
<div className="text-center">
|
||||
<p className="text-[10px] font-mono uppercase text-muted mb-1">Accuracy</p>
|
||||
<p className={`text-title-md font-medium ${statusConfig.text}`}>{accuracy.toFixed(1)}%</p>
|
||||
<p className="text-[10px] font-mono uppercase text-muted mb-0.5">Accuracy</p>
|
||||
<p className={`text-title-sm font-medium ${statusConfig.text}`}>{accuracy.toFixed(1)}%</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="text-center">
|
||||
<p className="text-[10px] font-mono uppercase text-muted mb-1">Speed</p>
|
||||
<p className="text-title-md font-medium text-ink">{speed}<span className="text-sm text-muted">/sheet</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
@@ -255,61 +228,54 @@ function BatchCard({
|
||||
e.stopPropagation()
|
||||
onToggle()
|
||||
}}
|
||||
className="p-2 text-muted hover:text-ink hover:bg-surface-cream-strong transition-colors"
|
||||
className="p-1.5 text-muted hover:text-ink hover:bg-surface-cream-strong rounded-md transition-colors shrink-0"
|
||||
>
|
||||
<span className={`material-symbols-outlined transition-transform ${expanded ? "rotate-180" : ""}`}>keyboard_arrow_down</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{expanded && (
|
||||
<div className="border-t-2 border-surface-cream-strong bg-canvas animate-fade-in">
|
||||
<div className="p-6">
|
||||
<div className="flex justify-between items-end mb-6">
|
||||
<div>
|
||||
<h4 className="text-caption-uppercase text-muted uppercase tracking-wider mb-4">Sheet Inspection</h4>
|
||||
<div className="flex gap-4">
|
||||
<button className="bg-primary text-on-primary px-5 py-2 border-2 border-primary text-button hover:bg-primary-active active:scale-[0.98] transition-all flex items-center gap-2">
|
||||
<div className="border-t border-hairline bg-canvas animate-fade-in">
|
||||
<div className="p-4 space-y-5">
|
||||
<div className="flex justify-between items-end">
|
||||
<div className="flex gap-3">
|
||||
<button className="px-4 py-2 bg-primary text-on-primary rounded-md text-button font-medium hover:bg-primary-active active:scale-[0.97] transition-all flex items-center gap-2 shadow-sm">
|
||||
<span className="material-symbols-outlined text-base">download</span>
|
||||
Export CSV
|
||||
</button>
|
||||
<button className="text-primary border-2 border-primary px-5 py-2 text-button hover:bg-surface-card active:scale-[0.98] transition-all flex items-center gap-2">
|
||||
<button className="px-4 py-2 border border-primary text-primary rounded-md text-button font-medium hover:bg-primary/5 active:scale-[0.98] transition-all flex items-center gap-2">
|
||||
<span className="material-symbols-outlined text-base">picture_as_pdf</span>
|
||||
Export PDF Report
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={onRemove}
|
||||
className="p-2 text-muted hover:text-error hover:bg-error/5 rounded transition-colors"
|
||||
className="p-1.5 text-muted hover:text-error hover:bg-error/5 rounded-md transition-colors"
|
||||
title="Remove run"
|
||||
>
|
||||
<span className="material-symbols-outlined">delete</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-8">
|
||||
{run.jobs.slice(0, 8).map((job) => (
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
|
||||
{run.jobs.slice(0, 12).map((job) => (
|
||||
<JobThumbnail key={job.job_id} job={job} serverUrl={serverUrl} />
|
||||
))}
|
||||
{run.jobs.length > 8 && (
|
||||
<button
|
||||
onClick={() => {}}
|
||||
className="bg-surface-soft border-2 border-dashed border-hairline flex flex-col items-center justify-center p-4 hover:bg-surface-card transition-all"
|
||||
>
|
||||
<span className="material-symbols-outlined text-2xl text-muted mb-1">more_horiz</span>
|
||||
<span className="text-caption text-muted">+{run.jobs.length - 8} more</span>
|
||||
{run.jobs.length > 12 && (
|
||||
<button className="bg-surface-soft border border-dashed border-hairline rounded-lg flex flex-col items-center justify-center p-3 hover:bg-surface-card transition-all">
|
||||
<span className="material-symbols-outlined text-2xl text-muted">more_horiz</span>
|
||||
<span className="text-caption text-muted">+{run.jobs.length - 12} more</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto custom-scrollbar bg-surface-card border-2 border-surface-cream-strong">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<Table>
|
||||
<thead>
|
||||
<tr className="bg-canvas border-b-2 border-surface-cream-strong">
|
||||
<th className="p-4 text-[10px] font-mono uppercase text-muted">Sheet ID</th>
|
||||
<th className="p-4 text-[10px] font-mono uppercase text-muted">Status</th>
|
||||
<th className="p-4 text-[10px] font-mono uppercase text-muted">Answers</th>
|
||||
<th className="p-4 text-[10px] font-mono uppercase text-muted text-right">Actions</th>
|
||||
<tr className="bg-canvas border-b border-hairline">
|
||||
<th className="p-3 text-[10px] font-mono uppercase text-muted">Sheet ID</th>
|
||||
<th className="p-3 text-[10px] font-mono uppercase text-muted">Status</th>
|
||||
<th className="p-3 text-[10px] font-mono uppercase text-muted">Answers</th>
|
||||
<th className="p-3 text-[10px] font-mono uppercase text-muted text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="font-mono text-code">
|
||||
@@ -317,8 +283,7 @@ function BatchCard({
|
||||
<JobRow key={job.job_id} job={job} serverUrl={serverUrl} />
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@@ -337,10 +302,10 @@ function JobThumbnail({ job, serverUrl }: { job: JobStatusResponse; serverUrl: s
|
||||
const answers = extracted ? Object.keys(extracted).length : 0
|
||||
|
||||
return (
|
||||
<div className="group relative bg-surface-card border-2 border-surface-cream-strong p-2 cursor-pointer hover:border-primary transition-colors">
|
||||
<div className="aspect-[3/4] bg-canvas mb-2 overflow-hidden relative flex items-center justify-center">
|
||||
<div className="group relative bg-surface-card border border-hairline rounded-lg p-2 cursor-pointer hover:border-primary transition-colors">
|
||||
<div className="aspect-[3/4] bg-canvas mb-2 rounded overflow-hidden relative flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<span className="material-symbols-outlined text-3xl text-muted">description</span>
|
||||
<span className="material-symbols-outlined text-2xl text-muted">description</span>
|
||||
<p className="text-[10px] font-mono text-muted mt-1">{answers} answers</p>
|
||||
</div>
|
||||
<div className="absolute inset-0 bg-primary/10 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
||||
@@ -348,14 +313,14 @@ function JobThumbnail({ job, serverUrl }: { job: JobStatusResponse; serverUrl: s
|
||||
href={job.output_files?.[0] ? getOutputUrl(serverUrl, job.job_id, job.output_files[0]) : "#"}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="bg-surface-card p-2 material-symbols-outlined text-primary"
|
||||
className="bg-surface-card p-1.5 material-symbols-outlined text-primary rounded"
|
||||
>
|
||||
visibility
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[10px] font-mono text-center truncate">{job.job_id.slice(0, 12)}...</p>
|
||||
<span className={`absolute top-3 right-3 w-2 h-2 rounded-full ${statusColor}`} />
|
||||
<p className="text-[10px] font-mono text-center truncate">{job.job_id.slice(0, 10)}...</p>
|
||||
<span className={`absolute top-2 right-2 w-2 h-2 rounded-full ${statusColor}`} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -365,27 +330,14 @@ function JobRow({ job, serverUrl }: { job: JobStatusResponse; serverUrl: string
|
||||
const extracted = resultData?.ExtractedData as Record<string, unknown> | undefined
|
||||
const answerCount = extracted ? Object.keys(extracted).length : 0
|
||||
|
||||
const statusColor =
|
||||
job.status === "completed" ? "text-success"
|
||||
: job.status === "failed" ? "text-error"
|
||||
: "text-warning"
|
||||
|
||||
const statusDot =
|
||||
job.status === "completed" ? "bg-success"
|
||||
: job.status === "failed" ? "bg-error"
|
||||
: "bg-warning animate-pulse"
|
||||
|
||||
return (
|
||||
<tr className="border-b border-hairline hover:bg-surface-soft transition-colors">
|
||||
<td className="p-4">{job.job_id.slice(0, 20)}...</td>
|
||||
<td className="p-4">
|
||||
<span className={`flex items-center gap-2 ${statusColor}`}>
|
||||
<span className={`w-2 h-2 rounded-full ${statusDot}`} />
|
||||
<span className="text-caption font-medium uppercase">{job.status}</span>
|
||||
</span>
|
||||
<td className="p-3">{job.job_id.slice(0, 18)}...</td>
|
||||
<td className="p-3">
|
||||
<StatusBadge status={job.status} />
|
||||
</td>
|
||||
<td className="p-4 text-muted-soft">{answerCount} extracted</td>
|
||||
<td className="p-4 text-right">
|
||||
<td className="p-3 text-muted-soft">{answerCount} extracted</td>
|
||||
<td className="p-3 text-right">
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
{job.output_files?.map((file) => (
|
||||
<a
|
||||
@@ -407,3 +359,25 @@ function JobRow({ job, serverUrl }: { job: JobStatusResponse; serverUrl: string
|
||||
</tr>
|
||||
)
|
||||
}
|
||||
|
||||
function StatusBadge({ status }: { status: string }) {
|
||||
const config =
|
||||
status === "completed" ? { color: "text-success", dot: "bg-success" }
|
||||
: status === "failed" ? { color: "text-error", dot: "bg-error" }
|
||||
: { color: "text-warning", dot: "bg-warning animate-pulse" }
|
||||
|
||||
return (
|
||||
<span className={`flex items-center gap-1.5 ${config.color}`}>
|
||||
<span className={`w-2 h-2 rounded-full ${config.dot}`} />
|
||||
<span className="text-caption font-medium uppercase">{status}</span>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
function Table({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="overflow-x-auto custom-scrollbar bg-surface-card border border-hairline rounded-lg">
|
||||
<table className="w-full text-left border-collapse">{children}</table>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useState, useEffect, useRef } from "react"
|
||||
import { useState, useEffect } from "react"
|
||||
import { useApiStore } from "../../store/useApiStore"
|
||||
import { checkHealth } from "../../utils/apiClient"
|
||||
|
||||
@@ -9,7 +9,6 @@ export function ServerSettings() {
|
||||
const [checking, setChecking] = useState(false)
|
||||
const [health, setHealth] = useState<{ ok: boolean; msg: string; data?: { version?: string; redis?: string; storage?: string; database?: string } } | null>(null)
|
||||
|
||||
// Keep input in sync if store changes externally
|
||||
useEffect(() => {
|
||||
setInputUrl(serverUrl)
|
||||
}, [serverUrl])
|
||||
@@ -44,103 +43,31 @@ export function ServerSettings() {
|
||||
? { label: "Error", color: "error", icon: "error" }
|
||||
: { label: "Unknown", color: "muted", icon: "help" }
|
||||
|
||||
const metrics = [
|
||||
{ label: "Latency", value: "14ms" },
|
||||
{ label: "API Version", value: health?.data?.version || "—" },
|
||||
{ label: "Last Sync", value: health?.ok ? "Just Now" : "—" },
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{/* Page Header */}
|
||||
<div className="mb-10 border-b-2 border-surface-cream-strong pb-6">
|
||||
<span className="text-caption-uppercase text-primary uppercase tracking-widest mb-2 block">Connection Profile</span>
|
||||
<h2 className="text-display-sm font-serif text-ink mb-2">Server Configuration</h2>
|
||||
<p className="text-body-lg text-body max-w-2xl">
|
||||
Manage the connection parameters for your OMR backend and monitor the health of critical infrastructure services.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
<PageHeader title="Server Configuration" subtitle="Manage the connection parameters for your OMR backend and monitor infrastructure health." />
|
||||
|
||||
{/* Connection Profile Card */}
|
||||
<section className="bg-surface-card border-2 border-surface-cream-strong p-6 shadow-sm relative overflow-hidden">
|
||||
<div className="absolute top-0 left-0 w-1 h-full bg-primary" />
|
||||
<div className="flex flex-col md:flex-row justify-between md:items-start gap-4 mb-8">
|
||||
<div>
|
||||
<h3 className="text-title-lg font-medium text-primary mb-1">Connection Profile</h3>
|
||||
<p className="text-body-md text-muted">Primary FastAPI Backend Endpoint</p>
|
||||
</div>
|
||||
<span className="bg-success/15 text-success px-3 py-1 text-caption font-medium rounded-full flex items-center gap-1.5 w-fit border border-success/20">
|
||||
<span className="w-2 h-2 rounded-full bg-success animate-pulse" />
|
||||
{status.label.toUpperCase()}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
|
||||
<div className="md:col-span-3">
|
||||
<label className="block text-caption-uppercase text-muted uppercase tracking-wider mb-2" htmlFor="backend-url">
|
||||
FastAPI Backend URL
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Panel title="Connection Profile" icon="link">
|
||||
<div className="flex flex-col md:flex-row gap-3 items-end">
|
||||
<div className="flex-1 w-full">
|
||||
<label className="text-caption text-muted block mb-1.5 font-medium">FastAPI Backend URL</label>
|
||||
<input
|
||||
id="backend-url"
|
||||
type="text"
|
||||
value={inputUrl}
|
||||
onChange={(e) => setInputUrl(e.target.value)}
|
||||
placeholder="http://localhost:8000"
|
||||
className="w-full bg-canvas border-2 border-surface-cream-strong focus:border-primary focus:ring-0 text-body-md px-4 py-3 transition-colors pr-10"
|
||||
className="w-full bg-canvas border border-hairline rounded-md px-3 py-2 text-body-md text-ink focus:border-primary focus:ring-1 focus:ring-primary/20 outline-none transition-all"
|
||||
/>
|
||||
<span className="absolute right-4 top-1/2 -translate-y-1/2 material-symbols-outlined text-muted-soft">link</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
onClick={handleCheck}
|
||||
disabled={checking}
|
||||
className="w-full bg-primary text-on-primary py-[14px] px-6 text-button border-2 border-primary hover:bg-primary-active active:scale-[0.98] transition-all flex items-center justify-center gap-2"
|
||||
className="px-4 py-2 bg-primary text-on-primary rounded-md text-button font-medium hover:bg-primary-active active:scale-[0.97] transition-all disabled:bg-primary-disabled disabled:text-muted h-10 shrink-0"
|
||||
>
|
||||
<span className="material-symbols-outlined text-[18px]">{checking ? "sync" : "bolt"}</span>
|
||||
{checking ? "Connecting..." : "Test Connection"}
|
||||
<span className="material-symbols-outlined text-[18px] align-middle mr-1">{checking ? "sync" : "bolt"}</span>
|
||||
{checking ? "Checking..." : "Test Connection"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 pt-8 border-t border-hairline grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{metrics.map((m) => (
|
||||
<div key={m.label} className="flex flex-col">
|
||||
<span className="text-caption-uppercase text-muted-soft uppercase tracking-wider mb-1">{m.label}</span>
|
||||
<span className="text-title-md font-medium text-ink">{m.value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Health Metrics */}
|
||||
<section>
|
||||
<h3 className="text-title-lg font-medium mb-6 px-2">Health Metrics</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<HealthCard
|
||||
title="Redis Cluster"
|
||||
subtitle="Cache & Messaging Layer"
|
||||
status={health?.data?.redis || "unknown"}
|
||||
uptime="99.9%"
|
||||
icon="database"
|
||||
/>
|
||||
<HealthCard
|
||||
title="File Storage"
|
||||
subtitle="S3 / Local Object Store"
|
||||
status={health?.data?.storage || "unknown"}
|
||||
uptime="82% FULL"
|
||||
icon="folder_open"
|
||||
/>
|
||||
<HealthCard
|
||||
title="Main Database"
|
||||
subtitle="Relational Records"
|
||||
status={health?.data?.database || "unknown"}
|
||||
uptime="PostgreSQL"
|
||||
icon="storage"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{health && (
|
||||
<div
|
||||
@@ -148,7 +75,7 @@ export function ServerSettings() {
|
||||
(health.ok
|
||||
? "text-success bg-success/10 border-success/20 "
|
||||
: "text-error bg-error/10 border-error/20 ") +
|
||||
"text-caption font-medium px-4 py-3 border rounded-md"
|
||||
"mt-4 text-caption font-medium px-3 py-2 rounded-md border"
|
||||
}
|
||||
role={health.ok ? "status" : "alert"}
|
||||
>
|
||||
@@ -156,34 +83,77 @@ export function ServerSettings() {
|
||||
{health.msg}
|
||||
</div>
|
||||
)}
|
||||
</Panel>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<HealthCard
|
||||
title="Redis Cluster"
|
||||
subtitle="Cache & Messaging"
|
||||
status={health?.data?.redis || "unknown"}
|
||||
icon="database"
|
||||
/>
|
||||
<HealthCard
|
||||
title="File Storage"
|
||||
subtitle="Object Store"
|
||||
status={health?.data?.storage || "unknown"}
|
||||
icon="folder_open"
|
||||
/>
|
||||
<HealthCard
|
||||
title="Main Database"
|
||||
subtitle="Relational Records"
|
||||
status={health?.data?.database || "unknown"}
|
||||
icon="storage"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function HealthCard({ title, subtitle, status, uptime, icon }: {
|
||||
function HealthCard({ title, subtitle, status, icon }: {
|
||||
title: string
|
||||
subtitle: string
|
||||
status: string
|
||||
uptime: string
|
||||
icon: string
|
||||
}) {
|
||||
const online = status.toLowerCase() === "online" || status.toLowerCase() === "connected" || status.toLowerCase() === "active" || status.toLowerCase() === "ok"
|
||||
const online = ["online", "connected", "active", "ok", "read/write ok", "active pool"].includes(status.toLowerCase())
|
||||
return (
|
||||
<div className="bg-surface-card border-2 border-surface-cream-strong p-6 hover:bg-surface-soft hover:-translate-y-px active:scale-[0.99] transition-all shadow-sm">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="w-10 h-10 bg-canvas flex items-center justify-center border-2 border-hairline">
|
||||
<span className="material-symbols-outlined text-primary">{icon}</span>
|
||||
</div>
|
||||
<span className="text-[10px] font-mono bg-canvas px-2 py-1 border border-hairline uppercase text-muted">{uptime}</span>
|
||||
</div>
|
||||
<h4 className="text-title-sm font-medium mb-1">{title}</h4>
|
||||
<p className="text-[11px] font-mono text-muted-soft mb-4">{subtitle}</p>
|
||||
<div className="bg-surface-cream-strong/20 border border-hairline rounded-lg p-4 hover:bg-surface-cream-strong/30 transition-colors">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`w-2 h-2 rounded-full ${online ? "bg-success animate-pulse" : "bg-warning"}`} />
|
||||
<span className="material-symbols-outlined text-[18px] text-primary">{icon}</span>
|
||||
<div>
|
||||
<h4 className="text-title-sm font-medium text-ink">{title}</h4>
|
||||
<p className="text-caption text-muted-soft">{subtitle}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`w-2 h-2 rounded-full ${online ? "bg-success" : "bg-warning"}`} />
|
||||
<span className={`text-caption font-medium uppercase ${online ? "text-success" : "text-warning"}`}>
|
||||
{online ? "Connected" : status.toUpperCase()}
|
||||
{status.toUpperCase()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function PageHeader({ title, subtitle }: { title: string; subtitle: string }) {
|
||||
return (
|
||||
<div className="mb-6">
|
||||
<h2 className="text-display-sm font-serif text-ink mb-1">{title}</h2>
|
||||
<p className="text-body-md text-muted max-w-2xl">{subtitle}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Panel({ title, icon, children }: { title: string; icon: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="bg-surface-card border border-hairline rounded-lg p-4">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<span className="material-symbols-outlined text-[18px] text-primary">{icon}</span>
|
||||
<h3 className="text-title-md font-medium text-ink">{title}</h3>
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -26,7 +26,6 @@ export function TemplateManager({ onNewJob }: TemplateManagerProps) {
|
||||
const [editingId, setEditingId] = useState<string | null>(null)
|
||||
const [editName, setEditName] = useState("")
|
||||
const [filter, setFilter] = useState("")
|
||||
|
||||
const [showAddPanel, setShowAddPanel] = useState(false)
|
||||
|
||||
const hasLoaded = useRef(false)
|
||||
@@ -54,7 +53,9 @@ export function TemplateManager({ onNewJob }: TemplateManagerProps) {
|
||||
}
|
||||
}
|
||||
|
||||
const filteredTemplates = templates.filter((t) => t.name.toLowerCase().includes(filter.toLowerCase()))
|
||||
const filteredTemplates = templates.filter((t) =>
|
||||
t.name.toLowerCase().includes(filter.toLowerCase())
|
||||
)
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
if (!templateDir) return
|
||||
@@ -86,15 +87,11 @@ export function TemplateManager({ onNewJob }: TemplateManagerProps) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{/* Header */}
|
||||
<header className="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-8">
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
|
||||
<div>
|
||||
<span className="text-caption-uppercase text-primary uppercase tracking-widest mb-2 block">Library</span>
|
||||
<h2 className="text-display-sm font-serif text-ink mb-2">Template Library</h2>
|
||||
<p className="text-body-lg text-body max-w-md">
|
||||
Manage your standardized OMR sheets. Define mapping zones and coordinate systems for automated extraction.
|
||||
</p>
|
||||
<h2 className="text-display-sm font-serif text-ink mb-1">Template Library</h2>
|
||||
<p className="text-body-md text-muted max-w-md">Manage standardized OMR sheets and their coordinate mappings.</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="relative">
|
||||
@@ -104,54 +101,51 @@ export function TemplateManager({ onNewJob }: TemplateManagerProps) {
|
||||
value={filter}
|
||||
onChange={(e) => setFilter(e.target.value)}
|
||||
placeholder="Filter templates..."
|
||||
className="pl-10 pr-4 py-2 bg-surface-card border-2 border-surface-cream-strong focus:border-primary focus:ring-0 transition-colors text-body-md w-64"
|
||||
className="pl-9 pr-3 py-2 bg-canvas border border-hairline rounded-md text-body-sm focus:border-primary focus:ring-1 focus:ring-primary/20 outline-none transition-all w-56"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowAddPanel(true)}
|
||||
className="bg-primary text-on-primary py-2 px-6 text-button border-2 border-primary hover:bg-primary-active active:scale-[0.98] transition-all flex items-center gap-2 shadow-sm"
|
||||
className="px-4 py-2 bg-primary text-on-primary rounded-md text-button font-medium hover:bg-primary-active active:scale-[0.97] transition-all flex items-center gap-2 shadow-sm"
|
||||
>
|
||||
<span className="material-symbols-outlined text-sm">add</span>
|
||||
<span className="material-symbols-outlined text-[18px]">add</span>
|
||||
Create Template
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
{/* Directory */}
|
||||
<Panel title="Storage Directory" icon="folder">
|
||||
<div className="flex items-center gap-2">
|
||||
{templateDir ? (
|
||||
<div className="text-body-sm text-muted bg-canvas px-4 py-2 border-2 border-surface-cream-strong flex-1 truncate font-mono">
|
||||
<div className="text-body-sm text-muted bg-canvas px-3 py-2 rounded-md border border-hairline flex-1 truncate font-mono">
|
||||
{templateDir}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-body-sm text-muted-soft bg-canvas px-4 py-2 border-2 border-surface-cream-strong flex-1 truncate">
|
||||
<div className="text-body-sm text-muted-soft bg-canvas px-3 py-2 rounded-md border border-hairline flex-1 truncate">
|
||||
No directory selected
|
||||
</div>
|
||||
)}
|
||||
{isElectron && (
|
||||
<button
|
||||
onClick={pickDirectory}
|
||||
className="px-4 py-2 bg-surface-card border-2 border-hairline text-button text-ink hover:bg-surface-cream-strong active:scale-[0.98] transition-all h-10 shrink-0"
|
||||
className="px-3 py-2 rounded-md bg-surface-soft border border-hairline text-nav text-ink hover:bg-surface-cream-strong active:scale-[0.98] transition-all h-10 shrink-0"
|
||||
>
|
||||
{templateDir ? "Change" : "Choose Directory"}
|
||||
{templateDir ? "Change" : "Choose"}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!isElectron && (
|
||||
<div className="text-caption text-warning bg-warning/10 px-4 py-2 border border-warning/20 font-medium rounded-md">
|
||||
<div className="mt-3 text-caption text-warning bg-warning/10 px-3 py-2 rounded-md border border-warning/20 font-medium">
|
||||
Running in web mode. Templates will not persist across reloads.
|
||||
</div>
|
||||
)}
|
||||
</Panel>
|
||||
|
||||
{message && (
|
||||
<div className="text-caption text-body bg-canvas border-2 border-hairline px-4 py-2 rounded-md font-medium">
|
||||
{message}
|
||||
</div>
|
||||
<div className="text-caption text-body bg-canvas border border-hairline px-3 py-2 rounded-md font-medium">{message}</div>
|
||||
)}
|
||||
|
||||
{/* Template Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{filteredTemplates.map((t) => (
|
||||
<TemplateCard
|
||||
key={t.id}
|
||||
@@ -166,18 +160,10 @@ export function TemplateManager({ onNewJob }: TemplateManagerProps) {
|
||||
onUse={() => onNewJob?.()}
|
||||
/>
|
||||
))}
|
||||
|
||||
<button
|
||||
onClick={() => setShowAddPanel(true)}
|
||||
className="border-2 border-dashed border-surface-cream-strong flex flex-col items-center justify-center p-8 hover:bg-surface-soft hover:border-primary active:scale-[0.98] transition-all min-h-[280px]"
|
||||
>
|
||||
<span className="material-symbols-outlined text-display-md text-hairline group-hover:text-primary mb-4">add_circle</span>
|
||||
<span className="text-title-sm text-muted">Add New Template</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{filteredTemplates.length === 0 && !loading && (
|
||||
<div className="text-caption text-muted px-4 py-8 border-2 border-dashed border-hairline bg-canvas text-center rounded-md">
|
||||
<div className="text-caption text-muted px-4 py-8 rounded-md border border-dashed border-hairline bg-canvas text-center">
|
||||
No templates found. Create one to get started.
|
||||
</div>
|
||||
)}
|
||||
@@ -210,15 +196,11 @@ function TemplateCard({
|
||||
onDelete: () => void
|
||||
onUse: () => void
|
||||
}) {
|
||||
const status = "READY"
|
||||
return (
|
||||
<div className="bg-surface-card border-2 border-surface-cream-strong p-4 flex flex-col group hover:bg-surface-soft hover:-translate-y-px active:scale-[0.99] transition-all">
|
||||
<div className="relative aspect-[3/4] bg-canvas mb-4 border-2 border-hairline overflow-hidden">
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="bg-surface-card border border-hairline rounded-lg p-4 flex flex-col hover:bg-surface-cream-strong/20 transition-colors">
|
||||
<div className="relative aspect-[3/4] bg-canvas mb-4 rounded-md border border-hairline overflow-hidden flex items-center justify-center">
|
||||
<TemplatePreview template={template} />
|
||||
</div>
|
||||
<div className="absolute inset-0 bg-primary/5 opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
</div>
|
||||
|
||||
{editing ? (
|
||||
<div className="flex flex-col gap-2 mb-2">
|
||||
@@ -231,18 +213,18 @@ function TemplateCard({
|
||||
if (e.key === "Escape") onCancelEdit()
|
||||
}}
|
||||
autoFocus
|
||||
className="w-full px-3 py-2 border-2 border-surface-cream-strong bg-canvas text-body-md focus:border-primary focus:ring-0"
|
||||
className="w-full px-3 py-2 border border-hairline bg-canvas rounded-md text-body-md text-ink focus:border-primary focus:ring-1 focus:ring-primary/20 outline-none"
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={onSaveEdit}
|
||||
className="flex-1 px-3 py-1.5 bg-primary text-on-primary text-button font-medium hover:bg-primary-active active:scale-[0.97] transition-all"
|
||||
className="flex-1 px-3 py-1.5 rounded-md bg-primary text-on-primary text-button font-medium hover:bg-primary-active active:scale-[0.97] transition-all"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
onClick={onCancelEdit}
|
||||
className="flex-1 px-3 py-1.5 border-2 border-hairline bg-surface-soft text-button text-ink hover:bg-surface-cream-strong active:scale-[0.98] transition-all"
|
||||
className="flex-1 px-3 py-1.5 rounded-md border border-hairline bg-surface-soft text-button text-ink hover:bg-surface-cream-strong active:scale-[0.98] transition-all"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
@@ -250,11 +232,11 @@ function TemplateCard({
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<h3 className="text-title-md font-medium text-ink">{template.name}</h3>
|
||||
<span className="text-[10px] font-mono bg-canvas px-2 py-1 uppercase border border-hairline text-muted">V.1.0</span>
|
||||
<div className="flex items-start justify-between mb-1">
|
||||
<h3 className="text-title-md font-medium text-ink truncate">{template.name}</h3>
|
||||
<span className="text-[10px] font-mono bg-canvas px-2 py-0.5 rounded border border-hairline text-muted shrink-0">V.1.0</span>
|
||||
</div>
|
||||
<p className="text-caption text-muted mb-4">
|
||||
<p className="text-caption text-muted mb-3">
|
||||
{template.bubbleTemplatePath && template.filledTemplatePath
|
||||
? "Bubble + Filled"
|
||||
: template.bubbleTemplatePath
|
||||
@@ -269,32 +251,29 @@ function TemplateCard({
|
||||
)}
|
||||
|
||||
{!editing && (
|
||||
<div className="mt-auto pt-4 border-t-2 border-surface-cream-strong flex justify-between items-center">
|
||||
<div className="flex gap-2">
|
||||
<div className="mt-auto pt-3 border-t border-hairline flex justify-between items-center">
|
||||
<div className="flex gap-1">
|
||||
<button
|
||||
onClick={onStartEdit}
|
||||
className="p-1.5 text-muted hover:text-primary hover:bg-primary/5 rounded transition-all"
|
||||
className="p-1.5 rounded-md text-muted hover:text-primary hover:bg-primary/5 transition-all"
|
||||
title="Edit name"
|
||||
>
|
||||
<span className="material-symbols-outlined text-[18px]">edit</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={onDelete}
|
||||
className="p-1.5 text-muted hover:text-error hover:bg-error/5 rounded transition-all"
|
||||
className="p-1.5 rounded-md text-muted hover:text-error hover:bg-error/5 transition-all"
|
||||
title="Delete"
|
||||
>
|
||||
<span className="material-symbols-outlined text-[18px]">delete</span>
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={onUse}
|
||||
className="text-caption text-primary hover:underline font-medium"
|
||||
className="px-3 py-1.5 rounded-md bg-primary/10 text-primary text-caption font-medium hover:bg-primary/20 active:scale-[0.97] transition-all"
|
||||
>
|
||||
Use in job
|
||||
Use in Job
|
||||
</button>
|
||||
<span className="text-[10px] font-mono text-success uppercase">{status}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -328,7 +307,7 @@ function TemplatePreview({ template }: { template: TemplateEntry }) {
|
||||
if (!src) {
|
||||
return (
|
||||
<div className="flex flex-col items-center text-muted-soft">
|
||||
<span className="material-symbols-outlined text-4xl mb-2">image</span>
|
||||
<span className="material-symbols-outlined text-3xl mb-1">image</span>
|
||||
<span className="text-[10px] font-mono uppercase">No Preview</span>
|
||||
</div>
|
||||
)
|
||||
@@ -472,53 +451,44 @@ function AddTemplatePanel({ open, onClose }: { open: boolean; onClose: () => voi
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50">
|
||||
<div
|
||||
className="absolute inset-0 bg-surface-dark/40 backdrop-blur-sm"
|
||||
onClick={onClose}
|
||||
/>
|
||||
<div className="absolute right-0 top-0 bottom-0 w-full max-w-lg bg-surface-card shadow-2xl flex flex-col">
|
||||
<div className="p-8 border-b-2 border-surface-cream-strong flex justify-between items-center bg-canvas">
|
||||
<div className="absolute inset-0 bg-surface-dark/40 backdrop-blur-sm" onClick={onClose} />
|
||||
<div className="absolute right-0 top-0 bottom-0 w-full max-w-md bg-surface-card shadow-2xl flex flex-col">
|
||||
<div className="p-5 border-b border-hairline flex justify-between items-center bg-canvas">
|
||||
<div>
|
||||
<h2 className="text-display-sm font-serif text-ink">New Template</h2>
|
||||
<p className="text-caption text-muted mt-1">Define extraction parameters</p>
|
||||
<h2 className="text-title-lg font-medium text-ink">New Template</h2>
|
||||
<p className="text-caption text-muted">Define extraction parameters</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="material-symbols-outlined p-2 hover:bg-surface-soft rounded transition-colors"
|
||||
>
|
||||
close
|
||||
<button onClick={onClose} className="p-2 text-muted hover:text-ink hover:bg-surface-soft rounded-md transition-colors">
|
||||
<span className="material-symbols-outlined">close</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-8 space-y-8 custom-scrollbar">
|
||||
<div className="space-y-2">
|
||||
<label className="block text-caption-uppercase text-muted uppercase tracking-wider">Template Name</label>
|
||||
<div className="flex-1 overflow-y-auto p-5 space-y-5 custom-scrollbar">
|
||||
<Field label="Template Name">
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="e.g. Q4 Performance Survey"
|
||||
className="w-full border-2 border-surface-cream-strong p-3 text-body-md focus:border-primary focus:ring-0 bg-surface-card"
|
||||
className="w-full bg-canvas border border-hairline rounded-md px-3 py-2 text-body-md text-ink focus:border-primary focus:ring-1 focus:ring-primary/20 outline-none transition-all"
|
||||
/>
|
||||
</div>
|
||||
</Field>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="block text-caption-uppercase text-muted uppercase tracking-wider">Reference Blank Image</label>
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-caption text-muted font-medium">Reference Blank Image</label>
|
||||
<button
|
||||
onClick={() => selectFile("image/png,image/jpeg", setTemplateFile)}
|
||||
className={`w-full border-2 border-dashed border-surface-cream-strong p-12 text-center hover:bg-surface-soft transition-colors ${templateFile ? "bg-primary/5 border-primary/30" : "bg-canvas"}`}
|
||||
className={`w-full border border-dashed border-hairline rounded-lg p-8 text-center hover:bg-surface-soft transition-colors ${templateFile ? "bg-primary/5 border-primary/30" : "bg-canvas"}`}
|
||||
>
|
||||
<span className="material-symbols-outlined text-4xl text-muted mb-4 block">upload_file</span>
|
||||
<p className="text-body-md text-ink">
|
||||
{templateFile ? templateFile.name : "Drop blank scan or browse"}
|
||||
</p>
|
||||
{!templateFile && <p className="text-[10px] font-mono text-muted mt-2">MAX 10MB • PNG, JPG</p>}
|
||||
<span className="material-symbols-outlined text-3xl text-muted mb-2 block">upload_file</span>
|
||||
<p className="text-body-sm text-ink">{templateFile ? templateFile.name : "Drop blank scan or browse"}</p>
|
||||
{!templateFile && <p className="text-[10px] font-mono text-muted mt-1">MAX 10MB • PNG, JPG</p>}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex justify-between items-center">
|
||||
<label className="block text-caption-uppercase text-muted uppercase tracking-wider">JSON Configuration</label>
|
||||
<label className="text-caption text-muted font-medium">JSON Configuration</label>
|
||||
<button
|
||||
onClick={() => selectFile("application/json", handleMetadataFile)}
|
||||
className="text-[10px] font-mono text-primary hover:underline uppercase"
|
||||
@@ -526,7 +496,6 @@ function AddTemplatePanel({ open, onClose }: { open: boolean; onClose: () => voi
|
||||
Upload .JSON
|
||||
</button>
|
||||
</div>
|
||||
<div className="relative group">
|
||||
<textarea
|
||||
value={metadataText}
|
||||
onChange={(e) => setMetadataText(e.target.value)}
|
||||
@@ -536,56 +505,40 @@ function AddTemplatePanel({ open, onClose }: { open: boolean; onClose: () => voi
|
||||
{ "id": "q1", "type": "bubble", "coords": [120, 450] }
|
||||
]
|
||||
}'
|
||||
rows={10}
|
||||
className="w-full border-2 border-surface-cream-strong p-4 font-mono text-code bg-surface-dark text-on-dark focus:border-primary focus:ring-0 custom-scrollbar"
|
||||
rows={8}
|
||||
className="w-full border border-hairline rounded-md p-3 font-mono text-code bg-surface-dark text-on-dark focus:border-primary focus:ring-1 focus:ring-primary/20 outline-none custom-scrollbar"
|
||||
/>
|
||||
<div className="absolute top-2 right-2 flex gap-2">
|
||||
<span className="material-symbols-outlined text-xs text-on-dark-soft cursor-help" title="Valid JSON required">info</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<button
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<FileChip
|
||||
label="Bubble Template"
|
||||
filename={bubbleTemplateFile?.name}
|
||||
onClick={() => selectFile("image/png,image/jpeg", setBubbleTemplateFile)}
|
||||
className={`border-2 p-4 text-left transition-all ${
|
||||
bubbleTemplateFile
|
||||
? "border-primary bg-primary/5"
|
||||
: "border-surface-cream-strong bg-surface-card hover:bg-surface-soft"
|
||||
}`}
|
||||
>
|
||||
<p className="text-caption font-bold mb-1">Bubble Template</p>
|
||||
<p className="text-[11px] text-muted">{bubbleTemplateFile ? bubbleTemplateFile.name : "Optional clean bubble"}</p>
|
||||
</button>
|
||||
<button
|
||||
/>
|
||||
<FileChip
|
||||
label="Filled Bubble"
|
||||
filename={filledTemplateFile?.name}
|
||||
onClick={() => selectFile("image/png,image/jpeg", setFilledTemplateFile)}
|
||||
className={`border-2 p-4 text-left transition-all ${
|
||||
filledTemplateFile
|
||||
? "border-primary bg-primary/5"
|
||||
: "border-surface-cream-strong bg-surface-card hover:bg-surface-soft"
|
||||
}`}
|
||||
>
|
||||
<p className="text-caption font-bold mb-1">Filled Bubble</p>
|
||||
<p className="text-[11px] text-muted">{filledTemplateFile ? filledTemplateFile.name : "Optional filled bubble"}</p>
|
||||
</button>
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="text-caption text-error bg-error/10 px-4 py-2 border border-error/20 rounded-md">{error}</div>
|
||||
<div className="text-caption text-error bg-error/10 px-3 py-2 rounded-md border border-error/20">{error}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="p-8 border-t-2 border-surface-cream-strong bg-canvas flex gap-4">
|
||||
<div className="p-5 border-t border-hairline bg-canvas flex gap-3">
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={saving}
|
||||
className="flex-1 bg-primary text-on-primary text-button font-bold py-4 border-2 border-primary hover:bg-primary-active active:scale-[0.98] transition-all disabled:bg-primary-disabled disabled:text-muted"
|
||||
className="flex-1 bg-primary text-on-primary rounded-md text-button font-medium py-2.5 hover:bg-primary-active active:scale-[0.97] transition-all disabled:bg-primary-disabled disabled:text-muted"
|
||||
>
|
||||
{saving ? "Saving..." : "Save Template"}
|
||||
</button>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="flex-1 border-2 border-primary text-primary text-button font-bold py-4 hover:bg-surface-card active:scale-[0.98] transition-all"
|
||||
className="flex-1 border border-hairline bg-surface-soft text-button text-ink rounded-md py-2.5 hover:bg-surface-cream-strong active:scale-[0.98] transition-all"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
@@ -594,3 +547,38 @@ function AddTemplatePanel({ open, onClose }: { open: boolean; onClose: () => voi
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function FileChip({ label, filename, onClick }: { label: string; filename?: string; onClick: () => void }) {
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
className={`border rounded-lg p-3 text-left transition-all ${
|
||||
filename ? "border-primary bg-primary/5" : "border-hairline bg-surface-card hover:bg-surface-soft"
|
||||
}`}
|
||||
>
|
||||
<p className="text-caption font-medium mb-0.5">{label}</p>
|
||||
<p className="text-[11px] text-muted truncate">{filename || "Optional"}</p>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
function Panel({ title, icon, children }: { title: string; icon: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="bg-surface-card border border-hairline rounded-lg p-4">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<span className="material-symbols-outlined text-[18px] text-primary">{icon}</span>
|
||||
<h3 className="text-title-md font-medium text-ink">{title}</h3>
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Field({ label, children }: { label: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-caption text-muted font-medium">{label}</label>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user