@camstack/addon-admin-ui 0.1.1 → 0.1.3

package/src/components/dashboard/BlockWrapper.tsx

@@ -1,97 +0,0 @@
-import { useState } from 'react'
-import { Settings, X, GripVertical } from 'lucide-react'
-import type { DashboardBlock } from '../../types/dashboard'
-
-interface BlockWrapperProps {
-  block: DashboardBlock
-  config: Record<string, unknown>
-  size: { w: number; h: number }
-  onRemove: () => void
-  onConfigChange: (config: Record<string, unknown>) => void
-}
-
-export function BlockWrapper({ block, config, size, onRemove, onConfigChange }: BlockWrapperProps) {
-  const [showConfig, setShowConfig] = useState(false)
-  const Component = block.component
-  const Icon = block.icon
-
-  return (
-    <div className="flex flex-col h-full rounded-lg border border-border bg-surface shadow-sm shadow-black/5 overflow-hidden hover:shadow-md hover:shadow-black/8 transition-shadow">
-      {/* Title bar */}
-      <div className="drag-handle flex items-center h-8 px-2 border-b border-border bg-surface/80 shrink-0 cursor-move group">
-        <GripVertical className="h-3 w-3 text-foreground-subtle/30 group-hover:text-foreground-subtle transition-colors mr-1" />
-        <Icon className="h-3 w-3 text-primary/70 mr-1.5 shrink-0" />
-        <span className="text-[11px] font-semibold text-foreground/80 truncate flex-1">
-          {block.name}
-        </span>
-        <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
-          {block.configSchema && block.configSchema.length > 0 && (
-            <button
-              onClick={(e) => { e.stopPropagation(); setShowConfig(!showConfig) }}
-              className="p-1 rounded-md hover:bg-surface-hover text-foreground-subtle hover:text-foreground transition-colors"
-            >
-              <Settings className="h-3 w-3" />
-            </button>
-          )}
-          <button
-            onClick={(e) => { e.stopPropagation(); onRemove() }}
-            className="p-1 rounded-md hover:bg-danger/10 text-foreground-subtle hover:text-danger transition-colors"
-          >
-            <X className="h-3 w-3" />
-          </button>
-        </div>
-      </div>
-
-      {/* Config panel */}
-      {showConfig && block.configSchema && (
-        <div className="p-2.5 border-b border-border bg-background/50 space-y-2">
-          {block.configSchema.map((field) => (
-            <label key={field.key} className="flex items-center gap-2 text-[11px]">
-              <span className="text-foreground-subtle w-20 shrink-0">{field.label}</span>
-              {field.type === 'number' && (
-                <input
-                  type="number"
-                  value={(config[field.key] as number) ?? field.defaultValue ?? ''}
-                  onChange={(e) => onConfigChange({ ...config, [field.key]: Number(e.target.value) })}
-                  className="flex-1 rounded-md border border-border bg-surface px-2 py-1 text-foreground text-[11px] focus:border-primary outline-none"
-                />
-              )}
-              {field.type === 'text' && (
-                <input
-                  type="text"
-                  value={(config[field.key] as string) ?? field.defaultValue ?? ''}
-                  onChange={(e) => onConfigChange({ ...config, [field.key]: e.target.value })}
-                  className="flex-1 rounded-md border border-border bg-surface px-2 py-1 text-foreground text-[11px] focus:border-primary outline-none"
-                />
-              )}
-              {field.type === 'boolean' && (
-                <input
-                  type="checkbox"
-                  checked={(config[field.key] as boolean) ?? field.defaultValue ?? false}
-                  onChange={(e) => onConfigChange({ ...config, [field.key]: e.target.checked })}
-                  className="accent-primary"
-                />
-              )}
-              {field.type === 'select' && (
-                <select
-                  value={(config[field.key] as string) ?? field.defaultValue ?? ''}
-                  onChange={(e) => onConfigChange({ ...config, [field.key]: e.target.value })}
-                  className="flex-1 rounded-md border border-border bg-surface px-2 py-1 text-foreground text-[11px] focus:border-primary outline-none"
-                >
-                  {field.options?.map((opt) => (
-                    <option key={opt.value} value={opt.value}>{opt.label}</option>
-                  ))}
-                </select>
-              )}
-            </label>
-          ))}
-        </div>
-      )}
-
-      {/* Block content */}
-      <div className="flex-1 overflow-auto p-3">
-        <Component config={config} size={size} />
-      </div>
-    </div>
-  )
-}

package/src/components/dashboard/DashboardGrid.tsx

@@ -1,160 +0,0 @@
-import { useCallback, useState } from 'react'
-import { ResponsiveGridLayout } from 'react-grid-layout'
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const GridLayout = ResponsiveGridLayout as any
-import { Plus, LayoutDashboard } from 'lucide-react'
-import { BlockWrapper } from './BlockWrapper'
-import { BlockPicker } from './BlockPicker'
-import { getBlock } from './block-registry'
-import type { DashboardBlock, DashboardLayoutItem, DashboardState } from '../../types/dashboard'
-import 'react-grid-layout/css/styles.css'
-
-const STORAGE_KEY = 'camstack-dashboard-state'
-const BREAKPOINTS = { lg: 1200, md: 996, sm: 768, xs: 0 }
-const COLS = { lg: 12, md: 8, sm: 4, xs: 2 }
-
-function loadState(): DashboardState {
-  try {
-    const raw = localStorage.getItem(STORAGE_KEY)
-    if (raw) return JSON.parse(raw)
-  } catch { /* ignore */ }
-  return { items: [] }
-}
-
-function saveState(state: DashboardState): void {
-  localStorage.setItem(STORAGE_KEY, JSON.stringify(state))
-}
-
-let instanceCounter = 0
-
-export function DashboardGrid() {
-  const [state, setState] = useState<DashboardState>(loadState)
-  const [pickerOpen, setPickerOpen] = useState(false)
-
-  const updateState = useCallback((next: DashboardState) => {
-    setState(next)
-    saveState(next)
-  }, [])
-
-  const handleAddBlock = useCallback((block: DashboardBlock) => {
-    instanceCounter++
-    const instanceId = `${block.id}-${instanceCounter}`
-    const defaultConfig: Record<string, unknown> = {}
-    block.configSchema?.forEach((f) => {
-      if (f.defaultValue !== undefined) defaultConfig[f.key] = f.defaultValue
-    })
-
-    const newItem: DashboardLayoutItem = {
-      i: instanceId,
-      blockId: block.id,
-      x: 0,
-      y: Infinity, // place at bottom
-      w: block.defaultSize.w,
-      h: block.defaultSize.h,
-      config: defaultConfig,
-    }
-
-    updateState({ items: [...state.items, newItem] })
-  }, [state, updateState])
-
-  const handleRemoveBlock = useCallback((instanceId: string) => {
-    updateState({ items: state.items.filter((item) => item.i !== instanceId) })
-  }, [state, updateState])
-
-  const handleConfigChange = useCallback((instanceId: string, config: Record<string, unknown>) => {
-    updateState({
-      items: state.items.map((item) =>
-        item.i === instanceId ? { ...item, config } : item,
-      ),
-    })
-  }, [state, updateState])
-
-  const handleLayoutChange = useCallback((layout: any) => {
-    updateState({
-      items: state.items.map((item) => {
-        const layoutItem = layout.find((l: any) => l.i === item.i)
-        if (!layoutItem) return item
-        return { ...item, x: layoutItem.x, y: layoutItem.y, w: layoutItem.w, h: layoutItem.h }
-      }),
-    })
-  }, [state, updateState])
-
-  const gridLayout = state.items.map((item) => {
-    const block = getBlock(item.blockId)
-    return {
-      i: item.i,
-      x: item.x,
-      y: item.y,
-      w: item.w,
-      h: item.h,
-      minW: block?.minSize?.w ?? 2,
-      minH: block?.minSize?.h ?? 2,
-    }
-  })
-
-  return (
-    <div className="p-4">
-      <div className="flex items-center justify-between mb-4">
-        <h1 className="text-lg font-semibold text-foreground">Dashboard</h1>
-        <button
-          onClick={() => setPickerOpen(true)}
-          className="flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground"
-        >
-          <Plus className="h-3.5 w-3.5" />
-          Add Block
-        </button>
-      </div>
-
-      {state.items.length === 0 ? (
-        <div className="flex flex-col items-center justify-center py-24 text-foreground-subtle">
-          <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-surface border border-border mb-4">
-            <LayoutDashboard className="h-8 w-8 text-foreground-subtle/40" />
-          </div>
-          <p className="text-sm font-medium text-foreground/70">Your dashboard is empty</p>
-          <p className="text-xs text-foreground-subtle mt-1 mb-4">Add blocks to monitor your cameras and system</p>
-          <button
-            onClick={() => setPickerOpen(true)}
-            className="flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-xs font-semibold text-primary-foreground shadow-md shadow-primary/20 hover:shadow-lg transition-all"
-          >
-            <Plus className="h-3.5 w-3.5" />
-            Add your first block
-          </button>
-        </div>
-      ) : (
-        <GridLayout
-          layouts={{ lg: gridLayout }}
-          breakpoints={BREAKPOINTS}
-          cols={COLS}
-          rowHeight={60}
-          draggableHandle=".drag-handle"
-          onLayoutChange={handleLayoutChange}
-          isResizable
-          isDraggable
-        >
-          {state.items.map((item) => {
-            const block = getBlock(item.blockId)
-            if (!block) return <div key={item.i} />
-            return (
-              <div key={item.i}>
-                <BlockWrapper
-                  block={block}
-                  config={item.config}
-                  size={{ w: item.w, h: item.h }}
-                  onRemove={() => handleRemoveBlock(item.i)}
-                  onConfigChange={(config) => handleConfigChange(item.i, config)}
-                />
-              </div>
-            )
-          })}
-        </GridLayout>
-      )}
-
-      <BlockPicker
-        open={pickerOpen}
-        onClose={() => setPickerOpen(false)}
-        onSelect={handleAddBlock}
-      />
-    </div>
-  )
-}

package/src/components/dashboard/block-registry.ts

@@ -1,15 +0,0 @@
-import type { DashboardBlock } from '../../types/dashboard'
-
-const registry = new Map<string, DashboardBlock>()
-
-export function registerBlock(block: DashboardBlock): void {
-  registry.set(block.id, block)
-}
-
-export function getBlock(id: string): DashboardBlock | undefined {
-  return registry.get(id)
-}
-
-export function getAllBlocks(): DashboardBlock[] {
-  return Array.from(registry.values())
-}

package/src/components/dashboard/blocks/PipelineStagesBlock.tsx

@@ -1,39 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-import { useBackendClient } from '../../../hooks/useBackendClient'
-import type { BlockProps } from '../../../types/dashboard'
-
-const STAGE_ORDER = [
-  'class-filter', 'tracker', 'sub-detection', 'recognition',
-  'zone-analysis', 'event-generation', 'object-snapshot',
-]
-
-export function PipelineStagesBlock({ config, size }: BlockProps) {
-  const client = useBackendClient()
-  const { data, isLoading, error } = useQuery({
-    queryKey: ['pipelines'],
-    queryFn: () => client.listPipelines(),
-    refetchInterval: 5_000,
-  })
-
-  if (isLoading) return <div className="text-xs text-foreground-subtle animate-pulse">Loading...</div>
-  if (error) return <div className="text-xs text-danger">Failed to load pipelines</div>
-
-  const pipelines = (data ?? []) as Array<Record<string, unknown>>
-
-  return (
-    <div className="space-y-2 text-xs">
-      <div className="flex justify-between text-foreground-subtle">
-        <span>Active pipelines</span>
-        <span className="font-medium text-foreground">{pipelines.length}</span>
-      </div>
-      <div className="space-y-0.5">
-        {STAGE_ORDER.map((stage) => (
-          <div key={stage} className="flex items-center gap-1.5">
-            <div className="h-1.5 w-1.5 rounded-full bg-success shrink-0" />
-            <span className="text-foreground-subtle">{stage}</span>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}

package/src/components/dashboard/blocks/StorageBlock.tsx

@@ -1,66 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-import { useBackendClient } from '../../../hooks/useBackendClient'
-import type { BlockProps } from '../../../types/dashboard'
-
-interface SystemInfo {
-  version?: string
-  uptime?: number
-  nodeVersion?: string
-  platform?: string
-  [key: string]: unknown
-}
-
-function formatUptime(seconds: number): string {
-  if (seconds < 60) return `${Math.floor(seconds)}s`
-  if (seconds < 3600) return `${Math.floor(seconds / 60)}m`
-  const h = Math.floor(seconds / 3600)
-  const m = Math.floor((seconds % 3600) / 60)
-  return `${h}h ${m}m`
-}
-
-export function StorageBlock({ config: _config, size: _size }: BlockProps) {
-  const client = useBackendClient()
-
-  const { data: systemInfo, isLoading, error } = useQuery<SystemInfo>({
-    queryKey: ['system-info'],
-    queryFn: async () => {
-      const result = await client.getSystemInfo()
-      return result as SystemInfo
-    },
-    refetchInterval: 30_000,
-  })
-
-  const { data: addons } = useQuery({
-    queryKey: ['storage-addons'],
-    queryFn: () => client.listAddons(),
-    refetchInterval: 60_000,
-  })
-
-  if (isLoading) return <div className="text-xs text-foreground-subtle animate-pulse">Loading...</div>
-  if (error) return <div className="text-xs text-danger">Failed to load system info</div>
-
-  const addonList = (addons ?? []) as Array<{ manifest: { id: string } }>
-
-  return (
-    <div className="space-y-1.5 text-xs">
-      <div className="flex justify-between">
-        <span className="text-foreground-subtle">Platform</span>
-        <span className="text-foreground font-medium">{systemInfo?.platform ?? 'N/A'}</span>
-      </div>
-      <div className="flex justify-between">
-        <span className="text-foreground-subtle">Uptime</span>
-        <span className="text-foreground font-medium">
-          {systemInfo?.uptime != null ? formatUptime(systemInfo.uptime) : 'N/A'}
-        </span>
-      </div>
-      <div className="flex justify-between">
-        <span className="text-foreground-subtle">Node</span>
-        <span className="text-foreground font-medium font-mono">{systemInfo?.nodeVersion ?? 'N/A'}</span>
-      </div>
-      <div className="flex justify-between">
-        <span className="text-foreground-subtle">Addons</span>
-        <span className="text-foreground font-medium">{addonList.length} installed</span>
-      </div>
-    </div>
-  )
-}

package/src/components/dashboard/blocks/SystemStatusBlock.tsx

@@ -1,67 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-import { CheckCircle, AlertTriangle, Loader2 } from 'lucide-react'
-import { useBackendClient } from '../../../hooks/useBackendClient'
-import type { BlockProps } from '../../../types/dashboard'
-
-export function SystemStatusBlock({ config, size }: BlockProps) {
-  const client = useBackendClient()
-  const { data, isLoading, error } = useQuery({
-    queryKey: ['system-info'],
-    queryFn: () => client.getSystemInfo(),
-    refetchInterval: 10_000,
-  })
-
-  if (isLoading) {
-    return (
-      <div className="flex items-center gap-2 text-xs text-foreground-subtle">
-        <Loader2 className="h-3.5 w-3.5 animate-spin" />
-        <span>Connecting to server...</span>
-      </div>
-    )
-  }
-
-  if (error) {
-    return (
-      <div className="flex items-center gap-2 text-xs text-danger">
-        <AlertTriangle className="h-3.5 w-3.5" />
-        <span>Unable to reach server</span>
-      </div>
-    )
-  }
-
-  const info = data as Record<string, unknown> | undefined
-
-  return (
-    <div className="space-y-2 text-xs">
-      <div className="flex items-center gap-1.5 mb-2">
-        <CheckCircle className="h-3.5 w-3.5 text-success" />
-        <span className="text-success font-medium">Online</span>
-      </div>
-      <Row label="Version" value={String(info?.version ?? 'N/A')} />
-      <Row label="Uptime" value={formatUptime(info?.uptime as number)} />
-      <Row label="Memory" value={`${formatMB(info?.memoryUsage as number)} MB`} />
-      <Row label="Platform" value={String(info?.platform ?? 'N/A')} />
-    </div>
-  )
-}
-
-function Row({ label, value }: { label: string; value: string }) {
-  return (
-    <div className="flex justify-between items-center">
-      <span className="text-foreground-subtle">{label}</span>
-      <span className="text-foreground font-medium tabular-nums">{value}</span>
-    </div>
-  )
-}
-
-function formatUptime(seconds?: number): string {
-  if (!seconds) return 'N/A'
-  const h = Math.floor(seconds / 3600)
-  const m = Math.floor((seconds % 3600) / 60)
-  return h > 0 ? `${h}h ${m}m` : `${m}m`
-}
-
-function formatMB(bytes?: number): string {
-  if (!bytes) return 'N/A'
-  return (bytes / 1024 / 1024).toFixed(0)
-}

package/src/components/dashboard/blocks/index.ts

@@ -1,32 +0,0 @@
-import { Monitor, Workflow, HardDrive } from 'lucide-react'
-import { registerBlock } from '../block-registry'
-import { SystemStatusBlock } from './SystemStatusBlock'
-import { PipelineStagesBlock } from './PipelineStagesBlock'
-import { StorageBlock } from './StorageBlock'
-
-registerBlock({
-  id: 'system-status',
-  name: 'System Status',
-  icon: Monitor,
-  defaultSize: { w: 4, h: 2 },
-  minSize: { w: 2, h: 2 },
-  component: SystemStatusBlock,
-})
-
-registerBlock({
-  id: 'pipeline-stages',
-  name: 'Pipeline Stages',
-  icon: Workflow,
-  defaultSize: { w: 4, h: 3 },
-  minSize: { w: 3, h: 2 },
-  component: PipelineStagesBlock,
-})
-
-registerBlock({
-  id: 'storage',
-  name: 'Storage',
-  icon: HardDrive,
-  defaultSize: { w: 4, h: 2 },
-  minSize: { w: 2, h: 2 },
-  component: StorageBlock,
-})

package/src/components/device/DeviceHeader.tsx

@@ -1,116 +0,0 @@
-import { useState } from 'react'
-import { Link } from 'react-router-dom'
-import { ChevronRight, Video, ScrollText, Terminal, Bell, Zap } from 'lucide-react'
-import { StatusBadge } from '../shared/StatusBadge'
-import { ProviderIcon, getProviderLabel } from '../shared/ProviderIcon'
-import { CapabilityBadges } from '../shared/CapabilityBadges'
-import { QuickConfigWizard } from './QuickConfigWizard'
-import type { PanelId } from './FloatingPanelManager'
-
-interface DeviceHeaderProps {
-  deviceId: string
-  name: string
-  status: string
-  provider: string
-  capabilities: string[]
-  activePanel: PanelId | null
-  onTogglePanel: (panel: PanelId) => void
-}
-
-const PANEL_BUTTONS: Array<{
-  id: PanelId
-  icon: React.ComponentType<{ className?: string }>
-  label: string
-}> = [
-  { id: 'stream', icon: Video, label: 'Stream' },
-  { id: 'logs', icon: ScrollText, label: 'Logs' },
-  { id: 'repl', icon: Terminal, label: 'REPL' },
-  { id: 'events', icon: Bell, label: 'Events' },
-]
-
-export function DeviceHeader({
-  deviceId,
-  name,
-  status,
-  provider,
-  capabilities,
-  activePanel,
-  onTogglePanel,
-}: DeviceHeaderProps) {
-  const [wizardOpen, setWizardOpen] = useState(false)
-
-  return (
-    <>
-      <div className="border-b border-border bg-surface px-6 py-4">
-        {/* Breadcrumb */}
-        <nav className="flex items-center gap-1 text-[11px] text-foreground-subtle mb-3">
-          <Link to="/integrations" className="hover:text-foreground transition-colors">
-            Integrations
-          </Link>
-          <ChevronRight className="h-3 w-3" />
-          <span className="text-foreground-subtle">{getProviderLabel(provider)}</span>
-          <ChevronRight className="h-3 w-3" />
-          <span className="text-foreground">{name}</span>
-        </nav>
-
-        {/* Header row */}
-        <div className="flex items-center justify-between gap-4">
-          <div className="flex items-center gap-3 min-w-0">
-            <ProviderIcon type={provider} size="lg" />
-            <div className="min-w-0">
-              <div className="flex items-center gap-2">
-                <h1 className="text-base font-semibold text-foreground truncate">{name}</h1>
-                <StatusBadge status={status} />
-              </div>
-              <div className="mt-1">
-                <CapabilityBadges capabilities={capabilities} />
-              </div>
-            </div>
-          </div>
-
-          {/* Action buttons */}
-          <div className="flex items-center gap-1 flex-shrink-0">
-            {/* Quick Config wizard button */}
-            <button
-              onClick={() => setWizardOpen(true)}
-              title="Quick Config"
-              className="inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-[11px] font-medium border border-border text-foreground-subtle hover:text-foreground hover:bg-surface-hover transition-colors"
-            >
-              <Zap className="h-3.5 w-3.5" />
-              Quick Config
-            </button>
-
-            {/* Divider */}
-            <div className="h-5 w-px bg-border mx-1" />
-
-            {/* Floating panel toggle buttons */}
-            {PANEL_BUTTONS.map(({ id, icon: Icon, label }) => {
-              const isActive = activePanel === id
-              return (
-                <button
-                  key={id}
-                  onClick={() => onTogglePanel(id)}
-                  title={label}
-                  className={`inline-flex items-center justify-center rounded-lg p-2 transition-colors ${
-                    isActive
-                      ? 'bg-primary/15 text-primary'
-                      : 'text-foreground-subtle hover:text-foreground hover:bg-surface-hover'
-                  }`}
-                >
-                  <Icon className="h-4 w-4" />
-                </button>
-              )
-            })}
-          </div>
-        </div>
-      </div>
-
-      {/* Quick Config Wizard (modal) */}
-      <QuickConfigWizard
-        open={wizardOpen}
-        onClose={() => setWizardOpen(false)}
-        deviceId={deviceId}
-      />
-    </>
-  )
-}