-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathSPECS.txt
More file actions
149 lines (122 loc) · 5.07 KB
/
Copy pathSPECS.txt
File metadata and controls
149 lines (122 loc) · 5.07 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
# Contexto del Proyecto
- **Objetivo:** Panel de administración para la startup AgentHub, donde empresas pueden alquilar agentes de IA (asistentes inteligentes preconfigurados) que pueden equiparse con skills (navegar por web, leer documentos, gestionar calendarios, etc.) y desplegarse para tareas de negocio específicas.
- Diseñado por un desarrollador frontend freelance senior.
- **Prototipo en HTML, CSS (Tailwind vía CDN) y JavaScript vanilla, sin frameworks ni backend.**
# Contexto de la Tarea
## Requisito Global de Tema
- Debe haber un toggle en la barra superior para cambiar entre modo claro y modo oscuro.
- Usar la utilidad `dark:` de Tailwind.
- El modo elegido debe mantenerse entre secciones.
## Secciones del Panel (6)
Las 6 secciones son accesibles desde una navegación lateral persistente:
### 1. Dashboard
- Tarjetas de métricas (4):
- Ingresos totales este mes.
- Pérdida total por descuentos y cupones.
- Número de agentes activos en todos los clientes.
- Número de agentes marcados como fallando.
- Debajo, incluir un marcador de posición para un gráfico de actividad semanal.
- Estilo de cards:
- Cuadrícula responsive 2x2.
- Icono, etiqueta y valor hardcodeados.
- Cada tarjeta con color distinto por tipo de métrica.
- Sombra sutil.
- Estilo del marcador:
- `div` ancho y centrado.
- Borde discontinuo.
- Etiqueta centrada representando el gráfico semanal.
### 2. Gestión de Usuarios
- Tabla con todos los usuarios registrados (5 usuarios hardcodeados).
- Columnas: nombre, mail, plan y badge de estado.
- Cada fila incluye un dropdown de acciones (menú de 3 puntos verticales):
- **Ver Detalle:** abre modal overlay con registro completo del usuario.
- Cierre por botón o clic en backdrop.
- **Eliminar**.
### 3. Gestión de Agentes
- Lista de agentes registrados (4 agentes hardcodeados):
- Nombre del agente.
- Propietario.
- Estado actual (activo, inactivo, fallando).
- Lista de skills colapsada.
- Reglas de interacción:
- Skills ocultas por defecto.
- Clic en control expandible para revelarlas.
- Dropdown de acciones por agente:
- **Configurar:** abre modal con el prompt de sistema del agente.
- **Eliminar**.
### 4. Skills
- Breve explicación de qué significa una skill en el contexto de AgentHub.
- Catálogo de skills disponibles (4 skills hardcodeadas).
- Cada skill debe mostrar:
- Nombre.
- Descripción breve.
- Indicador de cuántos agentes la tienen habilitada actualmente.
- Dropdown de acciones por skill:
- **Ver detalle**.
- **Eliminar**.
- Estilo del bloque de explicación:
- `div` centrado con borde discontinuo que englobe el texto.
### 5. Contrataciones de Agentes
- Tabla de contratos de alquiler activos y pasados (4 contratos hardcodeados).
- Cada fila debe mostrar:
- Cliente.
- Agente alquilado.
- Skills contratadas.
- Fechas del contrato.
- Importe total pagado.
- Dropdown de acciones por fila:
- **Ver detalle:** abre modal con desglose completo del contrato, incluyendo lista de skills contratadas y precios individuales.
### 6. Log de Errores
- Registro de errores de ejecución de los agentes (6 errores hardcodeados).
- Cada entrada debe incluir:
- Timestamp.
- Nombre del agente.
- Tipo de error.
- Descripción breve.
- Los errores deben categorizarse visualmente por tipo o gravedad con código de color.
- Dropdown de acciones por entrada:
- **Ver detalle:** abre modal con trazas completas del error.
- **Marcar como resuelto**.
## Componentes y Estilos Reutilizables
Los siguientes elementos deben ser reutilizables en todas las vistas:
- Sidebar.
- Tarjetas de métricas.
- Iconos de dropdown de acciones.
- Estilo de tablas.
- Estilo de modal.
- Colapsable de skills.
- Toggle claro/oscuro.
### Reglas de Estilo
- **Tablas:** alternar colores claros por fila para mejorar la visibilidad.
- Aplicar en Gestión de Usuarios, Contrataciones de Agentes y Log de Errores.
- **Listas:** tarjetas para cada agente en cuadrícula de 1 elemento por fila.
- Aplicar en Gestión de Agentes y Skills.
- **Modal:** `div` ancho y centrado, con sombreado sutil del backdrop.
- Debe cerrarse al hacer clic en backdrop o botón de cierre.
- **Tarjetas:** bordes discontinuos con esquinas suavemente redondeadas.
- **Desplegable (colapsable):**
- Colapsado por defecto.
- Transición suave.
- Empuja elementos inferiores hacia abajo al abrirse.
- Se cierra pulsando el icono.
- **Dropdown:**
- Icono de tres puntos verticales dentro de un círculo.
- En hover o clic, leve cambio de color.
- Se cierra al pulsar el icono o al hacer clic fuera del área.
- **Toggle:** icono cambiante entre sol y luna para alternar entre modo claro y oscuro.
# Contexto de la Salida
- Panel de administración profesional y utilizable como referencia de desarrollo futuro.
- Datos hardcodeados.
- Sin API ni backend.
- Interacciones usables y comportamiento visual acorde a lo especificado.
- Layout visible en viewports desktop y tablet.
# Color Palette (oscuro):
- Primary: #3B82F6
- Secondary: #6366F1
- Tertiary: #D16900
- Neutral: #0F172A
# Color Palette (claro):
- Primary: #D8E2FF
- Secondary: #C0C1FF
- Tertiary: #FFDCC6
- Neutral: #DAE2FD