[V0_FILE]typescriptreact:file="app/page.tsx" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { ArrowRight, BarChart3, Calendar, CheckCircle, Clock, Users } from "lucide-react" export default function Home() { return (

ProyectoGest

Sistema de Gestión de Proyectos Empresariales

Planifica, ejecuta y monitorea tus proyectos de manera eficiente. Facilita la colaboración entre los miembros del equipo, asigna tareas y gestiona recursos.

Características Principales

Nuestro sistema ofrece todas las herramientas necesarias para gestionar proyectos de manera eficiente

Planificación

Crea y gestiona cronogramas detallados para tus proyectos con fechas de inicio y fin.

Colaboración

Facilita la comunicación y el trabajo en equipo entre los miembros del proyecto.

Seguimiento

Monitorea el progreso de las tareas y el avance general del proyecto en tiempo real.

Gestión de Tiempo

Controla el tiempo dedicado a cada tarea y optimiza la distribución de horas de trabajo.

Reportes

Genera informes detallados sobre el rendimiento y el estado de los proyectos.

Gestión de Recursos

Asigna y administra recursos humanos y materiales de manera eficiente.

) } [V0_FILE]typescriptreact:file="app/login/page.tsx" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { BarChart3, Loader2 } from "lucide-react" export default function LoginPage() { const router = useRouter() const [isLoading, setIsLoading] = useState(false) const [formData, setFormData] = useState({ email: "", password: "", }) const [error, setError] = useState("") const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value, })) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) setError("") try { // Simulación de autenticación await new Promise((resolve) => setTimeout(resolve, 1500)) // Verificar credenciales (en un sistema real, esto se haría en el servidor) if (formData.email === "admin@ejemplo.com" && formData.password === "admin123") { // Guardar información de sesión localStorage.setItem("isLoggedIn", "true") localStorage.setItem( "user", JSON.stringify({ name: "Administrador", email: formData.email, role: "admin", }), ) // Redirigir al dashboard router.push("/dashboard") } else { setError("Credenciales incorrectas") } } catch (err) { setError("Error al iniciar sesión. Inténtalo de nuevo.") } finally { setIsLoading(false) } } return (

ProyectoGest

Iniciar Sesión Ingresa tus credenciales para acceder al sistema

¿No tienes una cuenta?{" "} Regístrate

Para fines de demostración, usa:

Email: admin@ejemplo.com

Contraseña: admin123

) } [V0_FILE]typescriptreact:file="app/registro/page.tsx" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { BarChart3, Loader2 } from "lucide-react" export default function RegistroPage() { const router = useRouter() const [isLoading, setIsLoading] = useState(false) const [formData, setFormData] = useState({ nombre: "", email: "", password: "", confirmPassword: "", }) const [error, setError] = useState("") const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value, })) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) setError("") // Validar que las contraseñas coincidan if (formData.password !== formData.confirmPassword) { setError("Las contraseñas no coinciden") setIsLoading(false) return } try { // Simulación de registro await new Promise((resolve) => setTimeout(resolve, 1500)) // En un sistema real, aquí se enviarían los datos al servidor // Guardar información de sesión para la demo localStorage.setItem("isLoggedIn", "true") localStorage.setItem( "user", JSON.stringify({ name: formData.nombre, email: formData.email, role: "user", }), ) // Redirigir al dashboard router.push("/dashboard") } catch (err) { setError("Error al registrar usuario. Inténtalo de nuevo.") } finally { setIsLoading(false) } } return (

ProyectoGest

Crear Cuenta Ingresa tus datos para registrarte en el sistema

¿Ya tienes una cuenta?{" "} Iniciar Sesión

) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" "use client" import { useEffect, useState } from "react" import { useRouter } from "next/navigation" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { BarChart3, Calendar, CheckCircle, ListTodo } from "lucide-react" import DashboardLayout from "@/components/dashboard-layout" interface Project { id: number name: string progress: number tasks: number completedTasks: number dueDate: string status: "En progreso" | "Completado" | "Retrasado" | "Pendiente" } interface Task { id: number name: string project: string dueDate: string status: "Pendiente" | "En progreso" | "Completado" assignedTo: string } export default function DashboardPage() { const router = useRouter() const [isLoading, setIsLoading] = useState(true) const [projects, setProjects] = useState([]) const [tasks, setTasks] = useState([]) useEffect(() => { // Verificar si el usuario está autenticado const isLoggedIn = localStorage.getItem("isLoggedIn") if (!isLoggedIn) { router.push("/login") return } // Cargar datos de ejemplo const loadDemoData = async () => { await new Promise((resolve) => setTimeout(resolve, 1000)) // Proyectos de ejemplo setProjects([ { id: 1, name: "Desarrollo de Aplicación Web", progress: 75, tasks: 20, completedTasks: 15, dueDate: "2025-04-15", status: "En progreso", }, { id: 2, name: "Migración de Base de Datos", progress: 30, tasks: 12, completedTasks: 4, dueDate: "2025-05-20", status: "En progreso", }, { id: 3, name: "Rediseño de Interfaz", progress: 100, tasks: 8, completedTasks: 8, dueDate: "2025-03-10", status: "Completado", }, { id: 4, name: "Implementación de API", progress: 10, tasks: 15, completedTasks: 2, dueDate: "2025-06-30", status: "Pendiente", }, ]) // Tareas de ejemplo setTasks([ { id: 1, name: "Diseñar mockups", project: "Rediseño de Interfaz", dueDate: "2025-03-05", status: "Completado", assignedTo: "Ana García", }, { id: 2, name: "Implementar autenticación", project: "Desarrollo de Aplicación Web", dueDate: "2025-03-25", status: "En progreso", assignedTo: "Carlos Rodríguez", }, { id: 3, name: "Crear esquema de base de datos", project: "Migración de Base de Datos", dueDate: "2025-04-10", status: "Pendiente", assignedTo: "María López", }, { id: 4, name: "Documentar endpoints", project: "Implementación de API", dueDate: "2025-05-15", status: "Pendiente", assignedTo: "Juan Pérez", }, { id: 5, name: "Pruebas de integración", project: "Desarrollo de Aplicación Web", dueDate: "2025-04-05", status: "Pendiente", assignedTo: "Carlos Rodríguez", }, ]) setIsLoading(false) } loadDemoData() }, [router]) if (isLoading) { return (

Cargando dashboard...

) } // Calcular estadísticas const totalProjects = projects.length const completedProjects = projects.filter((p) => p.status === "Completado").length const totalTasks = tasks.length const completedTasks = tasks.filter((t) => t.status === "Completado").length const pendingTasks = tasks.filter((t) => t.status === "Pendiente").length const inProgressTasks = tasks.filter((t) => t.status === "En progreso").length return (

Dashboard

Última actualización: {new Date().toLocaleDateString()}

Resumen Proyectos Tareas

Proyectos Totales

{totalProjects}

{completedProjects} completados, {totalProjects - completedProjects} en curso

Tareas Totales

{totalTasks}

{completedTasks} completadas, {pendingTasks + inProgressTasks} pendientes

Progreso General

{Math.round((completedTasks / totalTasks) * 100)}%

Próximo Vencimiento

{new Date("2025-03-25").toLocaleDateString()}

Implementar autenticación (Desarrollo de Aplicación Web)

Proyectos Recientes Estado actual de los proyectos en curso

{projects.slice(0, 3).map((project) => (

{project.name}

{project.status}

{project.completedTasks}/{project.tasks} tareas Vence: {new Date(project.dueDate).toLocaleDateString()}

))}

Tareas Pendientes Tareas que requieren atención

{tasks .filter((t) => t.status !== "Completado") .slice(0, 4) .map((task) => (

{task.name}

{task.project}

{new Date(task.dueDate).toLocaleDateString()} {task.status}

))}

Todos los Proyectos Gestiona y monitorea todos tus proyectos

{projects.map((project) => (

{project.name}

{project.status}

{project.completedTasks}/{project.tasks} tareas Progreso: {project.progress}%

Vence: {new Date(project.dueDate).toLocaleDateString()}

))}

Todas las Tareas Gestiona y monitorea todas tus tareas

{tasks.map((task) => (

{task.name}

Proyecto: {task.project} Asignado a: {task.assignedTo}

{new Date(task.dueDate).toLocaleDateString()} {task.status}

))}

) } [V0_FILE]typescriptreact:file="app/proyectos/page.tsx" "use client" import { useEffect, useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Progress } from "@/components/ui/progress" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Calendar, Clock, Edit, Plus, Trash2, Users } from "lucide-react" import DashboardLayout from "@/components/dashboard-layout" interface Project { id: number name: string description: string progress: number tasks: number completedTasks: number startDate: string dueDate: string status: "En progreso" | "Completado" | "Retrasado" | "Pendiente" team: string[] } export default function ProyectosPage() { const router = useRouter() const [isLoading, setIsLoading] = useState(true) const [projects, setProjects] = useState([]) const [showNewProjectDialog, setShowNewProjectDialog] = useState(false) const [newProject, setNewProject] = useState({ name: "", description: "", startDate: "", dueDate: "", status: "Pendiente", }) useEffect(() => { // Verificar si el usuario está autenticado const isLoggedIn = localStorage.getItem("isLoggedIn") if (!isLoggedIn) { router.push("/login") return } // Cargar datos de ejemplo const loadDemoData = async () => { await new Promise((resolve) => setTimeout(resolve, 1000)) // Proyectos de ejemplo setProjects([ { id: 1, name: "Desarrollo de Aplicación Web", description: "Desarrollo de una aplicación web completa con autenticación, gestión de usuarios y panel de administración.", progress: 75, tasks: 20, completedTasks: 15, startDate: "2025-01-15", dueDate: "2025-04-15", status: "En progreso", team: ["Carlos Rodríguez", "Ana García", "Juan Pérez"], }, { id: 2, name: "Migración de Base de Datos", description: "Migración de la base de datos actual a una nueva arquitectura más escalable y eficiente.", progress: 30, tasks: 12, completedTasks: 4, startDate: "2025-02-10", dueDate: "2025-05-20", status: "En progreso", team: ["María López", "Pedro Sánchez"], }, { id: 3, name: "Rediseño de Interfaz", description: "Rediseño completo de la interfaz de usuario para mejorar la experiencia y usabilidad.", progress: 100, tasks: 8, completedTasks: 8, startDate: "2025-01-05", dueDate: "2025-03-10", status: "Completado", team: ["Ana García", "Laura Martínez"], }, { id: 4, name: "Implementación de API", description: "Desarrollo e implementación de una API RESTful para integración con sistemas externos.", progress: 10, tasks: 15, completedTasks: 2, startDate: "2025-03-01", dueDate: "2025-06-30", status: "Pendiente", team: ["Juan Pérez", "Carlos Rodríguez"], }, ]) setIsLoading(false) } loadDemoData() }, [router]) const handleCreateProject = () => { // Validar campos if (!newProject.name || !newProject.description || !newProject.startDate || !newProject.dueDate) { alert("Por favor completa todos los campos") return } // Crear nuevo proyecto const newId = Math.max(...projects.map((p) => p.id), 0) + 1 const createdProject: Project = { id: newId, name: newProject.name, description: newProject.description, progress: 0, tasks: 0, completedTasks: 0, startDate: newProject.startDate, dueDate: newProject.dueDate, status: "Pendiente", team: [], } setProjects([...projects, createdProject]) setShowNewProjectDialog(false) // Resetear formulario setNewProject({ name: "", description: "", startDate: "", dueDate: "", status: "Pendiente", }) } const handleDeleteProject = (id: number) => { if (confirm("¿Estás seguro de que deseas eliminar este proyecto?")) { setProjects(projects.filter((p) => p.id !== id)) } } if (isLoading) { return (

Cargando proyectos...

) } return (

Proyectos

Todos En Progreso Completados Pendientes

{projects.map((project) => ( {project.name} {project.description}

Progreso {project.progress}%

{new Date(project.startDate).toLocaleDateString()} -{" "} {new Date(project.dueDate).toLocaleDateString()}

{project.completedTasks}/{project.tasks} tareas

{project.team.length} miembros

{project.status}

))}

{projects .filter((p) => p.status === "En progreso") .map((project) => ( {project.name} {project.description}

Progreso {project.progress}%

{new Date(project.startDate).toLocaleDateString()} -{" "} {new Date(project.dueDate).toLocaleDateString()}

{project.completedTasks}/{project.tasks} tareas

{project.team.length} miembros

{project.status}

))}

{projects .filter((p) => p.status === "Completado") .map((project) => ( {project.name} {project.description}

Progreso {project.progress}%

{new Date(project.startDate).toLocaleDateString()} -{" "} {new Date(project.dueDate).toLocaleDateString()}

{project.completedTasks}/{project.tasks} tareas

{project.team.length} miembros

{project.status}

))}

{projects .filter((p) => p.status === "Pendiente") .map((project) => ( {project.name} {project.description}

Progreso {project.progress}%

{new Date(project.startDate).toLocaleDateString()} -{" "} {new Date(project.dueDate).toLocaleDateString()}

{project.completedTasks}/{project.tasks} tareas

{project.team.length} miembros

{project.status}

))}

) } [V0_FILE]typescriptreact:file="components/dashboard-layout.tsx" isFixed="true" "use client" import type React from "react" import { useState, useEffect } from "react" import Link from "next/link" import { usePathname, useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet" import { BarChart3, Calendar, ChevronDown, ClipboardList, FileText, Home, LogOut, Menu, Settings, Users, } from "lucide-react" interface DashboardLayoutProps { children: React.ReactNode } export default function DashboardLayout({ children }: DashboardLayoutProps) { const pathname = usePathname() const router = useRouter() const [user, setUser] = useState<{ name: string; email: string; role: string } | null>(null) const [isMounted, setIsMounted] = useState(false) useEffect(() => { setIsMounted(true) const userStr = localStorage.getItem("user") if (userStr) { try { setUser(JSON.parse(userStr)) } catch (e) { console.error("Error parsing user data", e) } } }, []) const handleLogout = () => { localStorage.removeItem("isLoggedIn") localStorage.removeItem("user") router.push("/login") } if (!isMounted) { return null } const navigation = [ { name: "Dashboard", href: "/dashboard", icon: Home }, { name: "Proyectos", href: "/proyectos", icon: BarChart3 }, { name: "Tareas", href: "/tareas", icon: ClipboardList }, { name: "Equipos", href: "/equipos", icon: Users }, { name: "Calendario", href: "/calendario", icon: Calendar }, { name: "Reportes", href: "/reportes", icon: FileText }, { name: "Configuración", href: "/configuracion", icon: Settings }, ] return (

ProyectoGest

Perfil Configuración

{children}

) } [V0_FILE]typescriptreact:file="app/tareas/page.tsx" isFixed="true" "use client" import { useEffect, useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Checkbox } from "@/components/ui/checkbox" import { Calendar, Plus, Trash2 } from "lucide-react" import DashboardLayout from "@/components/dashboard-layout" interface Task { id: number name: string description: string project: string dueDate: string status: "Pendiente" | "En progreso" | "Completado" assignedTo: string priority: "Baja" | "Media" | "Alta" } export default function TareasPage() { const router = useRouter() const [isLoading, setIsLoading] = useState(true) const [tasks, setTasks] = useState([]) const [showNewTaskDialog, setShowNewTaskDialog] = useState(false) const [newTask, setNewTask] = useState({ name: "", description: "", project: "", dueDate: "", status: "Pendiente", assignedTo: "", priority: "Media", }) const [projects, setProjects] = useState<{ id: number; name: string }[]>([]) const [users, setUsers] = useState<{ id: number; name: string }[]>([]) useEffect(() => { // Verificar si el usuario está autenticado const isLoggedIn = localStorage.getItem("isLoggedIn") if (!isLoggedIn) { router.push("/login") return } // Cargar datos de ejemplo const loadDemoData = async () => { await new Promise((resolve) => setTimeout(resolve, 1000)) // Proyectos de ejemplo setProjects([ { id: 1, name: "Desarrollo de Aplicación Web" }, { id: 2, name: "Migración de Base de Datos" }, { id: 3, name: "Rediseño de Interfaz" }, { id: 4, name: "Implementación de API" }, ]) // Usuarios de ejemplo setUsers([ { id: 1, name: "Ana García" }, { id: 2, name: "Carlos Rodríguez" }, { id: 3, name: "María López" }, { id: 4, name: "Juan Pérez" }, { id: 5, name: "Laura Martínez" }, ]) // Tareas de ejemplo setTasks([ { id: 1, name: "Diseñar mockups", description: "Crear mockups de todas las pantallas de la aplicación", project: "Rediseño de Interfaz", dueDate: "2025-03-05", status: "Completado", assignedTo: "Ana García", priority: "Alta", }, { id: 2, name: "Implementar autenticación", description: "Desarrollar el sistema de autenticación con JWT", project: "Desarrollo de Aplicación Web", dueDate: "2025-03-25", status: "En progreso", assignedTo: "Carlos Rodríguez", priority: "Alta", }, { id: 3, name: "Crear esquema de base de datos", description: "Diseñar el esquema de la nueva base de datos", project: "Migración de Base de Datos", dueDate: "2025-04-10", status: "Pendiente", assignedTo: "María López", priority: "Media", }, { id: 4, name: "Documentar endpoints", description: "Crear documentación para todos los endpoints de la API", project: "Implementación de API", dueDate: "2025-05-15", status: "Pendiente", assignedTo: "Juan Pérez", priority: "Baja", }, { id: 5, name: "Pruebas de integración", description: "Realizar pruebas de integración del sistema", project: "Desarrollo de Aplicación Web", dueDate: "2025-04-05", status: "Pendiente", assignedTo: "Carlos Rodríguez", priority: "Media", }, ]) setIsLoading(false) } loadDemoData() }, [router]) const handleCreateTask = () => { // Validar campos if (!newTask.name || !newTask.project || !newTask.dueDate || !newTask.assignedTo) { alert("Por favor completa todos los campos obligatorios") return } // Crear nueva tarea const newId = Math.max(...tasks.map((t) => t.id), 0) + 1 const createdTask: Task = { id: newId, name: newTask.name, description: newTask.description, project: newTask.project, dueDate: newTask.dueDate, status: "Pendiente", assignedTo: newTask.assignedTo, priority: newTask.priority as "Baja" | "Media" | "Alta", } setTasks([...tasks, createdTask]) setShowNewTaskDialog(false) // Resetear formulario setNewTask({ name: "", description: "", project: "", dueDate: "", status: "Pendiente", assignedTo: "", priority: "Media", }) } const handleDeleteTask = (id: number) => { if (confirm("¿Estás seguro de que deseas eliminar esta tarea?")) { setTasks(tasks.filter((t) => t.id !== id)) } } const handleStatusChange = (id: number, status: "Pendiente" | "En progreso" | "Completado") => { setTasks(tasks.map((task) => (task.id === id ? { ...task, status } : task))) } if (isLoading) { return (

Cargando tareas...

) } return (

Tareas

Todas Pendientes En Progreso Completadas Todas las Tareas

{tasks.map((task) => (

{ handleStatusChange(task.id, checked ? "Completado" : "Pendiente") }} />

{task.name}

Proyecto: {task.project} Asignado a: {task.assignedTo}

{new Date(task.dueDate).toLocaleDateString()}

{task.priority}

))}

Tareas Pendientes

{tasks .filter((t) => t.status === "Pendiente") .map((task) => (

{ handleStatusChange(task.id, checked ? "Completado" : "Pendiente") }} />

{task.name}

Proyecto: {task.project} Asignado a: {task.assignedTo}

{new Date(task.dueDate).toLocaleDateString()}

{task.priority}

))}

Tareas En Progreso

{tasks .filter((t) => t.status === "En progreso") .map((task) => (

{ handleStatusChange(task.id, checked ? "Completado" : "En progreso") }} />

{task.name}

Proyecto: {task.project} Asignado a: {task.assignedTo}

{new Date(task.dueDate).toLocaleDateString()}

{task.priority}

))}

Tareas Completadas

{tasks .filter((t) => t.status === "Completado") .map((task) => (

{ handleStatusChange(task.id, checked ? "Completado" : "Pendiente") }} />

{task.name}

Proyecto: {task.project} Asignado a: {task.assignedTo}

{new Date(task.dueDate).toLocaleDateString()}

{task.priority}

))}

) } [V0_FILE]typescriptreact:file="app/equipos/page.tsx" isFixed="true" isQuickEdit="true" "use client" import { useEffect, useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { Plus, Search, Trash2, UserPlus } from "lucide-react" import DashboardLayout from "@/components/dashboard-layout" interface TeamMember { id: number name: string email: string role: string avatar?: string projects: string[] } interface Team { id: number name: string description: string members: TeamMember[] projects: string[] } export default function EquiposPage() { const router = useRouter() const [isLoading, setIsLoading] = useState(true) const [teams, setTeams] = useState([]) const [showNewTeamDialog, setShowNewTeamDialog] = useState(false) const [newTeam, setNewTeam] = useState({ name: "", description: "", }) const [availableMembers, setAvailableMembers] = useState([]) const [searchTerm, setSearchTerm] = useState("") const [showAddMemberDialog, setShowAddMemberDialog] = useState(false) const [selectedTeam, setSelectedTeam] = useState(null) const [selectedMember, setSelectedMember] = useState("") useEffect(() => { // Verificar si el usuario está autenticado const isLoggedIn = localStorage.getItem("isLoggedIn") if (!isLoggedIn) { router.push("/login") return } // Cargar datos de ejemplo const loadDemoData = async () => { await new Promise((resolve) => setTimeout(resolve, 1000)) // Miembros de ejemplo const members: TeamMember[] = [ { id: 1, name: "Ana García", email: "ana.garcia@ejemplo.com", role: "Diseñador UX/UI", projects: ["Rediseño de Interfaz", "Desarrollo de Aplicación Web"], }, { id: 2, name: "Carlos Rodríguez", email: "carlos.rodriguez@ejemplo.com", role: "Desarrollador Frontend", projects: ["Desarrollo de Aplicación Web", "Implementación de API"], }, { id: 3, name: "María López", email: "maria.lopez@ejemplo.com", role: "Desarrollador Backend", projects: ["Migración de Base de Datos", "Implementación de API"], }, { id: 4, name: "Juan Pérez", email: "juan.perez@ejemplo.com", role: "Arquitecto de Software", projects: ["Implementación de API", "Migración de Base de Datos"], }, { id: 5, name: "Laura Martínez", email: "laura.martinez@ejemplo.com", role: "QA Tester", projects: ["Rediseño de Interfaz", "Desarrollo de Aplicación Web"], }, { id: 6, name: "Pedro Sánchez", email: "pedro.sanchez@ejemplo.com", role: "DevOps", projects: ["Migración de Base de Datos"], }, ] setAvailableMembers(members) // Equipos de ejemplo setTeams([ { id: 1, name: "Equipo de Desarrollo Frontend", description: "Equipo encargado del desarrollo de interfaces y experiencia de usuario", members: [members[0], members[1], members[4]], projects: ["Desarrollo de Aplicación Web", "Rediseño de Interfaz"], }, { id: 2, name: "Equipo de Desarrollo Backend", description: "Equipo encargado del desarrollo de APIs y servicios", members: [members[2], members[3]], projects: ["Implementación de API", "Migración de Base de Datos"], }, { id: 3, name: "Equipo de Infraestructura", description: "Equipo encargado de la infraestructura y despliegue", members: [members[5]], projects: ["Migración de Base de Datos"], }, ]) setIsLoading(false) } loadDemoData() }, [router]) const handleCreateTeam = () => { // Validar campos if (!newTeam.name) { alert("Por favor ingresa un nombre para el equipo") return } // Crear nuevo equipo const newId = Math.max(...teams.map((t) => t.id), 0) + 1 const createdTeam: Team = { id: newId, name: newTeam.name, description: newTeam.description, members: [], projects: [], } setTeams([...teams, createdTeam]) setShowNewTeamDialog(false) // Resetear formulario setNewTeam({ name: "", description: "", }) } const handleDeleteTeam = (id: number) => { if (confirm("¿Estás seguro de que deseas eliminar este equipo?")) { setTeams(teams.filter((t) => t.id !== id)) } } const handleAddMember = () => { if (!selectedTeam || !selectedMember) return const memberToAdd = availableMembers.find((m) => m.name === selectedMember) if (!memberToAdd) return // Verificar si el miembro ya está en el equipo if (selectedTeam.members.some((m) => m.id === memberToAdd.id)) { alert("Este miembro ya está en el equipo") return } // Añadir miembro al equipo const updatedTeams = teams.map((team) => { if (team.id === selectedTeam.id) { return { ...team, members: [...team.members, memberToAdd], } } return team }) setTeams(updatedTeams) setShowAddMemberDialog(false) setSelectedMember("") } const handleRemoveMember = (teamId: number, memberId: number) => { if (confirm("¿Estás seguro de que deseas eliminar este miembro del equipo?")) { const updatedTeams = teams.map((team) => { if (team.id === teamId) { return { ...team, members: team.members.filter((m) => m.id !== memberId), } } return team }) setTeams(updatedTeams) } } const filteredTeams = searchTerm ? teams.filter( (team) => team.name.toLowerCase().includes(searchTerm.toLowerCase()) || team.description.toLowerCase().includes(searchTerm.toLowerCase()) || team.members.some((member) => member.name.toLowerCase().includes(searchTerm.toLowerCase())), ) : teams if (isLoading) { return (

Cargando equipos...

) } return (

Equipos

setSearchTerm(e.target.value)} />

{filteredTeams.map((team) => ( {team.name} {team.description}

Miembros ({team.members.length})

{team.members.map((member) => (

{member.name.charAt(0)} {member.name.split(" ")[1]?.charAt(0)}

{member.name}

{member.role}

))}

Proyectos

{team.projects.map((project) => ( {project} ))} {team.projects.length === 0 && (

No hay proyectos asignados

)}

))}

) } [V0_FILE]typescriptreact:file="app/calendario/page.tsx" "use client" import { useEffect, useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { CalendarIcon, ChevronLeft, ChevronRight, Clock, Plus, Trash2 } from "lucide-react" import DashboardLayout from "@/components/dashboard-layout" interface Event { id: number title: string description: string date: string time: string project: string type: "Reunión" | "Entrega" | "Hito" | "Otro" } export default function CalendarioPage() { const router = useRouter() const [isLoading, setIsLoading] = useState(true) const [events, setEvents] = useState([]) const [showNewEventDialog, setShowNewEventDialog] = useState(false) const [newEvent, setNewEvent] = useState({ title: "", description: "", date: "", time: "", project: "", type: "Reunión", }) const [projects, setProjects] = useState<{ id: number; name: string }[]>([]) const [currentMonth, setCurrentMonth] = useState(new Date()) const [selectedDate, setSelectedDate] = useState(null) useEffect(() => { // Verificar si el usuario está autenticado const isLoggedIn = localStorage.getItem("isLoggedIn") if (!isLoggedIn) { router.push("/login") return } // Cargar datos de ejemplo const loadDemoData = async () => { await new Promise((resolve) => setTimeout(resolve, 1000)) // Proyectos de ejemplo setProjects([ { id: 1, name: "Desarrollo de Aplicación Web" }, { id: 2, name: "Migración de Base de Datos" }, { id: 3, name: "Rediseño de Interfaz" }, { id: 4, name: "Implementación de API" }, ]) // Eventos de ejemplo setEvents([ { id: 1, title: "Reunión de planificación", description: "Planificación del sprint para el desarrollo de la aplicación web", date: "2025-03-15", time: "10:00", project: "Desarrollo de Aplicación Web", type: "Reunión", }, { id: 2, title: "Entrega de mockups", description: "Entrega de los mockups finales para el rediseño de la interfaz", date: "2025-03-10", time: "15:00", project: "Rediseño de Interfaz", type: "Entrega", }, { id: 3, title: "Hito: Migración completada", description: "Finalización de la migración de la base de datos", date: "2025-03-20", time: "09:00", project: "Migración de Base de Datos", type: "Hito", }, { id: 4, title: "Revisión de código", description: "Revisión del código de la API implementada", date: "2025-03-18", time: "14:30", project: "Implementación de API", type: "Reunión", }, ]) setIsLoading(false) } loadDemoData() }, [router]) const handleCreateEvent = () => { // Validar campos if (!newEvent.title || !newEvent.date || !newEvent.time || !newEvent.project) { alert("Por favor completa todos los campos obligatorios") return } // Crear nuevo evento const newId = Math.max(...events.map((e) => e.id), 0) + 1 const createdEvent: Event = { id: newId, title: newEvent.title, description: newEvent.description, date: newEvent.date, time: newEvent.time, project: newEvent.project, type: newEvent.type as "Reunión" | "Entrega" | "Hito" | "Otro", } setEvents([...events, createdEvent]) setShowNewEventDialog(false) // Resetear formulario setNewEvent({ title: "", description: "", date: "", time: "", project: "", type: "Reunión", }) } const handleDeleteEvent = (id: number) => { if (confirm("¿Estás seguro de que deseas eliminar este evento?")) { setEvents(events.filter((e) => e.id !== id)) } } const getDaysInMonth = (year: number, month: number) => { return new Date(year, month + 1, 0).getDate() } const getFirstDayOfMonth = (year: number, month: number) => { return new Date(year, month, 1).getDay() } const renderCalendar = () => { const year = currentMonth.getFullYear() const month = currentMonth.getMonth() const daysInMonth = getDaysInMonth(year, month) const firstDayOfMonth = getFirstDayOfMonth(year, month) const days = [] // Añadir días vacíos para alinear el primer día del mes for (let i = 0; i < firstDayOfMonth; i++) { days.push(

) } // Añadir los días del mes for (let day = 1; day <= daysInMonth; day++) { const date = new Date(year, month, day) const dateString = date.toISOString().split("T")[0] const dayEvents = events.filter((event) => event.date === dateString) days.push(

setSelectedDate(date)} >

{day}

{dayEvents.map((event) => (

{event.time} - {event.title}

))}

, ) } return days } const prevMonth = () => { setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1)) setSelectedDate(null) } const nextMonth = () => { setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1)) setSelectedDate(null) } const monthNames = [ "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre", ] if (isLoading) { return (

Cargando calendario...

) } return (

Calendario

{monthNames[currentMonth.getMonth()]} {currentMonth.getFullYear()}

{["Dom", "Lun", "Mar", "Mié", "Jue", "Vie", "Sáb"].map((day) => (

{day}

))} {renderCalendar()}

Eventos {selectedDate ? `Eventos para el ${selectedDate.toLocaleDateString()}` : "Próximos eventos"}

{(selectedDate ? events.filter((event) => event.date === selectedDate.toISOString().split("T")[0]) : events.sort((a, b) => a.date.localeCompare(b.date)).slice(0, 5) ).map((event) => (

{event.title}

{event.description}

{new Date(event.date).toLocaleDateString()}

{event.time}

{event.project} {event.type}

))} {(selectedDate ? events.filter((event) => event.date === selectedDate.toISOString().split("T")[0]).length === 0 : events.length === 0) && (

No hay eventos programados

)}

) } [V0_FILE]typescriptreact:file="app/configuracion/page.tsx" "use client" import type React from "react" import { useEffect, useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Switch } from "@/components/ui/switch" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Separator } from "@/components/ui/separator" import { Bell, Key, Lock, Save } from "lucide-react" import DashboardLayout from "@/components/dashboard-layout" export default function ConfiguracionPage() { const router = useRouter() const [isLoading, setIsLoading] = useState(true) const [user, setUser] = useState<{ name: string email: string role: string avatar?: string } | null>(null) const [formData, setFormData] = useState({ name: "", email: "", role: "", currentPassword: "", newPassword: "", confirmPassword: "", language: "es", theme: "light", emailNotifications: true, pushNotifications: false, twoFactorAuth: false, }) const [isSaving, setIsSaving] = useState(false) const [successMessage, setSuccessMessage] = useState("") useEffect(() => { // Verificar si el usuario está autenticado const isLoggedIn = localStorage.getItem("isLoggedIn") if (!isLoggedIn) { router.push("/login") return } // Cargar datos de usuario const loadUserData = async () => { await new Promise((resolve) => setTimeout(resolve, 1000)) const userStr = localStorage.getItem("user") let userData = null if (userStr) { try { userData = JSON.parse(userStr) userData.role = userData.role === "admin" ? "Administrador" : "Usuario" } catch (e) { console.error("Error parsing user data", e) } } setUser(userData) if (userData) { setFormData((prev) => ({ ...prev, name: userData.name, email: userData.email, role: userData.role, })) } setIsLoading(false) } loadUserData() }, [router]) const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value, })) } const handleSwitchChange = (name: string, checked: boolean) => { setFormData((prev) => ({ ...prev, [name]: checked, })) } const handleSelectChange = (name: string, value: string) => { setFormData((prev) => ({ ...prev, [name]: value, })) } const handleSaveProfile = async () => { setIsSaving(true) setSuccessMessage("") try { // Simulación de guardado await new Promise((resolve) => setTimeout(resolve, 1500)) // Actualizar datos de usuario en localStorage if (user) { const updatedUser = { ...user, name: formData.name, email: formData.email, } localStorage.setItem("user", JSON.stringify(updatedUser)) setUser(updatedUser) } setSuccessMessage("Perfil actualizado correctamente") } catch (err) { console.error("Error al guardar perfil", err) } finally { setIsSaving(false) } } const handleSavePassword = async () => { setIsSaving(true) setSuccessMessage("") // Validar contraseñas if (formData.newPassword !== formData.confirmPassword) { alert("Las contraseñas no coinciden") setIsSaving(false) return } try { // Simulación de guardado await new Promise((resolve) => setTimeout(resolve, 1500)) setSuccessMessage("Contraseña actualizada correctamente") // Resetear campos de contraseña setFormData((prev) => ({ ...prev, currentPassword: "", newPassword: "", confirmPassword: "", })) } catch (err) { console.error("Error al cambiar contraseña", err) } finally { setIsSaving(false) } } const handleSavePreferences = async () => { setIsSaving(true) setSuccessMessage("") try { // Simulación de guardado await new Promise((resolve) => setTimeout(resolve, 1500)) setSuccessMessage("Preferencias guardadas correctamente") } catch (err) { console.error("Error al guardar preferencias", err) } finally { setIsSaving(false) } } if (isLoading) { return (

Cargando configuración...

) } return (

Configuración

Perfil Seguridad Preferencias Información de Perfil Actualiza tu información personal y de contacto

{user?.name.charAt(0)} {user?.name.split(" ")[1]?.charAt(0)}

Nombre completo

Correo electrónico

Rol

{successMessage &&

{successMessage}

}

Cambiar Contraseña Actualiza tu contraseña para mantener tu cuenta segura

Contraseña actual

Nueva contraseña

Confirmar nueva contraseña

{successMessage &&

{successMessage}

}

Autenticación de Dos Factores Añade una capa adicional de seguridad a tu cuenta

Autenticación de dos factores

Protege tu cuenta con una verificación adicional

handleSwitchChange("twoFactorAuth", checked)} />

{formData.twoFactorAuth && (

Configuración de 2FA

Escanea el código QR con tu aplicación de autenticación o ingresa el código manualmente.

Código QR

Código de verificación

)} Preferencias Generales Personaliza tu experiencia en la plataforma

Apariencia

Tema

Idioma

Idioma de la plataforma

Notificaciones

Notificaciones por correo

Recibe actualizaciones de proyectos y tareas por correo electrónico

handleSwitchChange("emailNotifications", checked)} />

Notificaciones push

Recibe notificaciones en tiempo real en tu navegador

handleSwitchChange("pushNotifications", checked)} />

{successMessage &&

{successMessage}

}

) } [V0_FILE]typescriptreact:file="app/recursos/page.tsx" "use client" import { useEffect, useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import { Archive, Box, Clock, Edit, Laptop, Plus, Trash2, Users } from "lucide-react" import DashboardLayout from "@/components/dashboard-layout" interface Resource { id: number name: string type: "Hardware" | "Software" | "Material" | "Humano" status: "Disponible" | "En uso" | "En mantenimiento" | "No disponible" assignedTo?: string project?: string quantity: number available: number cost: number lastUsed?: string description: string } export default function RecursosPage() { const router = useRouter() const [isLoading, setIsLoading] = useState(true) const [resources, setResources] = useState([]) const [showNewResourceDialog, setShowNewResourceDialog] = useState(false) const [newResource, setNewResource] = useState({ name: "", type: "Hardware", status: "Disponible", quantity: 1, cost: 0, description: "", }) useEffect(() => { // Verificar si el usuario está autenticado const isLoggedIn = localStorage.getItem("isLoggedIn") if (!isLoggedIn) { router.push("/login") return } // Cargar datos de ejemplo const loadDemoData = async () => { await new Promise((resolve) => setTimeout(resolve, 1000)) setResources([ { id: 1, name: "Laptop Dell XPS", type: "Hardware", status: "En uso", assignedTo: "Carlos Rodríguez", project: "Desarrollo de Aplicación Web", quantity: 5, available: 2, cost: 1200, lastUsed: "2025-03-01", description: "Laptops de alto rendimiento para desarrollo", }, { id: 2, name: "Licencia Adobe Creative Cloud", type: "Software", status: "Disponible", quantity: 3, available: 1, cost: 600, lastUsed: "2025-02-28", description: "Licencias para diseño gráfico", }, { id: 3, name: "Sala de Reuniones A", type: "Material", status: "En uso", assignedTo: "Equipo de Frontend", project: "Rediseño de Interfaz", quantity: 1, available: 0, cost: 0, lastUsed: "2025-03-02", description: "Sala de reuniones con capacidad para 10 personas", }, { id: 4, name: "Desarrollador Backend", type: "Humano", status: "En uso", assignedTo: "Migración de Base de Datos", quantity: 2, available: 0, cost: 5000, lastUsed: "2025-03-02", description: "Desarrolladores especializados en backend", }, { id: 5, name: "Servidor de Desarrollo", type: "Hardware", status: "En mantenimiento", quantity: 1, available: 0, cost: 3000, lastUsed: "2025-02-25", description: "Servidor para ambiente de desarrollo", }, ]) setIsLoading(false) } loadDemoData() }, [router]) const handleCreateResource = () => { // Validar campos if (!newResource.name || !newResource.type || newResource.quantity < 1) { alert("Por favor completa todos los campos obligatorios") return } // Crear nuevo recurso const newId = Math.max(...resources.map((r) => r.id), 0) + 1 const createdResource: Resource = { id: newId, name: newResource.name, type: newResource.type as "Hardware" | "Software" | "Material" | "Humano", status: newResource.status as "Disponible" | "En uso" | "En mantenimiento" | "No disponible", quantity: newResource.quantity, available: newResource.quantity, cost: newResource.cost, description: newResource.description, } setResources([...resources, createdResource]) setShowNewResourceDialog(false) // Resetear formulario setNewResource({ name: "", type: "Hardware", status: "Disponible", quantity: 1, cost: 0, description: "", }) } const handleDeleteResource = (id: number) => { if (confirm("¿Estás seguro de que deseas eliminar este recurso?")) { setResources(resources.filter((r) => r.id !== id)) } } const getStatusColor = (status: string) => { switch (status) { case "Disponible": return "bg-green-100 text-green-800" case "En uso": return "bg-blue-100 text-blue-800" case "En mantenimiento": return "bg-amber-100 text-amber-800" case "No disponible": return "bg-red-100 text-red-800" default: return "bg-gray-100 text-gray-800" } } const getTypeIcon = (type: string) => { switch (type) { case "Hardware": return case "Software": return case "Material": return case "Humano": return default: return } } if (isLoading) { return (

Cargando recursos...

) } return (

Recursos

Todos Hardware Software Material Humano {["all", "hardware", "software", "material", "human"].map((tab) => (

{resources .filter( (resource) => tab === "all" || (tab === "hardware" && resource.type === "Hardware") || (tab === "software" && resource.type === "Software") || (tab === "material" && resource.type === "Material") || (tab === "human" && resource.type === "Humano"), ) .map((resource) => (

{getTypeIcon(resource.type)} {resource.type}

{resource.status}

{resource.name} {resource.description}

Disponibilidad {resource.available}/{resource.quantity} unidades

Costo unitario

${resource.cost.toLocaleString()}

{resource.lastUsed && (

Último uso

{new Date(resource.lastUsed).toLocaleDateString()}

)}

{(resource.assignedTo || resource.project) && (

{resource.assignedTo && (

Asignado a: {resource.assignedTo}

)} {resource.project && (

Proyecto: {resource.project}

)}

))}

{resources.filter( (resource) => tab === "all" || (tab === "hardware" && resource.type === "Hardware") || (tab === "software" && resource.type === "Software") || (tab === "material" && resource.type === "Material") || (tab === "human" && resource.type === "Humano"), ).length === 0 && (

No hay recursos disponibles en esta categoría

)} ))}

) } [V0_FILE]typescriptreact:file="app/reportes/page.tsx" isFixed="true" isQuickEdit="true" "use client" import { useEffect, useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Progress } from "@/components/ui/progress" import { BarChart3, Download, FileText, PieChart, TrendingUp } from "lucide-react" import DashboardLayout from "@/components/dashboard-layout" interface ProjectData { id: number name: string progress: number tasks: number completedTasks: number startDate: string dueDate: string status: "En progreso" | "Completado" | "Retrasado" | "Pendiente" team: string[] hoursLogged: number budget: number spent: number } interface TeamMemberData { id: number name: string role: string tasksAssigned: number tasksCompleted: number hoursLogged: number projects: string[] } export default function ReportesPage() { const router = useRouter() const [isLoading, setIsLoading] = useState(true) const [projects, setProjects] = useState([]) const [teamMembers, setTeamMembers] = useState([]) const [selectedProject, setSelectedProject] = useState("") const [selectedPeriod, setSelectedPeriod] = useState("month") const [error, setError] = useState(null) useEffect(() => { const isLoggedIn = localStorage.getItem("isLoggedIn") if (!isLoggedIn) { router.push("/login") return } const loadDemoData = async () => { try { await new Promise((resolve) => setTimeout(resolve, 1000)) const projectsData = [ { id: 1, name: "Desarrollo de Aplicación Web", progress: 75, tasks: 20, completedTasks: 15, startDate: "2025-01-15", dueDate: "2025-04-15", status: "En progreso", team: ["Carlos Rodríguez", "Ana García", "Juan Pérez"], hoursLogged: 320, budget: 15000, spent: 11250, }, { id: 2, name: "Migración de Base de Datos", progress: 30, tasks: 12, completedTasks: 4, startDate: "2025-02-10", dueDate: "2025-05-20", status: "En progreso", team: ["María López", "Pedro Sánchez"], hoursLogged: 180, budget: 8000, spent: 2400, }, { id: 3, name: "Rediseño de Interfaz", progress: 100, tasks: 8, completedTasks: 8, startDate: "2025-01-05", dueDate: "2025-03-10", status: "Completado", team: ["Ana García", "Laura Martínez"], hoursLogged: 160, budget: 5000, spent: 5000, }, { id: 4, name: "Implementación de API", progress: 10, tasks: 15, completedTasks: 2, startDate: "2025-03-01", dueDate: "2025-06-30", status: "Pendiente", team: ["Juan Pérez", "Carlos Rodríguez"], hoursLogged: 40, budget: 12000, spent: 1200, }, ] setProjects(projectsData) setSelectedProject(projectsData[0]?.name || "") setTeamMembers([ { id: 1, name: "Ana García", role: "Diseñador UX/UI", tasksAssigned: 10, tasksCompleted: 8, hoursLogged: 120, projects: ["Rediseño de Interfaz", "Desarrollo de Aplicación Web"], }, { id: 2, name: "Carlos Rodríguez", role: "Desarrollador Frontend", tasksAssigned: 15, tasksCompleted: 12, hoursLogged: 180, projects: ["Desarrollo de Aplicación Web", "Implementación de API"], }, { id: 3, name: "María López", role: "Desarrollador Backend", tasksAssigned: 12, tasksCompleted: 4, hoursLogged: 160, projects: ["Migración de Base de Datos", "Implementación de API"], }, { id: 4, name: "Juan Pérez", role: "Arquitecto de Software", tasksAssigned: 8, tasksCompleted: 5, hoursLogged: 100, projects: ["Implementación de API", "Desarrollo de Aplicación Web"], }, { id: 5, name: "Laura Martínez", role: "QA Tester", tasksAssigned: 20, tasksCompleted: 18, hoursLogged: 140, projects: ["Rediseño de Interfaz", "Desarrollo de Aplicación Web"], }, ]) setIsLoading(false) } catch (err) { console.error("Error loading data:", err) setError("Error al cargar los datos. Por favor, intenta de nuevo.") setIsLoading(false) } } loadDemoData() }, [router]) // Calcular estadísticas generales const totalProjects = projects.length const completedProjects = projects.filter((p) => p.status === "Completado").length const totalTasks = projects.reduce((acc, project) => acc + project.tasks, 0) const completedTasks = projects.reduce((acc, project) => acc + project.completedTasks, 0) const totalHours = projects.reduce((acc, project) => acc + project.hoursLogged, 0) const totalBudget = projects.reduce((acc, project) => acc + project.budget, 0) const totalSpent = projects.reduce((acc, project) => acc + project.spent, 0) // Obtener datos del proyecto seleccionado const selectedProjectData = projects.find((p) => p.name === selectedProject) if (error) { return (

{error}

) } if (isLoading) { return (

Cargando reportes...

) } return (

Reportes

Resumen Proyectos Equipo

Progreso General

{Math.round((completedTasks / totalTasks) * 100)}%

{completedTasks} de {totalTasks} tareas completadas

Proyectos

{totalProjects}

{completedProjects} completados, {totalProjects - completedProjects} en curso

Horas Registradas

{totalHours}

Promedio: {Math.round(totalHours / teamMembers.length)} horas por persona

Presupuesto

${totalSpent.toLocaleString()}

{Math.round((totalSpent / totalBudget) * 100)}% del presupuesto total ($ {totalBudget.toLocaleString()})

Estado de Proyectos Distribución de proyectos por estado

{["Completado", "En progreso", "Pendiente", "Retrasado"].map((status) => { const count = projects.filter((p) => p.status === status).length const percentage = (count / totalProjects) * 100 return (

{status} {count} proyectos ({Math.round(percentage)}%)

) })}

Rendimiento del Equipo Tareas completadas por miembro del equipo

{teamMembers.map((member) => { const completionRate = (member.tasksCompleted / member.tasksAssigned) * 100 return (

{member.name} {member.tasksCompleted}/{member.tasksAssigned} tareas ({Math.round(completionRate)}%)

) })}

Reporte de Proyectos Análisis detallado por proyecto

{selectedProjectData && (

Progreso

{selectedProjectData.progress}%

Tareas

{selectedProjectData.completedTasks}/{selectedProjectData.tasks}

Presupuesto

${selectedProjectData.spent.toLocaleString()}/${selectedProjectData.budget.toLocaleString()}

Cronograma

Inicio: {new Date(selectedProjectData.startDate).toLocaleDateString()} Fin: {new Date(selectedProjectData.dueDate).toLocaleDateString()}

Equipo ({selectedProjectData.team.length} miembros)

{selectedProjectData.team.map((memberName, index) => { const memberData = teamMembers.find((m) => m.name === memberName) if (!memberData) return null return (

{memberData.name}

{memberData.role}

{memberData.tasksCompleted}/{memberData.tasksAssigned} tareas

{memberData.hoursLogged} horas

) })}

)} Reporte de Equipo Análisis de rendimiento por miembro del equipo

{teamMembers.map((member) => (

{member.name}

{member.role}

{member.hoursLogged} horas registradas

{member.projects.length} proyectos asignados

Tareas Completadas

{Math.round((member.tasksCompleted / member.tasksAssigned) * 100)}% {member.tasksCompleted}/{member.tasksAssigned} tareas

Proyectos Asignados

{member.projects.map((project, index) => (

{project}

))}

) }