AvanzaCast/packages/broadcast-panel/README_UPDATED.md

Broadcast Panel - AvanzaCast 🎥

Panel de administración de transmisiones en vivo con diseño moderno y profesional basado en la plantilla Techwind Dashboard.

✨ Características Implementadas

🎨 UI/UX Moderno

• ✅ Diseño limpio y profesional basado en Techwind v2.2.0
• ✅ React Icons (Material Design Icons) para iconografía consistente
• ✅ CSS Modules con variables CSS para tematización
• ✅ Diseño responsive con breakpoints móvil/tablet/desktop
• ✅ Animaciones fluidas y transiciones suaves

🌓 Tema Oscuro Funcional

• ✅ ThemeProvider con Context API de React
• ✅ Persistencia en localStorage
• ✅ Toggle inmediato sin recarga
• ✅ Variables CSS dinámicas para colores
• ✅ Transiciones suaves entre temas (0.3s ease)

🎯 Componentes Interactivos

• ✅ Tooltips: Información contextual en hover con animaciones
• ✅ Dropdown Menu: Menú de usuario con opciones (Perfil, Ayuda, Cerrar sesión)
• ✅ Loading Skeletons: Estados de carga con animación shimmer
• ✅ Modal: Creación de transmisiones con animaciones (fadeIn + slideUp)

🗓️ Filtrado Inteligente

• ✅ Tabs "Próximamente" / "Anteriores"
• ✅ Filtrado real por fechas usando Date comparison
• ✅ Manejo de transmisiones sin fecha programada
• ✅ Mensajes contextuales cuando no hay datos

📱 Iconos de Plataforma

• 🎥 YouTube - Rojo (#FF0000)
• 📘 Facebook - Azul (#1877F2)
• 🎮 Twitch - Morado (#9146FF)
• 💼 LinkedIn - Azul profesional (#0A66C2)

🎨 Sistema de Diseño

Paleta de Colores

Modo Claro 🌞

--primary-blue: #4f46e5          /* Indigo-600 */
--primary-blue-hover: #4338ca    /* Indigo-700 */
--background-color: #f7f8fa      /* Gray-50 */
--surface-color: #ffffff         /* White */
--text-primary: #1f2937          /* Gray-800 */
--text-secondary: #6b7280        /* Gray-500 */
--border-light: #e5e7eb          /* Gray-200 */
--active-bg-light: #eef2ff       /* Indigo-50 */

Modo Oscuro 🌙

--primary-blue: #6366f1          /* Indigo-500 */
--primary-blue-hover: #4f46e5    /* Indigo-600 */
--background-color: #0f172a      /* Slate-900 */
--surface-color: #1e293b         /* Slate-800 */
--text-primary: #f1f5f9          /* Slate-100 */
--text-secondary: #cbd5e1        /* Slate-300 */
--border-light: #334155          /* Slate-700 */
--active-bg-light: #312e81       /* Indigo-950 */

Tipografía

• Familia: Inter, -apple-system, BlinkMacSystemFont, Segoe UI
• Tamaños:
  • Caption: 12px
  • Body: 14px
  • Subtitle: 16px
  • Heading: 22px
• Pesos:
  • Normal: 400
  • Medium: 500
  • Semibold: 600

Espaciado

• Gaps: 8px, 12px, 16px, 20px
• Padding: 12px, 16px, 20px, 24px, 32px
• Bordes redondeados: 4px, 6px, 8px, 12px

Sombras

--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05)
--shadow-md: 0 1px 3px 0 rgba(0, 0, 0, 0.1)
--shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.1)

📦 Componentes Reutilizables

ThemeProvider

Proveedor de tema con persistencia en localStorage.

import { ThemeProvider } from './components/ThemeProvider'

<ThemeProvider>
  <App />
</ThemeProvider>

Hook de uso:

import { useTheme } from './components/ThemeProvider'

const { theme, toggleTheme } = useTheme()
// theme: 'light' | 'dark'

Tooltip

Tooltip contextual con 4 posiciones posibles.

import { Tooltip } from './components/Tooltip'

<Tooltip content="Texto del tooltip" position="bottom">
  <button>Hover aquí</button>
</Tooltip>

Props:

• content: string - Texto a mostrar
• position: 'top' | 'bottom' | 'left' | 'right' - Posición del tooltip
• children: ReactNode - Elemento que activa el tooltip

Dropdown

Menú desplegable con click outside detection.

import { Dropdown } from './components/Dropdown'

<Dropdown
  trigger={<button>Abrir menú</button>}
  items={[
    { 
      label: 'Mi perfil', 
      icon: <MdPerson />, 
      onClick: () => console.log('Perfil') 
    },
    { 
      label: 'Cerrar sesión', 
      icon: <MdLogout />, 
      onClick: handleLogout,
      divider: true  // Separador antes del item
    }
  ]}
/>

Props:

• trigger: ReactNode - Elemento que abre el dropdown
• items: DropdownItem[] - Array de opciones del menú

Skeleton

Componentes de carga con animación shimmer.

import { Skeleton, SkeletonCard, SkeletonTable } from './components/Skeleton'

// Skeleton simple
<Skeleton width="200px" height="20px" borderRadius="6px" />

// Card completa con skeleton
<SkeletonCard />

// Tabla con múltiples filas
<SkeletonTable rows={5} />

🏗️ Estructura de Componentes

src/components/
├── ThemeProvider.tsx             # Context de tema dark/light
├── Tooltip.tsx                   # Tooltip reutilizable
├── Tooltip.module.css
├── Dropdown.tsx                  # Menú desplegable
├── Dropdown.module.css
├── Skeleton.tsx                  # Estados de carga
├── Skeleton.module.css
├── PageContainer.tsx             # Layout principal
├── PageContainer.module.css
├── Sidebar.tsx                   # Navegación lateral
├── Sidebar.module.css
├── Header.tsx                    # Barra superior
├── Header.module.css
├── TransmissionsTable.tsx        # Tabla con filtrado
├── TransmissionsTable.module.css
├── NewTransmissionModal.tsx      # Modal de creación
└── NewTransmissionModal.module.css

🚀 Scripts

# Desarrollo (hot reload)
npm run dev

# Build de producción
npm run build

# Preview del build
npm run preview

# Linting
npm run lint

El servidor de desarrollo estará disponible en: http://localhost:5173/

📱 Breakpoints Responsivos

/* Mobile - Sidebar oculto, layout vertical */
@media (max-width: 768px)

/* Tablet - Sidebar colapsable */
@media (max-width: 1024px)

/* Desktop - Sidebar fijo, layout completo */
@media (min-width: 1025px)

Comportamiento Responsive

• Desktop (>1024px): Sidebar fijo de 260px, header completo
• Tablet (768-1024px): Sidebar colapsable, header adaptado
• Mobile (<768px): Sidebar con toggle, header compacto, botones simplificados

🎯 Funcionalidades Implementadas

1. React Icons ✅

• Reemplazo completo de emojis con Material Design Icons
• Iconos de plataforma con colores branded (YouTube, Facebook, Twitch, LinkedIn)
• Consistencia visual en toda la aplicación

2. Tema Oscuro ✅

• Sistema de temas con Context API
• Persistencia automática en localStorage
• Toggle funcional sin recarga de página
• Variables CSS reactivas para transiciones suaves

3. Loading Skeletons ✅

• Estados de carga con animación shimmer
• Componentes específicos: Skeleton, SkeletonCard, SkeletonTable
• Simulación de carga de 800ms en PageContainer
• Mejora significativa en UX percibido

4. Dropdown de Usuario ✅

• Menú desplegable con 3 opciones (Perfil, Ayuda, Cerrar sesión)
• Click outside detection para cerrar
• Animación slideDown (0.2s ease-out)
• Separadores entre secciones del menú

5. Tooltips Informativos ✅

• Tooltips en todos los botones interactivos
• 4 posiciones: top, bottom, left, right
• Animación fadeIn (0.2s ease-in-out)
• Diseño con flecha direccional

6. Filtrado por Fechas ✅

• Tabs "Próximamente" / "Anteriores"
• Comparación real de fechas con new Date()
• Manejo de transmisiones sin fecha (upcoming por defecto)
• Mensajes contextuales en estado vacío

📄 Licencia de Assets

Plantilla Techwind

• Autor: ShreeThemes
• Versión: 2.2.0
• Licencia: Uso comercial permitido con atribución

Iconos

• react-icons/md: Material Design Icons (Apache 2.0 License)
• react-icons/fa: Font Awesome Free (CC BY 4.0 License)

Assets Copiados

public/assets/
├── logo-dark.png         # Logo modo claro
├── logo-light.png        # Logo modo oscuro
├── logo-icon.png         # Icono app (64x64)
├── logo-icon-32.png      # Icono pequeño (32x32)
└── logo-icon-64.png      # Icono mediano (64x64)

public/
└── favicon.ico           # Favicon del sitio

🚧 Próximas Mejoras

Fase 2 - Backend Integration

1. API REST

   • Endpoints de transmisiones (CRUD)
   • Autenticación con JWT
   • Manejo de errores HTTP

2. Estado Global

   • Migrar a Zustand o Redux
   • Sincronización con backend
   • Optimistic updates

Fase 3 - Features Avanzadas

1. Notificaciones en Tiempo Real

   • WebSocket para notificaciones
   • Panel de notificaciones
   • Badge con contador dinámico

2. Búsqueda y Filtros

   • Búsqueda por título
   • Filtros combinados (plataforma + fecha + estado)
   • Ordenamiento de columnas

3. Analytics Dashboard

   • Gráficos con ApexCharts
   • Estadísticas de transmisiones
   • Métricas de audiencia

🐛 Debugging

Para ver el estado del tema:

// En la consola del navegador
localStorage.getItem('avanzacast-theme')

Para resetear el tema:

localStorage.removeItem('avanzacast-theme')
window.location.reload()

📞 Soporte

Para bugs o sugerencias, abrir issue en el repositorio.

---

Desarrollado con ❤️ para AvanzaCast
Versión 2.0 - Última actualización: 2024