[V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated color tokens to match ParqueSoft.TI LMS design brief */ --background: oklch(1 0 0); /* #ffffff */ --foreground: oklch(0.45 0.02 240); /* #475569 */ --card: oklch(0.98 0.02 200); /* #ecfeff */ --card-foreground: oklch(0.35 0.02 220); /* #374151 */ --popover: oklch(1 0 0); /* #ffffff */ --popover-foreground: oklch(0.35 0.02 220); /* #374151 */ --primary: oklch(0.35 0.08 200); /* #164e63 */ --primary-foreground: oklch(1 0 0); /* #ffffff */ --secondary: oklch(0.75 0.15 120); /* #84cc16 */ --secondary-foreground: oklch(1 0 0); /* #ffffff */ --muted: oklch(0.97 0.02 140); /* #f0fdf4 */ --muted-foreground: oklch(0.35 0.02 220); /* #374151 */ --accent: oklch(0.75 0.15 120); /* #84cc16 */ --accent-foreground: oklch(1 0 0); /* #ffffff */ --destructive: oklch(0.55 0.2 25); /* #ea580c */ --destructive-foreground: oklch(1 0 0); /* #ffffff */ --border: oklch(0.9 0.01 220); /* #e2e8f0 */ --input: oklch(1 0 0); /* #ffffff */ --ring: oklch(0.75 0.15 120); /* #84cc16 */ --chart-1: oklch(0.5 0.15 140); /* #15803d */ --chart-2: oklch(0.55 0.2 25); /* #ea580c */ --chart-3: oklch(0.35 0.08 200); /* #164e63 */ --chart-4: oklch(0.75 0.15 120); /* #84cc16 */ --chart-5: oklch(0.6 0.2 30); /* #f97316 */ --radius: 0.5rem; --sidebar: oklch(0.98 0.02 200); /* #ecfeff */ --sidebar-foreground: oklch(0.35 0.02 220); /* #374151 */ --sidebar-primary: oklch(0.35 0.08 200); /* #164e63 */ --sidebar-primary-foreground: oklch(1 0 0); /* #ffffff */ --sidebar-accent: oklch(0.75 0.15 120); /* #84cc16 */ --sidebar-accent-foreground: oklch(1 0 0); /* #ffffff */ --sidebar-border: oklch(0.9 0.01 220); /* #e2e8f0 */ --sidebar-ring: oklch(0.75 0.15 120); /* #84cc16 */ } .dark { --background: oklch(0.1 0 0); --foreground: oklch(0.95 0 0); --card: oklch(0.12 0 0); --card-foreground: oklch(0.95 0 0); --popover: oklch(0.12 0 0); --popover-foreground: oklch(0.95 0 0); --primary: oklch(0.7 0.15 200); --primary-foreground: oklch(0.1 0 0); --secondary: oklch(0.75 0.15 120); --secondary-foreground: oklch(0.1 0 0); --muted: oklch(0.15 0 0); --muted-foreground: oklch(0.7 0 0); --accent: oklch(0.75 0.15 120); --accent-foreground: oklch(0.1 0 0); --destructive: oklch(0.6 0.2 25); --destructive-foreground: oklch(0.95 0 0); --border: oklch(0.2 0 0); --input: oklch(0.15 0 0); --ring: oklch(0.75 0.15 120); --chart-1: oklch(0.7 0.2 140); --chart-2: oklch(0.7 0.15 25); --chart-3: oklch(0.7 0.15 200); --chart-4: oklch(0.75 0.15 120); --chart-5: oklch(0.7 0.2 30); --sidebar: oklch(0.08 0 0); --sidebar-foreground: oklch(0.95 0 0); --sidebar-primary: oklch(0.7 0.15 200); --sidebar-primary-foreground: oklch(0.1 0 0); --sidebar-accent: oklch(0.15 0 0); --sidebar-accent-foreground: oklch(0.95 0 0); --sidebar-border: oklch(0.2 0 0); --sidebar-ring: oklch(0.7 0.15 200); } /* Added font configuration for Space Grotesk and DM Sans */ @theme inline { --font-sans: "DM Sans", var(--font-geist-sans); --font-heading: "Space Grotesk", var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } /* Added heading font class */ .font-heading { font-family: var(--font-heading); } } [V0_FILE]png:file="public/professional-avatar.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-avatar-zbrnQ66cxtJnPjI3oa9qfYw6Bp2HEB.png" isMerged="true" [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/mockups/login-mockup.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Alert, AlertDescription } from "@/components/ui/alert" import { Badge } from "@/components/ui/badge" import { Eye, EyeOff, Shield, Lock, User, AlertCircle, CheckCircle } from "lucide-react" import Image from "next/image" export function LoginMockup() { const [showPassword, setShowPassword] = useState(false) const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [showError, setShowError] = useState(false) const [isLoading, setIsLoading] = useState(false) const handleLogin = () => { setIsLoading(true) setTimeout(() => { setIsLoading(false) if (email === "admin@parquesoft.com" && password === "password123") { setShowError(false) // Simular redirección exitosa } else { setShowError(true) } }, 1500) } const getPasswordStrength = () => { if (password.length === 0) return null if (password.length < 6) return { level: "weak", color: "destructive" } if (password.length < 10) return { level: "medium", color: "secondary" } return { level: "strong", color: "accent" } } const passwordStrength = getPasswordStrength() return (

Iniciar Sesión {""}

{showError && ( Credenciales incorrectas. Verifica tu email y contraseña. )}

Email o Usuario

setEmail(e.target.value)} />

Contraseña

setPassword(e.target.value)} />

{passwordStrength && (

{passwordStrength.level === "weak" ? "Débil" : passwordStrength.level === "medium" ? "Media" : "Fuerte"}

)}

Recordarme

Conexión segura SSL

Criterios de Aceptación Implementados

Campos de autenticación

Email/usuario y contraseña con validación visual

Validación de credenciales

Verificación contra base de datos simulada

Mensajes de error claros

Alertas específicas para credenciales incorrectas

Indicadores de seguridad

Medidor de fortaleza de contraseña y protecciones SSL

Credenciales de Prueba

Email: admin@parquesoft.com

Contraseña: password123

Usa estas credenciales para probar el flujo de login exitoso

Credenciales de Prueba

Email: admin@parquesoft.com

Contraseña: password123

) } [V0_FILE]png:file="public/parquesoft-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-F8HKcxepG2VREkRNCAlz0Gfx0FYs7Q.png" isMerged="true" [V0_FILE]typescriptreact:file="components/mockups/dashboard-mockup.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { LayoutDashboard, Users, Settings, Shield, Activity, LogOut, Bell, ChevronDown, Clock, MapPin, Smartphone, } from "lucide-react" import Image from "next/image" export function DashboardMockup() { const [userRole, setUserRole] = useState<"admin" | "user" | "manager">("admin") const roleConfig = { admin: { name: "Ana García", email: "ana.garcia@parquesoft.com", badge: "Administrador", badgeColor: "destructive" as const, permissions: ["Gestión completa", "Usuarios", "Configuración", "Reportes"], }, manager: { name: "Carlos López", email: "carlos.lopez@parquesoft.com", badge: "Gerente", badgeColor: "secondary" as const, permissions: ["Gestión de equipo", "Reportes", "Configuración limitada"], }, user: { name: "María Rodríguez", email: "maria.rodriguez@parquesoft.com", badge: "Usuario", badgeColor: "outline" as const, permissions: ["Acceso básico", "Perfil personal"], }, } const currentUser = roleConfig[userRole] const recentSessions = [ { device: "Chrome - Windows", location: "Madrid, España", time: "Hace 5 minutos", status: "active", ip: "192.168.1.100", }, { device: "Safari - iPhone", location: "Madrid, España", time: "Hace 2 horas", status: "inactive", ip: "192.168.1.101", }, { device: "Firefox - Linux", location: "Barcelona, España", time: "Ayer", status: "inactive", ip: "10.0.0.50", }, ] return (

{/* Sidebar */}

{/* User Profile */}

{currentUser.name .split(" ") .map((n) => n[0]) .join("")}

{currentUser.name}

{currentUser.email}

{/* Main Content */}

{/* Header */}

Dashboard

Bienvenido de vuelta, {currentUser.name}

{currentUser.badge}

{/* Role Selector for Demo */} Simulador de Roles Cambia el rol para ver diferentes vistas del dashboard

{/* Stats Cards */}

Sesiones Activas

+0% desde la última hora

Último Acceso

Ahora

Chrome - Windows

Nivel de Seguridad

Alto

2FA activado

{/* Recent Sessions */} Sesiones Recientes Historial de accesos a tu cuenta

{recentSessions.map((session, index) => (

{session.device}

{session.location} • {session.ip}

{session.status === "active" ? "Activa" : "Inactiva"}

{session.time}

))}

{/* Permissions */} Permisos del Usuario Funcionalidades disponibles para tu rol actual

{currentUser.permissions.map((permission, index) => (

{permission}

))}

) } [V0_FILE]typescriptreact:file="components/mockups/session-management-mockup.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Alert, AlertDescription } from "@/components/ui/alert" import { Smartphone, Monitor, Tablet, MapPin, Clock, Shield, LogOut, AlertCircle, CheckCircle, MoreHorizontal, } from "lucide-react" interface Session { id: string device: string deviceType: "desktop" | "mobile" | "tablet" browser: string os: string location: string ip: string lastActive: string status: "active" | "inactive" isCurrent: boolean } export function SessionManagementMockup() { const [sessions, setSessions] = useState([ { id: "1", device: "Chrome 120", deviceType: "desktop", browser: "Chrome", os: "Windows 11", location: "Madrid, España", ip: "192.168.1.100", lastActive: "Ahora", status: "active", isCurrent: true, }, { id: "2", device: "Safari 17", deviceType: "mobile", browser: "Safari", os: "iOS 17", location: "Madrid, España", ip: "192.168.1.101", lastActive: "Hace 2 horas", status: "inactive", isCurrent: false, }, { id: "3", device: "Firefox 121", deviceType: "desktop", browser: "Firefox", os: "Ubuntu 22.04", location: "Barcelona, España", ip: "10.0.0.50", lastActive: "Ayer a las 14:30", status: "inactive", isCurrent: false, }, { id: "4", device: "Chrome 120", deviceType: "tablet", browser: "Chrome", os: "Android 14", location: "Valencia, España", ip: "172.16.0.25", lastActive: "Hace 3 días", status: "inactive", isCurrent: false, }, ]) const [showTerminateAlert, setShowTerminateAlert] = useState(false) const [terminatingSession, setTerminatingSession] = useState(null) const getDeviceIcon = (deviceType: string) => { switch (deviceType) { case "desktop": return Monitor case "mobile": return Smartphone case "tablet": return Tablet default: return Monitor } } const terminateSession = (sessionId: string) => { setTerminatingSession(sessionId) setTimeout(() => { setSessions((prev) => prev.filter((s) => s.id !== sessionId)) setTerminatingSession(null) setShowTerminateAlert(true) setTimeout(() => setShowTerminateAlert(false), 3000) }, 1000) } const terminateAllOtherSessions = () => { setSessions((prev) => prev.filter((s) => s.isCurrent)) setShowTerminateAlert(true) setTimeout(() => setShowTerminateAlert(false), 3000) } const activeSessions = sessions.filter((s) => s.status === "active").length const totalSessions = sessions.length return (

{showTerminateAlert && ( Sesión(es) terminada(s) exitosamente. Los dispositivos afectados deberán iniciar sesión nuevamente. )} {/* Session Overview */}

Sesiones Activas

{activeSessions}

de {totalSessions} sesiones totales

Última Actividad

Ahora

Chrome - Windows 11

Ubicaciones

ciudades diferentes

{/* Session Management Actions */} Acciones de Seguridad Gestiona la seguridad de tu cuenta terminando sesiones sospechosas

{/* Sessions List */} Sesiones Activas e Inactivas Revisa todos los dispositivos que han accedido a tu cuenta recientemente

{sessions.map((session) => { const DeviceIcon = getDeviceIcon(session.deviceType) return (

{session.device} - {session.os}

{session.isCurrent && ( Sesión Actual )} {session.status === "active" ? "Activa" : "Inactiva"}

{session.location}

{session.lastActive}

{session.ip}

{!session.isCurrent && ( )}

) })}

{/* Security Recommendations */} Recomendaciones de Seguridad

ParqueSoft.TI

Plataforma segura de desarrollo profesional

Buenas prácticas: Revisa regularmente tus sesiones activas y termina cualquier sesión que no reconozcas. Si ves actividad sospechosa, cambia tu contraseña inmediatamente.

Señales de Alerta

• Sesiones desde ubicaciones desconocidas
• Dispositivos que no reconoces
• Actividad en horarios inusuales

Acciones Recomendadas

• Activar autenticación de dos factores
• Usar contraseñas únicas y seguras
• Cerrar sesión en dispositivos públicos

) } [V0_FILE]typescriptreact:file="components/mockups/error-state-mockup.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Alert, AlertDescription } from "@/components/ui/alert" import { Badge } from "@/components/ui/badge" import { AlertCircle, Shield, Lock, User, Clock, XCircle, AlertTriangle } from "lucide-react" export function ErrorStateMockup() { const [currentError, setCurrentError] = useState<"invalid" | "blocked" | "expired" | "network">("invalid") const [attemptCount, setAttemptCount] = useState(3) const errorStates = { invalid: { title: "Credenciales Incorrectas", description: "El email o contraseña ingresados no son válidos.", icon: XCircle, variant: "destructive" as const, details: "Verifica que hayas ingresado correctamente tu email y contraseña. Recuerda que las contraseñas distinguen entre mayúsculas y minúsculas.", }, blocked: { title: "Cuenta Temporalmente Bloqueada", description: "Tu cuenta ha sido bloqueada por múltiples intentos fallidos.", icon: Shield, variant: "destructive" as const, details: "Por seguridad, tu cuenta ha sido bloqueada durante 15 minutos después de 5 intentos fallidos consecutivos.", }, expired: { title: "Sesión Expirada", description: "Tu sesión ha expirado por inactividad.", icon: Clock, variant: "default" as const, details: "Por tu seguridad, las sesiones expiran automáticamente después de 30 minutos de inactividad.", }, network: { title: "Error de Conexión", description: "No se pudo conectar con el servidor de autenticación.", icon: AlertTriangle, variant: "destructive" as const, details: "Verifica tu conexión a internet e intenta nuevamente. Si el problema persiste, contacta al administrador del sistema.", }, } const currentErrorState = errorStates[currentError] const IconComponent = currentErrorState.icon return (

{/* Error State Simulator */}

Simulador de Estados de Error Selecciona diferentes tipos de errores para ver cómo se muestran

{/* Login Form with Error */}

Iniciar Sesión

{currentErrorState.title}

{currentErrorState.description}

{/* Additional Info for Blocked Account */} {currentError === "blocked" && (

Intentos fallidos: {attemptCount}/5

Tiempo restante: 14:32

La cuenta se desbloqueará automáticamente o puedes contactar al administrador.

)}

Email o Usuario

Contraseña

{/* Recovery Options */}

{currentError === "blocked" && ( )} {currentError === "invalid" && (

)} {currentError === "network" && ( )}

{/* Error Documentation */}

Detalles del Error Actual

{currentErrorState.title}

{currentErrorState.details}

Criterios de Seguridad Implementados

Protección contra fuerza bruta

Bloqueo automático después de 5 intentos fallidos

Expiración de sesiones

Sesiones automáticamente expiradas por inactividad

Mensajes de error claros

Información específica sin comprometer la seguridad

Tipos de Error Cubiertos

{Object.entries(errorStates).map(([key, state]) => (

{state.title}

))}

) } [V0_FILE]typescriptreact:file="components/mockups/lms-dashboard-mockup.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { BookOpen, Users, BarChart3, Settings, Play, Clock, Award, UserPlus, FileText, Calendar, MessageSquare, Star, CheckCircle, PlusCircle, Edit, Eye, } from "lucide-react" type UserRole = "admin" | "teacher" | "student" const roleData = { admin: { name: "Ana García", role: "Administrador", email: "ana.garcia@parquesoft.com", stats: [ { label: "Total Usuarios", value: "1,247", icon: Users, color: "text-primary" }, { label: "Cursos Activos", value: "89", icon: BookOpen, color: "text-secondary" }, { label: "Horas Totales", value: "15,420", icon: Clock, color: "text-chart-1" }, { label: "Certificados", value: "892", icon: Award, color: "text-chart-2" }, ], recentActivity: [ { action: "Nuevo usuario registrado", user: "Carlos Mendez", time: "Hace 5 min", type: "user" }, { action: "Curso completado", user: "María López", time: "Hace 15 min", type: "course" }, { action: "Reporte generado", user: "Sistema", time: "Hace 1 hora", type: "system" }, { action: "Usuario bloqueado", user: "Juan Pérez", time: "Hace 2 horas", type: "security" }, ], }, teacher: { name: "Prof. Carlos Ruiz", role: "Profesor", email: "carlos.ruiz@parquesoft.com", stats: [ { label: "Mis Cursos", value: "12", icon: BookOpen, color: "text-primary" }, { label: "Estudiantes", value: "324", icon: Users, color: "text-secondary" }, { label: "Horas Enseñadas", value: "1,280", icon: Clock, color: "text-chart-1" }, { label: "Calificación", value: "4.8", icon: Star, color: "text-chart-2" }, ], recentActivity: [ { action: "Nuevo estudiante inscrito", user: "React Avanzado", time: "Hace 10 min", type: "course" }, { action: "Tarea calificada", user: "JavaScript Básico", time: "Hace 30 min", type: "assignment" }, { action: "Mensaje recibido", user: "Laura Martín", time: "Hace 1 hora", type: "message" }, { action: "Video subido", user: "Node.js Intermedio", time: "Hace 3 horas", type: "content" }, ], }, student: { name: "Laura Martín", role: "Estudiante", email: "laura.martin@parquesoft.com", stats: [ { label: "Cursos Inscritos", value: "8", icon: BookOpen, color: "text-primary" }, { label: "Completados", value: "5", icon: CheckCircle, color: "text-secondary" }, { label: "Horas Estudiadas", value: "156", icon: Clock, color: "text-chart-1" }, { label: "Certificados", value: "3", icon: Award, color: "text-chart-2" }, ], recentActivity: [ { action: "Lección completada", user: "React Hooks", time: "Hace 20 min", type: "lesson" }, { action: "Examen aprobado", user: "JavaScript ES6", time: "Hace 2 horas", type: "exam" }, { action: "Certificado obtenido", user: "HTML & CSS", time: "Hace 1 día", type: "certificate" }, { action: "Nuevo curso iniciado", user: "TypeScript", time: "Hace 2 días", type: "course" }, ], }, } const courses = [ { id: 1, title: "React Avanzado", instructor: "Prof. Carlos Ruiz", students: 45, progress: 75, status: "active", duration: "8 semanas", rating: 4.8, thumbnail: "/react-programming-course.jpg", }, { id: 2, title: "JavaScript ES6+", instructor: "Prof. Ana García", students: 67, progress: 60, status: "active", duration: "6 semanas", rating: 4.9, thumbnail: "/javascript-programming-course.jpg", }, { id: 3, title: "Node.js Backend", instructor: "Prof. Miguel Torres", students: 32, progress: 40, status: "draft", duration: "10 semanas", rating: 4.7, thumbnail: "/node-js-backend-development.jpg", }, ] export function LMSDashboardMockup() { const [selectedRole, setSelectedRole] = useState("admin") const currentUser = roleData[selectedRole] const renderAdminContent = () => (

{/* User Management Section */}

Gestión de Usuarios Administrar usuarios del sistema

Administradores

Profesores

Estudiantes

1,190

{/* System Analytics */} Analíticas del Sistema Métricas de rendimiento y uso

Uso de la plataforma 85%

Satisfacción usuarios 92%

) const renderTeacherContent = () => (

{/* Course Management */}

Mis Cursos Gestionar contenido y estudiantes

{courses.map((course) => (

{course.title}

{course.students} estudiantes

{course.status === "active" ? "Activo" : "Borrador"}

))}

{/* Student Progress */} Progreso de Estudiantes Seguimiento del rendimiento

{["María López", "Carlos Mendez", "Ana Ruiz"].map((student, index) => (

{student .split(" ") .map((n) => n[0]) .join("")}

{student}

React Avanzado

{85 - index * 10}%

))}

) const renderStudentContent = () => (

{/* My Courses */} Mis Cursos Continúa tu aprendizaje

{courses.slice(0, 2).map((course) => (

{course.title}

Por {course.instructor}

Progreso {course.progress}%

))}

{/* Achievements */} Logros Recientes Tus certificaciones y reconocimientos

{["HTML & CSS Básico", "JavaScript ES6", "React Fundamentos"].map((cert, index) => (

{cert}

Completado

))}

{/* Learning Path */} Ruta de Aprendizaje Tu progreso en el programa

{[ { title: "Fundamentos Web", status: "completed", progress: 100 }, { title: "JavaScript Avanzado", status: "in-progress", progress: 75 }, { title: "React & Frameworks", status: "in-progress", progress: 40 }, { title: "Backend Development", status: "locked", progress: 0 }, ].map((step, index) => (

{step.status === "completed" ? : index + 1}

{step.title}

{step.progress}%

))}

) return (

{/* Header */}

LMS Dashboard

{currentUser.name .split(" ") .map((n) => n[0]) .join("")}

{/* Sidebar */}

{/* User Info */}

{currentUser.name .split(" ") .map((n) => n[0]) .join("")}

{currentUser.name}

{currentUser.role}

{currentUser.email}

{/* Navigation */}

{selectedRole === "admin" && ( <> )} {selectedRole === "teacher" && ( <> )} {selectedRole === "student" && ( <> )}

{/* Main Content */}

{/* Stats Cards */}

{currentUser.stats.map((stat, index) => ( null ))}

{/* Main Content Area */}

{selectedRole === "admin" && renderAdminContent()} {selectedRole === "teacher" && renderTeacherContent()} {selectedRole === "student" && renderStudentContent()}

{/* Activity Sidebar */}

Actividad Reciente

{currentUser.recentActivity.map((activity, index) => (

{activity.action}

{activity.user}

{activity.time}

))}

{/* Quick Actions */} Acciones Rápidas {selectedRole === "admin" && ( <> )} {selectedRole === "teacher" && ( <> )} {selectedRole === "student" && ( <> )}

) } [V0_FILE]jpg:file="public/react-programming-course.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/react-programming-course-TUTpLRKplxkb9RnjSsAU0R59z6hzQW.jpg" isMerged="true" [V0_FILE]jpg:file="public/javascript-programming-course.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/javascript-programming-course-V68xc3z7FSDaSt4E5V7zOquLGX6Jzk.jpg" isMerged="true" [V0_FILE]jpg:file="public/node-js-backend-development.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/node-js-backend-development-UkiCIz4zfyDW1L10NdQahsmyHIAP0D.jpg" isMerged="true" [V0_FILE]typescriptreact:file="components/mockups/user-management-mockup.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Checkbox } from "@/components/ui/checkbox" import { Search, UserPlus, Edit, Trash2, Eye, ChevronLeft, Save, Users, Shield, Clock, Mail, Phone, Calendar, MoreHorizontal, Download, Upload, RefreshCw, Ban, CheckCircle, UserCheck, BookOpen, } from "lucide-react" type ViewMode = "list" | "create" | "detail" type UserRole = "admin" | "teacher" | "student" type UserStatus = "active" | "inactive" | "blocked" const usersData = [ { id: 1, name: "Ana García", email: "ana.garcia@parquesoft.com", role: "admin" as UserRole, status: "active" as UserStatus, avatar: "/placeholder.svg?height=40&width=40", phone: "+57 300 123 4567", joinDate: "2023-01-15", lastLogin: "2024-01-20 14:30", coursesEnrolled: 0, coursesCreated: 8, department: "Administración", location: "Popayán, Colombia", }, { id: 2, name: "Carlos Ruiz", email: "carlos.ruiz@parquesoft.com", role: "teacher" as UserRole, status: "active" as UserStatus, avatar: "/placeholder.svg?height=40&width=40", phone: "+57 301 234 5678", joinDate: "2023-02-20", lastLogin: "2024-01-20 09:15", coursesEnrolled: 3, coursesCreated: 12, department: "Desarrollo Frontend", location: "Cali, Colombia", }, { id: 3, name: "Laura Martín", email: "laura.martin@parquesoft.com", role: "student" as UserRole, status: "active" as UserStatus, avatar: "/placeholder.svg?height=40&width=40", phone: "+57 302 345 6789", joinDate: "2023-06-10", lastLogin: "2024-01-19 16:45", coursesEnrolled: 8, coursesCreated: 0, department: "Estudiante", location: "Medellín, Colombia", }, { id: 4, name: "Miguel Torres", email: "miguel.torres@parquesoft.com", role: "teacher" as UserRole, status: "inactive" as UserStatus, avatar: "/placeholder.svg?height=40&width=40", phone: "+57 303 456 7890", joinDate: "2023-03-05", lastLogin: "2024-01-10 11:20", coursesEnrolled: 2, coursesCreated: 6, department: "Desarrollo Backend", location: "Bogotá, Colombia", }, { id: 5, name: "Sofia Ramírez", email: "sofia.ramirez@parquesoft.com", role: "student" as UserRole, status: "blocked" as UserStatus, avatar: "/placeholder.svg?height=40&width=40", phone: "+57 304 567 8901", joinDate: "2023-08-15", lastLogin: "2024-01-05 13:10", coursesEnrolled: 4, coursesCreated: 0, department: "Estudiante", location: "Barranquilla, Colombia", }, ] const roles = [ { value: "all", label: "Todos los roles" }, { value: "admin", label: "Administrador" }, { value: "teacher", label: "Profesor" }, { value: "student", label: "Estudiante" }, ] const statuses = [ { value: "all", label: "Todos los estados" }, { value: "active", label: "Activo" }, { value: "inactive", label: "Inactivo" }, { value: "blocked", label: "Bloqueado" }, ] const departments = [ "Todos los departamentos", "Administración", "Desarrollo Frontend", "Desarrollo Backend", "Diseño UX/UI", "DevOps", "Estudiante", ] export function UserManagementMockup() { const [currentView, setCurrentView] = useState("list") const [selectedUser, setSelectedUser] = useState(usersData[0]) const [searchTerm, setSearchTerm] = useState("") const [selectedRole, setSelectedRole] = useState("all") const [selectedStatus, setSelectedStatus] = useState("all") const [selectedDepartment, setSelectedDepartment] = useState("Todos los departamentos") const [selectedUsers, setSelectedUsers] = useState([]) const filteredUsers = usersData.filter((user) => { const matchesSearch = user.name.toLowerCase().includes(searchTerm.toLowerCase()) || user.email.toLowerCase().includes(searchTerm.toLowerCase()) || user.department.toLowerCase().includes(searchTerm.toLowerCase()) const matchesRole = selectedRole === "all" || user.role === selectedRole const matchesStatus = selectedStatus === "all" || user.status === selectedStatus const matchesDepartment = selectedDepartment === "Todos los departamentos" || user.department === selectedDepartment return matchesSearch && matchesRole && matchesStatus && matchesDepartment }) const getRoleColor = (role: UserRole) => { switch (role) { case "admin": return "bg-destructive text-destructive-foreground" case "teacher": return "bg-primary text-primary-foreground" case "student": return "bg-secondary text-secondary-foreground" default: return "bg-muted text-muted-foreground" } } const getStatusColor = (status: UserStatus) => { switch (status) { case "active": return "bg-secondary text-secondary-foreground" case "inactive": return "bg-muted text-muted-foreground" case "blocked": return "bg-destructive text-destructive-foreground" default: return "bg-muted text-muted-foreground" } } const getRoleLabel = (role: UserRole) => { switch (role) { case "admin": return "Administrador" case "teacher": return "Profesor" case "student": return "Estudiante" default: return role } } const getStatusLabel = (status: UserStatus) => { switch (status) { case "active": return "Activo" case "inactive": return "Inactivo" case "blocked": return "Bloqueado" default: return status } } const handleSelectUser = (userId: number) => { setSelectedUsers((prev) => (prev.includes(userId) ? prev.filter((id) => id !== userId) : [...prev, userId])) } const handleSelectAll = () => { setSelectedUsers(selectedUsers.length === filteredUsers.length ? [] : filteredUsers.map((u) => u.id)) } const renderUserList = () => (

{/* Header */}

Gestión de Usuarios

Administrar usuarios del sistema LMS

{/* Stats Cards */}

Total Usuarios

{usersData.length}

Activos

{usersData.filter((u) => u.status === "active").length}

Profesores

{usersData.filter((u) => u.role === "teacher").length}

Estudiantes

{usersData.filter((u) => u.role === "student").length}

{/* Filters */}

Buscar usuarios

setSearchTerm(e.target.value)} className="pl-10" />

Rol

Estado

Departamento

{/* Bulk Actions */} {selectedUsers.length > 0 && (

{selectedUsers.length} usuario(s) seleccionado(s)

)} {/* Users Table */}

{filteredUsers.map((user) => ( ))}

	Usuario	Rol	Estado	Departamento	Último Acceso	Acciones
handleSelectUser(user.id)} />	{user.name .split(" ") .map((n) => n[0]) .join("")} {user.name} {user.email}	{getRoleLabel(user.role)}	{getStatusLabel(user.status)}	{user.department}	{user.lastLogin}

{filteredUsers.length === 0 && (

No se encontraron usuarios

Intenta ajustar los filtros o crear un nuevo usuario

)}

) const renderUserDetail = () => (

{/* Header */}

{selectedUser.name}

Información detallada del usuario

{/* User Info */}

Información Personal

{selectedUser.name .split(" ") .map((n) => n[0]) .join("")}

{selectedUser.name}

{selectedUser.email}

{getRoleLabel(selectedUser.role)} {getStatusLabel(selectedUser.status)}

Teléfono

{selectedUser.phone}

Departamento

{selectedUser.department}

Ubicación

{selectedUser.location}

Fecha de Registro

{selectedUser.joinDate}

Actividad del Usuario

{selectedUser.coursesEnrolled}

Cursos Inscritos

{selectedUser.coursesCreated}

Cursos Creados

{Math.floor(Math.random() * 100) + 20}

Horas Totales

Historial de Sesiones

{[ { date: "2024-01-20 14:30", ip: "192.168.1.100", device: "Chrome - Windows", status: "success" }, { date: "2024-01-19 09:15", ip: "192.168.1.101", device: "Safari - macOS", status: "success" }, { date: "2024-01-18 16:45", ip: "192.168.1.102", device: "Firefox - Linux", status: "failed" }, ].map((session, index) => (

{session.date}

{session.device} • {session.ip}

{session.status === "success" ? "Exitoso" : "Fallido"}

))}

{/* Actions Sidebar */}

Acciones Rápidas {selectedUser.status === "active" ? ( ) : ( )} Configuración

Cambiar Rol

Estado

Zona de Peligro

Esta acción no se puede deshacer. Se eliminarán todos los datos del usuario.

) const renderUserCreate = () => (

{/* Header */}

Crear Nuevo Usuario

Completa la información para crear un usuario

{/* Main Form */}

Información Personal

Nombre *

Apellido *

Email *

Teléfono

Ubicación

Configuración de Acceso

Contraseña Temporal *

El usuario deberá cambiar esta contraseña en su primer acceso

Rol del Usuario *

Departamento

Permisos Adicionales

Puede crear cursos Puede gestionar usuarios Puede generar reportes Acceso a analíticas

{/* Sidebar */}

Foto de Perfil

JPG, PNG hasta 2MB

Configuración Inicial

Estado Inicial

Notificaciones

Email de bienvenida Notificaciones del sistema

) return (

{/* Header */}

Gestión de Usuarios

setCurrentView(value as ViewMode)}> Lista de Usuarios Crear Usuario Detalle del Usuario

{currentView === "list" && renderUserList()} {currentView === "detail" && renderUserDetail()} {currentView === "create" && renderUserCreate()}

) } [V0_FILE]typescriptreact:file="components/mockups/course-management-mockup.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Search, Grid, List, Play, Clock, Users, Star, BookOpen, Edit, Trash2, Eye, Plus, Save, Upload, ChevronLeft, PlayCircle, Pause, Volume2, Settings, Maximize, FileText, Video, ImageIcon, Link, } from "lucide-react" type ViewMode = "list" | "create" | "detail" const coursesData = [ { id: 1, title: "React Avanzado: Hooks y Context", instructor: "Prof. Carlos Ruiz", category: "Frontend", level: "Avanzado", duration: "8 semanas", students: 245, rating: 4.8, status: "published", progress: 75, thumbnail: "/react-programming-course.jpg", description: "Domina React con hooks avanzados, context API y patrones de diseño modernos.", lessons: 24, totalHours: 32, lastUpdated: "2024-01-15", tags: ["React", "JavaScript", "Frontend", "Hooks"], }, { id: 2, title: "JavaScript ES6+ Completo", instructor: "Prof. Ana García", category: "Programming", level: "Intermedio", duration: "6 semanas", students: 387, rating: 4.9, status: "published", progress: 60, thumbnail: "/javascript-programming-course.jpg", description: "Aprende las características modernas de JavaScript desde ES6 hasta las últimas versiones.", lessons: 18, totalHours: 24, lastUpdated: "2024-01-10", tags: ["JavaScript", "ES6", "Programming", "Web"], }, { id: 3, title: "Node.js Backend Development", instructor: "Prof. Miguel Torres", category: "Backend", level: "Intermedio", duration: "10 semanas", students: 156, rating: 4.7, status: "draft", progress: 40, thumbnail: "/node-js-backend-development.jpg", description: "Construye APIs robustas y escalables con Node.js, Express y bases de datos.", lessons: 30, totalHours: 45, lastUpdated: "2024-01-08", tags: ["Node.js", "Backend", "API", "Database"], }, ] const categories = ["Todos", "Frontend", "Backend", "Programming", "Design", "DevOps"] const levels = ["Todos", "Principiante", "Intermedio", "Avanzado"] const statuses = ["Todos", "published", "draft", "archived"] export function CourseManagementMockup() { const [currentView, setCurrentView] = useState("list") const [selectedCourse, setSelectedCourse] = useState(coursesData[0]) const [searchTerm, setSearchTerm] = useState("") const [selectedCategory, setSelectedCategory] = useState("Todos") const [selectedLevel, setSelectedLevel] = useState("Todos") const [selectedStatus, setSelectedStatus] = useState("Todos") const [viewMode, setViewMode] = useState<"grid" | "list">("grid") const [isPlaying, setIsPlaying] = useState(false) const [currentTime, setCurrentTime] = useState(0) const [duration] = useState(1800) // 30 minutes const filteredCourses = coursesData.filter((course) => { const matchesSearch = course.title.toLowerCase().includes(searchTerm.toLowerCase()) || course.instructor.toLowerCase().includes(searchTerm.toLowerCase()) const matchesCategory = selectedCategory === "Todos" || course.category === selectedCategory const matchesLevel = selectedLevel === "Todos" || course.level === selectedLevel const matchesStatus = selectedStatus === "Todos" || course.status === selectedStatus return matchesSearch && matchesCategory && matchesLevel && matchesStatus }) const formatTime = (seconds: number) => { const mins = Math.floor(seconds / 60) const secs = seconds % 60 return `${mins}:${secs.toString().padStart(2, "0")}` } const renderCourseList = () => (

{/* Header */}

Gestión de Cursos

Administra el contenido educativo de la plataforma

{/* Filters and Search */}

Buscar cursos

setSearchTerm(e.target.value)} className="pl-10" />

Categoría

Nivel

{/* Course Grid/List */}

{filteredCourses.map((course) => ( {viewMode === "grid" ? ( <>

{course.status === "published" ? "Publicado" : course.status === "draft" ? "Borrador" : "Archivado"}

{course.title}

Por {course.instructor}

{course.students}

{course.totalHours}h

{course.level}

) : (

{course.title}

Por {course.instructor}

{course.status === "published" ? "Publicado" : "Borrador"}

{course.students} estudiantes {course.totalHours} horas ★ {course.rating}

)} ))}

{filteredCourses.length === 0 && (

No se encontraron cursos

Intenta ajustar los filtros o crear un nuevo curso

)}

) const renderCourseDetail = () => (

{/* Header */}

{selectedCourse.title}

Vista detallada del curso

{/* Video Player */}

{/* Video Controls */}

{formatTime(currentTime)}

{formatTime(duration)}

{/* Course Content */} Contenido del Curso {selectedCourse.lessons} lecciones • {selectedCourse.totalHours} horas totales

{Array.from({ length: selectedCourse.lessons }, (_, i) => (

Lección {i + 1}: Introducción a {selectedCourse.title.split(" ")[0]}

{Math.floor(Math.random() * 20) + 5} minutos

{Math.random() > 0.5 ? "Completado" : "Pendiente"}

))}

{/* Course Info Sidebar */}

Información del Curso

Instructor

{selectedCourse.instructor .split(" ") .map((n) => n[0]) .join("")} {selectedCourse.instructor}

Descripción

{selectedCourse.description}

Duración

{selectedCourse.duration}

Nivel {selectedCourse.level}

Estudiantes

{selectedCourse.students}

Calificación

{selectedCourse.rating}

Etiquetas

{selectedCourse.tags.map((tag, index) => ( {tag} ))}

Estadísticas

Progreso promedio {selectedCourse.progress}%

{selectedCourse.students}

Inscritos

{Math.floor(selectedCourse.students * 0.7)}

Activos

Acciones

) const renderCourseCreate = () => (

{/* Header */}

Crear Nuevo Curso

Completa la información para crear un curso

{/* Main Form */}

Información Básica

Título del Curso *

Descripción *

</div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label>Categoría *</Label>
                  <Select>
                    <SelectTrigger>
                      <SelectValue placeholder="Seleccionar categoría" />
                    </SelectTrigger>
                    <SelectContent>
                      {categories.slice(1).map((cat) => (
                        <SelectItem key={cat} value={cat}>
                          {cat}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

<div>
                  <Label>Nivel *</Label>
                  <Select>
                    <SelectTrigger>
                      <SelectValue placeholder="Seleccionar nivel" />
                    </SelectTrigger>
                    <SelectContent>
                      {levels.slice(1).map((level) => (
                        <SelectItem key={level} value={level}>
                          {level}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                  <Label htmlFor="duration">Duración</Label>
                  <Input id="duration" placeholder="Ej: 8 semanas" />
                </div>

<div>
                  <Label htmlFor="price">Precio</Label>
                  <Input id="price" placeholder="Ej: Gratuito" />
                </div>

<div>
                  <Label htmlFor="hours">Horas Totales</Label>
                  <Input id="hours" type="number" placeholder="Ej: 32" />
                </div>
              </div>

<div>
                <Label htmlFor="tags">Etiquetas</Label>
                <Input id="tags" placeholder="Separadas por comas: React, JavaScript, Frontend" />
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle className="font-heading">Contenido del Curso</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between">
                <h4 className="font-medium">Lecciones</h4>
                <Button size="sm" variant="outline">
                  <Plus className="w-4 h-4 mr-2" />
                  Agregar Lección
                </Button>
              </div>

<div className="space-y-3">
                {[1, 2, 3].map((lesson) => (
                  <div key={lesson} className="border rounded-lg p-4">
                    <div className="flex items-center justify-between mb-3">
                      <h5 className="font-medium">Lección {lesson}</h5>
                      <Button size="sm" variant="ghost">
                        <Trash2 className="w-4 h-4" />
                      </Button>
                    </div>

<div className="mt-3 space-y-2">
                      <Label className="text-sm">Contenido</Label>
                      <div className="flex gap-2">
                        <Button size="sm" variant="outline" className="flex-1 bg-transparent">
                          <Video className="w-4 h-4 mr-2" />
                          Subir Video
                        </Button>
                        <Button size="sm" variant="outline" className="flex-1 bg-transparent">
                          <FileText className="w-4 h-4 mr-2" />
                          Agregar Texto
                        </Button>
                        <Button size="sm" variant="outline" className="flex-1 bg-transparent">
                          <Link className="w-4 h-4 mr-2" />
                          Enlace Externo
                        </Button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>

{/* Sidebar */}
        <div className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle className="font-heading">Imagen del Curso</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="border-2 border-dashed border-muted-foreground/25 rounded-lg p-8 text-center">
                <ImageIcon className="w-12 h-12 mx-auto mb-4 text-muted-foreground" />
                <p className="text-sm text-muted-foreground mb-4">
                  Arrastra una imagen aquí o haz clic para seleccionar
                </p>
                <Button variant="outline" size="sm">
                  <Upload className="w-4 h-4 mr-2" />
                  Subir Imagen
                </Button>
              </div>
              <p className="text-xs text-muted-foreground mt-2">Recomendado: 1280x720px, formato JPG o PNG</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle className="font-heading">Configuración</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <Label>Estado del Curso</Label>
                <Select defaultValue="draft">
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="draft">Borrador</SelectItem>
                    <SelectItem value="published">Publicado</SelectItem>
                    <SelectItem value="archived">Archivado</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div>
                <Label htmlFor="instructor">Instructor Asignado</Label>
                <Select>
                  <SelectTrigger>
                    <SelectValue placeholder="Seleccionar instructor" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="carlos">Prof. Carlos Ruiz</SelectItem>
                    <SelectItem value="ana">Prof. Ana García</SelectItem>
                    <SelectItem value="miguel">Prof. Miguel Torres</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label className="text-sm">Opciones</Label>
                <div className="space-y-2">
                  <label className="flex items-center space-x-2">
                    <input type="checkbox" className="rounded" />
                    <span className="text-sm">Permitir comentarios</span>
                  </label>
                  <label className="flex items-center space-x-2">
                    <input type="checkbox" className="rounded" />
                    <span className="text-sm">Generar certificado</span>
                  </label>
                  <label className="flex items-center space-x-2">
                    <input type="checkbox" className="rounded" />
                    <span className="text-sm">Curso destacado</span>
                  </label>
                </div>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardContent className="p-4 space-y-2">
              <Button className="w-full bg-primary hover:bg-primary/90">
                <Save className="w-4 h-4 mr-2" />
                Guardar Curso
              </Button>
              <Button variant="outline" className="w-full bg-transparent">
                Vista Previa
              </Button>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b bg-card">
        <div className="flex items-center justify-between p-4">
          <div className="flex items-center gap-4">
            <img src="/parquesoft-logo.png" alt="ParqueSoft.TI" className="h-8" />
            <h1 className="text-xl font-heading font-bold">Gestión de Cursos</h1>
          </div>
          <Tabs value={currentView} onValueChange={(value) => setCurrentView(value as ViewMode)}>
            <TabsList>
              <TabsTrigger value="list">Lista de Cursos</TabsTrigger>
              <TabsTrigger value="create">Crear Curso</TabsTrigger>
              <TabsTrigger value="detail">Detalle del Curso</TabsTrigger>
            </TabsList>
          </Tabs>
        </div>
      </header>

<main className="p-6">
        {currentView === "list" && renderCourseList()}
        {currentView === "detail" && renderCourseDetail()}
        {currentView === "create" && renderCourseCreate()}
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/mockups/student-enrollment-mockup.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Mail, Phone, CheckCircle } from "lucide-react"

const studentsData = [
  {
    id: 1,
    name: "Sofía Ramírez",
    email: "sofia.ramirez@parquesoft.com",
    identification: "0987654321",
    phone: "+57 304 567 8901",
    avatar: "/placeholder.svg",
  },
  {
    id: 2,
    name: "Diego Morales",
    email: "diego.morales@parquesoft.com",
    identification: "1122334455",
    phone: "+57 305 678 9012",
    avatar: "/placeholder.svg",
  },
  {
    id: 3,
    name: "Laura Martín",
    email: "laura.martin@parquesoft.com",
    identification: "1234567890",
    phone: "+57 302 345 6789",
    avatar: "/placeholder.svg",
  },
]

const coursesData = [
  { id: "REACT-001", title: "Fundamentos de React" },
  { id: "JAVA-002", title: "Programación en Java" },
  { id: "SQL-003", title: "Bases de Datos SQL" },
]

export function StudentEnrollmentMockup() {
  const [searchTerm, setSearchTerm] = useState("")
  const [studentIdInput, setStudentIdInput] = useState("")
  const [selectedStudentId, setSelectedStudentId] = useState<number | "">("")
  const [selectedCourseId, setSelectedCourseId] = useState<string>("")
  const [inscritos, setInscritos] = useState<
    { estudiante: string; id: string; contacto: string; curso: string; cursoCode: string; fecha: string }[]
  >([])
  const [alert, setAlert] = useState<{ type: "success" | "error"; message: string } | null>(null)

const filteredStudents = studentsData.filter((student) => {
    const q = searchTerm.toLowerCase().trim()
    if (!q) return true
    const matchesStudent =
      student.name.toLowerCase().includes(q) ||
      student.email.toLowerCase().includes(q) ||
      student.identification.includes(q)
    const matchesCourse = coursesData.some(
      (course) => course.id.toLowerCase().includes(q) || course.title.toLowerCase().includes(q),
    )
    return matchesStudent || matchesCourse
  })

const onStudentIdInputChange = (val: string) => {
    setStudentIdInput(val)
    const found = studentsData.find((s) => s.identification === val.trim())
    if (found) {
      setSelectedStudentId(found.id)
      setAlert(null)
    } else {
      setSelectedStudentId("")
    }
  }

const handleInscribir = () => {
    if (!selectedStudentId) {
      setAlert({ type: "error", message: "Selecciona o ingresa la identificación del estudiante." })
      return
    }
    if (!selectedCourseId) {
      setAlert({ type: "error", message: "Selecciona un curso." })
      return
    }

const student = studentsData.find((s) => s.id === Number(selectedStudentId))
    const course = coursesData.find((c) => c.id === selectedCourseId)
    if (!student || !course) {
      setAlert({ type: "error", message: "Estudiante o curso no encontrado." })
      return
    }

const already = inscritos.some((r) => r.id === student.identification && r.cursoCode === course.id)
    if (already) {
      setAlert({ type: "error", message: "El estudiante ya está inscrito en ese curso." })
      return
    }

const nuevo = {
      estudiante: student.name,
      id: student.identification,
      contacto: student.email,
      curso: course.title,
      cursoCode: course.id,
      fecha: new Date().toISOString().split("T")[0],
    }

setInscritos((prev) => [nuevo, ...prev])
    setAlert({ type: "success", message: "¡Inscrito exitosamente!" })

setStudentIdInput("")
    setSelectedStudentId("")
    setSelectedCourseId("")
  }

return (
    <div className="p-6 space-y-6">
      <h1 className="text-2xl font-bold">Inscribir Estudiantes</h1>

<Card className="p-4">
        <CardContent className="space-y-4">
          {alert && (
            <div
              className={`p-3 rounded ${
                alert.type === "success"
                  ? "bg-green-50 border border-green-200 text-green-800"
                  : "bg-red-50 border border-red-200 text-red-800"
              }`}
            >
              <div className="flex items-center gap-2">
                <CheckCircle className="w-5 h-5" />
                <span>{alert.message}</span>
              </div>
            </div>
          )}

{/* Búsqueda general */}
          <Input placeholder="Nombre estudiante" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} />

{/* Input ID */}
          <Input
            placeholder="Buscar por Identificación (ID)"
            value={studentIdInput}
            onChange={(e) => onStudentIdInputChange(e.target.value)}
          />

{/* Select estudiante */}

{/* Select curso */}
          <select
            className="w-full border rounded p-2"
            value={selectedCourseId}
            onChange={(e) => setSelectedCourseId(e.target.value)}
          >
            <option value="">-- Selecciona curso --</option>
            {coursesData.map((c) => (
              <option key={c.id} value={c.id}>
                {c.title} ({c.id})
              </option>
            ))}
          </select>

<Button className="w-full bg-green-600 text-white" onClick={handleInscribir}>
            Inscribir
          </Button>
        </CardContent>
      </Card>

{/* Tabla inscritos */}
      <div>
        <h2 className="text-xl font-semibold mb-4">Estudiantes Inscritos</h2>
        <div className="overflow-x-auto">
          <table className="w-full border-collapse border">
            <thead className="bg-gray-100">
              <tr>
                <th className="text-left p-3 border">Estudiante</th>
                <th className="text-left p-3 border">ID</th>
                <th className="text-left p-3 border">Contacto</th>
                <th className="text-left p-3 border">Curso</th>
                <th className="text-left p-3 border">Fecha</th>
              </tr>
            </thead>
            <tbody>
              {inscritos.length === 0 ? (
                <tr>
                  <td colSpan={5} className="p-6 text-center text-muted-foreground">
                    No hay estudiantes inscritos todavía.
                  </td>
                </tr>
              ) : (
                inscritos.map((r, idx) => (
                  <tr key={idx} className="border-b hover:bg-muted/50">
                    <td className="p-3 flex items-center gap-3">
                      <Avatar>
                        <AvatarImage src="/placeholder.svg" />
                        <AvatarFallback>
                          {r.estudiante
                            .split(" ")
                            .map((n) => n[0])
                            .join("")}
                        </AvatarFallback>
                      </Avatar>
                      <div>
                        <div className="font-medium">{r.estudiante}</div>
                        <div className="text-sm text-muted-foreground">{r.id}</div>
                      </div>
                    </td>
                    <td className="p-3">{r.id}</td>
                    <td className="p-3">
                      <div className="text-sm">
                        <div className="flex items-center gap-2">
                          <Mail className="w-3 h-3" /> <span>{r.contacto}</span>
                        </div>
                        <div className="flex items-center gap-2 text-xs text-muted-foreground">
                          <Phone className="w-3 h-3" />{" "}
                          <span>{studentsData.find((s) => s.identification === r.id)?.phone}</span>
                        </div>
                      </div>
                    </td>
                    <td className="p-3">
                      {r.curso}
                      <div className="text-xs text-muted-foreground">{r.cursoCode}</div>
                    </td>
                    <td className="p-3">{r.fecha}</td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/mockups/student-dashboard-mockup.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Input } from "@/components/ui/input"
import {
  Search,
  BookOpen,
  Play,
  Clock,
  Award,
  TrendingUp,
  Grid3X3,
  List,
  Star,
  Users,
  CheckCircle,
  ExternalLink,
} from "lucide-react"

const studentCoursesData = [
  {
    id: 1,
    title: "Fundamentos de React",
    code: "REACT-001",
    instructor: "Carlos Ruiz",
    thumbnail: "/react-programming-course.jpg",
    progress: 75,
    status: "active",
    enrollmentDate: "2024-01-15",
    lastAccessed: "2024-01-20",
    totalLessons: 24,
    completedLessons: 18,
    duration: "40 horas",
    category: "Frontend",
    level: "Intermedio",
    rating: 4.8,
    nextLesson: "Hooks Avanzados",
    dueDate: "2024-03-15",
    certificate: false,
  },
  {
    id: 2,
    title: "JavaScript Avanzado",
    code: "JS-002",
    instructor: "Ana García",
    thumbnail: "/javascript-programming-course.jpg",
    progress: 100,
    status: "completed",
    enrollmentDate: "2023-11-10",
    lastAccessed: "2024-01-18",
    totalLessons: 20,
    completedLessons: 20,
    duration: "35 horas",
    category: "Frontend",
    level: "Avanzado",
    rating: 4.9,
    nextLesson: null,
    dueDate: "2024-01-30",
    certificate: true,
  },
  {
    id: 3,
    title: "Node.js Backend Development",
    code: "NODE-003",
    instructor: "Miguel Torres",
    thumbnail: "/node-js-backend-development.jpg",
    progress: 25,
    status: "active",
    enrollmentDate: "2024-01-20",
    lastAccessed: "2024-01-19",
    totalLessons: 30,
    completedLessons: 8,
    duration: "50 horas",
    category: "Backend",
    level: "Intermedio",
    rating: 4.7,
    nextLesson: "Express.js Fundamentals",
    dueDate: "2024-04-15",
    certificate: false,
  },
]

const emptyStateStudent = {
  name: "Nuevo Estudiante",
  courses: [],
}

type ViewMode = "grid" | "list"
type FilterMode = "all" | "active" | "completed" | "pending"

export function StudentDashboardMockup() {
  const [viewMode, setViewMode] = useState<ViewMode>("grid")
  const [filterMode, setFilterMode] = useState<FilterMode>("all")
  const [searchTerm, setSearchTerm] = useState("")
  const [showEmptyState, setShowEmptyState] = useState(false)

const currentCourses = showEmptyState ? emptyStateStudent.courses : studentCoursesData

const filteredCourses = currentCourses.filter((course) => {
    const matchesSearch =
      course.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
      course.instructor.toLowerCase().includes(searchTerm.toLowerCase()) ||
      course.code.toLowerCase().includes(searchTerm.toLowerCase())

const matchesFilter = filterMode === "all" || course.status === filterMode

return matchesSearch && matchesFilter
  })

const getStatusColor = (status: string) => {
    switch (status) {
      case "active":
        return "bg-primary text-primary-foreground"
      case "completed":
        return "bg-secondary text-secondary-foreground"
      case "pending":
        return "bg-muted text-muted-foreground"
      default:
        return "bg-muted text-muted-foreground"
    }
  }

const getStatusLabel = (status: string) => {
    switch (status) {
      case "active":
        return "En Progreso"
      case "completed":
        return "Completado"
      case "pending":
        return "Pendiente"
      default:
        return status
    }
  }

const renderCourseGrid = () => (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {filteredCourses.map((course) => (
        <Card key={course.id} className="overflow-hidden hover:shadow-lg transition-shadow">
          <div className="relative">
            <img src={course.thumbnail || "/placeholder.svg"} alt={course.title} className="w-full h-48 object-cover" />
            <div className="absolute top-4 right-4">
              <Badge className={getStatusColor(course.status)}>{getStatusLabel(course.status)}</Badge>
            </div>
            {course.certificate && (
              <div className="absolute top-4 left-4">
                <Badge variant="secondary" className="bg-yellow-100 text-yellow-800">
                  <Award className="w-3 h-3 mr-1" />
                  Certificado
                </Badge>
              </div>
            )}
          </div>

<CardHeader>
            <div className="flex items-start justify-between">
              <div className="flex-1">
                <CardTitle className="font-heading text-lg line-clamp-2">{course.title}</CardTitle>
                <p className="text-sm text-muted-foreground">{course.code}</p>
              </div>
            </div>
            <div className="flex items-center gap-2 text-sm text-muted-foreground">
              <Users className="w-4 h-4" />
              <span>{course.instructor}</span>
            </div>
          </CardHeader>

<CardContent className="space-y-4">
            <div className="space-y-2">
              <div className="flex items-center justify-between text-sm">
                <span>Progreso</span>
                <span className="font-medium">{course.progress}%</span>
              </div>
              <Progress value={course.progress} className="h-2" />
              <div className="flex items-center justify-between text-xs text-muted-foreground">
                <span>
                  {course.completedLessons}/{course.totalLessons} lecciones
                </span>
                <span>{course.duration}</span>
              </div>
            </div>

<div className="flex items-center gap-4 text-sm text-muted-foreground">
              <div className="flex items-center gap-1">
                <Clock className="w-4 h-4" />
                <span>{course.level}</span>
              </div>
            </div>

{course.nextLesson && (
              <div className="bg-muted/50 p-2 rounded text-sm">
                <span className="text-muted-foreground">Próxima lección: </span>
                <span className="font-medium">{course.nextLesson}</span>
              </div>
            )}

<div className="flex items-center justify-between pt-2">
              <div className="text-xs text-muted-foreground">
                <span>Último acceso: {course.lastAccessed}</span>
              </div>
              <Button size="sm" className="bg-primary hover:bg-primary/90">
                <Play className="w-4 h-4 mr-2" />
                {course.status === "completed" ? "Revisar" : "Continuar"}
              </Button>
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  )

const renderCourseList = () => (
    <div className="space-y-4">
      {filteredCourses.map((course) => (
        <Card key={course.id} className="hover:shadow-md transition-shadow">
          <CardContent className="p-6">
            <div className="flex items-center gap-6">
              <div className="relative">
                <img
                  src={course.thumbnail || "/placeholder.svg"}
                  alt={course.title}
                  className="w-24 h-16 object-cover rounded"
                />
                {course.certificate && <Award className="absolute -top-2 -right-2 w-5 h-5 text-yellow-500" />}
              </div>

<div className="flex-1 space-y-2">
                <div className="flex items-start justify-between">
                  <div>
                    <h3 className="font-heading font-semibold text-lg">{course.title}</h3>
                    <p className="text-sm text-muted-foreground">
                      {course.code} • {course.instructor}
                    </p>
                  </div>
                  <Badge className={getStatusColor(course.status)}>{getStatusLabel(course.status)}</Badge>
                </div>

<div className="grid grid-cols-1 md:grid-cols-4 gap-4 text-sm">
                  <div>
                    <p className="text-muted-foreground">Progreso</p>
                    <div className="flex items-center gap-2">
                      <Progress value={course.progress} className="h-2 flex-1" />
                      <span className="font-medium">{course.progress}%</span>
                    </div>
                  </div>
                  <div>
                    <p className="text-muted-foreground">Lecciones</p>
                    <p className="font-medium">
                      {course.completedLessons}/{course.totalLessons}
                    </p>
                  </div>
                  <div>
                    <p className="text-muted-foreground">Duración</p>
                    <p className="font-medium">{course.duration}</p>
                  </div>
                  <div>
                    <p className="text-muted-foreground">Calificación</p>
                    <div className="flex items-center gap-1">
                      <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
                      <span className="font-medium">{course.rating}</span>
                    </div>
                  </div>
                </div>

{course.nextLesson && (
                  <div className="bg-muted/50 p-2 rounded text-sm">
                    <span className="text-muted-foreground">Próxima lección: </span>
                    <span className="font-medium">{course.nextLesson}</span>
                  </div>
                )}
              </div>

<div className="flex flex-col gap-2">
                <Button className="bg-primary hover:bg-primary/90">
                  <Play className="w-4 h-4 mr-2" />
                  {course.status === "completed" ? "Revisar" : "Continuar"}
                </Button>
                <Button variant="outline" size="sm">
                  <ExternalLink className="w-4 h-4 mr-2" />
                  Detalles
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  )

const renderEmptyState = () => (
    <Card>
      <CardContent className="p-12 text-center">
        <BookOpen className="w-16 h-16 mx-auto mb-6 text-muted-foreground" />
        <h3 className="text-2xl font-heading font-bold mb-4">Actualmente no tienes cursos inscritos</h3>
        <p className="text-muted-foreground mb-6 max-w-md mx-auto">
          Explora nuestro catálogo de cursos y comienza tu viaje de aprendizaje con ParqueSoft.TI
        </p>
        <div className="space-y-3">
          <Button className="bg-primary hover:bg-primary/90">
            <Search className="w-4 h-4 mr-2" />
            Explorar Cursos
          </Button>
          <p className="text-sm text-muted-foreground">
            ¿Necesitas ayuda? Contacta a tu administrador para obtener acceso a cursos
          </p>
        </div>
      </CardContent>
    </Card>
  )

const renderStats = () => {
    if (currentCourses.length === 0) return null

const activeCourses = currentCourses.filter((c) => c.status === "active").length
    const completedCourses = currentCourses.filter((c) => c.status === "completed").length
    const totalProgress = currentCourses.reduce((acc, course) => acc + course.progress, 0) / currentCourses.length
    const certificates = currentCourses.filter((c) => c.certificate).length

return (
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">Cursos Activos</p>
                <p className="text-2xl font-bold">{activeCourses}</p>
              </div>
              <BookOpen className="w-8 h-8 text-primary" />
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">Completados</p>
                <p className="text-2xl font-bold">{completedCourses}</p>
              </div>
              <CheckCircle className="w-8 h-8 text-secondary" />
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">Progreso Promedio</p>
                <p className="text-2xl font-bold">{Math.round(totalProgress)}%</p>
              </div>
              <TrendingUp className="w-8 h-8 text-chart-1" />
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">Certificados</p>
                <p className="text-2xl font-bold">{certificates}</p>
              </div>
              <Award className="w-8 h-8 text-yellow-500" />
            </div>
          </CardContent>
        </Card>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background">
      <header className="border-b bg-card">
        <div className="flex items-center justify-between p-4">
          <div className="flex items-center gap-4">
            <img src="/parquesoft-logo.png" alt="ParqueSoft.TI" className="h-8" />
            <h1 className="text-xl font-heading font-bold">Mi Tablero de Cursos</h1>
          </div>
          <div className="flex items-center gap-2">
            <Button
              variant={showEmptyState ? "default" : "outline"}
              onClick={() => setShowEmptyState(!showEmptyState)}
              size="sm"
            >
              {showEmptyState ? "Ver con Cursos" : "Ver Estado Vacío"}
            </Button>
          </div>
        </div>
      </header>

<main className="p-6">
        <div className="space-y-6">
          <div>
            <h2 className="text-2xl font-heading font-bold">Mis Cursos</h2>
            <p className="text-muted-foreground">
              {currentCourses.length > 0
                ? `Tienes ${currentCourses.length} curso(s) inscrito(s)`
                : "Explora y inscríbete en cursos para comenzar tu aprendizaje"}
            </p>
          </div>

{renderStats()}

{currentCourses.length > 0 ? (
            <>
              {/* Filters and Search */}
              <Card>
                <CardContent className="p-6">
                  <div className="flex flex-col md:flex-row gap-4 items-center justify-between">
                    <div className="flex-1 max-w-md">
                      <div className="relative">
                        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
                        <Input
                          placeholder="Buscar cursos..."
                          value={searchTerm}
                          onChange={(e) => setSearchTerm(e.target.value)}
                          className="pl-10"
                        />
                      </div>
                    </div>

<div className="flex items-center gap-2">
                      <Button
                        variant={filterMode === "all" ? "default" : "outline"}
                        size="sm"
                        onClick={() => setFilterMode("all")}
                      >
                        Todos ({currentCourses.length})
                      </Button>
                      <Button
                        variant={filterMode === "active" ? "default" : "outline"}
                        size="sm"
                        onClick={() => setFilterMode("active")}
                      >
                        Activos ({currentCourses.filter((c) => c.status === "active").length})
                      </Button>
                      <Button
                        variant={filterMode === "completed" ? "default" : "outline"}
                        size="sm"
                        onClick={() => setFilterMode("completed")}
                      >
                        Completados ({currentCourses.filter((c) => c.status === "completed").length})
                      </Button>

<div className="border-l pl-2 ml-2">
                        <Button
                          variant={viewMode === "grid" ? "default" : "outline"}
                          size="sm"
                          onClick={() => setViewMode("grid")}
                        >
                          <Grid3X3 className="w-4 h-4" />
                        </Button>
                        <Button
                          variant={viewMode === "list" ? "default" : "outline"}
                          size="sm"
                          onClick={() => setViewMode("list")}
                        >
                          <List className="w-4 h-4" />
                        </Button>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>

{/* Courses Display */}
              {filteredCourses.length > 0 ? (
                viewMode === "grid" ? (
                  renderCourseGrid()
                ) : (
                  renderCourseList()
                )
              ) : (
                <Card>
                  <CardContent className="p-12 text-center">
                    <Search className="w-12 h-12 mx-auto mb-4 text-muted-foreground" />
                    <h3 className="text-lg font-semibold mb-2">No se encontraron cursos</h3>
                    <p className="text-muted-foreground">Intenta ajustar los filtros o términos de búsqueda</p>
                  </CardContent>
                </Card>
              )}
            </>
          ) : (
            renderEmptyState()
          )}
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true"
import { LoginMockup } from "@/components/mockups/login-mockup"
import { DashboardMockup } from "@/components/mockups/dashboard-mockup"
import { ErrorStateMockup } from "@/components/mockups/error-state-mockup"
import { SessionManagementMockup } from "@/components/mockups/session-management-mockup"
import { LMSDashboardMockup } from "@/components/mockups/lms-dashboard-mockup"
import { CourseManagementMockup } from "@/components/mockups/course-management-mockup"
import { UserManagementMockup } from "@/components/mockups/user-management-mockup"
import { StudentEnrollmentMockup } from "@/components/mockups/student-enrollment-mockup"
import { StudentDashboardMockup } from "@/components/mockups/student-dashboard-mockup"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export default function MockupsPage() {
  return (
    <div className="min-h-screen bg-background p-3 sm:p-6">
      <div className="max-w-7xl mx-auto">
        <div className="mb-6 sm:mb-8">
          <h1 className="text-2xl sm:text-3xl font-bold text-foreground mb-2 text-balance font-heading">
            Sistema de Gestión de Aprendizaje - ParqueSoft.TI
          </h1>
          <p className="text-sm sm:text-base text-muted-foreground text-pretty">
            Mockups completos del LMS con autenticación, dashboards por roles, gestión de cursos y administración de
            usuarios
          </p>
        </div>

<Tabs defaultValue="login" className="w-full">
          <TabsList className="grid w-full grid-cols-2 sm:grid-cols-3 lg:grid-cols-9 h-auto">
            <TabsTrigger value="login" className="text-xs sm:text-sm px-2 py-2">
              Login
            </TabsTrigger>
            <TabsTrigger value="lms-dashboard" className="text-xs sm:text-sm px-2 py-2">
              LMS Dashboard
            </TabsTrigger>
            <TabsTrigger value="courses" className="text-xs sm:text-sm px-2 py-2">
              Cursos
            </TabsTrigger>
            <TabsTrigger value="users" className="text-xs sm:text-sm px-2 py-2">
              Usuarios
            </TabsTrigger>
            <TabsTrigger value="enrollment" className="text-xs sm:text-sm px-2 py-2">
              Inscripción
            </TabsTrigger>
            <TabsTrigger value="student-dashboard" className="text-xs sm:text-sm px-2 py-2">
              Tablero Estudiante
            </TabsTrigger>
            <TabsTrigger value="dashboard" className="text-xs sm:text-sm px-2 py-2">
              Auth Dashboard
            </TabsTrigger>
            <TabsTrigger value="errors" className="text-xs sm:text-sm px-2 py-2">
              Errores
            </TabsTrigger>
            <TabsTrigger value="sessions" className="text-xs sm:text-sm px-2 py-2">
              Sesiones
            </TabsTrigger>
          </TabsList>