+
+ );
+ }
+
+ if (!user) {
+ return Cargando...
+
+
+ );
+ }
+
+ return <>{children};
+}
+
diff --git a/admin-panel/src/components/content/ResourcesManager.tsx b/admin-panel/src/components/content/ResourcesManager.tsx
new file mode 100644
index 00000000..d4e88003
--- /dev/null
+++ b/admin-panel/src/components/content/ResourcesManager.tsx
@@ -0,0 +1,404 @@
+/**
+ * Componente para gestionar recursos multimedia asociados a contenido
+ */
+
+import { useState, useEffect } from 'react';
+import { Image, Video, Trash2, X, Search, Link2 } from 'lucide-react';
+
+const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:3000';
+
+interface MediaResource {
+ id: string;
+ type: 'image' | 'video';
+ file_url: string;
+ title: string;
+ description?: string;
+ alt_text?: string;
+ thumbnail_url?: string;
+}
+
+interface ResourceAssociation {
+ id: string;
+ media_resource_id: string;
+ section: string;
+ position: number;
+ placement: string;
+ caption?: string;
+ is_critical: boolean;
+ priority: string;
+ type: 'image' | 'video';
+ file_url: string;
+ title: string;
+ description?: string;
+ alt_text?: string;
+}
+
+interface ResourcesManagerProps {
+ contentId: string;
+ resources: ResourceAssociation[];
+ onResourcesChange: (resources: ResourceAssociation[]) => void;
+ showSelector: boolean;
+ onCloseSelector: () => void;
+}
+
+export default function ResourcesManager({
+ contentId,
+ resources,
+ onResourcesChange,
+ showSelector,
+ onCloseSelector,
+}: ResourcesManagerProps) {
+ const [availableResources, setAvailableResources] = useState
+
+ Acceso Denegado
++ No tienes permisos para acceder a esta sección. +
+
+
+ ) : (
+ No hay recursos asociados. Haz clic en "Asociar Recurso" para comenzar.
+
+ {resources.map((resource) => (
+
+ )}
+
+ {/* Modal selector de recursos */}
+ {showSelector && (
+
+
+ ))}
+
+ {resource.type === 'image' ? (
+ 
+ ) : (
+
+
+
+ Vídeo
+
+ )}
+
+ {resource.type === 'image' ? (
+
+
+
+ {resource.title}
+ {resource.caption && ( +{resource.caption}
+ )} +
+ Sección: {resource.section}
+ {resource.is_critical && (
+
+ Crítico
+
+ )}
+
+
+
+
+
+
+
+ )}
+
+ );
+}
+
diff --git a/admin-panel/src/components/content/ValidationHistory.tsx b/admin-panel/src/components/content/ValidationHistory.tsx
new file mode 100644
index 00000000..f9e69114
--- /dev/null
+++ b/admin-panel/src/components/content/ValidationHistory.tsx
@@ -0,0 +1,157 @@
+/**
+ * Componente para mostrar historial de validación
+ */
+
+import { useState, useEffect } from 'react';
+import { Clock, CheckCircle, XCircle, Send, FileText } from 'lucide-react';
+
+const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:3000';
+
+interface ValidationHistoryItem {
+ id: string;
+ action: string;
+ timestamp: string;
+ metadata: any;
+ username?: string;
+ role?: string;
+}
+
+interface ValidationHistoryProps {
+ contentId: string;
+}
+
+export default function ValidationHistory({ contentId }: ValidationHistoryProps) {
+ const [history, setHistory] = useState
+
+
+
+
+ Seleccionar Recurso
+ +
+ {/* Búsqueda */}
+
+
+
+
+
+ {/* Lista de recursos */}
+ {isLoading ? (
+ Cargando...
+ ) : availableResources.length === 0 ? (
+
+ No se encontraron recursos
+
+ ) : (
+
+ {availableResources.map((resource) => (
+
+ )}
+
+ {/* Formulario de asociación */}
+ {selectedResource && (
+ setSelectedResource(resource)}
+ className={`border rounded-lg overflow-hidden cursor-pointer transition-all ${
+ selectedResource?.id === resource.id
+ ? 'border-primary ring-2 ring-primary'
+ : 'border-border hover:border-primary/50'
+ }`}
+ >
+
+ ))}
+
+ {resource.type === 'image' ? (
+
+ ) : (
+
+
+
+ Vídeo
+
+ )}
+
+
+ + {resource.title} +
+
+
+ )}
+ Configurar Asociación
+
+
+
+
+
+
+
+
+
+
+
+
+
+ setAssociationData({ ...associationData, caption: e.target.value })
+ }
+ placeholder="Descripción opcional"
+ className="w-full px-3 py-2 bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary text-sm"
+ />
+
+
+
+
+
+
+
+
+
+
+
+ {isExpanded && (
+
+ );
+}
+
diff --git a/admin-panel/src/components/layout/Layout.tsx b/admin-panel/src/components/layout/Layout.tsx
new file mode 100644
index 00000000..0b70d072
--- /dev/null
+++ b/admin-panel/src/components/layout/Layout.tsx
@@ -0,0 +1,159 @@
+/**
+ * Layout principal del admin panel
+ */
+
+import { ReactNode } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { useAuth } from '../../contexts/AuthContext';
+import {
+ LayoutDashboard,
+ FileText,
+ BookOpen,
+ Pill,
+ CheckSquare,
+ FileSearch,
+ Package,
+ Image,
+ ShieldCheck,
+ LogOut,
+ Menu,
+ X,
+} from 'lucide-react';
+import { useState } from 'react';
+
+interface LayoutProps {
+ children: ReactNode;
+}
+
+export default function Layout({ children }: LayoutProps) {
+ const { user, logout } = useAuth();
+ const location = useLocation();
+ const [sidebarOpen, setSidebarOpen] = useState(false);
+
+ const navigation = [
+ { name: 'Dashboard', href: '/dashboard', icon: LayoutDashboard },
+ { name: 'Biblioteca', href: '/content', icon: FileText },
+ { name: 'Vademécum', href: '/drugs', icon: Pill },
+ { name: 'Recursos', href: '/media', icon: Image },
+ { name: 'Content Pack', href: '/content-pack', icon: Package },
+ { name: 'Validación', href: '/validation', icon: ShieldCheck },
+ { name: 'Nuevo Checklist', href: '/content/checklist', icon: CheckSquare },
+ { name: 'Auditoría', href: '/audit', icon: FileSearch },
+ ];
+
+ return (
+
+ {isLoading ? (
+
+ )}
+
+ Cargando historial...
+
+ ) : history.length === 0 ? (
+
+ No hay historial de validación
+
+ ) : (
+ history.map((item) => {
+ const Icon = getActionIcon(item.action);
+ return (
+
+
+ );
+ })
+ )}
+
+
+
+
+ {item.username && (
+ + {getActionLabel(item.action)} +
++ {new Date(item.timestamp).toLocaleString('es-ES')} +
++ Por {item.username} ({item.role}) +
+ )} + {item.metadata?.notes && ( ++ {item.metadata.notes} +
+ )} +
+ {/* Sidebar móvil */}
+ ;
+ logout: () => void;
+ hasPermission: (permission: string) => boolean;
+}
+
+const AuthContext = createContext(undefined);
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+ const [user, setUser] = useState(null);
+ const [token, setToken] = useState(null);
+ const [isLoading, setIsLoading] = useState(true);
+
+ // Cargar token y usuario desde localStorage al iniciar
+ useEffect(() => {
+ const storedToken = localStorage.getItem('admin_token');
+ const storedUser = localStorage.getItem('admin_user');
+
+ if (storedToken && storedUser) {
+ setToken(storedToken);
+ setUser(JSON.parse(storedUser));
+
+ // Verificar que el token sigue siendo válido
+ authService.verifyToken(storedToken).catch(() => {
+ logout();
+ });
+ }
+
+ setIsLoading(false);
+ }, []);
+
+ const login = async (credentials: LoginRequest) => {
+ const response = await authService.login(credentials);
+ setToken(response.token);
+ setUser(response.user);
+
+ localStorage.setItem('admin_token', response.token);
+ localStorage.setItem('admin_user', JSON.stringify(response.user));
+ };
+
+ const logout = () => {
+ setToken(null);
+ setUser(null);
+ localStorage.removeItem('admin_token');
+ localStorage.removeItem('admin_user');
+ };
+
+ const hasPermission = (permission: string): boolean => {
+ if (!user) return false;
+
+ const rolePermissions: Record = {
+ super_admin: ['*'],
+ editor_clinico: [
+ 'content:read',
+ 'content:write:protocol',
+ 'content:write:drug',
+ 'content:write:checklist',
+ 'content:submit',
+ ],
+ editor_formativo: [
+ 'content:read',
+ 'content:write:guide',
+ 'content:write:manual',
+ 'content:submit',
+ ],
+ revisor: [
+ 'content:read',
+ 'content:validate',
+ 'content:approve',
+ 'audit:read',
+ ],
+ viewer: ['content:read'],
+ };
+
+ const permissions = rolePermissions[user.role] || [];
+ return permissions.includes(permission) || permissions.includes('*');
+ };
+
+ return (
+
+ {children}
+
+ );
+}
+
+export function useAuth() {
+ const context = useContext(AuthContext);
+ if (context === undefined) {
+ throw new Error('useAuth must be used within an AuthProvider');
+ }
+ return context;
+}
+
diff --git a/admin-panel/src/hooks/useContentStats.ts b/admin-panel/src/hooks/useContentStats.ts
new file mode 100644
index 00000000..7ccd832f
--- /dev/null
+++ b/admin-panel/src/hooks/useContentStats.ts
@@ -0,0 +1,91 @@
+/**
+ * Hook para obtener estadísticas de contenido
+ */
+
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+
+const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:3000';
+
+const api = axios.create({
+ baseURL: `${API_URL}/api`,
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+});
+
+// Interceptor para añadir token
+api.interceptors.request.use((config) => {
+ const token = localStorage.getItem('admin_token');
+ if (token) {
+ config.headers.Authorization = `Bearer ${token}`;
+ }
+ return config;
+});
+
+export function useContentStats() {
+ const [stats, setStats] = useState({
+ protocols: 0,
+ protocolsPublished: 0,
+ guides: 0,
+ guidesPublished: 0,
+ drugs: 0,
+ drugsPublished: 0,
+ checklists: 0,
+ checklistsPublished: 0,
+ });
+ const [isLoading, setIsLoading] = useState(true);
+
+ useEffect(() => {
+ async function fetchStats() {
+ try {
+ const response = await api.get('/stats/content');
+ const data = response.data;
+
+ console.log('📊 Estadísticas recibidas:', data);
+
+ // El backend ahora devuelve el formato esperado directamente
+ setStats({
+ protocols: data.protocols || 0,
+ protocolsPublished: data.protocolsPublished || 0,
+ guides: data.guides || 0,
+ guidesPublished: data.guidesPublished || 0,
+ drugs: data.drugs || 0,
+ drugsPublished: data.drugsPublished || 0,
+ checklists: data.checklists || 0,
+ checklistsPublished: data.checklistsPublished || 0,
+ });
+
+ console.log('✅ Estadísticas cargadas correctamente');
+ } catch (error: any) {
+ console.error('❌ Error cargando estadísticas:', error);
+ console.error('Detalles del error:', error.response?.data || error.message);
+ console.error('Status:', error.response?.status);
+
+ // Si es error 401, el token puede estar expirado
+ if (error.response?.status === 401) {
+ console.warn('⚠️ Token expirado o inválido. Por favor, inicia sesión nuevamente.');
+ }
+
+ // Mantener valores por defecto (0)
+ setStats({
+ protocols: 0,
+ protocolsPublished: 0,
+ guides: 0,
+ guidesPublished: 0,
+ drugs: 0,
+ drugsPublished: 0,
+ checklists: 0,
+ checklistsPublished: 0,
+ });
+ } finally {
+ setIsLoading(false);
+ }
+ }
+
+ fetchStats();
+ }, []);
+
+ return { stats, isLoading };
+}
+
diff --git a/admin-panel/src/index.css b/admin-panel/src/index.css
new file mode 100644
index 00000000..4a7f8b0e
--- /dev/null
+++ b/admin-panel/src/index.css
@@ -0,0 +1,34 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+ --background: 222.2 84% 4.9%;
+ --foreground: 210 40% 98%;
+ --card: 222.2 84% 4.9%;
+ --card-foreground: 210 40% 98%;
+ --border: 217.2 32.6% 17.5%;
+ --muted: 217.2 32.6% 17.5%;
+ --muted-foreground: 215 20.2% 65.1%;
+ --primary: 217.2 91.2% 59.8%;
+ --primary-foreground: 222.2 47.4% 11.2%;
+ --destructive: 0 62.8% 30.6%;
+ --destructive-foreground: 210 40% 98%;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+ 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+ sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ background-color: hsl(var(--background));
+ color: hsl(var(--foreground));
+}
+
diff --git a/admin-panel/src/main.tsx b/admin-panel/src/main.tsx
new file mode 100644
index 00000000..0c657b55
--- /dev/null
+++ b/admin-panel/src/main.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+
+);
+
diff --git a/admin-panel/src/pages/AuditPage.tsx b/admin-panel/src/pages/AuditPage.tsx
new file mode 100644
index 00000000..19f51e93
--- /dev/null
+++ b/admin-panel/src/pages/AuditPage.tsx
@@ -0,0 +1,23 @@
+/**
+ * Página de Auditoría
+ */
+
+export default function AuditPage() {
+ return (
+ >({});
+
+ // Estado del checklist
+ const [checklist, setChecklist] = useState>({
+ id: id || '',
+ type: 'checklist',
+ level: 'operativo',
+ title: '',
+ shortTitle: '',
+ description: '',
+ status: 'draft',
+ content: {
+ items: [],
+ description: '',
+ estimatedTime: '',
+ applicableProtocols: [],
+ tags: [],
+ },
+ });
+
+ // Cargar checklist existente
+ useEffect(() => {
+ if (isEdit && id) {
+ setIsLoading(true);
+ contentService
+ .getById(id)
+ .then((data: any) => {
+ setChecklist({
+ ...data,
+ content: data.content || {
+ items: [],
+ description: '',
+ estimatedTime: '',
+ applicableProtocols: [],
+ tags: [],
+ },
+ });
+ })
+ .catch((error) => {
+ console.error('Error cargando checklist:', error);
+ setErrors({ general: 'Error al cargar el checklist' });
+ })
+ .finally(() => setIsLoading(false));
+ }
+ }, [id, isEdit]);
+
+ // Validación
+ const validate = (): boolean => {
+ const newErrors: Record = {};
+
+ if (!checklist.id?.trim()) {
+ newErrors.id = 'ID es requerido';
+ }
+ if (!checklist.title?.trim()) {
+ newErrors.title = 'Título es requerido';
+ }
+ if (!checklist.content?.items || checklist.content.items.length === 0) {
+ newErrors.items = 'Debe tener al menos un item';
+ }
+
+ setErrors(newErrors);
+ return Object.keys(newErrors).length === 0;
+ };
+
+ // Guardar
+ const handleSave = async () => {
+ if (!validate()) {
+ return;
+ }
+
+ if (!hasPermission('content:write:checklist')) {
+ setErrors({ general: 'No tienes permisos para editar checklists' });
+ return;
+ }
+
+ setIsSaving(true);
+ try {
+ const payload = {
+ id: checklist.id,
+ type: 'checklist',
+ level: 'operativo',
+ title: checklist.title,
+ shortTitle: checklist.shortTitle,
+ description: checklist.description,
+ content: checklist.content,
+ status: checklist.status || 'draft',
+ };
+
+ if (isEdit) {
+ await contentService.update(id!, payload);
+ } else {
+ await contentService.create(payload);
+ }
+
+ navigate('/content');
+ } catch (error: any) {
+ console.error('Error guardando checklist:', error);
+ setErrors({ general: error.response?.data?.error || 'Error al guardar' });
+ } finally {
+ setIsSaving(false);
+ }
+ };
+
+ // Gestión de items
+ const addItem = () => {
+ const newItem: ChecklistItem = {
+ id: `item-${Date.now()}`,
+ text: '',
+ order: (checklist.content?.items?.length || 0) + 1,
+ critical: false,
+ };
+ setChecklist({
+ ...checklist,
+ content: {
+ ...checklist.content!,
+ items: [...(checklist.content?.items || []), newItem],
+ },
+ });
+ };
+
+ const removeItem = (itemId: string) => {
+ const items = checklist.content?.items?.filter((item) => item.id !== itemId) || [];
+ // Reordenar
+ items.forEach((item, index) => {
+ item.order = index + 1;
+ });
+ setChecklist({
+ ...checklist,
+ content: {
+ ...checklist.content!,
+ items,
+ },
+ });
+ };
+
+ const updateItem = (itemId: string, updates: Partial) => {
+ const items = checklist.content?.items?.map((item) =>
+ item.id === itemId ? { ...item, ...updates } : item
+ ) || [];
+ setChecklist({
+ ...checklist,
+ content: {
+ ...checklist.content!,
+ items,
+ },
+ });
+ };
+
+ const moveItem = (itemId: string, direction: 'up' | 'down') => {
+ const items = [...(checklist.content?.items || [])];
+ const index = items.findIndex((item) => item.id === itemId);
+ if (index === -1) return;
+
+ const newIndex = direction === 'up' ? index - 1 : index + 1;
+ if (newIndex < 0 || newIndex >= items.length) return;
+
+ [items[index], items[newIndex]] = [items[newIndex], items[index]];
+ items.forEach((item, i) => {
+ item.order = i + 1;
+ });
+
+ setChecklist({
+ ...checklist,
+ content: {
+ ...checklist.content!,
+ items,
+ },
+ });
+ };
+
+ if (isLoading) {
+ return (
+
+
+ );
+}
+
+function SidebarContent({
+ navigation,
+ location,
+ user,
+ logout,
+ onClose,
+}: {
+ navigation: any[];
+ location: any;
+ user: any;
+ logout: () => void;
+ onClose?: () => void;
+}) {
+ return (
+ <>
+ setSidebarOpen(false)}
+ />
+
+
+ {/* Sidebar desktop */}
+
+ setSidebarOpen(false)}
+ />
+
+
+
+
+ {/* Main content */}
+
+
+
+ {/* Top bar */}
+ {children}
+
+
+
+
+
+ {/* Page content */}
+
+
+ {user?.username} ({user?.role})
+
+
+
+
+
+
+
+ );
+}
+
diff --git a/admin-panel/src/contexts/AuthContext.tsx b/admin-panel/src/contexts/AuthContext.tsx
new file mode 100644
index 00000000..bb5c99a0
--- /dev/null
+++ b/admin-panel/src/contexts/AuthContext.tsx
@@ -0,0 +1,113 @@
+/**
+ * Contexto de autenticación
+ */
+
+import { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import { authService } from '../services/auth';
+import type { User, LoginRequest } from '../../shared/types/auth';
+
+interface AuthContextType {
+ user: User | null;
+ token: string | null;
+ isLoading: boolean;
+ login: (credentials: LoginRequest) => PromiseEMERGES TES
+ {onClose && ( + + )} +
+
+ );
+}
+
diff --git a/admin-panel/src/pages/ChecklistEditorPage.tsx b/admin-panel/src/pages/ChecklistEditorPage.tsx
new file mode 100644
index 00000000..b9f4d33a
--- /dev/null
+++ b/admin-panel/src/pages/ChecklistEditorPage.tsx
@@ -0,0 +1,481 @@
+/**
+ * Editor de Checklist Reutilizable
+ *
+ * Permite crear y editar checklists reutilizables (electrodos DESA, preparación IOT, etc.)
+ */
+
+import { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { Save, Plus, Trash2, GripVertical, AlertCircle, CheckCircle, Eye, ArrowLeft } from 'lucide-react';
+import { contentService } from '../services/content';
+import { useAuth } from '../contexts/AuthContext';
+import type { ChecklistReusable, ChecklistItem } from '../../shared/types/content';
+
+export default function ChecklistEditorPage() {
+ const { id } = useParams<{ id?: string }>();
+ const navigate = useNavigate();
+ const { hasPermission } = useAuth();
+ const isEdit = !!id;
+
+ const [isLoading, setIsLoading] = useState(false);
+ const [isSaving, setIsSaving] = useState(false);
+ const [showPreview, setShowPreview] = useState(false);
+ const [errors, setErrors] = useState
+
+
+ Auditoría
++ Logs de cambios y versiones +
+
+
+ + Funcionalidad en desarrollo... +
+
+
+ );
+ }
+
+ return (
+ Cargando checklist...
+
+ {/* Header */}
+
+
+
+ {errors.general && (
+
+
+
+ + {isEdit ? 'Editar Checklist' : 'Nuevo Checklist'} +
++ Crea y edita checklists reutilizables para protocolos +
+
+
+
+
+
+
+ )}
+
+
+ {/* Formulario */}
+
+ {/* Metadatos básicos */}
+
+
Información Básica
+ +
+
+ setChecklist({ ...checklist, id: e.target.value })}
+ disabled={isEdit}
+ className="w-full px-4 py-2 bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
+ placeholder="checklist-electrodos-desa"
+ />
+ {errors.id &&
+
+ {errors.id}
} +
+
+ setChecklist({ ...checklist, title: e.target.value })}
+ className="w-full px-4 py-2 bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
+ placeholder="Colocación de Electrodos DESA"
+ />
+ {errors.title &&
+
+ {errors.title}
} +
+
+ setChecklist({ ...checklist, shortTitle: e.target.value })}
+ className="w-full px-4 py-2 bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
+ placeholder="Electrodos DESA"
+ />
+
+
+
+
+