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:

WidgetDescripcion
ThroughputChartUnidades procesadas en el tiempo (barra/linea)
UtilizationGaugeIndicador de capacidad de zona con umbrales
StageDistributionGrafica de pastel de unidades por etapa de flujo
WeightVarianceChartComparacion de peso de entrada vs salida
OperatorPerformanceGrafica de barras de unidades por operador
DwellTimeHeatmapMapa de calor de tiempo por etapa
IncidentTrendFrecuencia de incidentes en el tiempo
ComplianceScoreProgreso 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:

WidgetDescripcion
PhotoCaptureCaptura con camara con metadatos EXIF
PhotoGalleryCuadricula de fotos de evidencia con lightbox
VideoPlayerReproductor de video HLS para clips CCTV
VideoRecorderGrabacion de clips cortos
SignaturePadCaptura de firma digital
DocumentViewerVisor de documentos PDF e imagen
AudioRecorderGrabacion de notas de voz
QRScannerOverlay 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:

WidgetDescripcion
MotionClipControlIniciar/detener deteccion de movimiento por camara
EnhancedMotionViewerDeteccion combinada con overlay de IA
BrowserDetectionOverlayBounding boxes con TensorFlow.js
CameraGridVista multi-camara con estado
ScaleDisplayDisplay de lectura de bascula en tiempo real
ScaleHistoryGrafica de tendencia de lecturas de bascula
NFCScannerInterfaz de lectura/escritura de tags NFC
CameraStatusEstado 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:

WidgetDescripcion
TablesBrowserNavegar y gestionar Nextcloud Tables
TableEditorEdicion en linea de filas de tablas
FilePickerExplorador y selector de archivos Nextcloud
FileUploaderCarga de archivos drag-and-drop a Nextcloud
FormBuilderIntegracion con Nextcloud Forms
ShareManagerControles de comparticion de tablas/archivos
ActivityFeedFeed de actividad reciente de Nextcloud

Widgets WHMS

Componentes especificos de gestion de almacen:

WidgetDescripcion
FloorPlanCanvasPlano de planta interactivo con poligonos de slots
SlotPolygonComponente individual de poligono de slot
SlotSidebarPanel de detalles y propiedades de slot
ZonePickerSeleccion y configuracion de zonas
PlacementFlowAsistente completo de colocacion (escaneo -> foto -> confirmar)
RemovalFlowFlujo de confirmacion de retiro
UtilizationWidgetDashboard de utilizacion de zonas
AssetLocatorBusqueda 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}
/>;

Sandbox de widget con pestanas

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:

WidgetDescripcion
KanbanBoardProgresion de etapas con drag-and-drop
StageCardTarjeta de unidad de transporte con estado de evidencia
WorkflowTimelineLinea de tiempo de eventos de una unidad
ApprovalQueueAprobaciones pendientes para supervisores
EvidencePanelPanel lateral con toda la evidencia de una unidad
WeighingStationInterfaz combinada de bascula + camara + formulario

Social y Gamificacion

Widgets de engagement y gestion de equipos:

WidgetDescripcion
LeaderboardRankings de rendimiento de operadores
AchievementBadgeDisplay de logros de gamificacion
QuestTrackerProgreso de misiones/desafios activos
TeamDashboardMetricas y actividad del equipo

Widgets de Automatizacion

Gestion de procesos de automatizacion y reglas:

WidgetDescripcion
RuleBuilderConstructor visual de condiciones de reglas
TriggerConfigConfiguracion de disparadores de automatizacion
WebhookManagerGestion de endpoints de webhook
AlertConfigConfiguracion de umbrales de alerta
ScheduleEditorEditor 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>

Relacionado