import { Component, signal, computed, OnInit, inject } from '@angular/core'; import { Router } from '@angular/router'; import { CommonModule } from '@angular/common'; interface Employee { id: number; name: string; role: string; rating: number; clients: number; rate: number; avatar: string; tags: string[]; } interface UserProfile { name: string; email: string; role: string; avatar: string; } @Component({ selector: 'app-dashboard', standalone: true, imports: [CommonModule], template: `
@if (activeTab() === 'inicio') {
Sedes Integradas
3 Sedes
London · Tokyo · NY
Directorio Activo
1,450+
Usuarios Sincronizados
Salas Disponibles
18 Salas
Sistemas IoT Activos
Flujos de Trabajo
12 Activos
Reglas AD Operativas

Módulos del Sistema

Selecciona un módulo para acceder a su gestión

Info Hub

Gestión de contenidos corporativos y publicación de artículos.

Directorio AD

Sincronización con Active Directory y perfiles dinámicos.

Workflows

Líneas de aprobación, revisión y publicación de contenido.

Espacios

Autogestión de salas, oficinas y activos de la empresa.

} @if (activeTab() === 'directory') {

Interfaz Directory Modern

Búsqueda & Filtrado

Uso de bordes suaves y ergonómicos para optimizar la visualización de datos.

Mostrando {{ filteredEmployees().length }} empleados registrados Sincronizado con Active Directory
@for (emp of filteredEmployees(); track emp.id) {
ID: AD-{{ emp.id * 123 }}
{{ emp.avatar }}
★ {{ emp.rating }}

{{ emp.name }}

{{ emp.role }}
@for (tag of emp.tags; track tag) { {{ tag }} }
Clientes
{{ emp.clients }}
Tarifa/Hora
\${{ emp.rate }}/hr
}
} @if (activeTab() === 'workflow') {

Workflow de Aprobación

CICLO COMPLETO DE VIDA

Validación y Publicación Automatizada

Las propuestas de contenidos y flujos pasan por un motor estructurado que valida y publica automáticamente en canales institucionales y redes corporativas.

✓
Creación Captura de datos optimizada a través de formularios reactivos del lado del cliente.
✓
Validación Motor de reglas multinivel integrado con SSO y Active Directory para jerarquías de aprobación.
✓
Social Posteo automatizado e inmediato en las redes de comunicación interna de Kinetix.
@if (simulationStatus()) { {{ simulationStatus() }} }
AD ENGINE
STATUS: LISTENING ON PORT 3000
} @if (activeTab() === 'spaces') {

Gestión de Espacios & Incidencias

SALA DE CONFERENCIAS VIP

Sala London Hall — Piso 4

Equipada con pantalla interactiva 4K de 85 pulgadas, sistema de audio envolvente Jabra, conectividad inalámbrica y capacidad para 12 personas.

👥 Capacidad: 12 pers. 📶 Wi-Fi 6 Giga 🌡️ Termostato IoT
AUTOGESTIÓN DE ALQUILER

Reserva Directa de Espacios

Reserva de salas de conferencias, oficinas temporales y puestos de trabajo con confirmación instantánea.

@if (bookingSuccess()) {
¡Reserva confirmada con éxito! Se ha notificado a tu correo y calendario de Active Directory.
}
} @if (activeTab() === 'metrics') {

Proyección de Adopción & KPIs

Proyección de Adopción Kinetix

ROI +85%

Crecimiento exponencial de interacciones tras la implementación del diseño UI/UX renovado.

Q1 2026 Despliegue ROI +85%

Indicadores Clave (KPIs)

0.4s
Tiempo de Carga Promedio
⚡ Renderizado del lado del cliente altamente eficiente.
⚡ Compresión automatizada de activos de imagen.
⚡ Memoria caché distribuida para directorios AD.

Eficiencia en Resolución de Incidencias

Reducción drástica del tiempo de respuesta mediante el módulo de ticketing inteligente de Kinetix.

Kinetix V2 (Actual)
12 min
Promedio Industria
25 min
Sistema Anterior
45 min
} @if (activeTab() === 'admin') {

Visión de Administrador

Control Total

94% ESTABILIDAD
Monitoreo activo de solicitudes y API gateways de NestJS.

Alertas Críticas

🔧 Mantenimiento de servidor de base de datos PostgreSQL PENDIENTE
🔒 Expiración de secretos de Azure AD Client credentials En 12 días

Aprobaciones de Contenido

Lanzamiento Kinetix V2 Intranet Autor: Director de Tecnología (SSO AD)
Manual del Desarrollador Backend NestJS Autor: Arquitecto Principal
@if (approvalSuccess()) {
{{ approvalSuccess() }}
}
}
`, styles: [` .animate-fadeIn { animation: fadeIn 0.4s ease-out forwards; } @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } `] }) export class DashboardComponent implements OnInit { private router = inject(Router); // Navigation active tab signal activeTab = signal<'inicio' | 'directory' | 'workflow' | 'spaces' | 'metrics' | 'admin'>('inicio'); // Directory filter signals searchQuery = signal(''); selectedDept = signal('ALL'); // Booking & Simulation mock state signals bookingSuccess = signal(false); simulationStatus = signal(''); approvalSuccess = signal(''); // Sincronized Active Directory Active Profile signal currentUser = signal({ name: 'Invitado', email: 'guest@kinetix.com', role: 'Employee', avatar: 'G' }); // Active Directory mock database of employees exactly styled as Slide 4 employees = signal([ { id: 1, name: 'John Morton', role: 'UI/UX Designer', rating: 4.9, clients: 50, rate: 65, avatar: 'JM', tags: ['App Design', 'Web Design', 'Figma', 'Active Directory'] }, { id: 2, name: 'Sarah Jenkins', role: 'Backend NestJS Architect', rating: 4.8, clients: 42, rate: 75, avatar: 'SJ', tags: ['NestJS', 'PostgreSQL', 'JWT', 'Active Directory'] }, { id: 3, name: 'Alex Rivera', role: 'Senior Angular Developer', rating: 4.9, clients: 68, rate: 70, avatar: 'AR', tags: ['Angular 17', 'Signals', 'RxJS', 'TypeScript'] }, { id: 4, name: 'David Chen', role: 'Infrastructure Security Engineer', rating: 4.7, clients: 25, rate: 80, avatar: 'DC', tags: ['Azure Entra ID', 'SSO', 'Docker', 'PostgreSQL'] } ]); // Computed signal to filter employee list reactively filteredEmployees = computed(() => { const query = this.searchQuery().toLowerCase(); const dept = this.selectedDept(); return this.employees().filter(emp => { // Basic text search filter const matchesSearch = emp.name.toLowerCase().includes(query) || emp.role.toLowerCase().includes(query) || emp.tags.some(t => t.toLowerCase().includes(query)); // Basic department match let matchesDept = true; if (dept !== 'ALL') { if (dept === 'IT') { matchesDept = emp.role.includes('Backend') || emp.role.includes('Angular') || emp.role.includes('Infrastructure'); } else if (dept === 'Diseño') { matchesDept = emp.role.includes('Designer') || emp.role.includes('UX'); } else if (dept === 'Mantenimiento') { matchesDept = emp.role.includes('Security'); } } return matchesSearch && matchesDept; }); }); ngOnInit() { // Load Active Directory profile from local storage const userStr = localStorage.getItem('kinetix_user'); if (userStr) { try { const user = JSON.parse(userStr); this.currentUser.set(user); } catch (e) { console.error('Error parsing user profile from local storage', e); } } } setActiveTab(tab: 'inicio' | 'directory' | 'workflow' | 'spaces' | 'metrics' | 'admin') { this.activeTab.set(tab); // Reset secondary flags this.bookingSuccess.set(false); this.simulationStatus.set(''); this.approvalSuccess.set(''); } updateSearch(event: Event) { const value = (event.target as HTMLInputElement).value; this.searchQuery.set(value); } updateDept(event: Event) { const value = (event.target as HTMLSelectElement).value; this.selectedDept.set(value); } contactEmployee(name: string) { alert(`Iniciando canal seguro encriptado de comunicación con ${name} vía Microsoft Teams (SSO Active Directory)...`); } runSimulation() { this.simulationStatus.set('Procesando reglas...'); setTimeout(() => { this.simulationStatus.set('Creación capturada ✓'); setTimeout(() => { this.simulationStatus.set('Reglas AD aprobadas ✓'); setTimeout(() => { this.simulationStatus.set('Posteo social programado ✓'); }, 1000); }, 1000); }, 1000); } navigateToCalendario(): void { this.router.navigate(['/reservas/calendario']); } navigateToDirectorio(): void { this.router.navigate(['/directorio']); } bookSpace() { this.bookingSuccess.set(true); } approveItem(title: string) { this.approvalSuccess.set(`Publicación "${title}" aprobada y publicada en redes corporativas con éxito.`); setTimeout(() => { this.approvalSuccess.set(''); }, 4000); } logout() { localStorage.removeItem('kinetix_token'); localStorage.removeItem('kinetix_user'); this.router.navigate(['/login']); } }