343 lines
9.1 KiB
Markdown
343 lines
9.1 KiB
Markdown
# 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 🌞
|
|
```css
|
|
--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 🌙
|
|
```css
|
|
--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
|
|
```css
|
|
--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.
|
|
|
|
```tsx
|
|
import { ThemeProvider } from './components/ThemeProvider'
|
|
|
|
<ThemeProvider>
|
|
<App />
|
|
</ThemeProvider>
|
|
```
|
|
|
|
**Hook de uso:**
|
|
```tsx
|
|
import { useTheme } from './components/ThemeProvider'
|
|
|
|
const { theme, toggleTheme } = useTheme()
|
|
// theme: 'light' | 'dark'
|
|
```
|
|
|
|
### Tooltip
|
|
Tooltip contextual con 4 posiciones posibles.
|
|
|
|
```tsx
|
|
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.
|
|
|
|
```tsx
|
|
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.
|
|
|
|
```tsx
|
|
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
|
|
└── (Ahora usa `shared/components/NewTransmissionModal.tsx` y su CSS compartida)
|
|
```
|
|
|
|
## 🚀 Scripts
|
|
|
|
```bash
|
|
# 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
|
|
|
|
```css
|
|
/* 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:
|
|
```javascript
|
|
// En la consola del navegador
|
|
localStorage.getItem('avanzacast-theme')
|
|
```
|
|
|
|
Para resetear el tema:
|
|
```javascript
|
|
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*
|