@camstack/addon-admin-ui 0.1.2 → 0.1.3

package/src/components/device/QuickConfigWizard.tsx

@@ -1,507 +0,0 @@
-import { useState } from 'react'
-import { X, ChevronLeft, ChevronRight, Check, Zap } from 'lucide-react'
-
-interface QuickConfigWizardProps {
-  open: boolean
-  onClose: () => void
-  deviceId: string
-}
-
-// ----- Step 1: Detection Classes -----
-interface DetectionClass {
-  id: string
-  label: string
-  enabled: boolean
-  score: number
-}
-
-const DEFAULT_DETECTION_CLASSES: DetectionClass[] = [
-  { id: 'person', label: 'Person', enabled: true, score: 50 },
-  { id: 'vehicle', label: 'Vehicle', enabled: true, score: 50 },
-  { id: 'animal', label: 'Animal', enabled: false, score: 50 },
-  { id: 'package', label: 'Package', enabled: false, score: 50 },
-]
-
-// ----- Step 2: Pipeline Stages -----
-interface PipelineStage {
-  id: string
-  label: string
-  enabled: boolean
-}
-
-const DEFAULT_PIPELINE_STAGES: PipelineStage[] = [
-  { id: 'class-filter', label: 'Class Filter', enabled: true },
-  { id: 'tracker', label: 'Tracker', enabled: true },
-  { id: 'sub-detection', label: 'Sub-Detection', enabled: false },
-  { id: 'recognition', label: 'Recognition', enabled: false },
-  { id: 'zone-analysis', label: 'Zone Analysis', enabled: false },
-  { id: 'event-generation', label: 'Event Generation', enabled: true },
-  { id: 'object-snapshot', label: 'Object Snapshot', enabled: true },
-]
-
-// ----- Step 3: Recording -----
-interface RecordingConfig {
-  enabled: boolean
-  retentionDays: number
-  format: 'mp4' | 'ts'
-}
-
-// ----- Step 4: Extensions -----
-interface Extension {
-  id: string
-  label: string
-  enabled: boolean
-}
-
-const DEFAULT_EXTENSIONS: Extension[] = [
-  { id: 'face-recognition', label: 'Face Recognition', enabled: false },
-  { id: 'plate-ocr', label: 'Plate OCR', enabled: false },
-  { id: 'audio-classifier', label: 'Audio Classifier', enabled: false },
-  { id: 'trail-capture', label: 'Trail Capture', enabled: false },
-]
-
-// ----- Wizard config state -----
-interface WizardConfig {
-  detectionClasses: DetectionClass[]
-  pipelineStages: PipelineStage[]
-  recording: RecordingConfig
-  extensions: Extension[]
-}
-
-const STEPS = [
-  'Detection Classes',
-  'Pipeline Stages',
-  'Recording',
-  'Extensions',
-  'Summary',
-] as const
-
-type Step = 0 | 1 | 2 | 3 | 4
-
-// ----- Sub-components -----
-
-function StepIndicator({ current, total }: { current: Step; total: number }) {
-  return (
-    <div className="flex items-center justify-center gap-2 mb-6">
-      {Array.from({ length: total }).map((_, i) => (
-        <div
-          key={i}
-          className={`rounded-full transition-all ${
-            i === current
-              ? 'h-2 w-6 bg-primary'
-              : i < current
-                ? 'h-2 w-2 bg-primary/50'
-                : 'h-2 w-2 bg-border'
-          }`}
-        />
-      ))}
-    </div>
-  )
-}
-
-function ToggleSwitch({
-  checked,
-  onChange,
-}: {
-  checked: boolean
-  onChange: (v: boolean) => void
-}) {
-  return (
-    <button
-      type="button"
-      role="switch"
-      aria-checked={checked}
-      onClick={() => onChange(!checked)}
-      className={`relative inline-flex h-5 w-9 flex-shrink-0 rounded-full border-2 border-transparent transition-colors focus:outline-none ${
-        checked ? 'bg-primary' : 'bg-border'
-      }`}
-    >
-      <span
-        className={`pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow transition-transform ${
-          checked ? 'translate-x-4' : 'translate-x-0'
-        }`}
-      />
-    </button>
-  )
-}
-
-// Step 1
-function Step1DetectionClasses({
-  classes,
-  onChange,
-}: {
-  classes: DetectionClass[]
-  onChange: (updated: DetectionClass[]) => void
-}) {
-  function toggleClass(id: string) {
-    onChange(classes.map((c) => (c.id === id ? { ...c, enabled: !c.enabled } : c)))
-  }
-
-  function setScore(id: string, score: number) {
-    onChange(classes.map((c) => (c.id === id ? { ...c, score } : c)))
-  }
-
-  return (
-    <div className="space-y-4">
-      <p className="text-xs text-foreground-subtle">
-        Enable detection classes and set minimum confidence scores.
-      </p>
-      {classes.map((cls) => (
-        <div key={cls.id} className="rounded-lg border border-border bg-background p-3 space-y-2">
-          <div className="flex items-center justify-between">
-            <span className="text-sm font-medium text-foreground">{cls.label}</span>
-            <ToggleSwitch checked={cls.enabled} onChange={() => toggleClass(cls.id)} />
-          </div>
-          {cls.enabled && (
-            <div className="flex items-center gap-3">
-              <span className="text-[11px] text-foreground-subtle w-16 flex-shrink-0">
-                Min score
-              </span>
-              <input
-                type="range"
-                min={0}
-                max={100}
-                value={cls.score}
-                onChange={(e) => setScore(cls.id, Number(e.target.value))}
-                className="flex-1 accent-primary"
-              />
-              <span className="text-[11px] text-foreground w-8 text-right">{cls.score}%</span>
-            </div>
-          )}
-        </div>
-      ))}
-    </div>
-  )
-}
-
-// Step 2
-function Step2PipelineStages({
-  stages,
-  onChange,
-}: {
-  stages: PipelineStage[]
-  onChange: (updated: PipelineStage[]) => void
-}) {
-  function toggleStage(id: string) {
-    onChange(stages.map((s) => (s.id === id ? { ...s, enabled: !s.enabled } : s)))
-  }
-
-  return (
-    <div className="space-y-3">
-      <p className="text-xs text-foreground-subtle">
-        Toggle processing stages for the detection pipeline.
-      </p>
-      {stages.map((stage) => (
-        <div
-          key={stage.id}
-          className="flex items-center justify-between rounded-lg border border-border bg-background px-3 py-2.5"
-        >
-          <span className="text-sm text-foreground">{stage.label}</span>
-          <ToggleSwitch checked={stage.enabled} onChange={() => toggleStage(stage.id)} />
-        </div>
-      ))}
-    </div>
-  )
-}
-
-// Step 3
-function Step3Recording({
-  config,
-  onChange,
-}: {
-  config: RecordingConfig
-  onChange: (updated: RecordingConfig) => void
-}) {
-  return (
-    <div className="space-y-4">
-      <p className="text-xs text-foreground-subtle">Configure recording behavior for this device.</p>
-
-      <div className="flex items-center justify-between rounded-lg border border-border bg-background px-3 py-2.5">
-        <span className="text-sm text-foreground">Enable Recording</span>
-        <ToggleSwitch
-          checked={config.enabled}
-          onChange={(v) => onChange({ ...config, enabled: v })}
-        />
-      </div>
-
-      {config.enabled && (
-        <>
-          <div className="rounded-lg border border-border bg-background p-3 space-y-2">
-            <div className="flex items-center justify-between">
-              <span className="text-sm font-medium text-foreground">Retention</span>
-              <span className="text-sm text-primary font-medium">{config.retentionDays} days</span>
-            </div>
-            <input
-              type="range"
-              min={1}
-              max={90}
-              value={config.retentionDays}
-              onChange={(e) => onChange({ ...config, retentionDays: Number(e.target.value) })}
-              className="w-full accent-primary"
-            />
-            <div className="flex justify-between text-[10px] text-foreground-subtle">
-              <span>1 day</span>
-              <span>90 days</span>
-            </div>
-          </div>
-
-          <div className="rounded-lg border border-border bg-background p-3 space-y-2">
-            <span className="text-sm font-medium text-foreground block">Format</span>
-            <div className="flex gap-2">
-              {(['mp4', 'ts'] as const).map((fmt) => (
-                <button
-                  key={fmt}
-                  type="button"
-                  onClick={() => onChange({ ...config, format: fmt })}
-                  className={`flex-1 rounded-lg border py-2 text-xs font-medium transition-colors ${
-                    config.format === fmt
-                      ? 'border-primary bg-primary/10 text-primary'
-                      : 'border-border text-foreground-subtle hover:text-foreground'
-                  }`}
-                >
-                  .{fmt}
-                </button>
-              ))}
-            </div>
-          </div>
-        </>
-      )}
-    </div>
-  )
-}
-
-// Step 4
-function Step4Extensions({
-  extensions,
-  onChange,
-}: {
-  extensions: Extension[]
-  onChange: (updated: Extension[]) => void
-}) {
-  function toggleExtension(id: string) {
-    onChange(extensions.map((e) => (e.id === id ? { ...e, enabled: !e.enabled } : e)))
-  }
-
-  return (
-    <div className="space-y-3">
-      <p className="text-xs text-foreground-subtle">Enable optional processing add-ons.</p>
-      {extensions.map((ext) => (
-        <div
-          key={ext.id}
-          className="flex items-center justify-between rounded-lg border border-border bg-background px-3 py-2.5"
-        >
-          <span className="text-sm text-foreground">{ext.label}</span>
-          <ToggleSwitch checked={ext.enabled} onChange={() => toggleExtension(ext.id)} />
-        </div>
-      ))}
-    </div>
-  )
-}
-
-// Step 5 Summary
-function Step5Summary({ config }: { config: WizardConfig }) {
-  const enabledClasses = config.detectionClasses.filter((c) => c.enabled)
-  const enabledStages = config.pipelineStages.filter((s) => s.enabled)
-  const enabledExtensions = config.extensions.filter((e) => e.enabled)
-
-  return (
-    <div className="space-y-4">
-      <p className="text-xs text-foreground-subtle">Review your configuration before applying.</p>
-
-      {/* Detection classes */}
-      <div className="rounded-lg border border-border bg-background p-3 space-y-1">
-        <span className="text-[11px] font-semibold text-foreground uppercase tracking-wider">
-          Detection Classes
-        </span>
-        {enabledClasses.length === 0 ? (
-          <p className="text-xs text-foreground-subtle">None enabled</p>
-        ) : (
-          enabledClasses.map((c) => (
-            <div key={c.id} className="flex justify-between text-xs">
-              <span className="text-foreground">{c.label}</span>
-              <span className="text-foreground-subtle">{c.score}% min score</span>
-            </div>
-          ))
-        )}
-      </div>
-
-      {/* Pipeline stages */}
-      <div className="rounded-lg border border-border bg-background p-3 space-y-1">
-        <span className="text-[11px] font-semibold text-foreground uppercase tracking-wider">
-          Pipeline Stages
-        </span>
-        {enabledStages.length === 0 ? (
-          <p className="text-xs text-foreground-subtle">None enabled</p>
-        ) : (
-          <div className="flex flex-wrap gap-1 mt-1">
-            {enabledStages.map((s) => (
-              <span
-                key={s.id}
-                className="inline-flex items-center rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-medium text-primary"
-              >
-                {s.label}
-              </span>
-            ))}
-          </div>
-        )}
-      </div>
-
-      {/* Recording */}
-      <div className="rounded-lg border border-border bg-background p-3 space-y-1">
-        <span className="text-[11px] font-semibold text-foreground uppercase tracking-wider">
-          Recording
-        </span>
-        {config.recording.enabled ? (
-          <div className="text-xs text-foreground space-y-0.5">
-            <div className="flex justify-between">
-              <span>Status</span>
-              <span className="text-success">Enabled</span>
-            </div>
-            <div className="flex justify-between">
-              <span>Retention</span>
-              <span>{config.recording.retentionDays} days</span>
-            </div>
-            <div className="flex justify-between">
-              <span>Format</span>
-              <span>.{config.recording.format}</span>
-            </div>
-          </div>
-        ) : (
-          <p className="text-xs text-foreground-subtle">Disabled</p>
-        )}
-      </div>
-
-      {/* Extensions */}
-      <div className="rounded-lg border border-border bg-background p-3 space-y-1">
-        <span className="text-[11px] font-semibold text-foreground uppercase tracking-wider">
-          Extensions
-        </span>
-        {enabledExtensions.length === 0 ? (
-          <p className="text-xs text-foreground-subtle">None enabled</p>
-        ) : (
-          <div className="flex flex-wrap gap-1 mt-1">
-            {enabledExtensions.map((e) => (
-              <span
-                key={e.id}
-                className="inline-flex items-center rounded-full bg-success/10 px-2 py-0.5 text-[10px] font-medium text-success"
-              >
-                {e.label}
-              </span>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-
-// ----- Main Wizard -----
-
-export function QuickConfigWizard({ open, onClose, deviceId }: QuickConfigWizardProps) {
-  const [step, setStep] = useState<Step>(0)
-  const [config, setConfig] = useState<WizardConfig>({
-    detectionClasses: DEFAULT_DETECTION_CLASSES,
-    pipelineStages: DEFAULT_PIPELINE_STAGES,
-    recording: { enabled: false, retentionDays: 14, format: 'mp4' },
-    extensions: DEFAULT_EXTENSIONS,
-  })
-
-  if (!open) return null
-
-  function handleApply() {
-    console.log('[QuickConfigWizard] Applying config for device', deviceId, config)
-    onClose()
-  }
-
-  function handleClose() {
-    setStep(0)
-    onClose()
-  }
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
-      <div className="w-full max-w-lg rounded-xl border border-border bg-surface p-6 shadow-2xl">
-        {/* Header */}
-        <div className="flex items-center justify-between mb-2">
-          <div className="flex items-center gap-2">
-            <Zap className="h-4 w-4 text-primary" />
-            <h2 className="text-sm font-semibold text-foreground">Quick Config</h2>
-          </div>
-          <button
-            onClick={handleClose}
-            className="text-foreground-subtle hover:text-foreground transition-colors p-1 rounded"
-          >
-            <X className="h-4 w-4" />
-          </button>
-        </div>
-
-        {/* Step title */}
-        <p className="text-xs text-foreground-subtle mb-4">
-          Step {step + 1} of {STEPS.length} — {STEPS[step]}
-        </p>
-
-        {/* Step indicator dots */}
-        <StepIndicator current={step} total={STEPS.length} />
-
-        {/* Step content */}
-        <div className="min-h-[300px] max-h-[420px] overflow-y-auto">
-          {step === 0 && (
-            <Step1DetectionClasses
-              classes={config.detectionClasses}
-              onChange={(detectionClasses) => setConfig((prev) => ({ ...prev, detectionClasses }))}
-            />
-          )}
-          {step === 1 && (
-            <Step2PipelineStages
-              stages={config.pipelineStages}
-              onChange={(pipelineStages) => setConfig((prev) => ({ ...prev, pipelineStages }))}
-            />
-          )}
-          {step === 2 && (
-            <Step3Recording
-              config={config.recording}
-              onChange={(recording) => setConfig((prev) => ({ ...prev, recording }))}
-            />
-          )}
-          {step === 3 && (
-            <Step4Extensions
-              extensions={config.extensions}
-              onChange={(extensions) => setConfig((prev) => ({ ...prev, extensions }))}
-            />
-          )}
-          {step === 4 && <Step5Summary config={config} />}
-        </div>
-
-        {/* Navigation */}
-        <div className="flex items-center justify-between mt-6 pt-4 border-t border-border">
-          <button
-            onClick={() => setStep((s) => (s - 1) as Step)}
-            disabled={step === 0}
-            className="inline-flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-xs font-medium text-foreground-subtle hover:text-foreground hover:bg-surface-hover disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
-          >
-            <ChevronLeft className="h-3.5 w-3.5" />
-            Back
-          </button>
-
-          {step < 4 ? (
-            <button
-              onClick={() => setStep((s) => (s + 1) as Step)}
-              className="inline-flex items-center gap-1.5 rounded-lg bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
-            >
-              Next
-              <ChevronRight className="h-3.5 w-3.5" />
-            </button>
-          ) : (
-            <button
-              onClick={handleApply}
-              className="inline-flex items-center gap-1.5 rounded-lg bg-success px-4 py-1.5 text-xs font-medium text-white hover:bg-success/90 transition-colors"
-            >
-              <Check className="h-3.5 w-3.5" />
-              Apply
-            </button>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/components/device/tabs/DetectionConfigTab.tsx

@@ -1,96 +0,0 @@
-import { useState } from 'react'
-
-interface ClassConfig {
-  id: string
-  label: string
-  enabled: boolean
-  score: number
-}
-
-const DEFAULT_CLASSES: ClassConfig[] = [
-  { id: 'person', label: 'Person', enabled: true, score: 0.5 },
-  { id: 'vehicle', label: 'Vehicle', enabled: true, score: 0.5 },
-  { id: 'animal', label: 'Animal', enabled: false, score: 0.5 },
-  { id: 'package', label: 'Package', enabled: false, score: 0.5 },
-]
-
-const DEFAULT_STAGES = [
-  { id: 'motion_filter', label: 'Motion Filter' },
-  { id: 'object_detection', label: 'Object Detection' },
-  { id: 'zone_filter', label: 'Zone Filter' },
-  { id: 'tracking', label: 'Tracking' },
-  { id: 'event_aggregation', label: 'Event Aggregation' },
-]
-
-export function DetectionConfigTab() {
-  const [classes] = useState<ClassConfig[]>(DEFAULT_CLASSES)
-  const [stages] = useState(
-    DEFAULT_STAGES.map((s) => ({ ...s, enabled: true }))
-  )
-
-  return (
-    <div className="space-y-6">
-      {/* Primary Detection Classes */}
-      <div className="rounded-lg border border-border bg-surface overflow-hidden">
-        <div className="border-b border-border px-4 py-2.5">
-          <h2 className="text-xs font-semibold text-foreground uppercase tracking-wider">Detection Classes</h2>
-          <p className="text-[11px] text-foreground-subtle mt-0.5">Read-only — configuration editing coming soon</p>
-        </div>
-        <div className="divide-y divide-border">
-          {classes.map((cls) => (
-            <div key={cls.id} className="flex items-center gap-4 px-4 py-3">
-              <input
-                type="checkbox"
-                checked={cls.enabled}
-                readOnly
-                className="h-3.5 w-3.5 rounded border-border text-primary accent-primary cursor-not-allowed opacity-70"
-              />
-              <span className="w-20 text-xs font-medium text-foreground">{cls.label}</span>
-              <div className="flex flex-1 items-center gap-3">
-                <input
-                  type="range"
-                  min={0}
-                  max={1}
-                  step={0.01}
-                  value={cls.score}
-                  readOnly
-                  className="flex-1 accent-primary cursor-not-allowed opacity-70"
-                />
-                <span className="w-10 text-right text-[11px] font-mono text-foreground-subtle">
-                  {cls.score.toFixed(2)}
-                </span>
-              </div>
-              <span className="text-[10px] text-foreground-subtle w-12">min score</span>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Pipeline Stages */}
-      <div className="rounded-lg border border-border bg-surface overflow-hidden">
-        <div className="border-b border-border px-4 py-2.5">
-          <h2 className="text-xs font-semibold text-foreground uppercase tracking-wider">Pipeline Stages</h2>
-          <p className="text-[11px] text-foreground-subtle mt-0.5">Read-only — stage control coming soon</p>
-        </div>
-        <div className="divide-y divide-border">
-          {stages.map((stage) => (
-            <div key={stage.id} className="flex items-center justify-between px-4 py-3">
-              <span className="text-xs text-foreground">{stage.label}</span>
-              <div
-                className={`relative inline-flex h-5 w-9 flex-shrink-0 cursor-not-allowed rounded-full border-2 border-transparent transition-colors opacity-70 ${
-                  stage.enabled ? 'bg-primary' : 'bg-foreground-subtle/30'
-                }`}
-              >
-                <span
-                  className={`inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition-transform ${
-                    stage.enabled ? 'translate-x-4' : 'translate-x-0'
-                  }`}
-                />
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/components/device/tabs/EventsTab.tsx

@@ -1,19 +0,0 @@
-import { Bell } from 'lucide-react'
-
-export function EventsTab() {
-  return (
-    <div className="rounded-lg border border-border bg-surface overflow-hidden">
-      <div className="border-b border-border px-4 py-2.5 flex items-center justify-between">
-        <h2 className="text-xs font-semibold text-foreground uppercase tracking-wider">Event Timeline</h2>
-        <span className="inline-flex items-center gap-1 rounded-full bg-foreground-subtle/10 px-2 py-0.5 text-[10px] text-foreground-subtle">
-          0 events
-        </span>
-      </div>
-      <div className="flex flex-col items-center justify-center py-16 text-foreground-subtle">
-        <Bell className="h-8 w-8 mb-3 opacity-30" />
-        <p className="text-sm">No events</p>
-        <p className="text-xs mt-1 opacity-70">Device events will appear here as they occur</p>
-      </div>
-    </div>
-  )
-}

package/src/components/device/tabs/LogsTab.tsx

@@ -1,22 +0,0 @@
-import { ScrollText } from 'lucide-react'
-
-export function LogsTab() {
-  return (
-    <div className="rounded-lg border border-border bg-surface overflow-hidden">
-      <div className="border-b border-border px-4 py-2.5 flex items-center justify-between">
-        <div>
-          <h2 className="text-xs font-semibold text-foreground uppercase tracking-wider">Device Logs</h2>
-          <p className="text-[11px] text-foreground-subtle mt-0.5">Scoped log stream for this device</p>
-        </div>
-        <span className="inline-flex items-center gap-1.5 rounded-full bg-info/10 px-2.5 py-0.5 text-[10px] font-medium text-info">
-          Coming with backend integration
-        </span>
-      </div>
-      <div className="flex flex-col items-center justify-center py-16 text-foreground-subtle">
-        <ScrollText className="h-8 w-8 mb-3 opacity-30" />
-        <p className="text-sm font-medium text-foreground">Device logs</p>
-        <p className="text-xs mt-1 opacity-70">Device logs — coming with backend integration</p>
-      </div>
-    </div>
-  )
-}