Widgets

Biblioteca de widgets especificos del dominio organizada por categoria incluyendo graficas, multimedia, controles IoT, integraciones Nextcloud y componentes de automatizacion.

Última actualización: 2025-02-18

Widgets

Los 112+ widgets de Certexi son componentes construidos a proposito para logistica y gestion de almacenes. Cada widget es autocontenido con su propia obtencion de datos, gestion de estado y manejo de errores.

Widgets de Graficas

Componentes de visualizacion de datos impulsados por Recharts:

Widget	Descripcion
`ThroughputChart`	Unidades procesadas en el tiempo (barra/linea)
`UtilizationGauge`	Indicador de capacidad de zona con umbrales
`StageDistribution`	Grafica de pastel de unidades por etapa de flujo
`WeightVarianceChart`	Comparacion de peso de entrada vs salida
`OperatorPerformance`	Grafica de barras de unidades por operador
`DwellTimeHeatmap`	Mapa de calor de tiempo por etapa
`IncidentTrend`	Frecuencia de incidentes en el tiempo
`ComplianceScore`	Progreso radial de KPI de cumplimiento

Uso

import { ThroughputChart } from '@/components/widgets/charts/throughput-chart';

<ThroughputChart warehouseId={1} period="7d" granularity="day" height={300} />;

Sandbox de KPI / indicador

Tarjetas estilo widget usando las mismas primitivas (Progress, Badge, Card):

Tarjetas KPI

<div className="grid grid-cols-2 gap-4 max-w-lg">
  <Card>
    <CardHeader className="pb-2">
      <CardDescription>Unidades activas</CardDescription>
      <CardTitle className="text-2xl">24</CardTitle>
    </CardHeader>
    <CardContent>
      <Progress value={72} className="h-2" />
      <p className="text-xs text-muted-foreground mt-2">72% capacidad</p>
    </CardContent>
  </Card>
  <Card>
    <CardHeader className="pb-2">
      <CardDescription>Cumplimiento</CardDescription>
      <CardTitle className="text-2xl flex items-center gap-2">
        98% <Badge variant="secondary">OK</Badge>
      </CardTitle>
    </CardHeader>
    <CardContent>
      <Progress value={98} className="h-2" />
    </CardContent>
  </Card>
</div>

Widgets de Multimedia

Componentes para manejo de evidencia multimedia:

Widget	Descripcion
`PhotoCapture`	Captura con camara con metadatos EXIF
`PhotoGallery`	Cuadricula de fotos de evidencia con lightbox
`VideoPlayer`	Reproductor de video HLS para clips CCTV
`VideoRecorder`	Grabacion de clips cortos
`SignaturePad`	Captura de firma digital
`DocumentViewer`	Visor de documentos PDF e imagen
`AudioRecorder`	Grabacion de notas de voz
`QRScanner`	Overlay de escaneo QR/codigo de barras

Sandbox de estado y alertas

Widget de estado

<Card className="max-w-md">
  <CardHeader className="pb-2">
    <div className="flex items-center justify-between">
      <CardTitle>Camara 3 — Muelle de carga</CardTitle>
      <Badge variant="secondary">En vivo</Badge>
    </div>
    <CardDescription>Deteccion de movimiento habilitada</CardDescription>
  </CardHeader>
  <CardContent className="space-y-3">
    <Alert>
      <AlertTitle>Movimiento detectado</AlertTitle>
      <AlertDescription>
        Ultimo evento hace 2 min. Clip guardado en buffer.
      </AlertDescription>
    </Alert>
    <div className="flex gap-2">
      <Button size="sm">Ver clip</Button>
      <Button size="sm" variant="outline">Captura</Button>
    </div>
  </CardContent>
</Card>

Widgets IoT

Interaccion con dispositivos IoT en tiempo real:

Widget	Descripcion
`MotionClipControl`	Iniciar/detener deteccion de movimiento por camara
`EnhancedMotionViewer`	Deteccion combinada con overlay de IA
`BrowserDetectionOverlay`	Bounding boxes con TensorFlow.js
`CameraGrid`	Vista multi-camara con estado
`ScaleDisplay`	Display de lectura de bascula en tiempo real
`ScaleHistory`	Grafica de tendencia de lecturas de bascula
`NFCScanner`	Interfaz de lectura/escritura de tags NFC
`CameraStatus`	Estado de salud y streaming de camara

Control de Deteccion de Movimiento

import { MotionClipControl } from '@/components/iot/motion-clip-control';

<MotionClipControl
  cctvId={1}
  sessionId={123}
  compact={false}
  onStatusChange={(recording, stats) => {
    console.log('Recording:', recording, stats);
  }}
/>;

Widgets de Nextcloud

Componentes de integracion para servicios de Nextcloud:

Widget	Descripcion
`TablesBrowser`	Navegar y gestionar Nextcloud Tables
`TableEditor`	Edicion en linea de filas de tablas
`FilePicker`	Explorador y selector de archivos Nextcloud
`FileUploader`	Carga de archivos drag-and-drop a Nextcloud
`FormBuilder`	Integracion con Nextcloud Forms
`ShareManager`	Controles de comparticion de tablas/archivos
`ActivityFeed`	Feed de actividad reciente de Nextcloud

Widgets WHMS

Componentes especificos de gestion de almacen:

Widget	Descripcion
`FloorPlanCanvas`	Plano de planta interactivo con poligonos de slots
`SlotPolygon`	Componente individual de poligono de slot
`SlotSidebar`	Panel de detalles y propiedades de slot
`ZonePicker`	Seleccion y configuracion de zonas
`PlacementFlow`	Asistente completo de colocacion (escaneo -> foto -> confirmar)
`RemovalFlow`	Flujo de confirmacion de retiro
`UtilizationWidget`	Dashboard de utilizacion de zonas
`AssetLocator`	Busqueda y visualizacion de ubicacion de activos

Editor de Plano de Planta

import { FloorPlanCanvas } from '@/components/whms/layout-editor/floor-plan-canvas';

<FloorPlanCanvas
  floorPlanUrl="/floor-plans/warehouse-a.png"
  slots={slots}
  onSlotClick={(slot) => setSelectedSlot(slot)}
  editable={isAdmin}
/>;

Muchos widgets usan pestanas para Vista general / Evidencia / Linea de tiempo. Mismo patron con Tabs:

Widget con pestanas

<Tabs defaultValue="overview" className="max-w-lg">
  <TabsList>
    <TabsTrigger value="overview">Vista general</TabsTrigger>
    <TabsTrigger value="evidence">Evidencia</TabsTrigger>
    <TabsTrigger value="timeline">Linea de tiempo</TabsTrigger>
  </TabsList>
  <TabsContent value="overview" className="p-4 border rounded-b-md">
    <p className="text-sm text-muted-foreground">
      Detalles de la unidad de transporte y etapa actual. Graficas de rendimiento
      y utilizacion se renderizan aqui en widgets reales.
    </p>
  </TabsContent>
  <TabsContent value="evidence" className="p-4 border rounded-b-md">
    <p className="text-sm text-muted-foreground">
      Fotos, clips y documentos adjuntos a esta unidad.
    </p>
  </TabsContent>
  <TabsContent value="timeline" className="p-4 border rounded-b-md">
    <p className="text-sm text-muted-foreground">
      Linea de tiempo de eventos: pesaje, inspeccion, entrega.
    </p>
  </TabsContent>
</Tabs>

Sandbox de layout de dashboard

Cuadricula tipica de dashboard combinando varias tarjetas de widgets:

Layout de dashboard

<div className="grid grid-cols-2 gap-4 max-w-2xl">
  <Card>
    <CardHeader className="pb-2">
      <CardTitle className="text-base">Rendimiento (24h)</CardTitle>
    </CardHeader>
    <CardContent>
      <Progress value={65} className="h-2 mb-2" />
      <p className="text-xs text-muted-foreground">156 unidades</p>
    </CardContent>
  </Card>
  <Card>
    <CardHeader className="pb-2">
      <CardTitle className="text-base">Cola de aprobacion</CardTitle>
    </CardHeader>
    <CardContent>
      <p className="text-2xl font-semibold">3</p>
      <p className="text-xs text-muted-foreground">Pendientes</p>
    </CardContent>
  </Card>
  <Card className="col-span-2">
    <CardHeader className="pb-2">
      <CardTitle className="text-base">Actividad reciente</CardTitle>
    </CardHeader>
    <CardContent>
      <p className="text-sm text-muted-foreground">
        Cambios de etapa, pesajes y eventos de evidencia aparecen aqui.
      </p>
    </CardContent>
  </Card>
</div>

Widgets de Flujos de Trabajo

Componentes de gestion de flujos de trabajo aduanales:

Widget	Descripcion
`KanbanBoard`	Progresion de etapas con drag-and-drop
`StageCard`	Tarjeta de unidad de transporte con estado de evidencia
`WorkflowTimeline`	Linea de tiempo de eventos de una unidad
`ApprovalQueue`	Aprobaciones pendientes para supervisores
`EvidencePanel`	Panel lateral con toda la evidencia de una unidad
`WeighingStation`	Interfaz combinada de bascula + camara + formulario

Widgets de engagement y gestion de equipos:

Widget	Descripcion
`Leaderboard`	Rankings de rendimiento de operadores
`AchievementBadge`	Display de logros de gamificacion
`QuestTracker`	Progreso de misiones/desafios activos
`TeamDashboard`	Metricas y actividad del equipo

Widgets de Automatizacion

Gestion de procesos de automatizacion y reglas:

Widget	Descripcion
`RuleBuilder`	Constructor visual de condiciones de reglas
`TriggerConfig`	Configuracion de disparadores de automatizacion
`WebhookManager`	Gestion de endpoints de webhook
`AlertConfig`	Configuracion de umbrales de alerta
`ScheduleEditor`	Editor de programacion estilo cron

Composicion de Widgets

Los widgets estan disenados para componerse entre si. Un dashboard tipico combina multiples widgets:

<div className="grid grid-cols-12 gap-4">
  <div className="col-span-8">
    <KanbanBoard warehouseId={1} />
  </div>
  <div className="col-span-4 space-y-4">
    <UtilizationWidget warehouseId={1} />
    <ThroughputChart period="24h" height={200} />
    <ApprovalQueue limit={5} />
  </div>
</div>

Widgets

Widgets

Widgets de Graficas

Uso

Sandbox de KPI / indicador

Widgets de Multimedia

Sandbox de estado y alertas

Widgets IoT

Control de Deteccion de Movimiento

Widgets de Nextcloud

Widgets WHMS

Editor de Plano de Planta

Sandbox de widget con pestanas

Sandbox de layout de dashboard

Widgets de Flujos de Trabajo

Widgets de Automatizacion

Composicion de Widgets

Relacionado

Widgets

Widgets de Graficas

Uso

Sandbox de KPI / indicador

Widgets de Multimedia

Sandbox de estado y alertas

Widgets IoT

Control de Deteccion de Movimiento

Widgets de Nextcloud

Widgets WHMS

Editor de Plano de Planta

Sandbox de widget con pestanas

Sandbox de layout de dashboard

Widgets de Flujos de Trabajo

Social y Gamificacion

Widgets de Automatizacion

Composicion de Widgets

Relacionado