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

ProjectPro

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.

Dashboard de Proyectos

Características Principales

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

Gestión de Tareas Crea, asigna y monitorea tareas. Establece prioridades y fechas límite para mantener tu proyecto en marcha. Colaboración en Equipo Facilita la comunicación y colaboración entre los miembros del equipo con herramientas integradas. Planificación Crea cronogramas detallados, establece hitos y visualiza la línea de tiempo del proyecto. Métricas y Reportes Analiza el rendimiento del proyecto con métricas de funcionalidad y usabilidad en tiempo real. Seguimiento de Tiempo Registra el tiempo dedicado a cada tarea y proyecto para una mejor gestión de recursos. Flujos de Trabajo Define procesos personalizados basados en componentes y metodologías ágiles como RUP.

) } [V0_FILE]typescriptreact:file="app/login/page.tsx" isMerged="true" import Link from "next/link" import { BarChart3 } from "lucide-react" 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" export default function LoginPage() { return (

ProjectPro Iniciar Sesión Ingresa tus credenciales para acceder a tu cuenta

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

) } [V0_FILE]typescriptreact:file="app/register/page.tsx" isMerged="true" import Link from "next/link" import { BarChart3 } from "lucide-react" 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" export default function RegisterPage() { return (

ProjectPro Crear una cuenta Ingresa tus datos para registrarte en la plataforma

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

) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import Link from "next/link" import { BarChart3, Calendar, CheckSquare, Clock, Plus, Users } from "lucide-react" import { Button } from "@/components/ui/button" 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 { DashboardNav } from "@/components/dashboard-nav" import { UserNav } from "@/components/user-nav" import { ProjectCard } from "@/components/project-card" import { RecentActivity } from "@/components/recent-activity" export default function DashboardPage() { return (

ProjectPro

Dashboard

Resumen Analíticas Reportes

Proyectos Activos

+2 desde el mes pasado

Tareas Pendientes

-4 desde la semana pasada

Miembros del Equipo

+4 desde el mes pasado

Próximos Eventos

+2 desde la semana pasada

Proyectos Recientes Tienes 12 proyectos activos actualmente Actividad Reciente Últimas actualizaciones en tus proyectos

Rendimiento del Proyecto Análisis de métricas de funcionalidad y usabilidad

Rediseño de Sitio Web

75%

Implementación de CRM

45%

Campaña de Marketing Q2

20%

Desarrollo de App Móvil

60%

Reportes de Proyectos Informes detallados sobre el estado de los proyectos

Informe de Progreso Semanal

Resumen del progreso de todos los proyectos activos durante la última semana

Informe de Asignación de Recursos

Análisis detallado de la asignación de recursos en todos los proyectos

Informe de Rendimiento del Equipo

Evaluación del rendimiento de los miembros del equipo en los proyectos

) } [V0_FILE]typescriptreact:file="app/projects/page.tsx" isEdit="true" isMerged="true" "use client" import Link from "next/link" import { Filter, Plus, Search, Edit, Trash } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { DashboardNav } from "@/components/dashboard-nav" import { useData } from "@/contexts/DataContext" export default function ProjectsPage() { const { projects, deleteProject } = useData() return (

{/* Header y navegación... */}

Proyectos

Nombre Estado Fecha de Inicio Fecha de Finalización Acciones {projects.map((project) => ( {project.title} {project.status} {new Date(project.startDate).toLocaleDateString()} {new Date(project.endDate).toLocaleDateString()}

))}

) } [V0_FILE]typescriptreact:file="app/projects/new/page.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import Link from "next/link" import { Save, X } from "lucide-react" 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 { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { DatePicker } from "@/components/date-picker" import { DashboardNav } from "@/components/dashboard-nav" import { useData } from "@/contexts/DataContext" export default function NewProjectPage() { const router = useRouter() const { addProject } = useData() const [projectData, setProjectData] = useState({ title: "", description: "", startDate: "", endDate: "", status: "", }) const handleInputChange = (e: React.ChangeEvent) => { const { name, value } = e.target setProjectData((prev) => ({ ...prev, [name]: value })) } const handleSelectChange = (name: string) => (value: string) => { setProjectData((prev) => ({ ...prev, [name]: value })) } const handleDateChange = (name: string) => (date: Date | undefined) => { if (date) { setProjectData((prev) => ({ ...prev, [name]: date.toISOString() })) } } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() addProject(projectData) router.push("/projects") } return (

{/* Header y navegación... */}

Nuevo Proyecto

Información del Proyecto Ingresa los detalles básicos del nuevo proyecto

Nombre del Proyecto

Descripción

</div>
                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                  <div className="grid gap-2">
                    <Label htmlFor="startDate">Fecha de Inicio</Label>
                    <DatePicker onSelect={handleDateChange("startDate")} />
                  </div>
                  <div className="grid gap-2">
                    <Label htmlFor="endDate">Fecha de Finalización</Label>
                    <DatePicker onSelect={handleDateChange("endDate")} />
                  </div>
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="status">Estado</Label>
                  <Select onValueChange={handleSelectChange("status")}>
                    <SelectTrigger>
                      <SelectValue placeholder="Selecciona el estado" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="planning">Planificación</SelectItem>
                      <SelectItem value="in-progress">En Progreso</SelectItem>
                      <SelectItem value="completed">Completado</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </CardContent>
              <CardFooter className="flex justify-end">
                <Button type="submit">
                  <Save className="mr-2 h-4 w-4" />
                  Guardar Proyecto
                </Button>
              </CardFooter>
            </form>
          </Card>
        </main>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/tasks/page.tsx" isEdit="true" isMerged="true"
"use client"

import Link from "next/link"
import { Filter, Plus, Search, Edit, Trash } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { DashboardNav } from "@/components/dashboard-nav"
import { useData } from "@/contexts/DataContext"

export default function TasksPage() {
  const { tasks, deleteTask } = useData()

return (
    <div className="flex min-h-screen flex-col">
      {/* Header y navegación... */}
      <div className="grid flex-1 md:grid-cols-[220px_1fr]">
        <aside className="hidden border-r bg-muted/40 md:block">
          <DashboardNav />
        </aside>
        <main className="flex flex-col gap-6 p-6">
          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <h1 className="text-3xl font-bold tracking-tight">Tareas</h1>
            <div className="flex items-center gap-2">
              <Link href="/tasks/new">
                <Button>
                  <Plus className="mr-2 h-4 w-4" />
                  Nueva Tarea
                </Button>
              </Link>
            </div>
          </div>

<div className="flex flex-col gap-4 sm:flex-row sm:items-center">
            <div className="relative w-full sm:w-80">
              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
              <Input placeholder="Buscar tareas..." className="pl-8" />
            </div>
            <Button variant="outline" size="sm" className="h-9">
              <Filter className="mr-2 h-4 w-4" />
              Filtrar
            </Button>
          </div>

<Table>
            <TableHeader>
              <TableRow>
                <TableHead>Título</TableHead>
                <TableHead>Proyecto</TableHead>
                <TableHead>Asignado a</TableHead>
                <TableHead>Estado</TableHead>
                <TableHead>Fecha de Vencimiento</TableHead>
                <TableHead>Acciones</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {tasks.map((task) => (
                <TableRow key={task.id}>
                  <TableCell>{task.title}</TableCell>
                  <TableCell>{task.projectId}</TableCell>
                  <TableCell>{task.assignedTo}</TableCell>
                  <TableCell>{task.status}</TableCell>
                  <TableCell>{new Date(task.dueDate).toLocaleDateString()}</TableCell>
                  <TableCell>
                    <div className="flex items-center gap-2">
                      <Link href={`/tasks/edit/${task.id}`}>
                        <Button variant="outline" size="sm">
                          <Edit className="h-4 w-4" />
                        </Button>
                      </Link>
                      <Button variant="outline" size="sm" onClick={() => deleteTask(task.id)}>
                        <Trash className="h-4 w-4" />
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </main>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/dashboard-nav.tsx" isEdit="true" isMerged="true"
import type React from "react"
import Link from "next/link"
import { BarChart3, Calendar, CheckSquare, Clock, FileText, Home, Settings, Users } from "lucide-react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"

interface NavProps extends React.HTMLAttributes<HTMLDivElement> {}

export function DashboardNav({ className, ...props }: NavProps) {
  return (
    <div className={cn("flex flex-col gap-2 p-4", className)} {...props}>
      <Link href="/dashboard">
        <Button variant="ghost" className="w-full justify-start">
          <Home className="mr-2 h-4 w-4" />
          Dashboard
        </Button>
      </Link>
      <Link href="/projects">
        <Button variant="ghost" className="w-full justify-start">
          <FileText className="mr-2 h-4 w-4" />
          Proyectos
        </Button>
      </Link>
      <Link href="/tasks">
        <Button variant="ghost" className="w-full justify-start">
          <CheckSquare className="mr-2 h-4 w-4" />
          Tareas
        </Button>
      </Link>
      <Link href="/team">
        <Button variant="ghost" className="w-full justify-start">
          <Users className="mr-2 h-4 w-4" />
          Equipo
        </Button>
      </Link>
      <Link href="/calendar">
        <Button variant="ghost" className="w-full justify-start">
          <Calendar className="mr-2 h-4 w-4" />
          Calendario
        </Button>
      </Link>
      <Link href="/resources">
        <Button variant="ghost" className="w-full justify-start">
          <Clock className="mr-2 h-4 w-4" />
          Recursos
        </Button>
      </Link>
      <Link href="/analytics">
        <Button variant="ghost" className="w-full justify-start">
          <BarChart3 className="mr-2 h-4 w-4" />
          Analíticas
        </Button>
      </Link>
      <Link href="/settings">
        <Button variant="ghost" className="w-full justify-start">
          <Settings className="mr-2 h-4 w-4" />
          Configuración
        </Button>
      </Link>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/user-nav.tsx" isMerged="true"
import { CreditCard, LogOut, Settings, User } from "lucide-react"

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export function UserNav() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" className="relative h-8 w-8 rounded-full">
          <Avatar className="h-8 w-8">
            <AvatarImage src="/placeholder-user.jpg" alt="@user" />
            <AvatarFallback>JD</AvatarFallback>
          </Avatar>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56" align="end" forceMount>
        <DropdownMenuLabel className="font-normal">
          <div className="flex flex-col space-y-1">
            <p className="text-sm font-medium leading-none">Juan Pérez</p>
            <p className="text-xs leading-none text-muted-foreground">juan.perez@ejemplo.com</p>
          </div>
        </DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuItem>
            <User className="mr-2 h-4 w-4" />
            <span>Perfil</span>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <CreditCard className="mr-2 h-4 w-4" />
            <span>Facturación</span>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <Settings className="mr-2 h-4 w-4" />
            <span>Configuración</span>
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
          <LogOut className="mr-2 h-4 w-4" />
          <span>Cerrar Sesión</span>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

[V0_FILE]typescriptreact:file="components/project-card.tsx" isMerged="true"
import { Clock, Users } from "lucide-react"

import { Progress } from "@/components/ui/progress"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"

interface ProjectCardProps {
  title: string
  description: string
  progress: number
  dueDate: string
  team: number
  tasks: number
  completedTasks: number
}

export function ProjectCard({ title, description, progress, dueDate, team, tasks, completedTasks }: ProjectCardProps) {
  return (
    <Card>
      <CardHeader className="pb-2">
        <div className="flex items-start justify-between">
          <CardTitle className="text-base">{title}</CardTitle>
          <Badge variant={progress < 30 ? "destructive" : progress < 70 ? "outline" : "default"}>{progress}%</Badge>
        </div>
      </CardHeader>
      <CardContent className="pb-2">
        <p className="text-sm text-muted-foreground">{description}</p>
        <div className="mt-4 space-y-2">
          <div className="flex items-center justify-between text-sm">
            <div>Progreso</div>
            <div className="font-medium">
              {completedTasks}/{tasks} tareas
            </div>
          </div>
          <Progress value={progress} />
        </div>
      </CardContent>
      <CardFooter className="flex items-center justify-between pt-2">
        <div className="flex items-center text-sm text-muted-foreground">
          <Clock className="mr-1 h-3 w-3" />
          {dueDate}
        </div>
        <div className="flex items-center text-sm text-muted-foreground">
          <Users className="mr-1 h-3 w-3" />
          {team}
        </div>
      </CardFooter>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="components/recent-activity.tsx" isMerged="true"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

export function RecentActivity() {
  return (
    <div className="space-y-8">
      <div className="flex items-start gap-4">
        <Avatar className="h-9 w-9">
          <AvatarImage src="/placeholder-user.jpg" alt="@user" />
          <AvatarFallback>AP</AvatarFallback>
        </Avatar>
        <div className="grid gap-1">
          <p className="text-sm font-medium leading-none">
            <span className="font-semibold">Ana Pérez</span> completó la tarea{" "}
            <span className="font-semibold">Diseñar wireframes</span>
          </p>
          <p className="text-sm text-muted-foreground">Hace 2 horas</p>
        </div>
      </div>
      <div className="flex items-start gap-4">
        <Avatar className="h-9 w-9">
          <AvatarImage src="/placeholder-user.jpg" alt="@user" />
          <AvatarFallback>CG</AvatarFallback>
        </Avatar>
        <div className="grid gap-1">
          <p className="text-sm font-medium leading-none">
            <span className="font-semibold">Carlos García</span> comentó en{" "}
            <span className="font-semibold">Implementación de API</span>
          </p>
          <p className="text-sm text-muted-foreground">Hace 4 horas</p>
        </div>
      </div>
      <div className="flex items-start gap-4">
        <Avatar className="h-9 w-9">
          <AvatarImage src="/placeholder-user.jpg" alt="@user" />
          <AvatarFallback>MR</AvatarFallback>
        </Avatar>
        <div className="grid gap-1">
          <p className="text-sm font-medium leading-none">
            <span className="font-semibold">María Rodríguez</span> creó un nuevo proyecto{" "}
            <span className="font-semibold">Campaña de Marketing Q2</span>
          </p>
          <p className="text-sm text-muted-foreground">Hace 6 horas</p>
        </div>
      </div>
      <div className="flex items-start gap-4">
        <Avatar className="h-9 w-9">
          <AvatarImage src="/placeholder-user.jpg" alt="@user" />
          <AvatarFallback>JP</AvatarFallback>
        </Avatar>
        <div className="grid gap-1">
          <p className="text-sm font-medium leading-none">
            <span className="font-semibold">Juan Pérez</span> asignó{" "}
            <span className="font-semibold">3 nuevas tareas</span> a <span className="font-semibold">Ana Pérez</span>
          </p>
          <p className="text-sm text-muted-foreground">Hace 8 horas</p>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/project-table.tsx" isMerged="true"
import { CheckCircle2, Clock, Edit, MoreHorizontal, Trash } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Progress } from "@/components/ui/progress"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"

export function ProjectTable() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Nombre</TableHead>
          <TableHead>Estado</TableHead>
          <TableHead>Progreso</TableHead>
          <TableHead>Fecha Límite</TableHead>
          <TableHead>Metodología</TableHead>
          <TableHead className="text-right">Acciones</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell className="font-medium">Rediseño de Sitio Web</TableCell>
          <TableCell>
            <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
              En Progreso
            </Badge>
          </TableCell>
          <TableCell>
            <div className="flex items-center gap-2">
              <Progress value={75} className="w-[80px]" />
              <span className="text-sm text-muted-foreground">75%</span>
            </div>
          </TableCell>
          <TableCell>
            <div className="flex items-center gap-1">
              <Clock className="h-3 w-3 text-muted-foreground" />
              <span className="text-sm">15 Mar 2025</span>
            </div>
          </TableCell>
          <TableCell>Ágil (RUP)</TableCell>
          <TableCell className="text-right">
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                  <MoreHorizontal className="h-4 w-4" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuLabel>Acciones</DropdownMenuLabel>
                <DropdownMenuItem>
                  <Edit className="mr-2 h-4 w-4" />
                  Editar
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <CheckCircle2 className="mr-2 h-4 w-4" />
                  Marcar como Completado
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem className="text-destructive">
                  <Trash className="mr-2 h-4 w-4" />
                  Eliminar
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </TableCell>
        </TableRow>
        <TableRow>
          <TableCell className="font-medium">Implementación de CRM</TableCell>
          <TableCell>
            <Badge variant="outline" className="bg-yellow-50 text-yellow-700 border-yellow-200">
              Planificación
            </Badge>
          </TableCell>
          <TableCell>
            <div className="flex items-center gap-2">
              <Progress value={45} className="w-[80px]" />
              <span className="text-sm text-muted-foreground">45%</span>
            </div>
          </TableCell>
          <TableCell>
            <div className="flex items-center gap-1">
              <Clock className="h-3 w-3 text-muted-foreground" />
              <span className="text-sm">30 Abr 2025</span>
            </div>
          </TableCell>
          <TableCell>Cascada</TableCell>
          <TableCell className="text-right">
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                  <MoreHorizontal className="h-4 w-4" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuLabel>Acciones</DropdownMenuLabel>
                <DropdownMenuItem>
                  <Edit className="mr-2 h-4 w-4" />
                  Editar
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <CheckCircle2 className="mr-2 h-4 w-4" />
                  Marcar como Completado
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem className="text-destructive">
                  <Trash className="mr-2 h-4 w-4" />
                  Eliminar
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </TableCell>
        </TableRow>
        <TableRow>
          <TableCell className="font-medium">Campaña de Marketing Q2</TableCell>
          <TableCell>
            <Badge variant="outline" className="bg-blue-50 text-blue-700 border-blue-200">
              Nuevo
            </Badge>
          </TableCell>
          <TableCell>
            <div className="flex items-center gap-2">
              <Progress value={20} className="w-[80px]" />
              <span className="text-sm text-muted-foreground">20%</span>
            </div>
          </TableCell>
          <TableCell>
            <div className="flex items-center gap-1">
              <Clock className="h-3 w-3 text-muted-foreground" />
              <span className="text-sm">10 May 2025</span>
            </div>
          </TableCell>
          <TableCell>Basado en Prototipo</TableCell>
          <TableCell className="text-right">
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                  <MoreHorizontal className="h-4 w-4" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuLabel>Acciones</DropdownMenuLabel>
                <DropdownMenuItem>
                  <Edit className="mr-2 h-4 w-4" />
                  Editar
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <CheckCircle2 className="mr-2 h-4 w-4" />
                  Marcar como Completado
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem className="text-destructive">
                  <Trash className="mr-2 h-4 w-4" />
                  Eliminar
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </TableCell>
        </TableRow>
      </TableBody>
    </Table>
  )
}

[V0_FILE]typescriptreact:file="components/project-grid.tsx" isMerged="true"
import { ProjectCard } from "@/components/project-card"

export function ProjectGrid() {
  return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
      <ProjectCard
        title="Rediseño de Sitio Web"
        description="Actualización completa del sitio web corporativo"
        progress={75}
        dueDate="15 Mar 2025"
        team={5}
        tasks={24}
        completedTasks={18}
      />
      <ProjectCard
        title="Implementación de CRM"
        description="Integración del nuevo sistema CRM con los sistemas existentes"
        progress={45}
        dueDate="30 Abr 2025"
        team={8}
        tasks={42}
        completedTasks={19}
      />
      <ProjectCard
        title="Campaña de Marketing Q2"
        description="Planificación y ejecución de la campaña del segundo trimestre"
        progress={20}
        dueDate="10 May 2025"
        team={4}
        tasks={18}
        completedTasks={4}
      />
      <ProjectCard
        title="Desarrollo de App Móvil"
        description="Creación de una aplicación móvil para clientes"
        progress={60}
        dueDate="22 Jun 2025"
        team={6}
        tasks={36}
        completedTasks={22}
      />
      <ProjectCard
        title="Migración de Base de Datos"
        description="Migración de la base de datos a una nueva infraestructura"
        progress={90}
        dueDate="5 Mar 2025"
        team={3}
        tasks={15}
        completedTasks={13}
      />
      <ProjectCard
        title="Optimización de SEO"
        description="Mejora del posicionamiento en motores de búsqueda"
        progress={30}
        dueDate="18 Abr 2025"
        team={2}
        tasks={20}
        completedTasks={6}
      />
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/task-list.tsx" isMerged="true"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Checkbox } from "@/components/ui/checkbox"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { MoreHorizontal, Clock } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export function TaskList() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead className="w-[50px]"></TableHead>
          <TableHead>Tarea</TableHead>
          <TableHead>Proyecto</TableHead>
          <TableHead>Prioridad</TableHead>
          <TableHead>Fecha Límite</TableHead>
          <TableHead>Asignado a</TableHead>
          <TableHead className="text-right">Acciones</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>
            <Checkbox id="task1" />
          </TableCell>
          <TableCell className="font-medium">Diseñar wireframes para la página de inicio</TableCell>
          <TableCell>Rediseño de Sitio Web</TableCell>
          <TableCell>
            <Badge variant="outline" className="bg-red-50 text-red-700 border-red-200">
              Alta
            </Badge>
          </TableCell>
          <TableCell>
            <div className="flex items-center gap-1">
              <Clock className="h-3 w-3 text-muted-foreground" />
              <span className="text-sm">10 Mar 2025</span>
            </div>
          </TableCell>
          <TableCell>
            <div className="flex items-center gap-2">
              <Avatar className="h-6 w-6">
                <AvatarImage src="/placeholder-user.jpg" alt="@user" />
                <AvatarFallback>AP</AvatarFallback>
              </Avatar>
              <span className="text-sm">Ana Pérez</span>
            </div>
          </TableCell>
          <TableCell className="text-right">
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                  <MoreHorizontal className="h-4 w-4" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuLabel>Acciones</DropdownMenuLabel>
                <DropdownMenuItem>Editar</DropdownMenuItem>
                <DropdownMenuItem>Reasignar</DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem className="text-destructive">Eliminar</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </TableCell>
        </TableRow>
        <TableRow>
          <TableCell>
            <Checkbox id="task2" />
          </TableCell>
          <TableCell className="font-medium">Implementar autenticación de usuarios</TableCell>
          <TableCell>Implementación de CRM</TableCell>
          <TableCell>
            <Badge variant="outline" className="bg-yellow-50 text-yellow-700 border-yellow-200">
              Media
            </Badge>
          </TableCell>
          <TableCell>
            <div className="flex items-center gap-1">
              <Clock className="h-3 w-3 text-muted-foreground" />
              <span className="text-sm">15 Mar 2025</span>
            </div>
          </TableCell>
          <TableCell>
            <div className="flex items-center gap-2">
              <Avatar className="h-6 w-6">
                <AvatarImage src="/placeholder-user.jpg" alt="@user" />
                <AvatarFallback>CG</AvatarFallback>
              </Avatar>
              <span className="text-sm">Carlos García</span>
            </div>
          </TableCell>
          <TableCell className="text-right">
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                  <MoreHorizontal className="h-4 w-4" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuLabel>Acciones</DropdownMenuLabel>
                <DropdownMenuItem>Editar</DropdownMenuItem>
                <DropdownMenuItem>Reasignar</DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem className="text-destructive">Eliminar</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </TableCell>
        </TableRow>
        <TableRow>
          <TableCell>
            <Checkbox id="task3" />
          </TableCell>
          <TableCell className="font-medium">Crear contenido para redes sociales</TableCell>
          <TableCell>Campaña de Marketing Q2</TableCell>
          <TableCell>
            <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
              Baja
            </Badge>
          </TableCell>
          <TableCell>
            <div className="flex items-center gap-1">
              <Clock className="h-3 w-3 text-muted-foreground" />
              <span className="text-sm">20 Mar 2025</span>
            </div>
          </TableCell>
          <TableCell>
            <div className="flex items-center gap-2">
              <Avatar className="h-6 w-6">
                <AvatarImage src="/placeholder-user.jpg" alt="@user" />
                <AvatarFallback>MR</AvatarFallback>
              </Avatar>
              <span className="text-sm">María Rodríguez</span>
            </div>
          </TableCell>
          <TableCell className="text-right">
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                  <MoreHorizontal className="h-4 w-4" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuLabel>Acciones</DropdownMenuLabel>
                <DropdownMenuItem>Editar</DropdownMenuItem>
                <DropdownMenuItem>Reasignar</DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem className="text-destructive">Eliminar</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </TableCell>
        </TableRow>
      </TableBody>
    </Table>
  )
}

[V0_FILE]typescriptreact:file="components/task-board.tsx" isMerged="true"
import { Card, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Clock, MoreHorizontal } from "lucide-react"
import { Button } from "@/components/ui/button"

export function TaskBoard() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div className="space-y-4">
        <div className="font-medium text-sm flex items-center justify-between">
          <div className="flex items-center gap-2">
            <div className="h-2 w-2 rounded-full bg-blue-500"></div>
            Pendiente
            <Badge variant="outline" className="ml-2">
              3
            </Badge>
          </div>
          <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
            <MoreHorizontal className="h-4 w-4" />
          </Button>
        </div>
        <Card>
          <CardHeader className="p-3">
            <CardTitle className="text-sm">Diseñar wireframes para la página de inicio</CardTitle>
            <CardDescription className="text-xs">Rediseño de Sitio Web</CardDescription>
          </CardHeader>
          <CardFooter className="p-3 pt-0 flex items-center justify-between">
            <div className="flex items-center gap-1">
              <Clock className="h-3 w-3 text-muted-foreground" />
              <span className="text-xs text-muted-foreground">10 Mar 2025</span>
            </div>
            <Avatar className="h-6 w-6">
              <AvatarImage src="/placeholder-user.jpg" alt="@user" />
              <AvatarFallback>AP</AvatarFallback>
            </Avatar>
          </CardFooter>
        </Card>
        <Card>
          <CardHeader className="p-3">
            <CardTitle className="text-sm">Implementar autenticación de usuarios</CardTitle>
            <CardDescription className="text-xs">Implementación de CRM</CardDescription>
          </CardHeader>
          <CardFooter className="p-3 pt-0 flex items-center justify-between">
            <div className="flex items-center gap-1">
              <Clock className="h-3 w-3 text-muted-foreground" />
              <span className="text-xs text-muted-foreground">15 Mar 2025</span>
            </div>
            <Avatar className="h-6 w-6">
              <AvatarImage src="/placeholder-user.jpg" alt="@user" />
              <AvatarFallback>CG</AvatarFallback>
            </Avatar>
          </CardFooter>
        </Card>
        <Card>
          <CardHeader className="p-3">
            <CardTitle className="text-sm">Crear contenido para redes sociales</CardTitle>
            <CardDescription className="text-xs">Campaña de Marketing Q2</CardDescription>
          </CardHeader>
          <CardFooter className="p-3 pt-0 flex items-center justify-between">
            <div className="flex items-center gap-1">
              <Clock className="h-3 w-3 text-muted-foreground" />
              <span className="text-xs text-muted-foreground">20 Mar 2025</span>
            </div>
            <Avatar className="h-6 w-6">
              <AvatarImage src="/placeholder-user.jpg" alt="@user" />
              <AvatarFallback>MR</AvatarFallback>
            </Avatar>
          </CardFooter>
        </Card>
      </div>
      <div className="space-y-4">
        <div className="font-medium text-sm flex items-center justify-between">
          <div className="flex items-center gap-2">
            <div className="h-2 w-2 rounded-full bg-yellow-500"></div>
            En Progreso
            <Badge variant="outline" className="ml-2">
              2
            </Badge>
          </div>
          <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
            <MoreHorizontal className="h-4 w-4" />
          </Button>
        </div>
        <Card>
          <CardHeader className="p-3">
            <CardTitle className="text-sm">Desarrollar API para integración con CRM</CardTitle>
            <CardDescription className="text-xs">Implementación de CRM</CardDescription>
          </CardHeader>
          <CardFooter className="p-3 pt-0 flex items-center justify-between">
            <div className="flex items-center gap-1">
              <Clock className="h-3 w-3 text-muted-foreground" />
              <span className="text-xs text-muted-foreground">12 Mar 2025</span>
            </div>
            <Avatar className="h-6 w-6">
              <AvatarImage src="/placeholder-user.jpg" alt="@user" />
              <AvatarFallback>JP</AvatarFallback>
            </Avatar>
          </CardFooter>
        </Card>
        <Card>
          <CardHeader className="p-3">
            <CardTitle className="text-sm">Optimizar imágenes del sitio web</CardTitle>
            <CardDescription className="text-xs">Rediseño de Sitio Web</CardDescription>
          </CardHeader>
          <CardFooter className="p-3 pt-0 flex items-center justify-between">
            <div className="flex items-center gap-1">
              <Clock className="h-3 w-3 text-muted-foreground" />
              <span className="text-xs text-muted-foreground">8 Mar 2025</span>
            </div>
            <Avatar className="h-6 w-6">
              <AvatarImage src="/placeholder-user.jpg" alt="@user" />
              <AvatarFallback>AP</AvatarFallback>
            </Avatar>
          </CardFooter>
        </Card>
      </div>
      <div className="space-y-4">
        <div className="font-medium text-sm flex items-center justify-between">
          <div className="flex items-center gap-2">
            <div className="h-2 w-2 rounded-full bg-green-500"></div>
            Completado
            <Badge variant="outline" className="ml-2">
              2
            </Badge>
          </div>
          <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
            <MoreHorizontal className="h-4 w-4" />
          </Button>
        </div>
        <Card>
          <CardHeader className="p-3">
            <CardTitle className="text-sm">Definir requisitos del proyecto</CardTitle>
            <CardDescription className="text-xs">Rediseño de Sitio Web</CardDescription>
          </CardHeader>
          <CardFooter className="p-3 pt-0 flex items-center justify-between">
            <div className="flex items-center gap-1">
              <Clock className="h-3 w-3 text-muted-foreground" />
              <span className="text-xs text-muted-foreground">1 Mar 2025</span>
            </div>
            <Avatar className="h-6 w-6">
              <AvatarImage src="/placeholder-user.jpg" alt="@user" />
              <AvatarFallback>JP</AvatarFallback>
            </Avatar>
          </CardFooter>
        </Card>
        <Card>
          <CardHeader className="p-3">
            <CardTitle className="text-sm">Crear plan de proyecto</CardTitle>
            <CardDescription className="text-xs">Campaña de Marketing Q2</CardDescription>
          </CardHeader>
          <CardFooter className="p-3 pt-0 flex items-center justify-between">
            <div className="flex items-center gap-1">
              <Clock className="h-3 w-3 text-muted-foreground" />
              <span className="text-xs text-muted-foreground">5 Mar 2025</span>
            </div>
            <Avatar className="h-6 w-6">
              <AvatarImage src="/placeholder-user.jpg" alt="@user" />
              <AvatarFallback>MR</AvatarFallback>
            </Avatar>
          </CardFooter>
        </Card>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/date-picker.tsx" isMerged="true"
"use client"

import * as React from "react"
import { format } from "date-fns"
import { CalendarIcon } from "lucide-react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"

export function DatePicker() {
  const [date, setDate] = React.useState<Date>()

return (
    <Popover>
      <PopoverTrigger asChild>
        <Button
          variant={"outline"}
          className={cn("w-full justify-start text-left font-normal", !date && "text-muted-foreground")}
        >
          <CalendarIcon className="mr-2 h-4 w-4" />
          {date ? format(date, "PPP") : <span>Seleccionar fecha</span>}
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-auto p-0">
        <Calendar mode="single" selected={date} onSelect={setDate} initialFocus />
      </PopoverContent>
    </Popover>
  )
}

[V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true"
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

[V0_FILE]typescriptreact:file="app/team/page.tsx" isEdit="true" isMerged="true"
"use client"

import Link from "next/link"
import { BarChart3, Filter, Plus, Search, Edit, Trash } from "lucide-react"

export default function TeamPage() {
  const { teamMembers, deleteTeamMember } = useData()

return (
    <div className="flex min-h-screen flex-col">
      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center justify-between">
          <Link href="/" className="flex items-center gap-2 font-bold text-xl">
            <BarChart3 className="h-6 w-6" />
            <span>ProjectPro</span>
          </Link>
          <UserNav />
        </div>
      </header>
      <div className="grid flex-1 md:grid-cols-[220px_1fr]">
        <aside className="hidden border-r bg-muted/40 md:block">
          <DashboardNav />
        </aside>
        <main className="flex flex-col gap-6 p-6">
          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <h1 className="text-3xl font-bold tracking-tight">Equipo</h1>
            <div className="flex items-center gap-2">
              <Link href="/team/new">
                <Button>
                  <Plus className="mr-2 h-4 w-4" />
                  Nuevo Miembro
                </Button>
              </Link>
            </div>
          </div>

<div className="flex flex-col gap-4 sm:flex-row sm:items-center">
            <div className="relative w-full sm:w-80">
              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
              <Input placeholder="Buscar miembros..." className="pl-8" />
            </div>
            <Button variant="outline" size="sm" className="h-9">
              <Filter className="mr-2 h-4 w-4" />
              Filtrar
            </Button>
          </div>

<Table>
            <TableHeader>
              <TableRow>
                <TableHead>Nombre</TableHead>
                <TableHead>Correo Electrónico</TableHead>
                <TableHead>Rol</TableHead>
                <TableHead>Acciones</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {teamMembers.map((member) => (
                <TableRow key={member.id}>
                  <TableCell>{member.name}</TableCell>
                  <TableCell>{member.email}</TableCell>
                  <TableCell>{member.role}</TableCell>
                  <TableCell>
                    <div className="flex items-center gap-2">
                      <Link href={`/team/edit/${member.id}`}>
                        <Button variant="outline" size="sm">
                          <Edit className="h-4 w-4" />
                        </Button>
                      </Link>
                      <Button variant="outline" size="sm" onClick={() => deleteTeamMember(member.id)}>
                        <Trash className="h-4 w-4" />
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </main>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/team-table.tsx" isMerged="true"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { MoreHorizontal } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export function TeamTable() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Miembro</TableHead>
          <TableHead>Rol</TableHead>
          <TableHead>Departamento</TableHead>
          <TableHead>Proyectos Asignados</TableHead>
          <TableHead>Estado</TableHead>
          <TableHead className="text-right">Acciones</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>
            <div className="flex items-center gap-3">
              <Avatar>
                <AvatarImage src="/placeholder-user.jpg" alt="@user" />
                <AvatarFallback>JP</AvatarFallback>
              </Avatar>
              <div>
                <div className="font-medium">Juan Pérez</div>
                <div className="text-sm text-muted-foreground">juan.perez@ejemplo.com</div>
              </div>
            </div>
          </TableCell>
          <TableCell>Gerente de Proyecto</TableCell>
          <TableCell>Tecnología</TableCell>
          <TableCell>3</TableCell>
          <TableCell>
            <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
              Activo
            </Badge>
          </TableCell>
          <TableCell className="text-right">
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                  <MoreHorizontal className="h-4 w-4" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuLabel>Acciones</DropdownMenuLabel>
                <DropdownMenuItem>Ver Perfil</DropdownMenuItem>
                <DropdownMenuItem>Editar Rol</DropdownMenuItem>
                <DropdownMenuItem>Asignar a Proyecto</DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem className="text-destructive">Eliminar</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </TableCell>
        </TableRow>
        <TableRow>
          <TableCell>
            <div className="flex items-center gap-3">
              <Avatar>
                <AvatarImage src="/placeholder-user.jpg" alt="@user" />
                <AvatarFallback>AP</AvatarFallback>
              </Avatar>
              <div>
                <div className="font-medium">Ana Pérez</div>
                <div className="text-sm text-muted-foreground">ana.perez@ejemplo.com</div>
              </div>
            </div>
          </TableCell>
          <TableCell>Diseñador UX/UI</TableCell>
          <TableCell>Diseño</TableCell>
          <TableCell>2</TableCell>
          <TableCell>
            <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
              Activo
            </Badge>
          </TableCell>
          <TableCell className="text-right">
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                  <MoreHorizontal className="h-4 w-4" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuLabel>Acciones</DropdownMenuLabel>
                <DropdownMenuItem>Ver Perfil</DropdownMenuItem>
                <DropdownMenuItem>Editar Rol</DropdownMenuItem>
                <DropdownMenuItem>Asignar a Proyecto</DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem className="text-destructive">Eliminar</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </TableCell>
        </TableRow>
        <TableRow>
          <TableCell>
            <div className="flex items-center gap-3">
              <Avatar>
                <AvatarImage src="/placeholder-user.jpg" alt="@user" />
                <AvatarFallback>CG</AvatarFallback>
              </Avatar>
              <div>
                <div className="font-medium">Carlos García</div>
                <div className="text-sm text-muted-foreground">carlos.garcia@ejemplo.com</div>
              </div>
            </div>
          </TableCell>
          <TableCell>Desarrollador Full Stack</TableCell>
          <TableCell>Tecnología</TableCell>
          <TableCell>4</TableCell>
          <TableCell>
            <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
              Activo
            </Badge>
          </TableCell>
          <TableCell className="text-right">
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                  <MoreHorizontal className="h-4 w-4" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuLabel>Acciones</DropdownMenuLabel>
                <DropdownMenuItem>Ver Perfil</DropdownMenuItem>
                <DropdownMenuItem>Editar Rol</DropdownMenuItem>
                <DropdownMenuItem>Asignar a Proyecto</DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem className="text-destructive">Eliminar</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </TableCell>
        </TableRow>
        <TableRow>
          <TableCell>
            <div className="flex items-center gap-3">
              <Avatar>
                <AvatarImage src="/placeholder-user.jpg" alt="@user" />
                <AvatarFallback>MR</AvatarFallback>
              </Avatar>
              <div>
                <div className="font-medium">María Rodríguez</div>
                <div className="text-sm text-muted-foreground">maria.rodriguez@ejemplo.com</div>
              </div>
            </div>
          </TableCell>
          <TableCell>Especialista en Marketing</TableCell>
          <TableCell>Marketing</TableCell>
          <TableCell>2</TableCell>
          <TableCell>
            <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
              Activo
            </Badge>
          </TableCell>
          <TableCell className="text-right">
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                  <MoreHorizontal className="h-4 w-4" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuLabel>Acciones</DropdownMenuLabel>
                <DropdownMenuItem>Ver Perfil</DropdownMenuItem>
                <DropdownMenuItem>Editar Rol</DropdownMenuItem>
                <DropdownMenuItem>Asignar a Proyecto</DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem className="text-destructive">Eliminar</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </TableCell>
        </TableRow>
      </TableBody>
    </Table>
  )
}

[V0_FILE]typescriptreact:file="components/resource-table.tsx" isMerged="true"
import { MoreHorizontal } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"

export function ResourceTable() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Nombre</TableHead>
          <TableHead>Tipo</TableHead>
          <TableHead>Proyecto Asignado</TableHead>
          <TableHead>Estado</TableHead>
          <TableHead>Utilización</TableHead>
          <TableHead className="text-right">Acciones</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell className="font-medium">Servidor de Desarrollo</TableCell>
          <TableCell>Hardware</TableCell>
          <TableCell>Implementación de CRM</TableCell>
          <TableCell>
            <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
              En Uso
            </Badge>
          </TableCell>
          <TableCell>75%</TableCell>
          <TableCell className="text-right">
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                  <MoreHorizontal className="h-4 w-4" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuLabel>Acciones</DropdownMenuLabel>
                <DropdownMenuItem>Ver Detalles</DropdownMenuItem>
                <DropdownMenuItem>Editar</DropdownMenuItem>
                <DropdownMenuItem>Reasignar</DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem className="text-destructive">Eliminar</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </TableCell>
        </TableRow>
        <TableRow>
          <TableCell className="font-medium">Licencia Adobe Creative Cloud</TableCell>
          <TableCell>Software</TableCell>
          <TableCell>Rediseño de Sitio Web</TableCell>
          <TableCell>
            <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
              En Uso
            </Badge>
          </TableCell>
          <TableCell>90%</TableCell>
          <TableCell className="text-right">
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                  <MoreHorizontal className="h-4 w-4" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuLabel>Acciones</DropdownMenuLabel>
                <DropdownMenuItem>Ver Detalles</DropdownMenuItem>
                <DropdownMenuItem>Editar</DropdownMenuItem>
                <DropdownMenuItem>Reasignar</DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem className="text-destructive">Eliminar</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </TableCell>
        </TableRow>
        <TableRow>
          <TableCell className="font-medium">Sala de Reuniones A</TableCell>
          <TableCell>Espacio</TableCell>
          <TableCell>Múltiples</TableCell>
          <TableCell>
            <Badge variant="outline" className="bg-yellow-50 text-yellow-700 border-yellow-200">
              Parcial
            </Badge>
          </TableCell>
          <TableCell>50%</TableCell>
          <TableCell className="text-right">
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                  <MoreHorizontal className="h-4 w-4" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuLabel>Acciones</DropdownMenuLabel>
                <DropdownMenuItem>Ver Detalles</DropdownMenuItem>
                <DropdownMenuItem>Editar</DropdownMenuItem>
                <DropdownMenuItem>Reasignar</DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem className="text-destructive">Eliminar</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </TableCell>
        </TableRow>
        <TableRow>
          <TableCell className="font-medium">Presupuesto Marketing Q2</TableCell>
          <TableCell>Financiero</TableCell>
          <TableCell>Campaña de Marketing Q2</TableCell>
          <TableCell>
            <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
              En Uso
            </Badge>
          </TableCell>
          <TableCell>30%</TableCell>
          <TableCell className="text-right">
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                  <MoreHorizontal className="h-4 w-4" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuLabel>Acciones</DropdownMenuLabel>
                <DropdownMenuItem>Ver Detalles</DropdownMenuItem>
                <DropdownMenuItem>Editar</DropdownMenuItem>
                <DropdownMenuItem>Reasignar</DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem className="text-destructive">Eliminar</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </TableCell>
        </TableRow>
        <TableRow>
          <TableCell className="font-medium">Servidor de Pruebas</TableCell>
          <TableCell>Hardware</TableCell>
          <TableCell>-</TableCell>
          <TableCell>
            <Badge variant="outline" className="bg-blue-50 text-blue-700 border-blue-200">
              Disponible
            </Badge>
          </TableCell>
          <TableCell>0%</TableCell>
          <TableCell className="text-right">
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                  <MoreHorizontal className="h-4 w-4" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuLabel>Acciones</DropdownMenuLabel>
                <DropdownMenuItem>Ver Detalles</DropdownMenuItem>
                <DropdownMenuItem>Editar</DropdownMenuItem>
                <DropdownMenuItem>Asignar</DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem className="text-destructive">Eliminar</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </TableCell>
        </TableRow>
      </TableBody>
    </Table>
  )
}

[V0_FILE]typescriptreact:file="components/resource-usage-chart.tsx" isMerged="true"
"use client"

export function ResourceUsageChart() {
  // En un caso real, aquí se implementaría un gráfico con una biblioteca como recharts o chart.js
  // Para este ejemplo, usaremos una representación visual simple

const projects = [
    { name: "Rediseño de Sitio Web", percentage: 35, color: "bg-blue-500" },
    { name: "Implementación de CRM", percentage: 25, color: "bg-green-500" },
    { name: "Campaña de Marketing Q2", percentage: 15, color: "bg-yellow-500" },
    { name: "Desarrollo de App Móvil", percentage: 20, color: "bg-purple-500" },
    { name: "Otros", percentage: 5, color: "bg-gray-500" },
  ]

return (
    <div className="space-y-6">
      <div className="h-8 w-full flex rounded-md overflow-hidden">
        {projects.map((project, index) => (
          <div
            key={index}
            className={`${project.color} h-full`}
            style={{ width: `${project.percentage}%` }}
            title={`${project.name}: ${project.percentage}%`}
          />
        ))}
      </div>

<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
        {projects.map((project, index) => (
          <div key={index} className="flex items-center gap-2">
            <div className={`h-3 w-3 rounded-full ${project.color}`} />
            <div className="text-sm">{project.name}</div>
            <div className="text-sm font-medium ml-auto">{project.percentage}%</div>
          </div>
        ))}
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/settings/page.tsx" isMerged="true"
import Link from "next/link"
import { BarChart3, Save } from "lucide-react"

import { Button } from "@/components/ui/button"
import { DashboardNav } from "@/components/dashboard-nav"
import { UserNav } from "@/components/user-nav"
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 { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

export default function SettingsPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center justify-between">
          <Link href="/" className="flex items-center gap-2 font-bold text-xl">
            <BarChart3 className="h-6 w-6" />
            <span>ProjectPro</span>
          </Link>
          <nav className="hidden md:flex gap-6">
            <Link href="/dashboard" className="text-sm font-medium transition-colors hover:text-primary">
              Dashboard
            </Link>
            <Link href="/projects" className="text-sm font-medium transition-colors hover:text-primary">
              Proyectos
            </Link>
            <Link href="/tasks" className="text-sm font-medium transition-colors hover:text-primary">
              Tareas
            </Link>
            <Link href="/team" className="text-sm font-medium transition-colors hover:text-primary">
              Equipo
            </Link>
            <Link href="/resources" className="text-sm font-medium transition-colors hover:text-primary">
              Recursos
            </Link>
          </nav>
          <UserNav />
        </div>
      </header>
      <div className="grid flex-1 md:grid-cols-[220px_1fr]">
        <aside className="hidden border-r bg-muted/40 md:block">
          <DashboardNav />
        </aside>
        <main className="flex flex-col gap-6 p-6">
          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <h1 className="text-3xl font-bold tracking-tight">Configuración</h1>
          </div>

<Tabs defaultValue="profile">
            <TabsList className="grid w-full grid-cols-3">
              <TabsTrigger value="profile">Perfil</TabsTrigger>
              <TabsTrigger value="account">Cuenta</TabsTrigger>
              <TabsTrigger value="notifications">Notificaciones</TabsTrigger>
            </TabsList>

<TabsContent value="profile" className="space-y-4">
              <Card>
                <CardHeader>
                  <CardTitle>Información de Perfil</CardTitle>
                  <CardDescription>Actualiza tu información personal y preferencias</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="name">Nombre Completo</Label>
                    <Input id="name" defaultValue="Juan Pérez" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="email">Correo Electrónico</Label>
                    <Input id="email" defaultValue="juan.perez@ejemplo.com" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="title">Cargo</Label>
                    <Input id="title" defaultValue="Gerente de Proyecto" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="bio">Biografía</Label>
                    <Textarea id="bio" placeholder="Escribe una breve biografía..." />
                  </div>
                </CardContent>
                <CardFooter>
                  <Button>
                    <Save className="mr-2 h-4 w-4" />
                    Guardar Cambios
                  </Button>
                </CardFooter>
              </Card>
            </TabsContent>

<TabsContent value="account" className="space-y-4">
              <Card>
                <CardHeader>
                  <CardTitle>Configuración de Cuenta</CardTitle>
                  <CardDescription>Administra la configuración de tu cuenta</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="language">Idioma</Label>
                    <Select defaultValue="es">
                      <SelectTrigger>
                        <SelectValue placeholder="Selecciona un idioma" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="es">Español</SelectItem>
                        <SelectItem value="en">English</SelectItem>
                        <SelectItem value="fr">Français</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="timezone">Zona Horaria</Label>
                    <Select defaultValue="utc-3">
                      <SelectTrigger>
                        <SelectValue placeholder="Selecciona una zona horaria" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="utc-3">UTC-03:00 Buenos Aires</SelectItem>
                        <SelectItem value="utc-5">UTC-05:00 Bogotá, Lima</SelectItem>
                        <SelectItem value="utc-6">UTC-06:00 Ciudad de México</SelectItem>
                        <SelectItem value="utc+1">UTC+01:00 Madrid</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <Label htmlFor="marketing">Recibir correos de marketing</Label>
                      <Switch id="marketing" />
                    </div>
                  </div>
                </CardContent>
                <CardFooter>
                  <Button>
                    <Save className="mr-2 h-4 w-4" />
                    Guardar Cambios
                  </Button>
                </CardFooter>
              </Card>
            </TabsContent>

<TabsContent value="notifications" className="space-y-4">
              <Card>
                <CardHeader>
                  <CardTitle>Preferencias de Notificaciones</CardTitle>
                  <CardDescription>Configura cómo y cuándo quieres recibir notificaciones</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-4">
                    <div className="flex items-center justify-between">
                      <div>
                        <Label>Notificaciones por correo electrónico</Label>
                        <p className="text-sm text-muted-foreground">Recibe actualizaciones por correo electrónico</p>
                      </div>
                      <Switch id="email-notifications" defaultChecked />
                    </div>
                    <div className="flex items-center justify-between">
                      <div>
                        <Label>Notificaciones en la aplicación</Label>
                        <p className="text-sm text-muted-foreground">Recibe notificaciones dentro de la aplicación</p>
                      </div>
                      <Switch id="app-notifications" defaultChecked />
                    </div>
                    <div className="flex items-center justify-between">
                      <div>
                        <Label>Notificaciones de tareas asignadas</Label>
                        <p className="text-sm text-muted-foreground">
                          Recibe notificaciones cuando se te asigna una tarea
                        </p>
                      </div>
                      <Switch id="task-notifications" defaultChecked />
                    </div>
                    <div className="flex items-center justify-between">
                      <div>
                        <Label>Notificaciones de comentarios</Label>
                        <p className="text-sm text-muted-foreground">
                          Recibe notificaciones cuando alguien comenta en tus tareas
                        </p>
                      </div>
                      <Switch id="comment-notifications" defaultChecked />
                    </div>
                  </div>
                </CardContent>
                <CardFooter>
                  <Button>
                    <Save className="mr-2 h-4 w-4" />
                    Guardar Cambios
                  </Button>
                </CardFooter>
              </Card>
            </TabsContent>
          </Tabs>
        </main>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/team/invite/page.tsx" isMerged="true"
import Link from "next/link"
import { BarChart3, Send, X } from "lucide-react"

import { Button } from "@/components/ui/button"
import { DashboardNav } from "@/components/dashboard-nav"
import { UserNav } from "@/components/user-nav"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

export default function InviteMemberPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center justify-between">
          <Link href="/" className="flex items-center gap-2 font-bold text-xl">
            <BarChart3 className="h-6 w-6" />
            <span>ProjectPro</span>
          </Link>
          <nav className="hidden md:flex gap-6">
            <Link href="/dashboard" className="text-sm font-medium transition-colors hover:text-primary">
              Dashboard
            </Link>
            <Link href="/projects" className="text-sm font-medium transition-colors hover:text-primary">
              Proyectos
            </Link>
            <Link href="/tasks" className="text-sm font-medium transition-colors hover:text-primary">
              Tareas
            </Link>
            <Link href="/team" className="text-sm font-medium text-primary">
              Equipo
            </Link>
            <Link href="/resources" className="text-sm font-medium transition-colors hover:text-primary">
              Recursos
            </Link>
          </nav>
          <UserNav />
        </div>
      </header>
      <div className="grid flex-1 md:grid-cols-[220px_1fr]">
        <aside className="hidden border-r bg-muted/40 md:block">
          <DashboardNav />
        </aside>
        <main className="flex flex-col gap-6 p-6">
          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <h1 className="text-3xl font-bold tracking-tight">Invitar Miembro</h1>
            <div className="flex items-center gap-2">
              <Link href="/team">
                <Button variant="outline">
                  <X className="mr-2 h-4 w-4" />
                  Cancelar
                </Button>
              </Link>
            </div>
          </div>

<Card>
            <CardHeader>
              <CardTitle>Invitar Nuevo Miembro</CardTitle>
              <CardDescription>Envía invitaciones a nuevos miembros para unirse a tu equipo</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="emails">Correos Electrónicos</Label>
                <Textarea
                  id="emails"
                  placeholder="Ingresa las direcciones de correo electrónico separadas por comas"
                  className="min-h-[100px]"
                />
                <p className="text-sm text-muted-foreground">
                  Puedes invitar a múltiples personas a la vez separando sus correos con comas.
                </p>
              </div>

<div className="space-y-2">
                <Label htmlFor="role">Rol</Label>
                <Select>
                  <SelectTrigger>
                    <SelectValue placeholder="Selecciona un rol" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="member">Miembro</SelectItem>
                    <SelectItem value="admin">Administrador</SelectItem>
                    <SelectItem value="viewer">Visualizador</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label htmlFor="department">Departamento</Label>
                <Select>
                  <SelectTrigger>
                    <SelectValue placeholder="Selecciona un departamento" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="technology">Tecnología</SelectItem>
                    <SelectItem value="design">Diseño</SelectItem>
                    <SelectItem value="marketing">Marketing</SelectItem>
                    <SelectItem value="sales">Ventas</SelectItem>
                    <SelectItem value="hr">Recursos Humanos</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label htmlFor="message">Mensaje Personalizado (opcional)</Label>
                <Textarea
                  id="message"
                  placeholder="Escribe un mensaje personalizado para incluir en la invitación"
                  className="min-h-[100px]"
                />
              </div>
            </CardContent>
            <CardFooter className="flex justify-between">
              <Button variant="outline">
                <X className="mr-2 h-4 w-4" />
                Cancelar
              </Button>
              <Button>
                <Send className="mr-2 h-4 w-4" />
                Enviar Invitaciones
              </Button>
            </CardFooter>
          </Card>
        </main>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/tasks/new/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
import { Save, X } from "lucide-react"

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 { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { DatePicker } from "@/components/date-picker"
import { DashboardNav } from "@/components/dashboard-nav"
import { useData } from "@/contexts/DataContext"

export default function NewTaskPage() {
  const router = useRouter()
  const { addTask, projects, teamMembers } = useData()
  const [taskData, setTaskData] = useState({
    title: "",
    description: "",
    projectId: "",
    assignedTo: "",
    dueDate: "",
    status: "",
  })

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setTaskData((prev) => ({ ...prev, [name]: value }))
  }

const handleSelectChange = (name: string) => (value: string) => {
    setTaskData((prev) => ({ ...prev, [name]: value }))
  }

const handleDateChange = (date: Date | undefined) => {
    if (date) {
      setTaskData((prev) => ({ ...prev, dueDate: date.toISOString() }))
    }
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    addTask(taskData)
    router.push("/tasks")
  }

return (
    <div className="flex min-h-screen flex-col">
      {/* Header y navegación... */}
      <div className="grid flex-1 md:grid-cols-[220px_1fr]">
        <aside className="hidden border-r bg-muted/40 md:block">
          <DashboardNav />
        </aside>
        <main className="flex flex-col gap-6 p-6">
          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <h1 className="text-3xl font-bold tracking-tight">Nueva Tarea</h1>
            <div className="flex items-center gap-2">
              <Link href="/tasks">
                <Button variant="outline">
                  <X className="mr-2 h-4 w-4" />
                  Cancelar
                </Button>
              </Link>
            </div>
          </div>

<Card>
            <form onSubmit={handleSubmit}>
              <CardHeader>
                <CardTitle>Información de la Tarea</CardTitle>
                <CardDescription>Ingresa los detalles de la nueva tarea</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid gap-2">
                  <Label htmlFor="title">Título de la Tarea</Label>
                  <Input
                    id="title"
                    name="title"
                    value={taskData.title}
                    onChange={handleInputChange}
                    placeholder="Ingresa el título de la tarea"
                  />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="description">Descripción</Label>
                  <Textarea
                    id="description"
                    name="description"
                    value={taskData.description}
                    onChange={handleInputChange}
                    placeholder="Describe la tarea"
                  />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="projectId">Proyecto</Label>
                  <Select onValueChange={handleSelectChange("projectId")}>
                    <SelectTrigger>
                      <SelectValue placeholder="Selecciona un proyecto" />
                    </SelectTrigger>
                    <SelectContent>
                      {projects.map((project) => (
                        <SelectItem key={project.id} value={project.id}>
                          {project.title}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="assignedTo">Asignado a</Label>
                  <Select onValueChange={handleSelectChange("assignedTo")}>
                    <SelectTrigger>
                      <SelectValue placeholder="Selecciona un miembro del equipo" />
                    </SelectTrigger>
                    <SelectContent>
                      {teamMembers.map((member) => (
                        <SelectItem key={member.id} value={member.id}>
                          {member.name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="dueDate">Fecha de Vencimiento</Label>
                  <DatePicker onSelect={handleDateChange} />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="status">Estado</Label>
                  <Select onValueChange={handleSelectChange("status")}>
                    <SelectTrigger>
                      <SelectValue placeholder="Selecciona el estado" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="pending">Pendiente</SelectItem>
                      <SelectItem value="in-progress">En Progreso</SelectItem>
                      <SelectItem value="completed">Completado</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </CardContent>
              <CardFooter className="flex justify-end">
                <Button type="submit">
                  <Save className="mr-2 h-4 w-4" />
                  Guardar Tarea
                </Button>
              </CardFooter>
            </form>
          </Card>
        </main>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/calendar-view.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { format, startOfWeek, endOfWeek, eachDayOfInterval, isSameMonth, isSameDay, addDays, subDays } from "date-fns"
import { es } from "date-fns/locale"

// Datos de ejemplo para eventos
const events = [
  {
    id: 1,
    title: "Reunión de Planificación",
    project: "Campaña de Marketing Q2",
    date: new Date(2025, 2, 5),
    time: "10:00 - 11:30",
  },
  {
    id: 2,
    title: "Revisión de Diseño",
    project: "Rediseño de Sitio Web",
    date: new Date(2025, 2, 10),
    time: "14:00 - 15:00",
  },
  {
    id: 3,
    title: "Demo de Producto",
    project: "Implementación de CRM",
    date: new Date(2025, 2, 15),
    time: "11:00 - 12:00",
  },
  {
    id: 4,
    title: "Retrospectiva Sprint",
    project: "Desarrollo de App Móvil",
    date: new Date(2025, 2, 20),
    time: "16:00 - 17:00",
  },
  {
    id: 5,
    title: "Presentación a Stakeholders",
    project: "Rediseño de Sitio Web",
    date: new Date(2025, 2, 25),
    time: "09:30 - 11:00",
  },
]

export function CalendarView() {
  const [currentDate, setCurrentDate] = useState(new Date(2025, 2, 1))
  const [view, setView] = useState("month")

const renderMonthView = () => {
    const days = eachDayOfInterval({
      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 1),
      end: new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0),
    })

return (
      <div className="grid grid-cols-7 gap-1">
        {["Lun", "Mar", "Mié", "Jue", "Vie", "Sáb", "Dom"].map((day) => (
          <div key={day} className="text-center font-medium p-2">
            {day}
          </div>
        ))}
        {days.map((day) => {
          const dayEvents = events.filter((event) => isSameDay(event.date, day))
          return (
            <div
              key={day.toString()}
              className={`min-h-[100px] p-1 border ${isSameMonth(day, currentDate) ? "bg-white" : "bg-gray-100"}`}
            >
              <div className="font-medium text-sm">{format(day, "d")}</div>
              {dayEvents.map((event) => (
                <div
                  key={event.id}
                  className="text-xs p-1 mb-1 rounded bg-blue-100 truncate"
                  title={`${event.title} - ${event.time}`}
                >
                  {event.title}
                </div>
              ))}
            </div>
          )
        })}
      </div>
    )
  }

const renderWeekView = () => {
    const start = startOfWeek(currentDate, { weekStartsOn: 1 })
    const end = endOfWeek(currentDate, { weekStartsOn: 1 })
    const days = eachDayOfInterval({ start, end })

return (
      <div className="grid grid-cols-7 gap-1">
        {days.map((day) => (
          <div key={day.toString()} className="border p-2">
            <div className="font-medium">{format(day, "EEEE", { locale: es })}</div>
            <div className="text-sm">{format(day, "d MMM")}</div>
            {events
              .filter((event) => isSameDay(event.date, day))
              .map((event) => (
                <div key={event.id} className="text-xs p-1 mt-1 bg-blue-100 rounded">
                  {event.title} - {event.time}
                </div>
              ))}
          </div>
        ))}
      </div>
    )
  }

const renderDayView = () => {
    const dayEvents = events.filter((event) => isSameDay(event.date, currentDate))

return (
      <div className="border p-4">
        <h3 className="font-bold text-lg mb-4">{format(currentDate, "EEEE, d MMMM yyyy", { locale: es })}</h3>
        {dayEvents.length > 0 ? (
          dayEvents.map((event) => (
            <div key={event.id} className="mb-2 p-2 bg-blue-100 rounded">
              <div className="font-medium">{event.title}</div>
              <div className="text-sm">{event.time}</div>
              <div className="text-sm text-gray-600">{event.project}</div>
            </div>
          ))
        ) : (
          <p>No hay eventos programados para este día.</p>
        )}
      </div>
    )
  }

return (
    <div>
      <div className="mb-4 flex justify-between items-center">
        <button onClick={() => setCurrentDate((prev) => subDays(prev, view === "day" ? 1 : view === "week" ? 7 : 30))}>
          Anterior
        </button>
        <select value={view} onChange={(e) => setView(e.target.value)}>
          <option value="month">Mes</option>
          <option value="week">Semana</option>
          <option value="day">Día</option>
        </select>
        <button onClick={() => setCurrentDate((prev) => addDays(prev, view === "day" ? 1 : view === "week" ? 7 : 30))}>
          Siguiente
        </button>
      </div>
      {view === "month" && renderMonthView()}
      {view === "week" && renderWeekView()}
      {view === "day" && renderDayView()}
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/calendar/event/new/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
import { BarChart3, Save, X } from "lucide-react"

export default function NewEventPage() {
  const router = useRouter()
  const { addEvent, projects } = useData()
  const [eventData, setEventData] = useState({
    title: "",
    description: "",
    date: "",
    projectId: "",
  })

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setEventData((prev) => ({ ...prev, [name]: value }))
  }

const handleSelectChange = (value: string) => {
    setEventData((prev) => ({ ...prev, projectId: value }))
  }

const handleDateChange = (date: Date | undefined) => {
    if (date) {
      setEventData((prev) => ({ ...prev, date: date.toISOString() }))
    }
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    addEvent(eventData)
    router.push("/calendar")
  }

return (
    <div className="flex min-h-screen flex-col">
      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center justify-between">
          <Link href="/" className="flex items-center gap-2 font-bold text-xl">
            <BarChart3 className="h-6 w-6" />
            <span>ProjectPro</span>
          </Link>
          <UserNav />
        </div>
      </header>
      <div className="grid flex-1 md:grid-cols-[220px_1fr]">
        <aside className="hidden border-r bg-muted/40 md:block">
          <DashboardNav />
        </aside>
        <main className="flex flex-col gap-6 p-6">
          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <h1 className="text-3xl font-bold tracking-tight">Nuevo Evento</h1>
            <div className="flex items-center gap-2">
              <Link href="/calendar">
                <Button variant="outline">
                  <X className="mr-2 h-4 w-4" />
                  Cancelar
                </Button>
              </Link>
            </div>
          </div>

<Card>
            <form onSubmit={handleSubmit}>
              <CardHeader>
                <CardTitle>Información del Evento</CardTitle>
                <CardDescription>Ingresa los detalles del nuevo evento</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid gap-2">
                  <Label htmlFor="title">Título del Evento</Label>
                  <Input
                    id="title"
                    name="title"
                    value={eventData.title}
                    onChange={handleInputChange}
                    placeholder="Ingresa el título del evento"
                  />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="description">Descripción</Label>
                  <Textarea
                    id="description"
                    name="description"
                    value={eventData.description}
                    onChange={handleInputChange}
                    placeholder="Describe el evento"
                  />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="date">Fecha del Evento</Label>
                  <DatePicker onSelect={handleDateChange} />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="projectId">Proyecto Relacionado</Label>
                  <Select onValueChange={handleSelectChange}>
                    <SelectTrigger>
                      <SelectValue placeholder="Selecciona un proyecto" />
                    </SelectTrigger>
                    <SelectContent>
                      {projects.map((project) => (
                        <SelectItem key={project.id} value={project.id}>
                          {project.title}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </CardContent>
              <CardFooter className="flex justify-end">
                <Button type="submit">
                  <Save className="mr-2 h-4 w-4" />
                  Guardar Evento
                </Button>
              </CardFooter>
            </form>
          </Card>
        </main>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/resources/new/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
import { BarChart3, Save, X } from "lucide-react"

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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { DashboardNav } from "@/components/dashboard-nav"
import { UserNav } from "@/components/user-nav"
import { useData } from "@/contexts/DataContext"

export default function NewResourcePage() {
  const router = useRouter()
  const { addResource, projects } = useData()
  const [resourceData, setResourceData] = useState({
    name: "",
    type: "",
    quantity: 0,
    assignedTo: "",
  })

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setResourceData((prev) => ({ ...prev, [name]: name === "quantity" ? Number.parseInt(value) : value }))
  }

const handleSelectChange = (name: string) => (value: string) => {
    setResourceData((prev) => ({ ...prev, [name]: value }))
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    addResource(resourceData)
    router.push("/resources")
  }

return (
    <div className="flex min-h-screen flex-col">
      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center justify-between">
          <Link href="/" className="flex items-center gap-2 font-bold text-xl">
            <BarChart3 className="h-6 w-6" />
            <span>ProjectPro</span>
          </Link>
          <UserNav />
        </div>
      </header>
      <div className="grid flex-1 md:grid-cols-[220px_1fr]">
        <aside className="hidden border-r bg-muted/40 md:block">
          <DashboardNav />
        </aside>
        <main className="flex flex-col gap-6 p-6">
          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <h1 className="text-3xl font-bold tracking-tight">Nuevo Recurso</h1>
            <div className="flex items-center gap-2">
              <Link href="/resources">
                <Button variant="outline">
                  <X className="mr-2 h-4 w-4" />
                  Cancelar
                </Button>
              </Link>
            </div>
          </div>

<Card>
            <form onSubmit={handleSubmit}>
              <CardHeader>
                <CardTitle>Información del Recurso</CardTitle>
                <CardDescription>Ingresa los detalles del nuevo recurso</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid gap-2">
                  <Label htmlFor="name">Nombre del Recurso</Label>
                  <Input
                    id="name"
                    name="name"
                    value={resourceData.name}
                    onChange={handleInputChange}
                    placeholder="Ingresa el nombre del recurso"
                  />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="type">Tipo de Recurso</Label>
                  <Select onValueChange={handleSelectChange("type")}>
                    <SelectTrigger>
                      <SelectValue placeholder="Selecciona el tipo de recurso" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="hardware">Hardware</SelectItem>
                      <SelectItem value="software">Software</SelectItem>
                      <SelectItem value="human">Humano</SelectItem>
                      <SelectItem value="financial">Financiero</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="quantity">Cantidad</Label>
                  <Input
                    id="quantity"
                    name="quantity"
                    type="number"
                    value={resourceData.quantity}
                    onChange={handleInputChange}
                    placeholder="Ingresa la cantidad"
                  />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="assignedTo">Asignado a</Label>
                  <Select onValueChange={handleSelectChange("assignedTo")}>
                    <SelectTrigger>
                      <SelectValue placeholder="Selecciona un proyecto" />
                    </SelectTrigger>
                    <SelectContent>
                      {projects.map((project) => (
                        <SelectItem key={project.id} value={project.id}>
                          {project.title}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </CardContent>
              <CardFooter className="flex justify-end">
                <Button type="submit">
                  <Save className="mr-2 h-4 w-4" />
                  Guardar Recurso
                </Button>
              </CardFooter>
            </form>
          </Card>
        </main>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/resource-allocation-chart.tsx" isEdit="true" isMerged="true"
"use client"

import { Bar } from "react-chartjs-2"
import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from "chart.js"

ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)

const options = {
  responsive: true,
  plugins: {
    legend: {
      position: "top" as const,
    },
    title: {
      display: true,
      text: "Asignación de Recursos por Proyecto",
    },
  },
}

const data = {
  labels: ["Rediseño de Sitio Web", "Implementación de CRM", "Campaña de Marketing Q2", "Desarrollo de App Móvil"],
  datasets: [
    {
      label: "Recursos Humanos",
      data: [12, 19, 3, 5],
      backgroundColor: "rgba(255, 99, 132, 0.5)",
    },
    {
      label: "Recursos Materiales",
      data: [2, 3, 20, 5],
      backgroundColor: "rgba(53, 162, 235, 0.5)",
    },
    {
      label: "Recursos Financieros",
      data: [3, 10, 13, 15],
      backgroundColor: "rgba(75, 192, 192, 0.5)",
    },
  ],
}

export function ResourceAllocationChart() {
  return <Bar options={options} data={data} />
}

[V0_FILE]typescriptreact:file="components/resource-metrics-chart.tsx" isEdit="true" isMerged="true"
"use client"

import { Line } from "react-chartjs-2"
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js"

ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend)

const options = {
  responsive: true,
  plugins: {
    legend: {
      position: "top" as const,
    },
    title: {
      display: true,
      text: "Métricas de Utilización de Recursos",
    },
  },
}

const labels = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio"]

const data = {
  labels,
  datasets: [
    {
      label: "Utilización de Recursos Humanos (%)",
      data: [65, 59, 80, 81, 56, 55, 40],
      borderColor: "rgb(255, 99, 132)",
      backgroundColor: "rgba(255, 99, 132, 0.5)",
    },
    {
      label: "Utilización de Recursos Materiales (%)",
      data: [28, 48, 40, 19, 86, 27, 90],
      borderColor: "rgb(53, 162, 235)",
      backgroundColor: "rgba(53, 162, 235, 0.5)",
    },
    {
      label: "Eficiencia de Recursos (%)",
      data: [45, 59, 72, 60, 77, 68, 79],
      borderColor: "rgb(75, 192, 192)",
      backgroundColor: "rgba(75, 192, 192, 0.5)",
    },
  ],
}

export function ResourceMetricsChart() {
  return <Line options={options} data={data} />
}

[V0_FILE]typescriptreact:file="app/analytics/page.tsx" isMerged="true"
import Link from "next/link"
import { BarChart3 } from "lucide-react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { DashboardNav } from "@/components/dashboard-nav"
import { UserNav } from "@/components/user-nav"
import { ResourceAllocationChart } from "@/components/resource-allocation-chart"
import { ResourceMetricsChart } from "@/components/resource-metrics-chart"

export default function AnalyticsPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center justify-between">
          <Link href="/" className="flex items-center gap-2 font-bold text-xl">
            <BarChart3 className="h-6 w-6" />
            <span>ProjectPro</span>
          </Link>
          <nav className="hidden md:flex gap-6">
            <Link href="/dashboard" className="text-sm font-medium transition-colors hover:text-primary">
              Dashboard
            </Link>
            <Link href="/projects" className="text-sm font-medium transition-colors hover:text-primary">
              Proyectos
            </Link>
            <Link href="/tasks" className="text-sm font-medium transition-colors hover:text-primary">
              Tareas
            </Link>
            <Link href="/team" className="text-sm font-medium transition-colors hover:text-primary">
              Equipo
            </Link>
            <Link href="/resources" className="text-sm font-medium transition-colors hover:text-primary">
              Recursos
            </Link>
          </nav>
          <UserNav />
        </div>
      </header>
      <div className="grid flex-1 md:grid-cols-[220px_1fr]">
        <aside className="hidden border-r bg-muted/40 md:block">
          <DashboardNav />
        </aside>
        <main className="flex flex-col gap-6 p-6">
          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <h1 className="text-3xl font-bold tracking-tight">Analíticas</h1>
          </div>

<div className="grid gap-6 md:grid-cols-2">
            <Card>
              <CardHeader>
                <CardTitle>Asignación de Recursos</CardTitle>
                <CardDescription>Distribución de recursos por proyecto</CardDescription>
              </CardHeader>
              <CardContent>
                <ResourceAllocationChart />
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Métricas de Recursos</CardTitle>
                <CardDescription>Utilización y eficiencia de recursos a lo largo del tiempo</CardDescription>
              </CardHeader>
              <CardContent>
                <ResourceMetricsChart />
              </CardContent>
            </Card>
          </div>

{/* Aquí puedes agregar más secciones de análisis según sea necesario */}
        </main>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="contexts/DataContext.tsx" isMerged="true"
"use client"

import type React from "react"
import { createContext, useContext, useState, useEffect } from "react"

type Project = {
  id: string
  title: string
  description: string
  startDate: string
  endDate: string
  status: string
}

type Task = {
  id: string
  title: string
  description: string
  projectId: string
  assignedTo: string
  dueDate: string
  status: string
}

type TeamMember = {
  id: string
  name: string
  email: string
  role: string
}

type Event = {
  id: string
  title: string
  description: string
  date: string
  projectId: string
}

type Resource = {
  id: string
  name: string
  type: string
  quantity: number
  assignedTo: string
}

type DataContextType = {
  projects: Project[]
  tasks: Task[]
  teamMembers: TeamMember[]
  events: Event[]
  resources: Resource[]
  addProject: (project: Omit<Project, "id">) => void
  editProject: (id: string, project: Partial<Project>) => void
  deleteProject: (id: string) => void
  addTask: (task: Omit<Task, "id">) => void
  editTask: (id: string, task: Partial<Task>) => void
  deleteTask: (id: string) => void
  addTeamMember: (member: Omit<TeamMember, "id">) => void
  editTeamMember: (id: string, member: Partial<TeamMember>) => void
  deleteTeamMember: (id: string) => void
  addEvent: (event: Omit<Event, "id">) => void
  editEvent: (id: string, event: Partial<Event>) => void
  deleteEvent: (id: string) => void
  addResource: (resource: Omit<Resource, "id">) => void
  editResource: (id: string, resource: Partial<Resource>) => void
  deleteResource: (id: string) => void
}

const DataContext = createContext<DataContextType | undefined>(undefined)

export const DataProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [projects, setProjects] = useState<Project[]>([])
  const [tasks, setTasks] = useState<Task[]>([])
  const [teamMembers, setTeamMembers] = useState<TeamMember[]>([])
  const [events, setEvents] = useState<Event[]>([])
  const [resources, setResources] = useState<Resource[]>([])

useEffect(() => {
    const loadedProjects = localStorage.getItem("projects")
    const loadedTasks = localStorage.getItem("tasks")
    const loadedTeamMembers = localStorage.getItem("teamMembers")
    const loadedEvents = localStorage.getItem("events")
    const loadedResources = localStorage.getItem("resources")

if (loadedProjects) setProjects(JSON.parse(loadedProjects))
    if (loadedTasks) setTasks(JSON.parse(loadedTasks))
    if (loadedTeamMembers) setTeamMembers(JSON.parse(loadedTeamMembers))
    if (loadedEvents) setEvents(JSON.parse(loadedEvents))
    if (loadedResources) setResources(JSON.parse(loadedResources))
  }, [])

useEffect(() => {
    localStorage.setItem("projects", JSON.stringify(projects))
    localStorage.setItem("tasks", JSON.stringify(tasks))
    localStorage.setItem("teamMembers", JSON.stringify(teamMembers))
    localStorage.setItem("events", JSON.stringify(events))
    localStorage.setItem("resources", JSON.stringify(resources))
  }, [projects, tasks, teamMembers, events, resources])

const addProject = (project: Omit<Project, "id">) => {
    setProjects([...projects, { ...project, id: Date.now().toString() }])
  }

const editProject = (id: string, project: Partial<Project>) => {
    setProjects(projects.map((p) => (p.id === id ? { ...p, ...project } : p)))
  }

const deleteProject = (id: string) => {
    setProjects(projects.filter((p) => p.id !== id))
  }

const addTask = (task: Omit<Task, "id">) => {
    setTasks([...tasks, { ...task, id: Date.now().toString() }])
  }

const editTask = (id: string, task: Partial<Task>) => {
    setTasks(tasks.map((t) => (t.id === id ? { ...t, ...task } : t)))
  }

const deleteTask = (id: string) => {
    setTasks(tasks.filter((t) => t.id !== id))
  }

const addTeamMember = (member: Omit<TeamMember, "id">) => {
    setTeamMembers([...teamMembers, { ...member, id: Date.now().toString() }])
  }

const editTeamMember = (id: string, member: Partial<TeamMember>) => {
    setTeamMembers(teamMembers.map((m) => (m.id === id ? { ...m, ...member } : m)))
  }

const deleteTeamMember = (id: string) => {
    setTeamMembers(teamMembers.filter((m) => m.id !== id))
  }

const addEvent = (event: Omit<Event, "id">) => {
    setEvents([...events, { ...event, id: Date.now().toString() }])
  }

const editEvent = (id: string, event: Partial<Event>) => {
    setEvents(events.map((e) => (e.id === id ? { ...e, ...event } : e)))
  }

const deleteEvent = (id: string) => {
    setEvents(events.filter((e) => e.id !== id))
  }

const addResource = (resource: Omit<Resource, "id">) => {
    setResources([...resources, { ...resource, id: Date.now().toString() }])
  }

const editResource = (id: string, resource: Partial<Resource>) => {
    setResources(resources.map((r) => (r.id === id ? { ...r, ...resource } : r)))
  }

const deleteResource = (id: string) => {
    setResources(resources.filter((r) => r.id !== id))
  }

return (
    <DataContext.Provider
      value={{
        projects,
        tasks,
        teamMembers,
        events,
        resources,
        addProject,
        editProject,
        deleteProject,
        addTask,
        editTask,
        deleteTask,
        addTeamMember,
        editTeamMember,
        deleteTeamMember,
        addEvent,
        editEvent,
        deleteEvent,
        addResource,
        editResource,
        deleteResource,
      }}
    >
      {children}
    </DataContext.Provider>
  )
}

export const useData = () => {
  const context = useContext(DataContext)
  if (context === undefined) {
    throw new Error("useData must be used within a DataProvider")
  }
  return context
}

[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import { DataProvider } from "@/contexts/DataContext"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "ProjectPro",
  description: "Sistema de Gestión de Proyectos Empresariales",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="es">
      <body className={inter.className}>
        <DataProvider>{children}</DataProvider>
      </body>
    </html>
  )
}

[V0_FILE]typescriptreact:file="app/projects/edit/[id]/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
import { Save, X } from "lucide-react"

export default function EditProjectPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const { projects, editProject } = useData()
  const [projectData, setProjectData] = useState({
    title: "",
    description: "",
    startDate: "",
    endDate: "",
    status: "",
  })

useEffect(() => {
    const project = projects.find((p) => p.id === params.id)
    if (project) {
      setProjectData(project)
    }
  }, [params.id, projects])

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setProjectData((prev) => ({ ...prev, [name]: value }))
  }

const handleSelectChange = (name: string) => (value: string) => {
    setProjectData((prev) => ({ ...prev, [name]: value }))
  }

const handleDateChange = (name: string) => (date: Date | undefined) => {
    if (date) {
      setProjectData((prev) => ({ ...prev, [name]: date.toISOString() }))
    }
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    editProject(params.id, projectData)
    router.push("/projects")
  }

return (
    <div className="flex min-h-screen flex-col">
      {/* Header y navegación... */}
      <div className="grid flex-1 md:grid-cols-[220px_1fr]">
        <aside className="hidden border-r bg-muted/40 md:block">
          <DashboardNav />
        </aside>
        <main className="flex flex-col gap-6 p-6">
          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <h1 className="text-3xl font-bold tracking-tight">Editar Proyecto</h1>
            <div className="flex items-center gap-2">
              <Link href="/projects">
                <Button variant="outline">
                  <X className="mr-2 h-4 w-4" />
                  Cancelar
                </Button>
              </Link>
            </div>
          </div>

<Card>
            <form onSubmit={handleSubmit}>
              <CardHeader>
                <CardTitle>Información del Proyecto</CardTitle>
                <CardDescription>Edita los detalles del proyecto</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid gap-2">
                  <Label htmlFor="title">Nombre del Proyecto</Label>
                  <Input
                    id="title"
                    name="title"
                    value={projectData.title}
                    onChange={handleInputChange}
                    placeholder="Ingresa el nombre del proyecto"
                  />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="description">Descripción</Label>
                  <Textarea
                    id="description"
                    name="description"
                    value={projectData.description}
                    onChange={handleInputChange}
                    placeholder="Describe el proyecto y sus objetivos"
                  />
                </div>
                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                  <div className="grid gap-2">
                    <Label htmlFor="startDate">Fecha de Inicio</Label>
                    <DatePicker
                      onSelect={handleDateChange("startDate")}
                      defaultDate={new Date(projectData.startDate)}
                    />
                  </div>
                  <div className="grid gap-2">
                    <Label htmlFor="endDate">Fecha de Finalización</Label>
                    <DatePicker onSelect={handleDateChange("endDate")} defaultDate={new Date(projectData.endDate)} />
                  </div>
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="status">Estado</Label>
                  <Select onValueChange={handleSelectChange("status")} defaultValue={projectData.status}>
                    <SelectTrigger>
                      <SelectValue placeholder="Selecciona el estado" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="planning">Planificación</SelectItem>
                      <SelectItem value="in-progress">En Progreso</SelectItem>
                      <SelectItem value="completed">Completado</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </CardContent>
              <CardFooter className="flex justify-end">
                <Button type="submit">
                  <Save className="mr-2 h-4 w-4" />
                  Guardar Cambios
                </Button>
              </CardFooter>
            </form>
          </Card>
        </main>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/team/new/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
import { BarChart3, Save, X } from "lucide-react"

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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { DashboardNav } from "@/components/dashboard-nav"
import { UserNav } from "@/components/user-nav"
import { useData } from "@/contexts/DataContext"

export default function NewTeamMemberPage() {
  const router = useRouter()
  const { addTeamMember } = useData()
  const [memberData, setMemberData] = useState({
    name: "",
    email: "",
    role: "",
  })

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setMemberData((prev) => ({ ...prev, [name]: value }))
  }

const handleSelectChange = (value: string) => {
    setMemberData((prev) => ({ ...prev, role: value }))
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    addTeamMember(memberData)
    router.push("/team")
  }

return (
    <div className="flex min-h-screen flex-col">
      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center justify-between">
          <Link href="/" className="flex items-center gap-2 font-bold text-xl">
            <BarChart3 className="h-6 w-6" />
            <span>ProjectPro</span>
          </Link>
          <UserNav />
        </div>
      </header>
      <div className="grid flex-1 md:grid-cols-[220px_1fr]">
        <aside className="hidden border-r bg-muted/40 md:block">
          <DashboardNav />
        </aside>
        <main className="flex flex-col gap-6 p-6">
          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <h1 className="text-3xl font-bold tracking-tight">Nuevo Miembro del Equipo</h1>
            <div className="flex items-center gap-2">
              <Link href="/team">
                <Button variant="outline">
                  <X className="mr-2 h-4 w-4" />
                  Cancelar
                </Button>
              </Link>
            </div>
          </div>

<Card>
            <form onSubmit={handleSubmit}>
              <CardHeader>
                <CardTitle>Información del Miembro</CardTitle>
                <CardDescription>Ingresa los detalles del nuevo miembro del equipo</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid gap-2">
                  <Label htmlFor="name">Nombre</Label>
                  <Input
                    id="name"
                    name="name"
                    value={memberData.name}
                    onChange={handleInputChange}
                    placeholder="Ingresa el nombre del miembro"
                  />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="email">Correo Electrónico</Label>
                  <Input
                    id="email"
                    name="email"
                    type="email"
                    value={memberData.email}
                    onChange={handleInputChange}
                    placeholder="Ingresa el correo electrónico"
                  />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="role">Rol</Label>
                  <Select onValueChange={handleSelectChange}>
                    <SelectTrigger>
                      <SelectValue placeholder="Selecciona el rol" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="developer">Desarrollador</SelectItem>
                      <SelectItem value="designer">Diseñador</SelectItem>
                      <SelectItem value="manager">Gerente de Proyecto</SelectItem>
                      <SelectItem value="tester">Tester</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </CardContent>
              <CardFooter className="flex justify-end">
                <Button type="submit">
                  <Save className="mr-2 h-4 w-4" />
                  Guardar Miembro
                </Button>
              </CardFooter>
            </form>
          </Card>
        </main>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/calendar/page.tsx" isEdit="true"
"use client"

import Link from "next/link"
import { BarChart3, ChevronLeft, ChevronRight, Plus, Edit, Trash } from "lucide-react"

import { Button } from "@/components/ui/button"
import { DashboardNav } from "@/components/dashboard-nav"
import { UserNav } from "@/components/user-nav"
import { Card, CardContent } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { CalendarView } from "@/components/calendar-view"
import { useData } from "@/contexts/DataContext"

export default function CalendarPage() {
  const { events, deleteEvent } = useData()

return (
    <div className="flex min-h-screen flex-col">
      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center justify-between">
          <Link href="/" className="flex items-center gap-2 font-bold text-xl">
            <BarChart3 className="h-6 w-6" />
            <span>ProjectPro</span>
          </Link>
          <UserNav />
        </div>
      </header>
      <div className="grid flex-1 md:grid-cols-[220px_1fr]">
        <aside className="hidden border-r bg-muted/40 md:block">
          <DashboardNav />
        </aside>
        <main className="flex flex-col gap-6 p-6">
          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <h1 className="text-3xl font-bold tracking-tight">Calendario</h1>
            <div className="flex items-center gap-2">
              <Link href="/calendar/event/new">
                <Button>
                  <Plus className="mr-2 h-4 w-4" />
                  Nuevo Evento
                </Button>
              </Link>
            </div>
          </div>

<div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <Button variant="outline" size="icon">
                <ChevronLeft className="h-4 w-4" />
              </Button>
              <h2 className="text-xl font-semibold">Marzo 2025</h2>
              <Button variant="outline" size="icon">
                <ChevronRight className="h-4 w-4" />
              </Button>
            </div>
            <div className="flex items-center gap-2">
              <Select defaultValue="month">
                <SelectTrigger className="w-[180px]">
                  <SelectValue placeholder="Vista" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="day">Día</SelectItem>
                  <SelectItem value="week">Semana</SelectItem>
                  <SelectItem value="month">Mes</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

<div className="mt-6">
            <h2 className="text-2xl font-semibold mb-4">Eventos Próximos</h2>
            <table className="w-full">
              <thead>
                <tr>
                  <th className="text-left">Título</th>
                  <th className="text-left">Fecha</th>
                  <th className="text-left">Proyecto</th>
                  <th className="text-left">Acciones</th>
                </tr>
              </thead>
              <tbody>
                {events.map((event) => (
                  <tr key={event.id}>
                    <td>{event.title}</td>
                    <td>{new Date(event.date).toLocaleDateString()}</td>
                    <td>{event.projectId}</td>
                    <td>
                      <div className="flex items-center gap-2">
                        <Link href={`/calendar/event/edit/${event.id}`}>
                          <Button variant="outline" size="sm">
                            <Edit className="h-4 w-4" />
                          </Button>
                        </Link>
                        <Button variant="outline" size="sm" onClick={() => deleteEvent(event.id)}>
                          <Trash className="h-4 w-4" />
                        </Button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </main>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/calendar/event/edit/[id]/page.tsx"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
import { BarChart3, Save, X } from "lucide-react"

export default function EditEventPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const { events, editEvent, projects } = useData()
  const [eventData, setEventData] = useState({
    title: "",
    description: "",
    date: "",
    projectId: "",
  })

useEffect(() => {
    const event = events.find((e) => e.id === params.id)
    if (event) {
      setEventData(event)
    }
  }, [events, params.id])

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setEventData((prev) => ({ ...prev, [name]: value }))
  }

const handleSelectChange = (value: string) => {
    setEventData((prev) => ({ ...prev, projectId: value }))
  }

const handleDateChange = (date: Date | undefined) => {
    if (date) {
      setEventData((prev) => ({ ...prev, date: date.toISOString() }))
    }
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    editEvent(params.id, eventData)
    router.push("/calendar")
  }

return (
    <div className="flex min-h-screen flex-col">
      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center justify-between">
          <Link href="/" className="flex items-center gap-2 font-bold text-xl">
            <BarChart3 className="h-6 w-6" />
            <span>ProjectPro</span>
          </Link>
          <UserNav />
        </div>
      </header>
      <div className="grid flex-1 md:grid-cols-[220px_1fr]">
        <aside className="hidden border-r bg-muted/40 md:block">
          <DashboardNav />
        </aside>
        <main className="flex flex-col gap-6 p-6">
          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <h1 className="text-3xl font-bold tracking-tight">Editar Evento</h1>
            <div className="flex items-center gap-2">
              <Link href="/calendar">
                <Button variant="outline">
                  <X className="mr-2 h-4 w-4" />
                  Cancelar
                </Button>
              </Link>
            </div>
          </div>

<Card>
            <form onSubmit={handleSubmit}>
              <CardHeader>
                <CardTitle>Información del Evento</CardTitle>
                <CardDescription>Edita los detalles del evento</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid gap-2">
                  <Label htmlFor="title">Título del Evento</Label>
                  <Input
                    id="title"
                    name="title"
                    value={eventData.title}
                    onChange={handleInputChange}
                    placeholder="Ingresa el título del evento"
                  />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="description">Descripción</Label>
                  <Textarea
                    id="description"
                    name="description"
                    value={eventData.description}
                    onChange={handleInputChange}
                    placeholder="Describe el evento"
                  />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="date">Fecha del Evento</Label>
                  <DatePicker onSelect={handleDateChange} defaultDate={new Date(eventData.date)} />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="projectId">Proyecto Relacionado</Label>
                  <Select onValueChange={handleSelectChange} defaultValue={eventData.projectId}>
                    <SelectTrigger>
                      <SelectValue placeholder="Selecciona un proyecto" />
                    </SelectTrigger>
                    <SelectContent>
                      {projects.map((project) => (
                        <SelectItem key={project.id} value={project.id}>
                          {project.title}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </CardContent>
              <CardFooter className="flex justify-end">
                <Button type="submit">
                  <Save className="mr-2 h-4 w-4" />
                  Guardar Cambios
                </Button>
              </CardFooter>
            </form>
          </Card>
        </main>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/resources/page.tsx" isEdit="true"
"use client"

import Link from "next/link"
import { BarChart3, Filter, Plus, Search, Edit, Trash } from "lucide-react"

import { Button } from "@/components/ui/button"
import { DashboardNav } from "@/components/dashboard-nav"
import { UserNav } from "@/components/user-nav"
import { Input } from "@/components/ui/input"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { useData } from "@/contexts/DataContext"

export default function ResourcesPage() {
  const { resources, deleteResource } = useData()

return (
    <div className="flex min-h-screen flex-col">
      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center justify-between">
          <Link href="/" className="flex items-center gap-2 font-bold text-xl">
            <BarChart3 className="h-6 w-6" />
            <span>ProjectPro</span>
          </Link>
          <UserNav />
        </div>
      </header>
      <div className="grid flex-1 md:grid-cols-[220px_1fr]">
        <aside className="hidden border-r bg-muted/40 md:block">
          <DashboardNav />
        </aside>
        <main className="flex flex-col gap-6 p-6">
          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <h1 className="text-3xl font-bold tracking-tight">Recursos</h1>
            <div className="flex items-center gap-2">
              <Link href="/resources/new">
                <Button>
                  <Plus className="mr-2 h-4 w-4" />
                  Nuevo Recurso
                </Button>
              </Link>
            </div>
          </div>

<div className="flex flex-col gap-4 sm:flex-row sm:items-center">
            <div className="relative w-full sm:w-80">
              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
              <Input placeholder="Buscar recursos..." className="pl-8" />
            </div>
            <Button variant="outline" size="sm" className="h-9">
              <Filter className="mr-2 h-4 w-4" />
              Filtrar
            </Button>
          </div>

<Table>
            <TableHeader>
              <TableRow>
                <TableHead>Nombre</TableHead>
                <TableHead>Tipo</TableHead>
                <TableHead>Cantidad</TableHead>
                <TableHead>Asignado a</TableHead>
                <TableHead>Acciones</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {resources.map((resource) => (
                <TableRow key={resource.id}>
                  <TableCell>{resource.name}</TableCell>
                  <TableCell>{resource.type}</TableCell>
                  <TableCell>{resource.quantity}</TableCell>
                  <TableCell>{resource.assignedTo}</TableCell>
                  <TableCell>
                    <div className="flex items-center gap-2">
                      <Link href={`/resources/edit/${resource.id}`}>
                        <Button variant="outline" size="sm">
                          <Edit className="h-4 w-4" />
                        </Button>
                      </Link>
                      <Button variant="outline" size="sm" onClick={() => deleteResource(resource.id)}>
                        <Trash className="h-4 w-4" />
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </main>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/resources/edit/[id]/page.tsx"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
import { BarChart3, Save, X } from "lucide-react"

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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { DashboardNav } from "@/components/dashboard-nav"
import { UserNav } from "@/components/user-nav"
import { useData } from "@/contexts/DataContext"

export default function EditResourcePage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const { resources, editResource, projects } = useData()
  const [resourceData, setResourceData] = useState({
    name: "",
    type: "",
    quantity: 0,
    assignedTo: "",
  })

useEffect(() => {
    const resource = resources.find((r) => r.id === params.id)
    if (resource) {
      setResourceData(resource)
    }
  }, [resources, params.id])

const handleSelectChange = (name: string) => (value: string) => {
    setResourceData((prev) => ({ ...prev, [name]: value }))
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    editResource(params.id, resourceData)
    router.push("/resources")
  }

return (
    <div className="flex min-h-screen flex-col">
      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center justify-between">
          <Link href="/" className="flex items-center gap-2 font-bold text-xl">
            <BarChart3 className="h-6 w-6" />
            <span>ProjectPro</span>
          </Link>
          <UserNav />
        </div>
      </header>
      <div className="grid flex-1 md:grid-cols-[220px_1fr]">
        <aside className="hidden border-r bg-muted/40 md:block">
          <DashboardNav />
        </aside>
        <main className="flex flex-col gap-6 p-6">
          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <h1 className="text-3xl font-bold tracking-tight">Editar Recurso</h1>
            <div className="flex items-center gap-2">
              <Link href="/resources">
                <Button variant="outline">
                  <X className="mr-2 h-4 w-4" />
                  Cancelar
                </Button>
              </Link>
            </div>
          </div>

<Card>
            <form onSubmit={handleSubmit}>
              <CardHeader>
                <CardTitle>Información del Recurso</CardTitle>
                <CardDescription>Edita los detalles del recurso</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid gap-2">
                  <Label htmlFor="name">Nombre del Recurso</Label>
                  <Input
                    id="name"
                    name="name"
                    value={resourceData.name}
                    onChange={handleInputChange}
                    placeholder="Ingresa el nombre del recurso"
                  />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="type">Tipo de Recurso</Label>
                  <Select onValueChange={handleSelectChange("type")} defaultValue={resourceData.type}>
                    <SelectTrigger>
                      <SelectValue placeholder="Selecciona el tipo de recurso" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="hardware">Hardware</SelectItem>
                      <SelectItem value="software">Software</SelectItem>
                      <SelectItem value="human">Humano</SelectItem>
                      <SelectItem value="financial">Financiero</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="quantity">Cantidad</Label>
                  <Input
                    id="quantity"
                    name="quantity"
                    type="number"
                    value={resourceData.quantity}
                    onChange={handleInputChange}
                    placeholder="Ingresa la cantidad"
                  />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="assignedTo">Asignado a</Label>
                  <Select onValueChange={handleSelectChange("assignedTo")} defaultValue={resourceData.assignedTo}>
                    <SelectTrigger>
                      <SelectValue placeholder="Selecciona un proyecto" />
                    </SelectTrigger>
                    <SelectContent>
                      {projects.map((project) => (
                        <SelectItem key={project.id} value={project.id}>
                          {project.title}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </CardContent>
              <CardFooter className="flex justify-end">
                <Button type="submit">
                  <Save className="mr-2 h-4 w-4" />
                  Guardar Cambios
                </Button>
              </CardFooter>
            </form>
          </Card>
        </main>
      </div>
    </div>
  )
}
</article></body></html>