Design System — Seguridad Ciudadana

Prompt Guía para IA

Copia este prompt para iniciar nuevos proyectos con estas reglas estrictas.

Antes de empezar, analiza mi design system en:
https://muni-surco.github.io/Design-system-C4-MSS/

Extrae tokens de color, tipografía (Chivo), espaciados, íconos, componentes y patrones visuales. Úsalos como guía estricta para todo lo que construyamos. No uses otros estilos ni componentes externos que no estén en el design system.

Proyecto a construir: [describe aquí tu nueva app]

Colores

Paleta Principal

Primary

#005ea5

P. Dark

#003D6B

P. Light

#E6EEF5

Secondary

#00C9A7

Sec. Dark

#00A88A

Sec. Light

#E0FAF5

Accent

#F5A623

Estados

Danger

#E03E3E

Warning

#F5A623

Success

#27AE60

Info

#2F80ED

Neutros

900

#1A1A2E

700

#4A4A6A

500

#8888AA

300

#D0D5E8

100

#F4F6FB

Tipografía

Font: Chivo — Tipografía corporativa moderna.

3xl / 700 · 38px

Seguridad Ciudadana

2xl / 700 · 30px

Panel de Incidentes

xl / 700 · 24px

Reporte Semanal

lg / 600 · 20px

Unidades Serenazgo

base / 400 · 15px

Texto de cuerpo principal para interfaces.

sm / 400 · 13px

Texto secundario, metadatos, descripciones.

xs UPPER / 11px

Etiquetas de sección

Espaciado & Border Radius

4px

8px

12px

16px

24px

32px

48px

Border Radius

4px sm

8px md

12px lg

16px xl

full pill

Íconos — Lucide

Librería recomendada: Lucide Icons — Open source, MIT license, más de 1,400 íconos de trazo consistente. Ideal para dashboards operativos internos.

<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script> Agregar en el <head> de tu app

<i data-lucide="shield"></i> lucide.createIcons() ↗ Ver todos los íconos

Tamaños & Stroke

16px

20px

24px

32px

40px

stroke 1

stroke 1.5

stroke 2 ✓

stroke 2.5

Colores de Estado

Danger

Warning

Success

Info

Primary

Secondary

Muted

Íconos para Seguridad Ciudadana

Operaciones

shield

shield-alert

shield-check

shield-off

siren

alert-triangle

alert-circle

alert-octagon

flag

flag-triangle

radio-tower

zap

Personas & Agentes

user

user-check

user-x

user-plus

users

users-round

contact

badge

id-card

handshake

person-standing

bot

Mapas & Ubicación

map-pin

map-pin-off

map

navigation

navigation-2

compass

locate

locate-fixed

globe

milestone

route

waypoints

Vehículos & Movilidad

car

car-front

truck

bike

ambulance

bus

fuel

traffic-cone

circle-parking

camera

cctv

walkie-2

UI & Acciones

search

filter

sliders-h

plus

plus-circle

pencil

trash-2

eye

eye-off

download

upload

share-2

copy

check

check-circle

x

x-circle

more-h

more-v

external-link

log-out

settings

settings-2

menu

Datos & Reportes

bar-chart-2

bar-chart-3

line-chart

pie-chart

trending-up

trending-down

clipboard-list

file-text

file-check

file-x

folder

database

table-2

list

dashboard

calendar

clock

history

activity

workflow

Comunicación

bell

bell-ring

bell-off

message-circle

message-square

mail

phone

phone-call

radio

wifi

wifi-off

send

Íconos en Botones

Íconos con Badges de Estado

Alta prioridad

GPS activo

Sin señal

Alerta activa

En servicio

Tokens de Diseño CSS

Copia estas variables al inicio de tu proyecto para mantener consistencia en todas las apps.

/* ─────────────────────────────────────────── */ /* Design System · Municipalidad de Surco */ /* Seguridad Ciudadana · v1.0 · 2026 */ /* ─────────────────────────────────────────── */ :root { /* Brand */ --color-primary: #005ea5; --color-primary-dark: #003D6B; --color-primary-light: #E6EEF5; --color-secondary: #00C9A7; --color-secondary-dark: #00A88A; --color-accent: #F5A623; /* Status */ --color-danger: #E03E3E; --color-warning: #F5A623; --color-success: #27AE60; --color-info: #2F80ED; /* Neutrals */ --gray-900: #1A1A2E; --gray-700: #4A4A6A; --gray-500: #8888AA; --gray-300: #D0D5E8; --gray-100: #F4F6FB; /* Font */ --font: 'Segoe UI', system-ui, -apple-system, sans-serif; /* Type Scale */ --text-xs:11px; --text-sm:13px; --text-base:15px; --text-md:17px; --text-lg:20px; --text-xl:24px; --text-2xl:30px; --text-3xl:38px; /* Spacing (base 4px) */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; /* Border Radius */ :12px; --r-xl:16px; --r-full:9999px; /* Shadows */ --shadow-sm:0 1px 3px rgba(0,0,0,.08); --shadow-md:0 4px 12px rgba(0,0,0,.10); --shadow-lg:0 8px 24px rgba(0,0,0,.12); }

Botones

Variantes

<button class="btn bp bmd">Nuevo Incidente</button> <button class="btn bse bmd">Ver Reportes</button> <button class="btn bo bmd">Exportar</button> <button class="btn bg2 bmd">Cancelar</button> <button class="btn bda bmd">Eliminar</button>

Tamaños

<button class="btn bp bsm">Pequeño</button> <button class="btn bp bmd">Mediano</button> <button class="btn bp blg">Grande</button>

Con Ícono

<button class="btn bp bmd"> <i data-lucide="plus" style="width:15px;height:15px;stroke:white; stroke-width:2.5;fill:none;flex-shrink:0"></i> Registrar </button> <button class="btn bda bmd" style="padding:9px 12px"> <i data-lucide="trash-2" style="width:15px;height:15px;stroke:white; stroke-width:2;fill:none;flex-shrink:0"></i> </button>

Badges & Chips

Badges de Estado

Activo Crítico Pendiente En proceso Cerrado Nuevo

<span class="bdg dok"><span class="dot"></span>Activo</span> <span class="bdg dng"><span class="dot"></span>Crítico</span> <span class="bdg dwn"><span class="dot"></span>Pendiente</span> <span class="bdg dinf"><span class="dot"></span>En proceso</span> <span class="bdg dnt"><span class="dot"></span>Cerrado</span> <span class="bdg dpr">Nuevo</span>

Chips / Categorías

Robo Vehículos Ruidos Ambiente Urgente Invasión

<span class="chip"> <i data-lucide="siren" style="width:13px;height:13px;stroke:var(--g7); stroke-width:2;fill:none;flex-shrink:0"></i> Robo </span> <span class="chip"> <i data-lucide="car" style="width:13px;height:13px;stroke:var(--g7); stroke-width:2;fill:none;flex-shrink:0"></i> Vehículos </span>

Avatares

JP ML CR TS AD

Inputs & Forms

Inputs Estándar

Nombre Agente *

Zona / Sector

DNI *DNI debe tener 8 dígitos.

Buscar

Descripción

Fecha

<div class="iw"> <label class="il">Nombre Agente <span>*</span></label> <input class="inp" type="text" placeholder="Ej: Juan Pérez" /> </div>  <div class="iw"> <label class="il">Zona</label> <select class="sel"> <option>Seleccionar...</option> </select> </div>  <input class="inp err" type="text" value="12345" /> <span class="ih err">DNI debe tener 8 dígitos.</span>  <div class="ig"> <input class="inp" type="text" placeholder="Nro. o descripción..." /> <button class="btn bp bmd">Buscar</button> </div>  <textarea class="inp" rows="3" style="resize:vertical" placeholder="Descripción..."></textarea>  <div class="inp-date-wrap"> <i data-lucide="calendar" class="inp-date-icon"></i> <input type="date" class="inp" /> </div>

Date Range Picker

Rango de fechas de reporte

→

Multiselect & Autocomplete

Multiselect con Tags

Seleccionar zonas...

Autocomplete Select

Buscar agente por nombre...

File Upload

Haz clic o arrastra archivos aquí

Soporta imágenes, PDF y documentos (Máx. 10MB)

reporte_incidente_surco.pdf

2.4 MB · Completado

Signature Pad

Validación de Campos

Nombre

El nombre debe tener al menos 10 caracteres.

<div class="iw"> <label class="il">Nombre</label> <input type="text" class="inp is-invalid" value="Juan" /> <div class="invalid-feedback"> <i data-lucide="alert-circle" style="width:12px"></i> El nombre debe tener al menos 10 caracteres. </div> </div>

Alertas

Alerta Alta PrioridadIncidente crítico en Av. Primavera.

AdvertenciaSin reporte de posición por 2 horas.

ResueltoCaso cerrado satisfactoriamente.

InformaciónMantenimiento programado sábado.

<div class="al ang"> <div class="al-i"> <i data-lucide="shield-alert" style="width:20px;height:20px;stroke:var(--cd); stroke-width:2;fill:none;flex-shrink:0"></i> </div> <div><strong>Alerta Alta Prioridad</strong> Incidente crítico en Av. Primavera. </div> </div>  <div class="al awn">...</div> <div class="al aok">...</div> <div class="al ainf">...</div>

Toggle / Switch

Control para activar o desactivar configuraciones del sistema. Disponible en tres tamaños y con estado deshabilitado.

Tamaños

Small

Medium

Large

Disabled

<label class="tg2 tg-sm"> <input type="checkbox" checked> <span class="tsl2"></span> </label>  <label class="tg2"> <input type="checkbox" checked> <span class="tsl2"></span> </label>  <label class="tg2 tg-lg"> <input type="checkbox" checked> <span class="tsl2"></span> </label>  <label class="tg2"> <input type="checkbox" disabled> <span class="tsl2"></span> </label>

Toggle Cards — Con descripción

Alertas sonoras

Reproduce un sonido al recibir nuevos incidentes críticos.

Rastreo GPS en tiempo real

Actualiza la posición de las unidades cada 30 segundos.

Modo oscuro

Cambia la interfaz a tema oscuro para turnos nocturnos.

<div class="tg-card"> <div class="tg-info"> <div class="tg-title"> <i data-lucide="bell" style="width:15px;height:15px"></i> Alertas sonoras </div> <div class="tg-desc"> Reproduce un sonido al recibir incidentes. </div> </div> <label class="tg2"> <input type="checkbox" checked> <span class="tsl2"></span> </label> </div>

Toggle en línea — Inline

Notificaciones activas

Modo nocturno

GPS habilitado

Reportes automáticos

Cards & Stats

Card Estándar

Reporte DiarioAl día

Se atendieron 14 incidentes en el turno nocturno.

Actualizado: hoy 06:45 AM

<div class="card"> <div class="ch2"> <span class="cht">Reporte Diario</span> <span class="bdg dok"> <span class="dot"></span>Al día </span> </div> <div class="cb"> <p>Se atendieron <strong>14 incidentes</strong>.</p> </div> <div class="cf">Actualizado: hoy 06:45 AM</div> </div>

Cards KPI

142

Incidentes mes

↑ 8%

28

Agentes activos

↑ 3 nuevos

<div class="sc2"> <div class="si t"> <i data-lucide="siren" style="width:22px;height:22px;stroke:var(--cpd); stroke-width:2;fill:none"></i> </div> <div> <div class="sv">142</div> <div class="sl">Incidentes mes</div> <div class="str up">↑ 8%</div> </div> </div>

Tablas

N° Caso	Tipo	Zona	Hora	Agente	Prioridad	Estado
`#2026-0041`	Vehículo sospechoso	Norte	08:32	JPJ. Pérez	Alta	Pendiente
`#2026-0040`	Ruidos molestos	Sur	07:15	MLM. López	Media	En proceso
`#2026-0039`	Robo transeúnte	Centro	06:50	CRC. Ríos	Alta	Resuelto

<div class="tw wf"> <table> <thead> <tr> <th>N° Caso</th> <th>Tipo</th> <th>Estado</th> </tr> </thead> <tbody> <tr> <td><code>#2026-0041</code></td> <td>Vehículo sospechoso</td> <td><span class="bdg dng"> <span class="dot"></span>Alta </span></td> <td><span class="bdg dwn"> <span class="dot"></span>Pendiente </span></td> </tr> </tbody> </table> </div>

Tabs

Activos

Pendientes

Resueltos

Archivados

Contenido de la pestaña seleccionada...

<div class="tabs"> <div class="tab act">Activos</div> <div class="tab">Pendientes</div> <div class="tab">Resueltos</div> <div class="tab">Archivados</div> </div>

Accordion

Agrupa contenido colapsable para mostrar información progresivamente. Ideal para FAQs, procedimientos y configuración.

Accordion Estándar

Protocolo ante robo a transeúnte

Pasos obligatorios del agente de serenazgo

Garantizar la seguridad del denunciante y del área.
Registrar el incidente en el sistema con ubicación exacta.
Solicitar refuerzos si el sospechoso sigue en la zona.
Coordinar con la comisaría más cercana y trasladar al afectado.
Completar el parte policial antes de finalizar el turno.

Configuración de zonas de cobertura

Define los sectores asignados por turno

Cada zona se puede configurar con su área geográfica, número mínimo de unidades y horario de cobertura. Los cambios entran en vigencia en el siguiente turno programado.

Zona NorteZona SurZona CentroZona Este

Generación de reportes y estadísticas

Exporta datos del turno en PDF o Excel

Los reportes incluyen total de incidentes, tiempo promedio de respuesta, agentes activos y cobertura por zona. Se generan automáticamente al cierre de cada turno.

Preguntas frecuentes del sistema

Soporte técnico y dudas operativas

Para soporte técnico contacta al área de TI al interno 1234 o escribe a [email protected]. El horario de atención es de lunes a viernes de 8am a 6pm.

<div class="acc-wrap wf"> <div class="acc-item"> <div class="acc-header open" onclick="toggleAcc(this)"> <div class="acc-icon-wrap" style="background:var(--cpl)"> <i data-lucide="siren"></i> </div> <div class="acc-label"> <div class="acc-title">Título</div> <div class="acc-sub">Subtítulo</div> </div> <svg class="acc-chevron">...</svg> </div> <div class="acc-body open"> <div class="acc-body-inner"> Contenido colapsable aquí... </div> </div> </div> </div>

Accordion Minimal — Sin íconos

¿Cómo registrar un incidente?

Usa el botón + Nuevo en la barra superior o accede a Incidentes → Registrar. Completa todos los campos obligatorios marcados con asterisco.

¿Cómo asignar un agente a un caso?

Abre el incidente y selecciona el botón Asignar. El sistema mostrará los agentes disponibles en la zona. La asignación se notifica automáticamente al agente.

¿Qué significa cada nivel de prioridad?

Alta Riesgo inmediato — responder en menos de 5 min. Media Situación controlable — atender en 20 min. Baja Sin urgencia — resolver en el turno.

<div class="acc-wrap wf"> <div class="acc-item"> <div class="acc-header open" onclick="toggleAcc(this)" style="padding:var(--s3) var(--s4)"> <div class="acc-label"> <div class="acc-title" style="font-size:var(--tsm)"> ¿Pregunta? </div> </div> <svg class="acc-chevron">...</svg> </div> <div class="acc-body open" style="padding:0 var(--s4) var(--s4)"> <div class="acc-body-inner" style="font-size:var(--tsm)"> Respuesta... </div> </div> </div> </div>

Breadcrumb

Indica la ubicación del usuario dentro de la jerarquía de la aplicación.

Estándar

Inicio › Incidentes › Caso #2026-0041

Dashboard / Agentes / Zona Norte / Juan Pérez

Configuración Zonas de cobertura Zona Centro

<div class="bcr"> <i data-lucide="house"></i> <a href="#">Inicio</a> <span class="bcr-sep">›</span> <a href="#">Incidentes</a> <span class="bcr-sep">›</span> <span class="bcr-current">Caso #2026-0041</span> </div>

Variante Pill

› Reportes › Turno Mañana

Panel › Unidades › SER-04

<div class="bcr-pill"> <a href="#"><i data-lucide="house"></i></a> <span class="bcr-sep">›</span> <a href="#">Reportes</a> <span class="bcr-sep">›</span> <span class="bcr-current">Turno Mañana</span> </div>

Paginación

Navegación entre páginas de tablas y listados de incidentes.

Estándar

…

Mostrando 1–10 de 142 resultados

<div class="pgn"> <button class="pgn-btn" disabled>‹</button> <button class="pgn-btn act">1</button> <button class="pgn-btn">2</button> <button class="pgn-btn">3</button> <span class="pgn-ellipsis">…</span> <button class="pgn-btn">12</button> <button class="pgn-btn">›</button> </div> <span class="pgn-info">Mostrando 1–10 de 142</span>

Modales

Modal Estándar

<div class="modal"> <div class="mh"> <h4>Modal Estándar</h4> <button class="mc">✕</button> </div> <div class="mb"> <div class="iw"> <label class="il">Título</label> <input class="inp" type="text" placeholder="..." /> </div> </div> <div class="mf"> <button class="btn bg2 bmd">Cerrar</button> <button class="btn bp bmd">Guardar</button> </div> </div>

Modal de Confirmación

<div class="modal"> <div class="mh" style="background:var(--cd)"> <h4>Confirmar Eliminación</h4> <button class="mc">✕</button> </div> <div class="mb"> <p>¿Desea continuar?</p> </div> <div class="mf"> <button class="btn bg2 bmd">Cancelar</button> <button class="btn bda bmd">Eliminar</button> </div> </div>

Tooltip & Popover

Información contextual al hacer hover (tooltip) o clic (popover). Pasa el cursor sobre los elementos para verlos.

Tooltips — posiciones

Tooltip posición superior

Tooltip posición derecha

Tooltip posición inferior

Crítico

3 incidentes activos en zona norte

<div class="ttp-wrap"> <button class="btn bse bmd">Top</button> <div class="ttp">Tooltip texto</div> </div>

Popover

Juan Pérez — SER-04

JP

Juan Pérez

Serenazgo · Turno mañana

Zona Norte

Interno: 1204

Alerta crítica activa

Robo a transeúnte reportado en Av. Primavera.

<div class="pop-wrap"> <button class="btn bse bmd" onclick="togglePop('pop1')">Agente info</button> <div class="pop-box open" id="pop1"> <div class="pop-title">Título</div> <div class="pop-body">Contenido</div> <div class="pop-footer"> <button class="btn bp bsm">Acción</button> </div> </div> </div>

Toast / Notificaciones

Mensajes emergentes que aparecen en esquina de pantalla. Se desvanecen automáticamente o el usuario los cierra.

Variantes

Incidente crítico registrado

Robo en Av. Primavera · Zona Norte

hace un momento

Caso cerrado exitosamente

#2026-0041 marcado como resuelto

hace 2 min

Unidad sin señal GPS

SER-07 no reporta posición

hace 5 min

Turno actualizado

Cambio de turno registrado a las 14:00

hace 8 min

<div class="toast-stack"> <div class="toast toast-danger"> <div class="toast-icon"> <i data-lucide="siren"></i> </div> <div class="toast-body"> <div class="toast-title">Título</div> <div class="toast-msg">Mensaje</div> <div class="toast-time">hace 2 min</div> </div> <button class="toast-close">×</button> </div> </div>

Feedback UI

Toggle / Switch

Notificaciones

Modo nocturno

GPS habilitado

<div class="tgw"> <label class="tg"> <input type="checkbox" checked> <span class="tsl"></span> </label> <span style="font-size:var(--tsm)"> Notificaciones </span> </div>

Progress Bars

Resueltos91%

Cobertura zona65%

Alertas críticas28%

<div class="pw"> <div class="flex ic" style="justify-content:space-between;margin-bottom:4px"> <span>Resueltos</span> <strong>91%</strong> </div> <div class="pb2"> <div class="pf" style="width:91%;background:var(--cok)"></div> </div> </div>

Skeleton Loading

Patrón — Tarjeta de Incidente

Tarjeta de Incidente

#2026-0041 · hace 12 min

Vehículo sospechoso estacionado

Av. Primavera 1240, Zona Norte

AltaVehículos

JPJuan Pérez · SER-04

#2026-0040 · hace 45 min

Ruidos molestos nocturnos

Jr. Los Cóndores 456, Zona Sur

MediaRuidos

#2026-0038 · hace 2h

Desmonte en vía pública

Ca. Los Álamos 120, Zona Este

Resuelto

<div class="inc"> <div class="ip palt"></div> <div class="ib"> <div class="iid">#2026-0041 · hace 12 min</div> <div class="itit">Título</div> <div class="imet">Dirección</div> <div class="flex g2 mt2"> <span class="bdg dng">Alta</span> <span class="chip">Categoría</span> </div> </div> <button class="btn bp bsm">Asignar</button> </div>

Timeline — Historial de Incidente

Secuencia cronológica de eventos de un caso de seguridad. Esencial para auditoría y seguimiento.

Timeline de Caso

08:32 AM — Hoy

Incidente registrado Alta

Se reportó vehículo sospechoso en Av. Primavera 1240.

SIS Sistema — Registro automático

08:35 AM — Hoy

Agente asignado En proceso

Unidad SER-04 asignada. ETA: 4 minutos.

09:10 AM — Hoy

Caso cerrado Resuelto

Vehículo sin antecedentes. Caso archivado.

<div class="tmln"> <div class="tmln-item"> <div class="tmln-dot dng"></div> <div class="tmln-time">08:32 AM</div> <div class="tmln-card"> <div class="tmln-header"> <span class="tmln-title">Título</span> <span class="bdg dng">Alta</span> </div> <div class="tmln-body">Descripción</div> <div class="tmln-actor"> <span class="av">SIS</span> Actor responsable </div> </div> </div> </div>

Stepper — Flujo de Registro

Guía al operador a través de un proceso de múltiples pasos. Ideal para registrar incidentes, crear reportes o configurar zonas.

Horizontal

Tipo

Completado

Ubicación

Completado

3

Agente

En progreso

4

Evidencia

Pendiente

5

Confirmar

Pendiente

Datos básicos

!

Validación

Error

3

Revisión

4

Envío

<div class="stp"> <div class="stp-item done"> <div class="stp-circle"> <i data-lucide="check"></i> </div> <div class="stp-label">Nombre</div> <div class="stp-sublabel">Estado</div> </div> <div class="stp-item active">...</div> <div class="stp-item">...</div> </div>

Vertical — Con contenido

Tipo de incidente

Vehículo sospechoso

Ubicación

Av. Primavera 1240, Zona Norte

3

Asignar agente

4

Evidencia fotográfica

Opcional — adjuntar imagen del incidente

5

Confirmar y registrar

Revisión final y envío al sistema

<div class="stp-v"> <div class="stp-v-item done"> <div class="stp-v-left"> <div class="stp-circle" style="width:32px;height:32px"> <i data-lucide="check"></i> </div> </div> <div class="stp-v-right"> <div class="stp-v-title">Título</div> <div class="stp-v-body">Contenido</div> </div> </div> </div>

Data Filter Bar

Barra de filtros avanzada para tablas de incidentes, agentes y reportes. Combina búsqueda libre con filtros contextuales.

Filter Bar completa

Zona

Estado

Filtros activos:

Zona Norte Alta prioridad

14 resultados

<div class="flt-bar"> <div class="flt-search"> <i data-lucide="search"></i> <input type="text" placeholder="Buscar..." /> </div> <div class="flt-divider"></div> <div class="flt-group"> <span class="flt-label">Zona</span> <select class="flt-sel">...</select> </div> <button class="btn bp bmd">Filtrar</button> </div> <div class="flex ic g3 fw"> <div class="flt-active-chips"> <span class="flt-chip">Filtro ×</span> </div> <span class="flt-results">14 resultados</span> </div>

Filter Bar compacta — Tabs + filtro

Todos

Activos

Pendientes

Resueltos

142 casos

<div class="flex ic g3 fw"> <div class="tabs" style="border-bottom:none;gap:var(--s1)"> <div class="tab act" style="border:1px solid var(--g3);border-radius:var(--rmd);margin:0"> Todos </div> <div class="tab" style="...">Activos</div> </div> <div class="flt-search">...</div> <select class="flt-sel">...</select> <span class="flt-results">142 casos</span> </div>

Navegación

Componentes de navegación principal para apps internas. Incluye variantes de header principal, compacto y sidebar lateral.

Header Principal

Seguridad Ciudadana Municipalidad de Santiago de Surco

Dashboard Incidentes Unidades Reportes Configuración

AD

A. Delgado

Supervisor

Operaciones Mapa en Vivo Agentes Unidades Historial

3 alertas activas Turno: Mañana 06:00–14:00

Header Compacto

Gestión de Incidentes

Mis casos Asignados Cerrados

JP

Sidebar

Surco SeguridadPanel Operativo

Principal

Dashboard Incidentes5 Mapa en vivo

Gestión

Agentes Unidades Reportes

Sistema

Configuración

Patrón — Mapa UI

Integrar con Leaflet.js o Google Maps API.

● Incidente activo ● Unidad en patrulla ● Zona de alerta ● Cámara vigilancia

Mapa interactivo — Santiago de Surco

Leaflet.js / Google Maps API

Widgets Estadísticos

Distribución de Recursos

100%

Serenos

Tránsito

Otros

Tendencia de Reportes

↑ 8%

Estado de Flota

Operativos85%

Mantenimiento10%

Fuera de Servicio5%

Dashboard Operaciones

14

Incidentes hoy

3

Críticos activos

12

Agentes activos

⏱

4.2m

T. respuesta

Incidentes Recientes

Vehículo sospechoso

Zona Norte · 12 min

Alta

Ruidos molestos

Zona Sur · 45 min

Media

Robo transeúnte

Zona Centro · 2h

Resuelto

Ver todos los incidentes →

Mapa en VivoEn línea

Santiago de Surco

Historial Detallado de Turno

Hora	Evento / Actividad	Agente	Estado
08:45	Patrullaje Preventivo — Sector 4	J. Pérez	Normal
08:12	Atención Incidente #2026-0041	M. López	En proceso
07:55	Cambio de unidad — Central	C. Ríos	Finalizado

Ver historial completo →

Reporte Rápido de Incidente

Tipo de Incidente

Ubicación aproximada

Prioridad

Alta Media