diff --git a/frontend/src/app/core/services/content.service.ts b/frontend/src/app/core/services/content.service.ts index da9b8f6..0a66fa0 100644 --- a/frontend/src/app/core/services/content.service.ts +++ b/frontend/src/app/core/services/content.service.ts @@ -26,57 +26,81 @@ export class ContentService { private _articles = signal([ { id: 1, - title: 'Lanzamiento de la Nueva Intranet Corporativa', - category: 'Tecnología', - body: 'Hoy lanzamos oficialmente nuestra nueva plataforma de intranet con integración a Active Directory y un sistema unificado de reservas de espacios. ¡Optimiza tus flujos diarios desde hoy!', - author: 'Jess Miller', + title: 'Anuncio de Nuevos Clientes Estratégicos', + category: 'Company', + body: 'Anuncio de Nuevos Clientes e...ncecentos estratégicos, aux ama ponientro del da...', + author: 'App', date: 'Hace 2 horas', status: 'approved', approvalLevel: 3, - likes: 42, - shares: 12, - commentsCount: 3, + likes: 230, + shares: 18, + commentsCount: 45, shareTargets: ['LinkedIn', 'X', 'Intranet'], comments: [ - 'Excelente diseño, muy responsivo.', - 'Me encanta el asistente de reservas con IA.', - 'Gran trabajo a todo el equipo!' + 'Excelente logro corporativo.', + 'Bienvenidos los nuevos socios estratégicos!' ] }, { id: 2, - title: 'Políticas de Trabajo Híbrido 2026', - category: 'Recursos Humanos', - body: 'Actualizamos las directrices de trabajo híbrido. Los equipos podrán acordar hasta 3 días de trabajo remoto a la semana, coordinando la ocupación de puestos a través de la autogestión de espacios.', - author: 'Dirección de RR.HH.', - date: 'Ayer', + title: 'Resultados del Trimestre', + category: 'Company', + body: 'Estalles de resultados de Trimestre et estratégicos lo denagua escomenate...', + author: 'App', + date: 'Hace 15m', status: 'approved', approvalLevel: 3, - likes: 85, - shares: 24, - commentsCount: 2, + likes: 230, + shares: 18, + commentsCount: 45, shareTargets: ['LinkedIn', 'Intranet'], - comments: [ - 'Gran paso adelante para la flexibilidad.', - 'Muy claro el proceso de reserva de escritorios.' - ] + comments: [] }, { id: 3, - title: 'Proyecto de Sostenibilidad y Oficina Verde', - category: 'Operaciones', - body: 'Iniciamos el programa Oficina Verde para reducir el consumo de papel y optimizar la climatización de salas mediante sensores IoT integrados. Coordina tus reuniones en salas eco-eficientes.', - author: 'Marta Soler (Operaciones)', + title: 'Actualización de Tarifa Anual', + category: 'Company', + body: 'Resultados del Trimestre, estratégicos en Anuncio de nuevos Clientes.', + author: 'App', + date: 'Hace 2 horas', + status: 'approved', + approvalLevel: 3, + likes: 230, + shares: 18, + commentsCount: 45, + shareTargets: ['X', 'Intranet'], + comments: [] + }, + { + id: 5, + title: 'Taller de Desarrollo de Habilidades', + category: 'Team', + body: 'Taller de Desarrollo de Habilidades en Anuncio de Nuevos Clientes.', + author: 'App', + date: 'Ayer', + status: 'approved', + approvalLevel: 3, + likes: 230, + shares: 18, + commentsCount: 45, + shareTargets: ['Intranet'], + comments: [] + }, + { + id: 6, + title: 'Nuevo Miembro en el Equipo', + category: 'Team', + body: 'Nuevo Miembro en el Equipo, i nuevo Miembro en el Equipo.', + author: 'App', date: 'Hace 3 días', status: 'approved', approvalLevel: 3, - likes: 56, - shares: 8, - commentsCount: 1, - shareTargets: ['X', 'Intranet'], - comments: [ - '¡Apoyo total a esta iniciativa!' - ] + likes: 220, + shares: 6, + commentsCount: 45, + shareTargets: ['Intranet'], + comments: [] } ]); diff --git a/frontend/src/app/features/info-hub/info-hub.component.ts b/frontend/src/app/features/info-hub/info-hub.component.ts index 5d4967c..0d667f8 100644 --- a/frontend/src/app/features/info-hub/info-hub.component.ts +++ b/frontend/src/app/features/info-hub/info-hub.component.ts @@ -2,238 +2,243 @@ import { Component, inject, signal } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { ContentService, Article } from '../../core/services/content.service'; +import { Router } from '@angular/router'; @Component({ selector: 'app-info-hub', standalone: true, imports: [CommonModule, FormsModule], template: ` -
+
- -
-
-

Info Hub

-

Información corporativa centralizada e integración de redes sociales

+ +
+ - -
+ +
- -
-
-

Comunicados y Publicaciones Recientes

- {{ contentService.articles().length }} artículos publicados + +
+

INFO HUB

+ +
+
+ + +
+ +
+
- -
- @for (art of contentService.articles(); track art.id) { - -
- - -
- - {{ art.category }} - - {{ art.date }} -
+ +
+ + + + +
- -
-

{{ art.title }}

-

{{ art.body }}

-
- - -
- Publicado en: - @for (t of art.shareTargets; track t) { - - {{ t }} - - } -
- -
- - -
-
- - - - -
- - -
- - - @if (commentsExpanded(art.id)) { -
-

Comentarios ({{ art.comments.length }})

- -
- @for (com of art.comments; track com) { -
- Colaborador - {{ com }} + +
+ + +
+
+ + @for (art of contentService.articles(); track art.id; let isFirst = $first) { + @if (isFirst) { + +
+
+
+

{{ art.title }}

+

{{ art.body }}

+ +
+
A
+ App
- } +
+ + +
+
+
App
+
- -
- - + +
-
+ + + @if (commentsExpanded(art.id)) { +
+

Comentarios ({{ art.comments.length }})

+
+ @for (com of art.comments; track com) { +
+ Colaborador +

{{ com }}

+
+ } +
+
+ + +
+
+ } +
+ } @else { + +
+

{{ art.title }}

+

{{ art.body }}

+ +
+
A
+ App +
+ + +
+ + + + + +
+ + + @if (commentsExpanded(art.id)) { +
+
+ @for (com of art.comments; track com) { +
+ Colaborador +

{{ com }}

+
+ } +
+
+ + +
+
+ } +
} + } - - } -
-
- - -
-

Redes Sociales & Impacto

- - -
-
-
- - Métricas Globales -
-
-

12,450

- Impresiones Totales -
- +24% este mes -
- -
- -
-
- LinkedIn - 8.4k reach -
-
- X (Twitter) - 4.0k reach -
- -
-
-

Alcance de Contenidos

- KPI Activo -
- -

Visualización del crecimiento e impacto de comunicados internos.

- - -
- - - - - - - - - - - - - - - - - - -
- -
- Semana 1 - Semana 2 - Semana 3 - Semana 4 -
-
- - -
-

Canales de Redes Sociales

- -
-
-
- Campañas en LinkedIn - Automatización de posts habilitada -
- -
+ +
+
+

Panel de Actividad de Empleados

-
-
- API Integrada de X - Publicación inmediata activa +
+ +
+ Jess +
+

Jess Miller le dio me gusta al Anuncio de Nuevos Clientes

+ Hace 5m +
+
+ + +
+ Alex +
+

Alex Rivera comentó en Taller de Desarrollo Anual

+ Hace 15m +
+
+ + +
+ David +
+

David Chen compartió Resultados del Trimestre

+ Hace 15m +
+
+ + +
+ David +
+

David Chen compartió Resultados del Trimestre

+ Hace 15m +
+
+ + +
+ David +
+

David Chen compartió Resultados del Trimestre

+ Hace 15m +
-
- +
-
- - + +
+ + @if (activeShareModal()) {
-
+

Compartir Publicación

-

Selecciona los destinos de red social donde deseas propagar este artículo corporativo:

+

Selecciona los canales donde deseas propagar este artículo:

{{ activeShareModal()?.title }}

{{ activeShareModal()?.body }}

-
-
-
@@ -265,30 +269,563 @@ import { ContentService, Article } from '../../core/services/content.service';
`, styles: [` + /* ── LAYOUT PRINCIPAL ── */ + .ih-shell { + display: flex; + background: #f4f3ef; /* Light beige/grey background matching workflow */ + min-height: 90vh; + border-radius: 24px; + overflow: hidden; + border: 1px solid rgba(15, 13, 10, 0.08); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02); + font-family: 'Outfit', 'Inter', system-ui, sans-serif; + } + + /* Sidebar */ + .ih-sidebar { + width: 90px; + background: #000000; + display: flex; + flex-direction: column; + align-items: center; + padding: 24px 0; + flex-shrink: 0; + } + + .ih-sidebar__brand { + font-size: 11px; + font-weight: 900; + letter-spacing: 0.12em; + color: rgba(255, 255, 255, 0.4); + margin-bottom: 24px; + } + + .ih-sidebar__logo-container { + width: 44px; + height: 44px; + border-radius: 12px; + background: #ffffff; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + } + + .ih-sidebar__logo-btn { + font-size: 18px; + font-weight: 900; + color: #000000; + } + + /* Content Area */ + .ih-content { + flex-grow: 1; + padding: 24px; + display: flex; + flex-direction: column; + gap: 20px; + min-width: 0; + } + + /* Topbar */ + .ih-topbar { + background: #111625; + border-radius: 16px; + padding: 14px 24px; + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 12px; + } + + .ih-topbar__title { + font-size: 18px; + font-weight: 700; + color: #ffffff; + margin: 0; + } + + .ih-topbar__controls { + display: flex; + align-items: center; + gap: 12px; + } + + .ih-search { + position: relative; + width: 180px; + } + + .wf-search__field { + width: 100%; + background: rgba(255, 255, 255, 0.08); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 10px; + padding: 6px 12px 6px 32px; + font-size: 11px; + color: #ffffff; + outline: none; + } + + .wf-search__btn { + position: absolute; + left: 10px; + top: 50%; + transform: translateY(-50%); + background: transparent; + border: none; + color: rgba(255, 255, 255, 0.4); + cursor: pointer; + display: flex; + align-items: center; + } + + .wf-btn-filter { + background: rgba(255, 255, 255, 0.08); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 10px; + color: #ffffff; + font-size: 11px; + font-weight: 600; + padding: 6px 14px; + cursor: pointer; + display: inline-flex; + align-items: center; + gap: 6px; + } + + /* Category Filters */ + .ih-category-filters { + display: flex; + gap: 10px; + flex-wrap: wrap; + } + + .ih-category-btn { + background: #e2e8f0; + border: none; + color: #475569; + font-size: 11px; + font-weight: 700; + padding: 8px 16px; + border-radius: 10px; + cursor: pointer; + transition: background 0.15s ease, color 0.15s ease; + } + + .ih-category-btn:hover { + background: #cbd5e1; + color: #0f172a; + } + + .ih-category-btn--active { + background: #084d47; /* Teal-dark green */ + color: #ffffff !important; + } + + /* Main Grid */ + .ih-grid { + display: grid; + grid-template-columns: 1fr; + gap: 24px; + } + + @media (min-width: 1024px) { + .ih-grid { + grid-template-columns: 7fr 3fr; + } + } + + /* News Column layout */ + .ih-news-section { + display: flex; + flex-direction: column; + gap: 20px; + } + + .ih-news-grid { + display: grid; + grid-template-columns: 1fr; + gap: 20px; + } + + @media (min-width: 768px) { + .ih-news-grid { + grid-template-columns: 1fr 1fr; + } + .ih-card-featured { + grid-column: 1 / -1; + } + } + + @media (min-width: 1200px) { + .ih-news-grid { + grid-template-columns: 1fr 1fr 1fr; + } + .ih-card-featured { + grid-column: 1 / span 2; + } + } + + /* Featured Card */ + .ih-card-featured { + background: #ffffff; + border-radius: 20px; + border: 1px solid #e2e8f0; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01); + display: flex; + flex-direction: column; + overflow: hidden; + } + + .ih-card-featured__body { + display: flex; + padding: 24px; + gap: 20px; + flex-wrap: wrap; + } + + .ih-card-featured__content { + flex: 1; + min-width: 240px; + display: flex; + flex-direction: column; + gap: 12px; + } + + .ih-card-featured__title { + font-size: 18px; + font-weight: 800; + color: #000000; + margin: 0; + letter-spacing: -0.01em; + line-height: 1.25; + } + + .ih-card-featured__summary { + font-size: 12px; + color: #64748b; + line-height: 1.6; + margin: 0; + } + + .ih-card-featured__image-wrap { + width: 140px; + height: 100px; + border-radius: 12px; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .ih-card-featured__image { + width: 100%; + height: 100%; + background-size: cover; + background-position: center; + } + + .ih-card-featured__image-overlay { + position: absolute; + bottom: 4px; + right: 4px; + background: rgba(0, 0, 0, 0.6); + color: #facc15; + font-size: 9px; + font-weight: 800; + padding: 2px 6px; + border-radius: 4px; + } + + .ih-card-featured__actions { + background: #f8fafc; + border-top: 1px solid #e2e8f0; + display: flex; + padding: 10px 24px; + gap: 16px; + } + + .ih-btn-action-featured { + background: transparent; + border: none; + color: #64748b; + font-size: 11px; + font-weight: 700; + cursor: pointer; + display: inline-flex; + align-items: center; + gap: 6px; + padding: 6px 12px; + border-radius: 8px; + transition: color 0.15s ease, background 0.15s ease; + } + + .ih-btn-action-featured:hover { + background: #e2e8f0; + color: #0f172a; + } + + .ih-btn-action-featured--like { + background: #e07a3c; + color: #ffffff !important; + } + + .ih-btn-action-featured--like:hover { + background: #d06d31; + } + + /* Small Regular Card */ + .ih-card-small { + background: #ffffff; + border-radius: 20px; + border: 1px solid #e2e8f0; + padding: 20px; + display: flex; + flex-direction: column; + gap: 12px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01); + } + + .ih-card-small__title { + font-size: 14px; + font-weight: 800; + color: #000000; + margin: 0; + letter-spacing: -0.01em; + line-height: 1.3; + } + + .ih-card-small__summary { + font-size: 11.5px; + color: #64748b; + line-height: 1.5; + margin: 0; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + } + + .ih-card-small__metrics { + display: flex; + gap: 8px; + margin-top: auto; + } + + .ih-metric-btn { + background: #f1f5f9; + border: none; + color: #64748b; + font-size: 10px; + font-weight: 700; + padding: 6px 10px; + border-radius: 8px; + cursor: pointer; + display: inline-flex; + align-items: center; + gap: 4px; + } + + .ih-metric-btn:hover { + background: #e2e8f0; + color: #0f172a; + } + + .ih-metric-btn--orange { + background: #e07a3c; + color: #ffffff !important; + } + + .ih-metric-btn--orange:hover { + background: #d06d31; + } + + /* Author Tag */ + .ih-card-author { + display: flex; + align-items: center; + gap: 6px; + margin-top: 4px; + } + + .ih-card-author__badge { + width: 16px; + height: 16px; + border-radius: 50%; + background: #000000; + color: #ffffff; + font-size: 9px; + font-weight: 900; + display: flex; + align-items: center; + justify-content: center; + } + + .ih-card-author__name { + font-size: 11px; + font-weight: 500; + color: #64748b; + } + + /* Activity Panel */ + .ih-card-activity { + background: #ffffff; + border-radius: 20px; + border: 1px solid #e2e8f0; + padding: 24px; + display: flex; + flex-direction: column; + gap: 20px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01); + } + + .ih-card-activity__title { + font-size: 15px; + font-weight: 800; + color: #000000; + margin: 0; + letter-spacing: -0.01em; + } + + .ih-activity-list { + display: flex; + flex-direction: column; + gap: 16px; + } + + .ih-activity-item { + display: flex; + gap: 12px; + align-items: flex-start; + border-bottom: 1px solid #f1f5f9; + padding-bottom: 12px; + } + + .ih-activity-item:last-child { + border-bottom: none; + padding-bottom: 0; + } + + .ih-activity-avatar { + width: 32px; + height: 32px; + border-radius: 50%; + object-fit: cover; + flex-shrink: 0; + } + + .ih-activity-body { + display: flex; + flex-direction: column; + gap: 2px; + } + + .ih-activity-text { + font-size: 11.5px; + color: #475569; + margin: 0; + line-height: 1.4; + } + + .ih-activity-text strong { + color: #0f172a; + } + + .ih-activity-time { + font-size: 10px; + color: #94a3b8; + } + + /* Comments Section */ + .ih-comments-section { + background: #f8fafc; + border-top: 1px solid #e2e8f0; + padding: 16px 24px; + display: flex; + flex-direction: column; + gap: 12px; + } + + .ih-comments-title { + font-size: 11px; + font-weight: 700; + color: #64748b; + text-transform: uppercase; + letter-spacing: 0.02em; + } + + .ih-comments-list { + display: flex; + flex-direction: column; + gap: 8px; + max-h: 160px; + overflow-y: auto; + } + + .ih-comment-bubble { + background: #ffffff; + border: 1px solid #e2e8f0; + border-radius: 10px; + padding: 8px 12px; + font-size: 11px; + } + + .ih-comment-bubble strong { + color: #334155; + display: block; + margin-bottom: 2px; + } + + .ih-comment-bubble p { + margin: 0; + color: #475569; + font-weight: 300; + } + + .ih-comment-form { + display: flex; + gap: 8px; + } + + .ih-comment-input { + flex-grow: 1; + border: 1px solid #cbd5e1; + background: #ffffff; + border-radius: 8px; + padding: 6px 10px; + font-size: 11px; + outline: none; + } + + .ih-comment-btn { + background: #0f172a; + color: #ffffff; + border: none; + font-size: 11px; + font-weight: 700; + padding: 6px 12px; + border-radius: 8px; + cursor: pointer; + } + .animate-fadeIn { - animation: fadeIn 0.35s ease-out forwards; - } - .animate-scaleUp { - animation: scaleUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; + animation: fadeIn 0.2s ease-out forwards; } + @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } - @keyframes scaleUp { - from { opacity: 0; transform: scale(0.95); } - to { opacity: 1; transform: scale(1); } - } `] }) export class InfoHubComponent { contentService = inject(ContentService); + router = inject(Router); - // Expanded comments indices map expandedComments = signal<{ [key: number]: boolean }>({}); newComments: { [key: number]: string } = {}; - // Share modal state activeShareModal = signal
(null); shareLinkedIn = true; shareX = false; @@ -315,7 +852,6 @@ export class InfoHubComponent { openShareModal(art: Article): void { this.activeShareModal.set(art); - // Reset check state this.shareLinkedIn = art.shareTargets.includes('LinkedIn'); this.shareX = art.shareTargets.includes('X'); this.shareIntranet = art.shareTargets.includes('Intranet'); @@ -330,7 +866,6 @@ export class InfoHubComponent { if (art) { this.contentService.shareArticle(art.id); - // Update targets list dynamically const newTargets: string[] = []; if (this.shareLinkedIn) newTargets.push('LinkedIn'); if (this.shareX) newTargets.push('X'); diff --git a/frontend/src/app/features/workflows/workflows.component.ts b/frontend/src/app/features/workflows/workflows.component.ts index 4df65ce..cec60b5 100644 --- a/frontend/src/app/features/workflows/workflows.component.ts +++ b/frontend/src/app/features/workflows/workflows.component.ts @@ -9,294 +9,901 @@ import { Router } from '@angular/router'; standalone: true, imports: [CommonModule, FormsModule], template: ` -
- -
-
-
+
- -
-
-

- - - - - - - - - Workflows de Aprobación -

-

Motor de reglas multinivel para aprobación y publicación de contenidos

+ +
+ - -
+ +
- -
-

- ➕ Agregar Nueva Propuesta -

+ +
+

Workflow & colescior

-
- -
- - -
- - -
- -
- -
▼
-
-
- - -
- - -
- - -
- -
- - - - - -
-
- - - - - @if (formError()) { -
{{ formError() }}
- } - @if (formSuccess()) { -
¡Propuesta enviada con éxito al nivel de revisión 1!
- } -
- - -
-
-

Visualización del Motor AD

- Servicio Activo +
+
+ +
-

Visualización técnica del flujo de validación del Active Directory para jerarquías organizacionales.

- - -
- - - - - - - - AD ENGINE +
- -
-
- Servidor AD - LDAP SECURE -
-
- Latencia - 1.2ms -
-
+ Filter +
+
+ + +
+

Workflow de Aprobación de Publicaciones

- -
-
-

- 📋 Cola de Aprobaciones Pendientes -

- {{ contentService.pending().length }} solicitudes activas -
- - -
- @for (art of contentService.pending(); track art.id) { -
- - -
-
- - -
-
- - 👤 Autor: {{ art.author }} · {{ art.date }} - -

{{ art.title }}

-
- - - - {{ art.approvalLevel === 1 ? 'Nivel 1: Revisión Técnica' : 'Nivel 2: Autorización RR.HH.' }} - -
- - -

{{ art.body }}

- - -
- Destinos Objetivo: - @for (t of art.shareTargets; track t) { - {{ t }} - } -
- - -
- - -
- -
- } - - @if (contentService.pending().length === 0) { -
-
- 🎉 -
-
-

¡Cola de Solicitudes al Día!

-

No hay propuestas pendientes para revisar en el AD Engine en este momento.

-
-
- } -
- - -
-

- 📰 Artículos Publicados Recientemente -

+ +
+ + +
+

Editor de Publicación

-
- @for (art of contentService.articles().slice(0, 2); track art.id) { -
-
- {{ art.category }} - Publicado +
+
+ + +
+ +
+ +
+ +
+ + + + | + + + + +
-

{{ art.title }}

-

{{ art.body }}

+ + +
+
+ + + + + + + + @if (formError()) { +
{{ formError() }}
+ } + @if (formSuccess()) { +
Publicado con éxito para aprobación.
+ } +
+
+ + +
+
+

Publicaciones en Cola (Aprobación)

+ i +
+ +
+ @for (art of contentService.pending(); track art.id) { +
-
- -
- +
+

{{ art.title }}

+ + Estado: {{ art.approvalLevel === 1 ? 'Anuvos' : 'Statuca' }} + + + +
+ +
+ @if (art.approvalLevel >= 1) { +
Stage
+ } +
+ @if (art.approvalLevel >= 1) { ✓ } @else { 1 } +
+ Aprobador 1 +
+ +
→
+ + +
+ @if (art.approvalLevel >= 2) { +
Stage
+ } +
+ @if (art.approvalLevel >= 2) { ✓ } @else { 2 } +
+ Aprobador 2 +
+ +
→
+ + +
+
...
+ Aprobador... +
+ +
→
+ + +
+
3
+ Aprobador 3 +
+
+ + +
+ Aprobar / Rechazar + +
+ + + + + + + + +
+ + +
+ +
+ } + + @if (contentService.pending().length === 0) { +
+ 🎉 +

Cola de Aprobaciones Limpia

+

No hay ninguna publicación en espera de validación.

}
+
-
+ +
+

Compartir en Redes Sociales

+ +
+
+
in
+ COMPARTIR EN
LINKEDIN +
+ +
+ + COMPARTIR EN
TWITTER +
+ +
+ + COMPARTIR EN
FACEBOOK +
+ +
+
🔗
+ COMPARTIR EN
LINK +
+
+
+ +
+
`, styles: [` - .animate-fadeIn { - animation: fadeIn 0.35s ease-out forwards; + /* ── LAYOUT PRINCIPAL ── */ + .wf-shell { + display: flex; + background: #f4f3ef; /* Light beige/grey background */ + min-height: 90vh; + border-radius: 24px; + overflow: hidden; + border: 1px solid rgba(15, 13, 10, 0.08); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02); + font-family: 'Outfit', 'Inter', system-ui, sans-serif; } - .animate-spin-slow { - animation: spin 16s linear infinite; + + /* Sidebar */ + .wf-sidebar { + width: 90px; + background: #000000; + display: flex; + flex-direction: column; + align-items: center; + padding: 24px 0; + flex-shrink: 0; } - .animate-spin-medium { - animation: spin 10s linear infinite; + + .wf-sidebar__brand { + font-size: 11px; + font-weight: 900; + letter-spacing: 0.12em; + color: rgba(255, 255, 255, 0.4); + margin-bottom: 24px; } - .animate-spin-reverse { - animation: spin-back 8s linear infinite; + + .wf-sidebar__logo-container { + width: 44px; + height: 44px; + border-radius: 12px; + background: #ffffff; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; } - @keyframes fadeIn { - from { opacity: 0; transform: translateY(8px); } - to { opacity: 1; transform: translateY(0); } + + .wf-sidebar__logo-btn { + font-size: 18px; + font-weight: 900; + color: #000000; } - @keyframes spin { - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } + + /* Content Area */ + .wf-content { + flex-grow: 1; + padding: 24px; + display: flex; + flex-direction: column; + gap: 20px; + min-width: 0; + position: relative; } - @keyframes spin-back { - from { transform: rotate(360deg); } - to { transform: rotate(0deg); } + + /* Topbar */ + .wf-topbar { + background: #111625; /* Dark background topbar */ + border-radius: 16px; + padding: 14px 24px; + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 12px; + } + + .wf-topbar__title { + font-size: 18px; + font-weight: 700; + color: #ffffff; + margin: 0; + } + + .wf-topbar__controls { + display: flex; + align-items: center; + gap: 12px; + } + + .wf-search { + position: relative; + width: 180px; + } + + .wf-search__field { + width: 100%; + background: rgba(255, 255, 255, 0.08); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 10px; + padding: 6px 12px 6px 32px; + font-size: 11px; + color: #ffffff; + outline: none; + transition: background 0.15s ease; + } + + .wf-search__field::placeholder { + color: rgba(255, 255, 255, 0.4); + } + + .wf-search__field:focus { + background: rgba(255, 255, 255, 0.12); + border-color: rgba(255, 255, 255, 0.2); + } + + .wf-search__btn { + position: absolute; + left: 10px; + top: 50%; + transform: translateY(-50%); + background: transparent; + border: none; + color: rgba(255, 255, 255, 0.4); + cursor: pointer; + display: flex; + align-items: center; + } + + .wf-btn-filter { + background: rgba(255, 255, 255, 0.08); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 10px; + color: #ffffff; + font-size: 11px; + font-weight: 600; + padding: 6px 14px; + cursor: pointer; + display: inline-flex; + align-items: center; + gap: 6px; + transition: background-color 0.15s; + } + + .wf-btn-filter:hover { + background: rgba(255, 255, 255, 0.12); + } + + /* Section Title */ + .wf-section-title-wrap { + margin-top: 4px; + } + + .wf-section-title { + font-size: 20px; + font-weight: 800; + color: #000000; + margin: 0; + letter-spacing: -0.01em; + } + + /* Grid */ + .wf-grid { + display: grid; + grid-template-columns: 1fr; + gap: 24px; + } + + @media (min-width: 1024px) { + .wf-grid { + grid-template-columns: 4fr 7fr; + } + } + + /* Cards */ + .wf-card { + background: #ffffff; + border-radius: 20px; + padding: 24px; + border: 1px solid #e2e8f0; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01); + display: flex; + flex-direction: column; + gap: 16px; + } + + .wf-card--queue { + background: #f8fafc; + } + + .wf-card__header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .wf-card__title { + font-size: 15px; + font-weight: 800; + color: #000000; + margin: 0; + letter-spacing: -0.01em; + } + + .wf-card__info-icon { + width: 18px; + height: 18px; + border-radius: 50%; + background: #e2e8f0; + color: #64748b; + font-size: 11px; + font-weight: bold; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + } + + /* Form editor */ + .wf-form { + display: flex; + flex-direction: column; + gap: 16px; + } + + .wf-form__group { + display: flex; + flex-direction: column; + gap: 6px; + } + + .wf-form__label { + font-size: 11px; + font-weight: 700; + color: #64748b; + } + + .wf-form__input { + width: 100%; + border: 1px solid #cbd5e1; + border-radius: 10px; + padding: 8px 12px; + font-size: 12px; + outline: none; + color: #000; + } + + .wf-form__input::placeholder { + color: #94a3b8; + } + + .wf-form__input:focus { + border-color: #64748b; + } + + /* Faux editor styles */ + .wf-editor { + border: 1px solid #cbd5e1; + border-radius: 10px; + overflow: hidden; + display: flex; + flex-direction: column; + } + + .wf-editor__toolbar { + background: #f8fafc; + border-bottom: 1px solid #cbd5e1; + padding: 6px 12px; + display: flex; + align-items: center; + gap: 12px; + flex-wrap: wrap; + } + + .wf-editor__tool { + background: transparent; + border: none; + font-size: 11px; + font-weight: 500; + color: #475569; + cursor: pointer; + padding: 2px 4px; + border-radius: 4px; + } + + .wf-editor__tool:hover { + background: #e2e8f0; + color: #0f172a; + } + + .wf-editor__tool--bold { font-weight: 800; } + .wf-editor__tool--italic { font-style: italic; } + .wf-editor__tool--underline { text-decoration: underline; } + .wf-editor__tool-sep { color: #cbd5e1; font-size: 10px; } + + .wf-editor__textarea { + width: 100%; + border: none; + outline: none; + padding: 10px 12px; + font-size: 12px; + resize: none; + color: #000; + } + + .wf-editor__textarea::placeholder { + color: #94a3b8; + } + + .wf-btn-attach { + background: #f1f5f9; + border: 1px solid #e2e8f0; + color: #334155; + font-size: 11px; + font-weight: 700; + padding: 8px 16px; + border-radius: 10px; + cursor: pointer; + display: inline-flex; + align-items: center; + gap: 6px; + align-self: flex-start; + transition: background 0.15s; + } + + .wf-btn-attach:hover { + background: #e2e8f0; + } + + .wf-btn-attach svg { + color: #64748b; + } + + .wf-btn-submit { + width: 100%; + background: #084d47; /* Teal-dark green */ + border: none; + color: #ffffff; + font-size: 12px; + font-weight: 800; + letter-spacing: 0.04em; + padding: 12px 0; + border-radius: 10px; + cursor: pointer; + transition: background 0.15s; + } + + .wf-btn-submit:hover { + background: #053b36; + } + + .wf-alert { + font-size: 10.5px; + font-weight: 700; + text-align: center; + padding: 8px; + border-radius: 8px; + } + + .wf-alert--error { + background: #fde8e8; + color: #9b1c1c; + } + + .wf-alert--success { + background: #def7ec; + color: #03543f; + } + + /* Queue list */ + .wf-queue-list { + display: flex; + flex-direction: column; + gap: 16px; + } + + .wf-queue-item { + background: #ffffff; + border: 1px solid #e2e8f0; + border-radius: 16px; + padding: 20px; + display: flex; + justify-content: space-between; + gap: 24px; + flex-wrap: wrap; + } + + .wf-queue-item__left { + flex: 1; + min-width: 240px; + display: flex; + flex-direction: column; + gap: 6px; + } + + .wf-queue-item__title { + font-size: 14px; + font-weight: 800; + color: #000000; + margin: 0; + letter-spacing: -0.01em; + } + + .wf-queue-item__status { + font-size: 11px; + color: #64748b; + } + + .wf-queue-item__status-val { + background: #fef3c7; + color: #d97706; + font-weight: 700; + padding: 2px 8px; + border-radius: 6px; + font-size: 10px; + margin-left: 2px; + } + + .wf-queue-item__right { + display: flex; + flex-direction: column; + gap: 8px; + width: 200px; + flex-shrink: 0; + } + + .wf-queue-item__action-label { + font-size: 11px; + font-weight: 700; + color: #000000; + } + + .wf-actions-row { + display: flex; + gap: 6px; + } + + .wf-btn-action { + flex: 1; + border: none; + color: #ffffff; + font-size: 10px; + font-weight: 700; + padding: 6px 0; + border-radius: 8px; + cursor: pointer; + text-align: center; + transition: background 0.15s; + } + + .wf-btn-action--gray { + background: #64748b; + } + .wf-btn-action--gray:hover:not(:disabled) { + background: #475569; + } + + .wf-btn-action--green { + background: #10b981; + } + .wf-btn-action--green:hover:not(:disabled) { + background: #059669; + } + + .wf-btn-action--red { + background: #ef4444; + } + .wf-btn-action--red:hover { + background: #dc2626; + } + + .wf-btn-action--disabled { + background: #cbd5e1 !important; + color: #94a3b8 !important; + cursor: not-allowed; + } + + .wf-queue-item__comments { + width: 100%; + border: 1px solid #cbd5e1; + background: #f8fafc; + border-radius: 8px; + padding: 6px 10px; + font-size: 11px; + outline: none; + resize: none; + color: #000; + } + + .wf-queue-item__comments::placeholder { + color: #94a3b8; + } + + /* Timeline horizontal */ + .wf-timeline { + display: flex; + align-items: center; + gap: 12px; + margin-top: 14px; + } + + .wf-node { + display: flex; + flex-direction: column; + align-items: center; + position: relative; + } + + .wf-node__stage-tag { + position: absolute; + top: -16px; + background: #1e293b; + color: #ffffff; + font-size: 8px; + font-weight: 800; + text-transform: uppercase; + padding: 1px 4px; + border-radius: 3px; + } + + .wf-node__circle { + width: 24px; + height: 24px; + border-radius: 50%; + border: 2px solid #cbd5e1; + background: #ffffff; + color: #94a3b8; + font-size: 10px; + font-weight: 700; + display: flex; + align-items: center; + justify-content: center; + margin-top: 8px; + } + + .wf-node__circle--active { + border-color: #f59e0b; /* Yellow warning border */ + background: #fffbeb; + color: #d97706; + } + + .wf-node__circle--dots { + font-size: 9px; + border-style: solid; + background: #ffffff; + } + + .wf-node__label { + font-size: 9px; + font-weight: 600; + color: #64748b; + margin-top: 4px; + } + + .wf-timeline__arrow { + font-size: 11px; + color: #94a3b8; + margin-top: 14px; + } + + /* Empty state */ + .wf-empty { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 10px; + padding: 40px 20px; + text-align: center; + color: #64748b; + } + + .wf-empty__emoji { + font-size: 24px; + } + + .wf-empty__title { + font-size: 14px; + font-weight: 800; + color: #000000; + margin: 0; + } + + .wf-empty__desc { + font-size: 11px; + margin: 0; + } + + /* ── WIDGET COMPARTIR REDES SOCIALES ── */ + .wf-share-widget { + background: #ffffff; + border-radius: 20px; + padding: 16px 20px; + border: 1px solid #e2e8f0; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); + display: flex; + flex-direction: column; + gap: 12px; + width: 340px; + align-self: flex-end; + margin-top: 10px; + z-index: 10; + } + + @media (min-width: 1024px) { + .wf-share-widget { + position: absolute; + bottom: 24px; + right: 24px; + margin-top: 0; + } + } + + .wf-share-widget__title { + font-size: 12px; + font-weight: 800; + color: #000000; + margin: 0; + letter-spacing: -0.01em; + } + + .wf-share-widget__row { + display: flex; + justify-content: space-between; + gap: 8px; + } + + .wf-share-icon-btn { + display: flex; + flex-direction: column; + align-items: center; + gap: 6px; + cursor: pointer; + flex: 1; + } + + .wf-share-icon { + width: 44px; + height: 44px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + color: #ffffff; + font-size: 18px; + font-weight: 800; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); + transition: transform 0.15s ease; + } + + .wf-share-icon-btn:hover .wf-share-icon { + transform: scale(1.05); + } + + .wf-share-icon--linkedin { background: #0077b5; } + .wf-share-icon--twitter { background: #000000; } + .wf-share-icon--facebook { background: #1877f2; } + .wf-share-icon--link { background: #10b981; font-size: 16px; } + + .wf-share-icon-label { + font-size: 7.5px; + font-weight: 800; + color: #64748b; + text-align: center; + letter-spacing: 0.02em; + line-height: 1.3; } `] }) @@ -308,9 +915,6 @@ export class WorkflowsComponent { newTitle = ''; newCategory = 'Tecnología'; newBody = ''; - targetIntranet = true; - targetLinkedIn = false; - targetX = false; formError = signal(''); formSuccess = signal(false); @@ -324,25 +928,14 @@ export class WorkflowsComponent { return; } - const targets: string[] = []; - if (this.targetIntranet) targets.push('Intranet'); - if (this.targetLinkedIn) targets.push('LinkedIn'); - if (this.targetX) targets.push('X'); - - if (targets.length === 0) { - this.formError.set('Debes seleccionar al menos un canal de publicación.'); - setTimeout(() => this.formError.set(''), 3000); - return; - } + // Default target: Intranet/LinkedIn/X since targets are now managed in social widget/default + const targets = ['Intranet']; this.contentService.addPending(t, this.newCategory, b, 'Jess Miller', targets); // Clear form this.newTitle = ''; this.newBody = ''; - this.targetIntranet = true; - this.targetLinkedIn = false; - this.targetX = false; this.formSuccess.set(true); setTimeout(() => this.formSuccess.set(false), 3000);