feat: add task seeding script and update dependencies

- Introduced a new script `seed-tasks.js` to create test tasks for Dolibarr projects.
- Updated `package.json` and `package-lock.json` to include new Radix UI components and TanStack Table.
- Added TypeScript types for tasks in `types/task.ts`.
- Enhanced project task management with new task templates and improved task creation logic.

app/proyectos/[id]/page.tsx

@@ -1,19 +1,27 @@
-import { notFound } from 'next/navigation';
+import { notFound } from "next/navigation";
-import { getProjectById } from '@/lib/projectsService';
+import { getProjectById } from "@/lib/projectsService";
-import ProjectDetail from '@/components/dashboard/project-detail';
+import { ProjectDetailView } from "@/components/project-detail";
 
 interface PageProps {
-  params: {
+  params: Promise<{
     id: string;
-  };
+  }>;
 }
 
 /**
  * Página de detalle de proyecto
  * Ruta dinámica: /proyectos/[id]
+ * 
+ * Muestra información completa del proyecto incluyendo:
+ * - Header con información principal
+ * - Estadísticas (progreso, presupuesto, fechas, tareas)
+ * - Tabs con resumen, tareas y detalles
+ * - Tabla de tareas con filtros y ordenación
  */
 export default async function ProjectDetailPage({ params }: PageProps) {
-  const projectId = parseInt(params.id);
+  // Await params en Next.js 16
+  const resolvedParams = await params;
+  const projectId = parseInt(resolvedParams.id);
 
   if (isNaN(projectId)) {
     notFound();
@@ -25,5 +33,30 @@ export default async function ProjectDetailPage({ params }: PageProps) {
     notFound();
   }
 
-  return <ProjectDetail project={project} />;
+  return <ProjectDetailView project={project} />;
+}
+
+// Metadata dinámica para SEO
+export async function generateMetadata({ params }: PageProps) {
+  const resolvedParams = await params;
+  const projectId = parseInt(resolvedParams.id);
+  
+  if (isNaN(projectId)) {
+    return { title: "Proyecto no encontrado" };
+  }
+
+  try {
+    const project = await getProjectById(projectId);
+    
+    if (!project) {
+      return { title: "Proyecto no encontrado" };
+    }
+
+    return {
+      title: `${project.name} - Proyecto`,
+      description: project.description || `Detalles del proyecto ${project.ref}`,
+    };
+  } catch {
+    return { title: "Proyecto" };
+  }
 }

app/proyectos/page.tsx

@@ -0,0 +1,22 @@
+import { FolderKanban } from "lucide-react";
+import { ProjectsTable } from "@/components/projects/projects-table";
+
+export default function ProjectsPage() {
+  return (
+    <div className="flex flex-col gap-6 p-6">
+      {/* Header */}
+      <div className="flex flex-col gap-1">
+        <div className="flex items-center gap-2">
+          <FolderKanban className="h-6 w-6 text-primary" />
+          <h1 className="text-2xl font-bold tracking-tight">Proyectos</h1>
+        </div>
+        <p className="text-muted-foreground">
+          Gestiona y visualiza todos tus proyectos en un solo lugar.
+        </p>
+      </div>
+
+      {/* Data Table */}
+      <ProjectsTable />
+    </div>
+  );
+}

components/project-detail/index.ts

@@ -0,0 +1,6 @@
+export { ProjectHeader } from "./project-header";
+export { ProjectStats } from "./project-stats";
+export { ProjectInfo } from "./project-info";
+export { TasksSection } from "./tasks-section";
+export { ProjectDetailView, ProjectDetailSkeleton } from "./project-detail-view";
+export { taskColumns } from "./task-columns";

components/project-detail/project-detail-view.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { FolderKanban, RefreshCw, LayoutDashboard, ListTodo, FileText } from "lucide-react";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Card, CardContent } from "@/components/ui/card";
+
+import { ProjectHeader } from "./project-header";
+import { ProjectStats } from "./project-stats";
+import { ProjectInfo } from "./project-info";
+import { TasksSection } from "./tasks-section";
+
+import { Project } from "@/types/project";
+import { Task } from "@/types/task";
+import { getTasksByProjectId, calculateTaskStats } from "@/lib/tasksService";
+
+interface ProjectDetailViewProps {
+  project: Project;
+}
+
+// Skeleton para loading (exportado para uso externo)
+export function ProjectDetailSkeleton() {
+  return (
+    <div className="space-y-6 p-6">
+      {/* Header skeleton */}
+      <div className="flex items-start gap-4">
+        <Skeleton className="h-16 w-16 rounded-full" />
+        <div className="space-y-2">
+          <Skeleton className="h-8 w-64" />
+          <Skeleton className="h-4 w-32" />
+        </div>
+      </div>
+      
+      {/* Stats skeleton */}
+      <div className="grid grid-cols-4 gap-4">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <Card key={i}>
+            <CardContent className="p-4">
+              <Skeleton className="h-4 w-20 mb-2" />
+              <Skeleton className="h-8 w-24" />
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+      
+      {/* Content skeleton */}
+      <div className="grid grid-cols-3 gap-6">
+        <div className="col-span-2 space-y-4">
+          <Skeleton className="h-48 w-full" />
+          <Skeleton className="h-48 w-full" />
+        </div>
+        <div className="space-y-4">
+          <Skeleton className="h-64 w-full" />
+          <Skeleton className="h-48 w-full" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Estado de error
+function ErrorState({ onRetry }: { onRetry: () => void }) {
+  return (
+    <div className="flex flex-col items-center justify-center py-12 text-center">
+      <div className="p-3 rounded-full bg-destructive/10 mb-4">
+        <FolderKanban className="h-8 w-8 text-destructive" />
+      </div>
+      <h3 className="text-lg font-semibold mb-1">Error al cargar las tareas</h3>
+      <p className="text-sm text-muted-foreground mb-4 max-w-sm">
+        No se pudieron cargar las tareas del proyecto. Por favor, intenta de nuevo.
+      </p>
+      <Button onClick={onRetry} variant="outline">
+        <RefreshCw className="h-4 w-4 mr-2" />
+        Reintentar
+      </Button>
+    </div>
+  );
+}
+
+export function ProjectDetailView({ project }: ProjectDetailViewProps) {
+  const [tasks, setTasks] = useState<Task[]>([]);
+  const [isLoadingTasks, setIsLoadingTasks] = useState(true);
+  const [tasksError, setTasksError] = useState<string | null>(null);
+
+  // Cargar tareas
+  const fetchTasks = useCallback(async () => {
+    setIsLoadingTasks(true);
+    setTasksError(null);
+    try {
+      const projectTasks = await getTasksByProjectId(project.id);
+      setTasks(projectTasks);
+    } catch (error) {
+      console.error("Error fetching tasks:", error);
+      setTasksError("Error al cargar las tareas");
+    } finally {
+      setIsLoadingTasks(false);
+    }
+  }, [project.id]);
+
+  useEffect(() => {
+    fetchTasks();
+  }, [fetchTasks]);
+
+  // Calcular estadísticas de tareas
+  const taskStats = calculateTaskStats(tasks);
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Header del proyecto */}
+      <ProjectHeader project={project} />
+
+      {/* Contenido principal */}
+      <div className="p-6 space-y-6">
+        {/* Stats cards */}
+        <ProjectStats project={project} taskStats={taskStats} />
+
+        {/* Tabs de contenido */}
+        <Tabs defaultValue="overview" className="space-y-6">
+          <TabsList>
+            <TabsTrigger value="overview" className="gap-2">
+              <LayoutDashboard className="h-4 w-4" />
+              Resumen
+            </TabsTrigger>
+            <TabsTrigger value="tasks" className="gap-2">
+              <ListTodo className="h-4 w-4" />
+              Tareas
+              {tasks.length > 0 && (
+                <span className="ml-1 px-1.5 py-0.5 text-xs rounded-full bg-muted">
+                  {tasks.length}
+                </span>
+              )}
+            </TabsTrigger>
+            <TabsTrigger value="details" className="gap-2">
+              <FileText className="h-4 w-4" />
+              Detalles
+            </TabsTrigger>
+          </TabsList>
+
+          {/* Tab: Resumen */}
+          <TabsContent value="overview" className="space-y-6">
+            <ProjectInfo project={project} />
+            
+            {/* Preview de tareas */}
+            {!isLoadingTasks && tasks.length > 0 && (
+              <Card>
+                <CardContent className="pt-6">
+                  <div className="flex items-center justify-between mb-4">
+                    <h3 className="font-semibold flex items-center gap-2">
+                      <ListTodo className="h-4 w-4" />
+                      Tareas recientes
+                    </h3>
+                    <Button variant="ghost" size="sm" asChild>
+                      <a href="#tasks">Ver todas</a>
+                    </Button>
+                  </div>
+                  <TasksSection tasks={tasks.slice(0, 5)} />
+                </CardContent>
+              </Card>
+            )}
+          </TabsContent>
+
+          {/* Tab: Tareas */}
+          <TabsContent value="tasks">
+            {isLoadingTasks ? (
+              <div className="space-y-4">
+                <div className="flex items-center gap-2">
+                  <Skeleton className="h-9 w-[250px]" />
+                  <Skeleton className="h-9 w-[130px]" />
+                  <Skeleton className="h-9 w-[130px]" />
+                </div>
+                <div className="space-y-2">
+                  {Array.from({ length: 5 }).map((_, i) => (
+                    <Skeleton key={i} className="h-16 w-full" />
+                  ))}
+                </div>
+              </div>
+            ) : tasksError ? (
+              <ErrorState onRetry={fetchTasks} />
+            ) : (
+              <TasksSection tasks={tasks} />
+            )}
+          </TabsContent>
+
+          {/* Tab: Detalles */}
+          <TabsContent value="details">
+            <ProjectInfo project={project} />
+          </TabsContent>
+        </Tabs>
+      </div>
+    </div>
+  );
+}

components/project-detail/project-header.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { ArrowLeft, MoreHorizontal, Pencil, Trash2, Share2, Copy } from "lucide-react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Project, ProjectStatus } from "@/types/project";
+
+interface ProjectHeaderProps {
+  project: Project;
+}
+
+// Función para generar iniciales
+function getInitials(name: string): string {
+  return name
+    .split(" ")
+    .map((word) => word[0])
+    .join("")
+    .toUpperCase()
+    .slice(0, 2);
+}
+
+// Componente para el badge de estado
+function StatusBadge({ status }: { status: ProjectStatus }) {
+  const statusConfig: Record<ProjectStatus, { label: string; className: string }> = {
+    "0": {
+      label: "Borrador",
+      className: "bg-gray-100 text-gray-700 border-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-700",
+    },
+    "1": {
+      label: "Abierto",
+      className: "bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-900/30 dark:text-blue-400 dark:border-blue-800",
+    },
+    "2": {
+      label: "Cerrado",
+      className: "bg-green-100 text-green-700 border-green-200 dark:bg-green-900/30 dark:text-green-400 dark:border-green-800",
+    },
+  };
+
+  const config = statusConfig[status] || statusConfig["0"];
+
+  return (
+    <Badge variant="outline" className={`${config.className} text-sm px-3 py-1`}>
+      {config.label}
+    </Badge>
+  );
+}
+
+export function ProjectHeader({ project }: ProjectHeaderProps) {
+  const router = useRouter();
+  const initials = getInitials(project.name);
+
+  const handleCopyRef = () => {
+    navigator.clipboard.writeText(project.ref);
+  };
+
+  return (
+    <div className="border-b bg-card">
+      <div className="px-6 py-4">
+        {/* Navegación */}
+        <div className="flex items-center gap-2 text-sm text-muted-foreground mb-4">
+          <Link href="/proyectos" className="hover:text-foreground transition-colors">
+            Proyectos
+          </Link>
+          <span>/</span>
+          <span className="text-foreground font-medium">{project.ref}</span>
+        </div>
+
+        {/* Header principal */}
+        <div className="flex items-start justify-between gap-4">
+          <div className="flex items-start gap-4">
+            {/* Avatar */}
+            <Avatar className="h-16 w-16 shrink-0">
+              <AvatarFallback className="bg-gradient-to-br from-blue-500 to-purple-600 text-white font-semibold text-xl">
+                {initials}
+              </AvatarFallback>
+            </Avatar>
+
+            {/* Info principal */}
+            <div className="space-y-1">
+              <div className="flex items-center gap-3">
+                <h1 className="text-2xl font-bold tracking-tight">{project.name}</h1>
+                <StatusBadge status={project.status} />
+              </div>
+              
+              <div className="flex items-center gap-4 text-sm text-muted-foreground">
+                <button
+                  onClick={handleCopyRef}
+                  className="flex items-center gap-1.5 hover:text-foreground transition-colors font-mono"
+                  title="Copiar referencia"
+                >
+                  {project.ref}
+                  <Copy className="h-3.5 w-3.5" />
+                </button>
+                
+                {project.client !== "Sin cliente" && (
+                  <>
+                    <span className="text-muted-foreground/50">|</span>
+                    <span>{project.client}</span>
+                  </>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* Acciones */}
+          <div className="flex items-center gap-2">
+            <Button variant="outline" size="sm" onClick={() => router.back()}>
+              <ArrowLeft className="h-4 w-4 mr-2" />
+              Volver
+            </Button>
+            
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="icon" className="h-9 w-9">
+                  <MoreHorizontal className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem>
+                  <Pencil className="h-4 w-4 mr-2" />
+                  Editar proyecto
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <Share2 className="h-4 w-4 mr-2" />
+                  Compartir
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem className="text-destructive focus:text-destructive">
+                  <Trash2 className="h-4 w-4 mr-2" />
+                  Eliminar
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/project-detail/project-info.tsx

@@ -0,0 +1,256 @@
+import { 
+  FileText, 
+  Building2, 
+  Calendar, 
+  Clock, 
+  Hash,
+} from "lucide-react";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { Progress } from "@/components/ui/progress";
+import { Project } from "@/types/project";
+
+interface ProjectInfoProps {
+  project: Project;
+}
+
+// Formatear moneda
+function formatCurrency(amount: number): string {
+  return new Intl.NumberFormat("es-ES", {
+    style: "currency",
+    currency: "EUR",
+    minimumFractionDigits: 2,
+  }).format(amount);
+}
+
+// Formatear fecha
+function formatDate(dateString: string): string {
+  return new Date(dateString).toLocaleDateString("es-ES", {
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+  });
+}
+
+// Calcular duración en días
+function getDuration(startDate: string, endDate: string): number {
+  const start = new Date(startDate);
+  const end = new Date(endDate);
+  const diff = end.getTime() - start.getTime();
+  return Math.ceil(diff / (1000 * 60 * 60 * 24));
+}
+
+export function ProjectInfo({ project }: ProjectInfoProps) {
+  const duration = getDuration(project.startDate, project.endDate);
+  const budgetUsed = project.budget > 0 ? (project.spent / project.budget) * 100 : 0;
+  const budgetRemaining = project.budget - project.spent;
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+      {/* Columna principal - 2/3 */}
+      <div className="lg:col-span-2 space-y-6">
+        {/* Descripción */}
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="flex items-center gap-2 text-base">
+              <FileText className="h-4 w-4 text-muted-foreground" />
+              Descripción
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {project.description ? (
+              <p className="text-sm text-muted-foreground whitespace-pre-wrap leading-relaxed">
+                {project.description}
+              </p>
+            ) : (
+              <p className="text-sm text-muted-foreground italic">
+                Sin descripción disponible
+              </p>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Información financiera */}
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base">Información Financiera</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            {/* Barra de progreso del presupuesto */}
+            <div>
+              <div className="flex items-center justify-between mb-2">
+                <span className="text-sm font-medium">Uso del presupuesto</span>
+                <span className={`text-sm font-medium ${budgetUsed > 90 ? "text-red-500" : ""}`}>
+                  {budgetUsed.toFixed(1)}%
+                </span>
+              </div>
+              <Progress 
+                value={Math.min(budgetUsed, 100)} 
+                className={`h-2 ${budgetUsed > 100 ? "[&>div]:bg-red-500" : ""}`}
+              />
+            </div>
+
+            {/* Desglose */}
+            <div className="grid grid-cols-3 gap-4">
+              <div className="text-center p-4 rounded-lg bg-muted/50">
+                <p className="text-sm text-muted-foreground mb-1">Presupuesto</p>
+                <p className="text-xl font-bold">{formatCurrency(project.budget)}</p>
+              </div>
+              <div className="text-center p-4 rounded-lg bg-muted/50">
+                <p className="text-sm text-muted-foreground mb-1">Gastado</p>
+                <p className="text-xl font-bold text-blue-600 dark:text-blue-400">
+                  {formatCurrency(project.spent)}
+                </p>
+              </div>
+              <div className="text-center p-4 rounded-lg bg-muted/50">
+                <p className="text-sm text-muted-foreground mb-1">Restante</p>
+                <p className={`text-xl font-bold ${budgetRemaining < 0 ? "text-red-500" : "text-green-600 dark:text-green-400"}`}>
+                  {formatCurrency(budgetRemaining)}
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Timeline */}
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="flex items-center gap-2 text-base">
+              <Calendar className="h-4 w-4 text-muted-foreground" />
+              Timeline del Proyecto
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="relative">
+              {/* Línea de progreso */}
+              <div className="absolute top-4 left-0 right-0 h-1 bg-muted rounded-full">
+                <div 
+                  className="h-full bg-gradient-to-r from-blue-500 to-purple-600 rounded-full transition-all"
+                  style={{ width: `${project.progress}%` }}
+                />
+              </div>
+              
+              {/* Puntos */}
+              <div className="relative flex justify-between pt-8">
+                <div className="text-center">
+                  <div className="w-3 h-3 rounded-full bg-blue-500 mx-auto -mt-5 relative z-10" />
+                  <p className="text-xs text-muted-foreground mt-2">Inicio</p>
+                  <p className="text-sm font-medium">{formatDate(project.startDate)}</p>
+                </div>
+                <div className="text-center">
+                  <div className={`w-3 h-3 rounded-full mx-auto -mt-5 relative z-10 ${project.progress >= 100 ? "bg-green-500" : "bg-gray-300 dark:bg-gray-600"}`} />
+                  <p className="text-xs text-muted-foreground mt-2">Fin previsto</p>
+                  <p className="text-sm font-medium">{formatDate(project.endDate)}</p>
+                </div>
+              </div>
+            </div>
+            
+            <div className="mt-6 flex items-center justify-center gap-6 text-sm">
+              <div className="flex items-center gap-2">
+                <Clock className="h-4 w-4 text-muted-foreground" />
+                <span className="text-muted-foreground">Duración:</span>
+                <span className="font-medium">{duration} días</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="text-muted-foreground">Progreso:</span>
+                <span className="font-medium">{project.progress}%</span>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Sidebar - 1/3 */}
+      <div className="space-y-6">
+        {/* Detalles generales */}
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base">Detalles</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {/* Cliente */}
+            {project.client !== "Sin cliente" && (
+              <>
+                <div className="flex items-start gap-3">
+                  <Building2 className="h-4 w-4 text-muted-foreground mt-0.5" />
+                  <div>
+                    <p className="text-xs text-muted-foreground">Cliente</p>
+                    <p className="text-sm font-medium">{project.client}</p>
+                  </div>
+                </div>
+                <Separator />
+              </>
+            )}
+
+            {/* Referencia */}
+            <div className="flex items-start gap-3">
+              <Hash className="h-4 w-4 text-muted-foreground mt-0.5" />
+              <div>
+                <p className="text-xs text-muted-foreground">Referencia</p>
+                <p className="text-sm font-medium font-mono">{project.ref}</p>
+              </div>
+            </div>
+
+            <Separator />
+
+            {/* ID */}
+            <div className="flex items-start gap-3">
+              <Hash className="h-4 w-4 text-muted-foreground mt-0.5" />
+              <div>
+                <p className="text-xs text-muted-foreground">ID del proyecto</p>
+                <p className="text-sm font-medium font-mono">{project.id}</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Fechas */}
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base">Fechas</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="flex items-start gap-3">
+              <Calendar className="h-4 w-4 text-muted-foreground mt-0.5" />
+              <div>
+                <p className="text-xs text-muted-foreground">Fecha de inicio</p>
+                <p className="text-sm font-medium">{formatDate(project.startDate)}</p>
+              </div>
+            </div>
+
+            <Separator />
+
+            <div className="flex items-start gap-3">
+              <Calendar className="h-4 w-4 text-muted-foreground mt-0.5" />
+              <div>
+                <p className="text-xs text-muted-foreground">Fecha de fin</p>
+                <p className="text-sm font-medium">{formatDate(project.endDate)}</p>
+              </div>
+            </div>
+
+            <Separator />
+
+            <div className="flex items-start gap-3">
+              <Clock className="h-4 w-4 text-muted-foreground mt-0.5" />
+              <div>
+                <p className="text-xs text-muted-foreground">Creado</p>
+                <p className="text-sm font-medium">{formatDate(project.createdAt)}</p>
+              </div>
+            </div>
+
+            <Separator />
+
+            <div className="flex items-start gap-3">
+              <Clock className="h-4 w-4 text-muted-foreground mt-0.5" />
+              <div>
+                <p className="text-xs text-muted-foreground">Última actualización</p>
+                <p className="text-sm font-medium">{formatDate(project.updatedAt)}</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

components/project-detail/project-stats.tsx

@@ -0,0 +1,158 @@
+import { 
+  TrendingUp, 
+  DollarSign, 
+  Calendar, 
+  Clock,
+  CheckCircle2,
+  ListTodo,
+  AlertTriangle
+} from "lucide-react";
+
+import { Card, CardContent } from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import { Project } from "@/types/project";
+
+interface ProjectStatsProps {
+  project: Project;
+  taskStats: {
+    total: number;
+    completed: number;
+    inProgress: number;
+    highPriority: number;
+    overdue: number;
+    completionRate: number;
+    totalPlannedHours: number;
+    totalWorkedHours: number;
+  };
+}
+
+// Formatear moneda
+function formatCurrency(amount: number): string {
+  return new Intl.NumberFormat("es-ES", {
+    style: "currency",
+    currency: "EUR",
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+  }).format(amount);
+}
+
+// Formatear fecha
+function formatDate(dateString: string): string {
+  return new Date(dateString).toLocaleDateString("es-ES", {
+    day: "numeric",
+    month: "short",
+  });
+}
+
+// Calcular días restantes
+function getDaysRemaining(endDate: string): number {
+  const end = new Date(endDate);
+  const today = new Date();
+  const diff = end.getTime() - today.getTime();
+  return Math.ceil(diff / (1000 * 60 * 60 * 24));
+}
+
+export function ProjectStats({ project, taskStats }: ProjectStatsProps) {
+  const daysRemaining = getDaysRemaining(project.endDate);
+  const isOverdue = daysRemaining < 0;
+  const budgetUsedPercent = project.budget > 0 ? (project.spent / project.budget) * 100 : 0;
+
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+      {/* Progreso */}
+      <Card>
+        <CardContent className="p-4">
+          <div className="flex items-center gap-3">
+            <div className="p-2 rounded-lg bg-blue-100 dark:bg-blue-900/30">
+              <TrendingUp className="h-5 w-5 text-blue-600 dark:text-blue-400" />
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="text-sm text-muted-foreground">Progreso</p>
+              <p className="text-2xl font-bold">{project.progress}%</p>
+            </div>
+          </div>
+          <Progress value={project.progress} className="mt-3 h-1.5" />
+        </CardContent>
+      </Card>
+
+      {/* Presupuesto */}
+      <Card>
+        <CardContent className="p-4">
+          <div className="flex items-center gap-3">
+            <div className="p-2 rounded-lg bg-green-100 dark:bg-green-900/30">
+              <DollarSign className="h-5 w-5 text-green-600 dark:text-green-400" />
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="text-sm text-muted-foreground">Presupuesto</p>
+              <p className="text-2xl font-bold">{formatCurrency(project.budget)}</p>
+            </div>
+          </div>
+          <div className="mt-3 flex items-center justify-between text-xs">
+            <span className="text-muted-foreground">
+              Usado: {formatCurrency(project.spent)}
+            </span>
+            <span className={budgetUsedPercent > 90 ? "text-red-500" : "text-muted-foreground"}>
+              {budgetUsedPercent.toFixed(0)}%
+            </span>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Fecha límite */}
+      <Card>
+        <CardContent className="p-4">
+          <div className="flex items-center gap-3">
+            <div className={`p-2 rounded-lg ${isOverdue ? "bg-red-100 dark:bg-red-900/30" : "bg-purple-100 dark:bg-purple-900/30"}`}>
+              <Calendar className={`h-5 w-5 ${isOverdue ? "text-red-600 dark:text-red-400" : "text-purple-600 dark:text-purple-400"}`} />
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="text-sm text-muted-foreground">Fecha límite</p>
+              <p className="text-2xl font-bold">{formatDate(project.endDate)}</p>
+            </div>
+          </div>
+          <p className={`mt-3 text-xs ${isOverdue ? "text-red-500" : "text-muted-foreground"}`}>
+            {isOverdue 
+              ? `${Math.abs(daysRemaining)} días de retraso` 
+              : `${daysRemaining} días restantes`
+            }
+          </p>
+        </CardContent>
+      </Card>
+
+      {/* Tareas */}
+      <Card>
+        <CardContent className="p-4">
+          <div className="flex items-center gap-3">
+            <div className="p-2 rounded-lg bg-orange-100 dark:bg-orange-900/30">
+              <ListTodo className="h-5 w-5 text-orange-600 dark:text-orange-400" />
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="text-sm text-muted-foreground">Tareas</p>
+              <p className="text-2xl font-bold">{taskStats.completed}/{taskStats.total}</p>
+            </div>
+          </div>
+          <div className="mt-3 flex items-center gap-3 text-xs">
+            {taskStats.highPriority > 0 && (
+              <span className="flex items-center gap-1 text-red-500">
+                <AlertTriangle className="h-3 w-3" />
+                {taskStats.highPriority} alta prioridad
+              </span>
+            )}
+            {taskStats.overdue > 0 && (
+              <span className="flex items-center gap-1 text-yellow-600 dark:text-yellow-500">
+                <Clock className="h-3 w-3" />
+                {taskStats.overdue} vencidas
+              </span>
+            )}
+            {taskStats.highPriority === 0 && taskStats.overdue === 0 && (
+              <span className="flex items-center gap-1 text-green-600 dark:text-green-500">
+                <CheckCircle2 className="h-3 w-3" />
+                Todo en orden
+              </span>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

components/project-detail/task-columns.tsx

@@ -0,0 +1,254 @@
+"use client";
+
+import { ColumnDef } from "@tanstack/react-table";
+import { 
+  ArrowUpDown, 
+  MoreHorizontal, 
+  Eye, 
+  Pencil, 
+  Trash2,
+  Clock,
+  AlertTriangle,
+  CheckCircle2
+} from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Progress } from "@/components/ui/progress";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { 
+  Task, 
+  TaskStatus, 
+  TaskPriority, 
+  TASK_STATUS_CONFIG, 
+  TASK_PRIORITY_CONFIG 
+} from "@/types/task";
+
+// Badge de estado
+function TaskStatusBadge({ status }: { status: TaskStatus }) {
+  const config = TASK_STATUS_CONFIG[status];
+  
+  return (
+    <Badge variant="outline" className={config.bgClass}>
+      {status === '2' && <CheckCircle2 className="h-3 w-3 mr-1" />}
+      {config.label}
+    </Badge>
+  );
+}
+
+// Badge de prioridad
+function TaskPriorityBadge({ priority }: { priority: TaskPriority }) {
+  const config = TASK_PRIORITY_CONFIG[priority];
+  
+  if (priority === '0') {
+    return null;
+  }
+  
+  return (
+    <Badge variant="outline" className={config.bgClass}>
+      {priority === '3' && <AlertTriangle className="h-3 w-3 mr-1" />}
+      {config.label}
+    </Badge>
+  );
+}
+
+// Barra de progreso compacta
+function TaskProgress({ progress }: { progress: number }) {
+  const getColorClass = (value: number) => {
+    if (value >= 100) return '[&>div]:bg-green-500';
+    if (value >= 75) return '[&>div]:bg-blue-500';
+    if (value >= 50) return '[&>div]:bg-yellow-500';
+    return '[&>div]:bg-gray-400';
+  };
+
+  return (
+    <div className="flex items-center gap-2">
+      <Progress value={progress} className={`w-16 h-1.5 ${getColorClass(progress)}`} />
+      <span className="text-xs text-muted-foreground w-8">{progress}%</span>
+    </div>
+  );
+}
+
+// Formatear fecha
+function formatDate(dateString: string | null): string {
+  if (!dateString) return '-';
+  return new Date(dateString).toLocaleDateString('es-ES', {
+    day: '2-digit',
+    month: 'short',
+  });
+}
+
+// Formatear horas
+function formatHours(hours: number): string {
+  if (hours === 0) return '-';
+  return `${hours}h`;
+}
+
+export const taskColumns: ColumnDef<Task>[] = [
+  // Checkbox
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Seleccionar todo"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Seleccionar fila"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  // Título
+  {
+    accessorKey: "title",
+    header: ({ column }) => (
+      <Button
+        variant="ghost"
+        size="sm"
+        className="-ml-3 h-8"
+        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+      >
+        Tarea
+        <ArrowUpDown className="ml-2 h-4 w-4" />
+      </Button>
+    ),
+    cell: ({ row }) => (
+      <div className="max-w-[300px]">
+        <p className="font-medium truncate">{row.getValue("title")}</p>
+        {row.original.ref && (
+          <p className="text-xs text-muted-foreground font-mono">{row.original.ref}</p>
+        )}
+      </div>
+    ),
+  },
+  // Estado
+  {
+    accessorKey: "status",
+    header: "Estado",
+    cell: ({ row }) => <TaskStatusBadge status={row.getValue("status")} />,
+    filterFn: (row, id, value) => value.includes(row.getValue(id)),
+  },
+  // Prioridad
+  {
+    accessorKey: "priority",
+    header: "Prioridad",
+    cell: ({ row }) => <TaskPriorityBadge priority={row.getValue("priority")} />,
+    filterFn: (row, id, value) => value.includes(row.getValue(id)),
+  },
+  // Progreso
+  {
+    accessorKey: "progress",
+    header: ({ column }) => (
+      <Button
+        variant="ghost"
+        size="sm"
+        className="-ml-3 h-8"
+        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+      >
+        Progreso
+        <ArrowUpDown className="ml-2 h-4 w-4" />
+      </Button>
+    ),
+    cell: ({ row }) => <TaskProgress progress={row.getValue("progress")} />,
+  },
+  // Horas
+  {
+    id: "hours",
+    header: () => (
+      <div className="flex items-center gap-1">
+        <Clock className="h-3.5 w-3.5" />
+        Horas
+      </div>
+    ),
+    cell: ({ row }) => (
+      <div className="text-sm">
+        <span className="font-medium">{formatHours(row.original.workedHours)}</span>
+        {row.original.plannedHours > 0 && (
+          <span className="text-muted-foreground"> / {formatHours(row.original.plannedHours)}</span>
+        )}
+      </div>
+    ),
+  },
+  // Fecha límite
+  {
+    accessorKey: "endDate",
+    header: ({ column }) => (
+      <Button
+        variant="ghost"
+        size="sm"
+        className="-ml-3 h-8"
+        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+      >
+        Fecha límite
+        <ArrowUpDown className="ml-2 h-4 w-4" />
+      </Button>
+    ),
+    cell: ({ row }) => {
+      const endDate = row.original.endDate || row.original.plannedEndDate;
+      const isOverdue = endDate && new Date(endDate) < new Date() && row.original.status !== '2';
+      
+      return (
+        <span className={`text-sm ${isOverdue ? 'text-red-500 font-medium' : 'text-muted-foreground'}`}>
+          {formatDate(endDate)}
+          {isOverdue && <AlertTriangle className="h-3 w-3 ml-1 inline" />}
+        </span>
+      );
+    },
+  },
+  // Acciones
+  {
+    id: "actions",
+    enableHiding: false,
+    cell: ({ row }) => {
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="h-8 w-8 p-0">
+              <span className="sr-only">Abrir menú</span>
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuLabel>Acciones</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <Eye className="mr-2 h-4 w-4" />
+              Ver detalles
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <Pencil className="mr-2 h-4 w-4" />
+              Editar
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <Clock className="mr-2 h-4 w-4" />
+              Registrar tiempo
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="text-destructive focus:text-destructive">
+              <Trash2 className="mr-2 h-4 w-4" />
+              Eliminar
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    },
+  },
+];

components/project-detail/tasks-section.tsx

@@ -0,0 +1,312 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import { 
+  Search, 
+  X, 
+  Plus, 
+  ListTodo, 
+  CheckCircle2, 
+  Clock, 
+  AlertTriangle,
+  LayoutGrid,
+  List
+} from "lucide-react";
+
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { DataTable } from "@/components/projects/data-table";
+import { taskColumns } from "./task-columns";
+import { Task, TASK_STATUS_CONFIG, TASK_PRIORITY_CONFIG } from "@/types/task";
+
+interface TasksSectionProps {
+  tasks: Task[];
+  isLoading?: boolean;
+}
+
+// Tarjeta de tarea para vista grid
+function TaskCard({ task }: { task: Task }) {
+  const statusConfig = TASK_STATUS_CONFIG[task.status];
+  const priorityConfig = TASK_PRIORITY_CONFIG[task.priority];
+  
+  const isOverdue = (() => {
+    const endDate = task.endDate || task.plannedEndDate;
+    return endDate && new Date(endDate) < new Date() && task.status !== '2';
+  })();
+
+  return (
+    <Card className={`hover:shadow-md transition-shadow ${isOverdue ? 'border-red-200 dark:border-red-900' : ''}`}>
+      <CardContent className="p-4">
+        <div className="space-y-3">
+          {/* Header */}
+          <div className="flex items-start justify-between gap-2">
+            <div className="flex-1 min-w-0">
+              <p className="font-medium truncate">{task.title}</p>
+              {task.ref && (
+                <p className="text-xs text-muted-foreground font-mono">{task.ref}</p>
+              )}
+            </div>
+            {task.priority !== '0' && (
+              <Badge variant="outline" className={priorityConfig.bgClass}>
+                {task.priority === '3' && <AlertTriangle className="h-3 w-3 mr-1" />}
+                {priorityConfig.label}
+              </Badge>
+            )}
+          </div>
+
+          {/* Progreso */}
+          <div className="space-y-1">
+            <div className="flex items-center justify-between text-xs">
+              <span className="text-muted-foreground">Progreso</span>
+              <span className="font-medium">{task.progress}%</span>
+            </div>
+            <div className="w-full h-1.5 bg-muted rounded-full overflow-hidden">
+              <div 
+                className={`h-full rounded-full transition-all ${
+                  task.progress >= 100 ? 'bg-green-500' : 
+                  task.progress >= 50 ? 'bg-blue-500' : 'bg-gray-400'
+                }`}
+                style={{ width: `${task.progress}%` }}
+              />
+            </div>
+          </div>
+
+          {/* Footer */}
+          <div className="flex items-center justify-between pt-2">
+            <Badge variant="outline" className={statusConfig.bgClass}>
+              {task.status === '2' && <CheckCircle2 className="h-3 w-3 mr-1" />}
+              {statusConfig.label}
+            </Badge>
+            
+            {(task.endDate || task.plannedEndDate) && (
+              <span className={`text-xs flex items-center gap-1 ${isOverdue ? 'text-red-500' : 'text-muted-foreground'}`}>
+                <Clock className="h-3 w-3" />
+                {new Date(task.endDate || task.plannedEndDate!).toLocaleDateString('es-ES', {
+                  day: '2-digit',
+                  month: 'short',
+                })}
+                {isOverdue && <AlertTriangle className="h-3 w-3" />}
+              </span>
+            )}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+// Estado vacío
+function EmptyTasks() {
+  return (
+    <div className="flex flex-col items-center justify-center py-12 text-center">
+      <div className="p-3 rounded-full bg-muted mb-4">
+        <ListTodo className="h-8 w-8 text-muted-foreground" />
+      </div>
+      <h3 className="text-lg font-semibold mb-1">Sin tareas</h3>
+      <p className="text-sm text-muted-foreground mb-4 max-w-sm">
+        Este proyecto aún no tiene tareas asignadas. Crea la primera tarea para comenzar.
+      </p>
+      <Button>
+        <Plus className="h-4 w-4 mr-2" />
+        Crear tarea
+      </Button>
+    </div>
+  );
+}
+
+export function TasksSection({ tasks, isLoading }: TasksSectionProps) {
+  const [searchValue, setSearchValue] = useState("");
+  const [statusFilter, setStatusFilter] = useState("all");
+  const [priorityFilter, setPriorityFilter] = useState("all");
+  const [viewMode, setViewMode] = useState<"table" | "grid">("table");
+
+  // Filtrar tareas
+  const filteredTasks = useMemo(() => {
+    let result = [...tasks];
+
+    // Búsqueda
+    if (searchValue) {
+      const search = searchValue.toLowerCase();
+      result = result.filter(
+        (task) =>
+          task.title.toLowerCase().includes(search) ||
+          task.ref?.toLowerCase().includes(search) ||
+          task.description?.toLowerCase().includes(search)
+      );
+    }
+
+    // Filtro de estado
+    if (statusFilter !== "all") {
+      result = result.filter((task) => task.status === statusFilter);
+    }
+
+    // Filtro de prioridad
+    if (priorityFilter !== "all") {
+      result = result.filter((task) => task.priority === priorityFilter);
+    }
+
+    return result;
+  }, [tasks, searchValue, statusFilter, priorityFilter]);
+
+  // Estadísticas rápidas
+  const stats = useMemo(() => ({
+    total: tasks.length,
+    completed: tasks.filter(t => t.status === '2').length,
+    inProgress: tasks.filter(t => t.status === '1').length,
+    highPriority: tasks.filter(t => t.priority === '3').length,
+  }), [tasks]);
+
+  // Limpiar filtros
+  const handleClearFilters = () => {
+    setSearchValue("");
+    setStatusFilter("all");
+    setPriorityFilter("all");
+  };
+
+  const isFiltered = searchValue !== "" || statusFilter !== "all" || priorityFilter !== "all";
+
+  if (tasks.length === 0 && !isLoading) {
+    return <EmptyTasks />;
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Stats rápidos */}
+      <div className="flex flex-wrap items-center gap-4 text-sm">
+        <div className="flex items-center gap-2">
+          <ListTodo className="h-4 w-4 text-muted-foreground" />
+          <span className="text-muted-foreground">Total:</span>
+          <span className="font-medium">{stats.total}</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <CheckCircle2 className="h-4 w-4 text-green-500" />
+          <span className="text-muted-foreground">Completadas:</span>
+          <span className="font-medium">{stats.completed}</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <Clock className="h-4 w-4 text-blue-500" />
+          <span className="text-muted-foreground">En progreso:</span>
+          <span className="font-medium">{stats.inProgress}</span>
+        </div>
+        {stats.highPriority > 0 && (
+          <div className="flex items-center gap-2">
+            <AlertTriangle className="h-4 w-4 text-red-500" />
+            <span className="text-muted-foreground">Alta prioridad:</span>
+            <span className="font-medium text-red-500">{stats.highPriority}</span>
+          </div>
+        )}
+      </div>
+
+      {/* Toolbar */}
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div className="flex flex-1 items-center gap-2">
+          {/* Búsqueda */}
+          <div className="relative w-full sm:w-[250px]">
+            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+            <Input
+              placeholder="Buscar tareas..."
+              value={searchValue}
+              onChange={(e) => setSearchValue(e.target.value)}
+              className="pl-8 h-9"
+            />
+          </div>
+
+          {/* Filtro estado */}
+          <Select value={statusFilter} onValueChange={setStatusFilter}>
+            <SelectTrigger className="w-[130px] h-9">
+              <SelectValue placeholder="Estado" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">Todos</SelectItem>
+              <SelectItem value="0">Borrador</SelectItem>
+              <SelectItem value="1">Validada</SelectItem>
+              <SelectItem value="2">Completada</SelectItem>
+            </SelectContent>
+          </Select>
+
+          {/* Filtro prioridad */}
+          <Select value={priorityFilter} onValueChange={setPriorityFilter}>
+            <SelectTrigger className="w-[130px] h-9">
+              <SelectValue placeholder="Prioridad" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">Todas</SelectItem>
+              <SelectItem value="3">Alta</SelectItem>
+              <SelectItem value="2">Media</SelectItem>
+              <SelectItem value="1">Baja</SelectItem>
+              <SelectItem value="0">Sin prioridad</SelectItem>
+            </SelectContent>
+          </Select>
+
+          {/* Limpiar */}
+          {isFiltered && (
+            <Button variant="ghost" size="sm" onClick={handleClearFilters} className="h-9 px-2">
+              Limpiar
+              <X className="ml-1 h-4 w-4" />
+            </Button>
+          )}
+        </div>
+
+        <div className="flex items-center gap-2">
+          {/* Toggle vista */}
+          <div className="flex items-center border rounded-md">
+            <Button
+              variant={viewMode === "table" ? "secondary" : "ghost"}
+              size="sm"
+              className="h-8 px-2 rounded-r-none"
+              onClick={() => setViewMode("table")}
+            >
+              <List className="h-4 w-4" />
+            </Button>
+            <Button
+              variant={viewMode === "grid" ? "secondary" : "ghost"}
+              size="sm"
+              className="h-8 px-2 rounded-l-none"
+              onClick={() => setViewMode("grid")}
+            >
+              <LayoutGrid className="h-4 w-4" />
+            </Button>
+          </div>
+
+          {/* Nueva tarea */}
+          <Button size="sm" className="h-9">
+            <Plus className="h-4 w-4 mr-2" />
+            Nueva tarea
+          </Button>
+        </div>
+      </div>
+
+      {/* Contenido */}
+      {viewMode === "table" ? (
+        <DataTable columns={taskColumns} data={filteredTasks} />
+      ) : (
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          {filteredTasks.map((task) => (
+            <TaskCard key={task.id} task={task} />
+          ))}
+        </div>
+      )}
+
+      {/* Mensaje sin resultados */}
+      {filteredTasks.length === 0 && tasks.length > 0 && (
+        <div className="text-center py-8">
+          <p className="text-muted-foreground">
+            No se encontraron tareas con los filtros aplicados.
+          </p>
+          <Button variant="link" onClick={handleClearFilters}>
+            Limpiar filtros
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}

components/projects/columns.tsx

@@ -0,0 +1,279 @@
+"use client";
+
+import { ColumnDef } from "@tanstack/react-table";
+import { ArrowUpDown, MoreHorizontal, Eye, Pencil, Trash2 } from "lucide-react";
+import Link from "next/link";
+
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Project, ProjectStatus, STATUS_CONFIG } from "@/types/project";
+
+// Componente para el badge de estado
+function StatusBadge({ status }: { status: ProjectStatus }) {
+  const config = STATUS_CONFIG[status];
+  
+  const colorClasses: Record<ProjectStatus, string> = {
+    '0': 'bg-gray-100 text-gray-700 hover:bg-gray-100/80 dark:bg-gray-800 dark:text-gray-300',
+    '1': 'bg-blue-100 text-blue-700 hover:bg-blue-100/80 dark:bg-blue-900/30 dark:text-blue-400',
+    '2': 'bg-green-100 text-green-700 hover:bg-green-100/80 dark:bg-green-900/30 dark:text-green-400',
+  };
+
+  return (
+    <Badge variant="outline" className={colorClasses[status]}>
+      {config?.label || 'Desconocido'}
+    </Badge>
+  );
+}
+
+// Componente para la barra de progreso
+function ProgressBar({ progress }: { progress: number }) {
+  const getProgressColor = (value: number) => {
+    if (value >= 75) return 'bg-green-500';
+    if (value >= 50) return 'bg-blue-500';
+    if (value >= 25) return 'bg-yellow-500';
+    return 'bg-gray-400';
+  };
+
+  return (
+    <div className="flex items-center gap-2">
+      <div className="w-24 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+        <div 
+          className={`h-full rounded-full transition-all ${getProgressColor(progress)}`}
+          style={{ width: `${Math.min(progress, 100)}%` }}
+        />
+      </div>
+      <span className="text-sm text-muted-foreground w-10">
+        {progress.toFixed(0)}%
+      </span>
+    </div>
+  );
+}
+
+// Formateador de moneda
+function formatCurrency(amount: number): string {
+  return new Intl.NumberFormat('es-ES', {
+    style: 'currency',
+    currency: 'EUR',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+  }).format(amount);
+}
+
+// Formateador de fecha
+function formatDate(dateString: string): string {
+  if (!dateString) return '-';
+  try {
+    return new Date(dateString).toLocaleDateString('es-ES', {
+      day: '2-digit',
+      month: 'short',
+      year: 'numeric',
+    });
+  } catch {
+    return '-';
+  }
+}
+
+export const projectColumns: ColumnDef<Project>[] = [
+  // Columna de selección
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Seleccionar todo"
+        className="translate-y-[2px]"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Seleccionar fila"
+        className="translate-y-[2px]"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  // Referencia
+  {
+    accessorKey: "ref",
+    header: ({ column }) => (
+      <Button
+        variant="ghost"
+        size="sm"
+        className="-ml-3 h-8"
+        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+      >
+        Referencia
+        <ArrowUpDown className="ml-2 h-4 w-4" />
+      </Button>
+    ),
+    cell: ({ row }) => (
+      <span className="font-mono text-sm text-muted-foreground">
+        {row.getValue("ref")}
+      </span>
+    ),
+  },
+  // Nombre del proyecto
+  {
+    accessorKey: "name",
+    header: ({ column }) => (
+      <Button
+        variant="ghost"
+        size="sm"
+        className="-ml-3 h-8"
+        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+      >
+        Nombre
+        <ArrowUpDown className="ml-2 h-4 w-4" />
+      </Button>
+    ),
+    cell: ({ row }) => (
+      <div className="max-w-[250px]">
+        <Link 
+          href={`/proyectos/${row.original.id}`}
+          className="font-medium hover:underline hover:text-primary transition-colors"
+        >
+          {row.getValue("name")}
+        </Link>
+      </div>
+    ),
+  },
+  // Cliente
+  {
+    accessorKey: "client",
+    header: "Cliente",
+    cell: ({ row }) => (
+      <span className="text-sm">
+        {row.getValue("client")}
+      </span>
+    ),
+  },
+  // Estado
+  {
+    accessorKey: "status",
+    header: "Estado",
+    cell: ({ row }) => <StatusBadge status={row.getValue("status")} />,
+    filterFn: (row, id, value) => {
+      return value.includes(row.getValue(id));
+    },
+  },
+  // Progreso
+  {
+    accessorKey: "progress",
+    header: ({ column }) => (
+      <Button
+        variant="ghost"
+        size="sm"
+        className="-ml-3 h-8"
+        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+      >
+        Progreso
+        <ArrowUpDown className="ml-2 h-4 w-4" />
+      </Button>
+    ),
+    cell: ({ row }) => <ProgressBar progress={row.getValue("progress")} />,
+  },
+  // Presupuesto
+  {
+    accessorKey: "budget",
+    header: ({ column }) => (
+      <Button
+        variant="ghost"
+        size="sm"
+        className="-ml-3 h-8"
+        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+      >
+        Presupuesto
+        <ArrowUpDown className="ml-2 h-4 w-4" />
+      </Button>
+    ),
+    cell: ({ row }) => (
+      <span className="font-medium tabular-nums">
+        {formatCurrency(row.getValue("budget"))}
+      </span>
+    ),
+  },
+  // Fecha inicio
+  {
+    accessorKey: "startDate",
+    header: ({ column }) => (
+      <Button
+        variant="ghost"
+        size="sm"
+        className="-ml-3 h-8"
+        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+      >
+        Inicio
+        <ArrowUpDown className="ml-2 h-4 w-4" />
+      </Button>
+    ),
+    cell: ({ row }) => (
+      <span className="text-sm text-muted-foreground">
+        {formatDate(row.getValue("startDate"))}
+      </span>
+    ),
+  },
+  // Fecha fin
+  {
+    accessorKey: "endDate",
+    header: "Fin",
+    cell: ({ row }) => (
+      <span className="text-sm text-muted-foreground">
+        {formatDate(row.getValue("endDate"))}
+      </span>
+    ),
+  },
+  // Acciones
+  {
+    id: "actions",
+    enableHiding: false,
+    cell: ({ row }) => {
+      const project = row.original;
+
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="h-8 w-8 p-0">
+              <span className="sr-only">Abrir menú</span>
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuLabel>Acciones</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem asChild>
+              <Link href={`/proyectos/${project.id}`} className="cursor-pointer">
+                <Eye className="mr-2 h-4 w-4" />
+                Ver detalles
+              </Link>
+            </DropdownMenuItem>
+            <DropdownMenuItem className="cursor-pointer">
+              <Pencil className="mr-2 h-4 w-4" />
+              Editar
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="cursor-pointer text-destructive focus:text-destructive">
+              <Trash2 className="mr-2 h-4 w-4" />
+              Eliminar
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    },
+  },
+];

components/projects/data-table-skeleton.tsx

@@ -0,0 +1,120 @@
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+export function DataTableSkeleton() {
+  return (
+    <div className="space-y-4">
+      {/* Toolbar skeleton */}
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div className="flex flex-1 items-center gap-2">
+          <Skeleton className="h-9 w-[300px]" />
+          <Skeleton className="h-9 w-[150px]" />
+        </div>
+        <div className="flex items-center gap-2">
+          <Skeleton className="h-9 w-[80px]" />
+          <Skeleton className="h-9 w-[100px]" />
+          <Skeleton className="h-9 w-[90px]" />
+        </div>
+      </div>
+
+      {/* Table skeleton */}
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[40px]">
+                <Skeleton className="h-4 w-4" />
+              </TableHead>
+              <TableHead>
+                <Skeleton className="h-4 w-20" />
+              </TableHead>
+              <TableHead>
+                <Skeleton className="h-4 w-24" />
+              </TableHead>
+              <TableHead>
+                <Skeleton className="h-4 w-16" />
+              </TableHead>
+              <TableHead>
+                <Skeleton className="h-4 w-14" />
+              </TableHead>
+              <TableHead>
+                <Skeleton className="h-4 w-20" />
+              </TableHead>
+              <TableHead>
+                <Skeleton className="h-4 w-24" />
+              </TableHead>
+              <TableHead>
+                <Skeleton className="h-4 w-16" />
+              </TableHead>
+              <TableHead>
+                <Skeleton className="h-4 w-16" />
+              </TableHead>
+              <TableHead className="w-[40px]" />
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {Array.from({ length: 10 }).map((_, index) => (
+              <TableRow key={index}>
+                <TableCell>
+                  <Skeleton className="h-4 w-4" />
+                </TableCell>
+                <TableCell>
+                  <Skeleton className="h-4 w-16" />
+                </TableCell>
+                <TableCell>
+                  <Skeleton className="h-4 w-32" />
+                </TableCell>
+                <TableCell>
+                  <Skeleton className="h-4 w-24" />
+                </TableCell>
+                <TableCell>
+                  <Skeleton className="h-6 w-16 rounded-full" />
+                </TableCell>
+                <TableCell>
+                  <div className="flex items-center gap-2">
+                    <Skeleton className="h-2 w-24 rounded-full" />
+                    <Skeleton className="h-4 w-8" />
+                  </div>
+                </TableCell>
+                <TableCell>
+                  <Skeleton className="h-4 w-20" />
+                </TableCell>
+                <TableCell>
+                  <Skeleton className="h-4 w-20" />
+                </TableCell>
+                <TableCell>
+                  <Skeleton className="h-4 w-20" />
+                </TableCell>
+                <TableCell>
+                  <Skeleton className="h-8 w-8" />
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* Pagination skeleton */}
+      <div className="flex items-center justify-between px-2">
+        <Skeleton className="h-4 w-[200px]" />
+        <div className="flex items-center space-x-6">
+          <Skeleton className="h-4 w-[150px]" />
+          <Skeleton className="h-4 w-[100px]" />
+          <div className="flex items-center space-x-2">
+            <Skeleton className="h-8 w-8" />
+            <Skeleton className="h-8 w-8" />
+            <Skeleton className="h-8 w-8" />
+            <Skeleton className="h-8 w-8" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/projects/data-table-toolbar.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import { Search, X, SlidersHorizontal, Download, Plus } from "lucide-react";
+
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { ProjectStatus, STATUS_CONFIG } from "@/types/project";
+
+interface DataTableToolbarProps {
+  searchValue: string;
+  onSearchChange: (value: string) => void;
+  statusFilter: string;
+  onStatusFilterChange: (value: string) => void;
+  selectedCount: number;
+  onClearFilters: () => void;
+}
+
+export function DataTableToolbar({
+  searchValue,
+  onSearchChange,
+  statusFilter,
+  onStatusFilterChange,
+  selectedCount,
+  onClearFilters,
+}: DataTableToolbarProps) {
+  const isFiltered = searchValue !== "" || statusFilter !== "all";
+
+  return (
+    <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+      <div className="flex flex-1 items-center gap-2">
+        {/* Búsqueda */}
+        <div className="relative w-full sm:w-[300px]">
+          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Buscar proyectos..."
+            value={searchValue}
+            onChange={(e) => onSearchChange(e.target.value)}
+            className="pl-8"
+          />
+        </div>
+
+        {/* Filtro por estado */}
+        <Select value={statusFilter} onValueChange={onStatusFilterChange}>
+          <SelectTrigger className="w-[150px]">
+            <SelectValue placeholder="Estado" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">Todos</SelectItem>
+            {(Object.entries(STATUS_CONFIG) as [ProjectStatus, { label: string }][]).map(
+              ([value, { label }]) => (
+                <SelectItem key={value} value={value}>
+                  {label}
+                </SelectItem>
+              )
+            )}
+          </SelectContent>
+        </Select>
+
+        {/* Botón limpiar filtros */}
+        {isFiltered && (
+          <Button
+            variant="ghost"
+            onClick={onClearFilters}
+            className="h-9 px-2 lg:px-3"
+          >
+            Limpiar
+            <X className="ml-2 h-4 w-4" />
+          </Button>
+        )}
+      </div>
+
+      <div className="flex items-center gap-2">
+        {/* Contador de seleccionados */}
+        {selectedCount > 0 && (
+          <Badge variant="secondary" className="rounded-sm px-2 font-normal">
+            {selectedCount} seleccionado(s)
+          </Badge>
+        )}
+
+        {/* Opciones de vista */}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" size="sm" className="h-9">
+              <SlidersHorizontal className="mr-2 h-4 w-4" />
+              Vista
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-[180px]">
+            <DropdownMenuLabel>Columnas visibles</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuCheckboxItem checked>
+              Referencia
+            </DropdownMenuCheckboxItem>
+            <DropdownMenuCheckboxItem checked>
+              Nombre
+            </DropdownMenuCheckboxItem>
+            <DropdownMenuCheckboxItem checked>
+              Cliente
+            </DropdownMenuCheckboxItem>
+            <DropdownMenuCheckboxItem checked>
+              Estado
+            </DropdownMenuCheckboxItem>
+            <DropdownMenuCheckboxItem checked>
+              Progreso
+            </DropdownMenuCheckboxItem>
+            <DropdownMenuCheckboxItem checked>
+              Presupuesto
+            </DropdownMenuCheckboxItem>
+            <DropdownMenuCheckboxItem checked>
+              Fechas
+            </DropdownMenuCheckboxItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        {/* Exportar */}
+        <Button variant="outline" size="sm" className="h-9">
+          <Download className="mr-2 h-4 w-4" />
+          Exportar
+        </Button>
+
+        {/* Nuevo proyecto */}
+        <Button size="sm" className="h-9">
+          <Plus className="mr-2 h-4 w-4" />
+          Nuevo
+        </Button>
+      </div>
+    </div>
+  );
+}

components/projects/data-table.tsx

@@ -0,0 +1,204 @@
+"use client";
+
+import * as React from "react";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+  searchKey?: string;
+  searchValue?: string;
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+  searchKey,
+  searchValue,
+}: DataTableProps<TData, TValue>) {
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+    },
+  });
+
+  // Aplicar filtro de búsqueda externo
+  React.useEffect(() => {
+    if (searchKey && searchValue !== undefined) {
+      table.getColumn(searchKey)?.setFilterValue(searchValue);
+    }
+  }, [searchKey, searchValue, table]);
+
+  return (
+    <div className="space-y-4">
+      {/* Tabla */}
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && "selected"}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
+                  No se encontraron resultados.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* Paginación */}
+      <div className="flex items-center justify-between px-2">
+        <div className="flex-1 text-sm text-muted-foreground">
+          {table.getFilteredSelectedRowModel().rows.length} de{" "}
+          {table.getFilteredRowModel().rows.length} fila(s) seleccionada(s).
+        </div>
+        <div className="flex items-center space-x-6 lg:space-x-8">
+          <div className="flex items-center space-x-2">
+            <p className="text-sm font-medium">Filas por página</p>
+            <Select
+              value={`${table.getState().pagination.pageSize}`}
+              onValueChange={(value) => {
+                table.setPageSize(Number(value));
+              }}
+            >
+              <SelectTrigger className="h-8 w-[70px]">
+                <SelectValue placeholder={table.getState().pagination.pageSize} />
+              </SelectTrigger>
+              <SelectContent side="top">
+                {[10, 20, 30, 40, 50].map((pageSize) => (
+                  <SelectItem key={pageSize} value={`${pageSize}`}>
+                    {pageSize}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex w-[100px] items-center justify-center text-sm font-medium">
+            Página {table.getState().pagination.pageIndex + 1} de{" "}
+            {table.getPageCount()}
+          </div>
+          <div className="flex items-center space-x-2">
+            <Button
+              variant="outline"
+              className="hidden h-8 w-8 p-0 lg:flex"
+              onClick={() => table.setPageIndex(0)}
+              disabled={!table.getCanPreviousPage()}
+            >
+              <span className="sr-only">Ir a la primera página</span>
+              <ChevronsLeft className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="outline"
+              className="h-8 w-8 p-0"
+              onClick={() => table.previousPage()}
+              disabled={!table.getCanPreviousPage()}
+            >
+              <span className="sr-only">Ir a la página anterior</span>
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="outline"
+              className="h-8 w-8 p-0"
+              onClick={() => table.nextPage()}
+              disabled={!table.getCanNextPage()}
+            >
+              <span className="sr-only">Ir a la siguiente página</span>
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="outline"
+              className="hidden h-8 w-8 p-0 lg:flex"
+              onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+              disabled={!table.getCanNextPage()}
+            >
+              <span className="sr-only">Ir a la última página</span>
+              <ChevronsRight className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/projects/empty-state.tsx

@@ -0,0 +1,34 @@
+import { FolderOpen, Plus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+interface EmptyStateProps {
+  title?: string;
+  description?: string;
+  actionLabel?: string;
+  onAction?: () => void;
+}
+
+export function EmptyState({
+  title = "No hay proyectos",
+  description = "Parece que aún no tienes ningún proyecto. Crea uno nuevo para empezar.",
+  actionLabel = "Crear proyecto",
+  onAction,
+}: EmptyStateProps) {
+  return (
+    <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-8 text-center animate-in fade-in-50">
+      <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-muted">
+        <FolderOpen className="h-6 w-6 text-muted-foreground" />
+      </div>
+      <h3 className="mt-4 text-lg font-semibold">{title}</h3>
+      <p className="mt-2 text-sm text-muted-foreground max-w-sm">
+        {description}
+      </p>
+      {onAction && (
+        <Button onClick={onAction} className="mt-4">
+          <Plus className="mr-2 h-4 w-4" />
+          {actionLabel}
+        </Button>
+      )}
+    </div>
+  );
+}

components/projects/index.ts

@@ -0,0 +1,6 @@
+export { DataTable } from "./data-table";
+export { DataTableToolbar } from "./data-table-toolbar";
+export { DataTableSkeleton } from "./data-table-skeleton";
+export { EmptyState } from "./empty-state";
+export { ProjectsTable } from "./projects-table";
+export { projectColumns } from "./columns";

components/projects/projects-table.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import { useState, useEffect, useMemo } from "react";
+import { FolderKanban, RefreshCw } from "lucide-react";
+
+import { Project } from "@/types/project";
+import { getProjects } from "@/lib/projectsService";
+import { DataTable } from "./data-table";
+import { DataTableToolbar } from "./data-table-toolbar";
+import { DataTableSkeleton } from "./data-table-skeleton";
+import { EmptyState } from "./empty-state";
+import { projectColumns } from "./columns";
+import { Button } from "@/components/ui/button";
+
+export function ProjectsTable() {
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  
+  // Filtros
+  const [searchValue, setSearchValue] = useState("");
+  const [statusFilter, setStatusFilter] = useState("all");
+
+  // Cargar proyectos
+  const fetchProjects = async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const data = await getProjects();
+      setProjects(data);
+    } catch (err) {
+      console.error("Error fetching projects:", err);
+      setError("Error al cargar los proyectos. Por favor, intenta de nuevo.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchProjects();
+  }, []);
+
+  // Filtrar proyectos
+  const filteredProjects = useMemo(() => {
+    let result = [...projects];
+
+    // Filtro de búsqueda (nombre o referencia)
+    if (searchValue) {
+      const search = searchValue.toLowerCase();
+      result = result.filter(
+        (project) =>
+          project.name.toLowerCase().includes(search) ||
+          project.ref.toLowerCase().includes(search) ||
+          project.client.toLowerCase().includes(search)
+      );
+    }
+
+    // Filtro de estado
+    if (statusFilter !== "all") {
+      result = result.filter((project) => project.status === statusFilter);
+    }
+
+    return result;
+  }, [projects, searchValue, statusFilter]);
+
+  // Limpiar filtros
+  const handleClearFilters = () => {
+    setSearchValue("");
+    setStatusFilter("all");
+  };
+
+  // Contar seleccionados (placeholder - el DataTable lo maneja internamente)
+  const selectedCount = 0;
+
+  // Estado de error
+  if (error) {
+    return (
+      <div className="flex flex-col items-center justify-center p-8 text-center">
+        <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-destructive/10">
+          <FolderKanban className="h-6 w-6 text-destructive" />
+        </div>
+        <h3 className="mt-4 text-lg font-semibold">Error al cargar</h3>
+        <p className="mt-2 text-sm text-muted-foreground max-w-sm">{error}</p>
+        <Button onClick={fetchProjects} variant="outline" className="mt-4">
+          <RefreshCw className="mr-2 h-4 w-4" />
+          Reintentar
+        </Button>
+      </div>
+    );
+  }
+
+  // Estado de carga
+  if (isLoading) {
+    return <DataTableSkeleton />;
+  }
+
+  // Estado vacío
+  if (projects.length === 0) {
+    return (
+      <EmptyState
+        title="No hay proyectos"
+        description="Aún no tienes proyectos creados. Comienza creando tu primer proyecto."
+        actionLabel="Crear proyecto"
+        onAction={() => console.log("Create project")}
+      />
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <DataTableToolbar
+        searchValue={searchValue}
+        onSearchChange={setSearchValue}
+        statusFilter={statusFilter}
+        onStatusFilterChange={setStatusFilter}
+        selectedCount={selectedCount}
+        onClearFilters={handleClearFilters}
+      />
+      <DataTable
+        columns={projectColumns}
+        data={filteredProjects}
+        searchKey="name"
+        searchValue={searchValue}
+      />
+    </div>
+  );
+}

components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

components/ui/progress.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }

components/ui/select.tsx

@@ -0,0 +1,159 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}

components/ui/table.tsx

@@ -0,0 +1,120 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

components/ui/tabs.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

lib/dolibarrClient.ts

@@ -1,10 +1,50 @@
 /**
  * Cliente para la API de Dolibarr
- * Ahora usa la API Route de Next.js (/api/dolibarr) en lugar de llamar directamente
+ * 
- * Esto mantiene la API key segura en el servidor
+ * - En el CLIENTE: usa la API Route de Next.js (/api/dolibarr) para mantener la API key segura
+ * - En el SERVIDOR: llama directamente a Dolibarr con las credenciales del entorno
  */
-export async function dolibarrFetch(endpoint: string, options: RequestInit = {}) {
+
-  // Usar la API Route en lugar de llamar directamente a Dolibarr
+// Detectar si estamos en el servidor o cliente
+const isServer = typeof window === 'undefined';
+
+/**
+ * Fetch directo a Dolibarr (usado en el servidor)
+ */
+async function dolibarrDirectFetch(endpoint: string, options: RequestInit = {}) {
+  const apiUrl = process.env.DOLIBARR_API_URL || process.env.NEXT_PUBLIC_API_URL;
+  const apiKey = process.env.DOLIBARR_API_KEY || process.env.NEXT_PUBLIC_DOLIBARR_API_KEY;
+
+  if (!apiUrl || !apiKey) {
+    throw new Error('Dolibarr configuration missing (DOLIBARR_API_URL or DOLIBARR_API_KEY)');
+  }
+
+  const url = `${apiUrl}/${endpoint}?DOLAPIKEY=${apiKey}`;
+
+  const res = await fetch(url, {
+    ...options,
+    headers: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json',
+      ...options.headers,
+    },
+    // Cache durante 60 segundos en servidor
+    next: { revalidate: 60 }
+  });
+
+  if (!res.ok) {
+    const errorText = await res.text();
+    console.error("Error en la llamada directa a Dolibarr:", res.status, errorText);
+    throw new Error(`Dolibarr API error: ${res.status}`);
+  }
+
+  return res.json();
+}
+
+/**
+ * Fetch via API Route (usado en el cliente)
+ */
+async function dolibarrProxyFetch(endpoint: string, options: RequestInit = {}) {
   const url = `/api/dolibarr/${endpoint}`;
 
   const res = await fetch(url, {
@@ -17,9 +57,35 @@ export async function dolibarrFetch(endpoint: string, options: RequestInit = {})
 
   if (!res.ok) {
     const errorData = await res.json().catch(() => ({ error: 'Unknown error' }));
-    console.error("Error en la llamada Dolibarr:", res.status, errorData);
+    console.error("Error en la llamada Dolibarr (proxy):", res.status, errorData);
     throw new Error(errorData.error || "Dolibarr API error");
   }
 
   return res.json();
 }
+
+/**
+ * Cliente principal de Dolibarr
+ * Automáticamente detecta el entorno y usa el método apropiado
+ */
+export async function dolibarrFetch(endpoint: string, options: RequestInit = {}) {
+  if (isServer) {
+    return dolibarrDirectFetch(endpoint, options);
+  } else {
+    return dolibarrProxyFetch(endpoint, options);
+  }
+}
+
+/**
+ * Forzar fetch directo (útil para Server Components)
+ */
+export async function dolibarrServerFetch(endpoint: string, options: RequestInit = {}) {
+  return dolibarrDirectFetch(endpoint, options);
+}
+
+/**
+ * Forzar fetch via proxy (útil para Client Components)
+ */
+export async function dolibarrClientFetch(endpoint: string, options: RequestInit = {}) {
+  return dolibarrProxyFetch(endpoint, options);
+}

lib/tasksService.ts

@@ -0,0 +1,118 @@
+// lib/tasksService.ts
+import { dolibarrFetch } from "./dolibarrClient";
+import { DolibarrTask, Task, mapDolibarrTask } from "@/types/task";
+
+/**
+ * Obtener todas las tareas de un proyecto específico
+ * 
+ * Nota: El endpoint /projects/{id}/tasks de Dolibarr no devuelve tareas correctamente,
+ * por lo que obtenemos todas las tareas y filtramos por fk_project en el cliente.
+ */
+export async function getTasksByProjectId(projectId: number): Promise<Task[]> {
+  try {
+    // Obtener todas las tareas (Dolibarr no filtra bien por proyecto)
+    const dolibarrTasks: DolibarrTask[] = await dolibarrFetch('tasks');
+    
+    // Si no hay tareas, devolver array vacío
+    if (!dolibarrTasks || !Array.isArray(dolibarrTasks)) {
+      return [];
+    }
+    
+    // Filtrar tareas que pertenecen a este proyecto
+    const projectTasks = dolibarrTasks.filter(
+      task => String(task.fk_project) === String(projectId)
+    );
+    
+    // Mapear las tareas al formato de la UI
+    return projectTasks.map(mapDolibarrTask);
+  } catch (error) {
+    console.error('Error fetching tasks for project:', projectId, error);
+    // Si el error es 404 (no hay tareas), devolver array vacío
+    if (error instanceof Error && error.message.includes('404')) {
+      return [];
+    }
+    throw error;
+  }
+}
+
+/**
+ * Obtener todas las tareas (sin filtro de proyecto)
+ * Endpoint: /tasks
+ */
+export async function getAllTasks(): Promise<Task[]> {
+  try {
+    const dolibarrTasks: DolibarrTask[] = await dolibarrFetch('tasks');
+    
+    if (!dolibarrTasks || !Array.isArray(dolibarrTasks)) {
+      return [];
+    }
+    
+    return dolibarrTasks.map(mapDolibarrTask);
+  } catch (error) {
+    console.error('Error fetching all tasks:', error);
+    throw error;
+  }
+}
+
+/**
+ * Obtener una tarea específica por ID
+ * Endpoint: /tasks/{id}
+ */
+export async function getTaskById(taskId: number): Promise<Task | null> {
+  try {
+    const dolibarrTask: DolibarrTask = await dolibarrFetch(`tasks/${taskId}`);
+    return mapDolibarrTask(dolibarrTask);
+  } catch (error) {
+    console.error('Error fetching task:', taskId, error);
+    return null;
+  }
+}
+
+/**
+ * Obtener datos crudos de Dolibarr para una tarea
+ */
+export async function getDolibarrTaskById(taskId: number): Promise<DolibarrTask | null> {
+  try {
+    return await dolibarrFetch(`tasks/${taskId}`);
+  } catch (error) {
+    console.error('Error fetching Dolibarr task:', taskId, error);
+    return null;
+  }
+}
+
+/**
+ * Calcular estadísticas de las tareas de un proyecto
+ */
+export function calculateTaskStats(tasks: Task[]) {
+  const total = tasks.length;
+  const completed = tasks.filter(t => t.status === '2').length;
+  const inProgress = tasks.filter(t => t.status === '1').length;
+  const draft = tasks.filter(t => t.status === '0').length;
+  
+  const totalPlannedHours = tasks.reduce((sum, t) => sum + t.plannedHours, 0);
+  const totalWorkedHours = tasks.reduce((sum, t) => sum + t.workedHours, 0);
+  
+  const avgProgress = total > 0 
+    ? Math.round(tasks.reduce((sum, t) => sum + t.progress, 0) / total) 
+    : 0;
+  
+  const highPriority = tasks.filter(t => t.priority === '3').length;
+  const overdue = tasks.filter(t => {
+    if (!t.endDate && !t.plannedEndDate) return false;
+    const endDate = t.endDate || t.plannedEndDate;
+    return endDate && new Date(endDate) < new Date() && t.status !== '2';
+  }).length;
+
+  return {
+    total,
+    completed,
+    inProgress,
+    draft,
+    totalPlannedHours,
+    totalWorkedHours,
+    avgProgress,
+    highPriority,
+    overdue,
+    completionRate: total > 0 ? Math.round((completed / total) * 100) : 0,
+  };
+}

package-lock.json

@@ -9,11 +9,16 @@
       "version": "0.1.0",
       "dependencies": {
         "@radix-ui/react-avatar": "^1.1.11",
+        "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-dropdown-menu": "^2.1.16",
+        "@radix-ui/react-progress": "^1.1.8",
+        "@radix-ui/react-select": "^2.2.6",
         "@radix-ui/react-separator": "^1.1.8",
         "@radix-ui/react-slot": "^1.2.4",
+        "@radix-ui/react-tabs": "^1.1.13",
         "@radix-ui/react-tooltip": "^1.2.8",
+        "@tanstack/react-table": "^8.21.3",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "lucide-react": "^0.556.0",
@@ -1270,6 +1275,12 @@
         "node": ">=12.4.0"
       }
     },
+    "node_modules/@radix-ui/number": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz",
+      "integrity": "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==",
+      "license": "MIT"
+    },
     "node_modules/@radix-ui/primitive": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
@@ -1367,6 +1378,92 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-checkbox": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.3.3.tgz",
+      "integrity": "sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-checkbox/node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-checkbox/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-checkbox/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
@@ -2134,6 +2231,30 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-progress": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.8.tgz",
+      "integrity": "sha512-+gISHcSPUJ7ktBy9RnTqbdKW78bcGke3t6taawyZ71pio1JewwGSJizycs7rLhGTvMJYCQB1DBK4KQsxs7U8dA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-context": "1.1.3",
+        "@radix-ui/react-primitive": "2.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-roving-focus": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz",
@@ -2221,6 +2342,105 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-select": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.6.tgz",
+      "integrity": "sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-separator": {
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.8.tgz",
@@ -2262,6 +2482,92 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tabs": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.13.tgz",
+      "integrity": "sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-tooltip": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.8.tgz",
@@ -2455,6 +2761,21 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.1.tgz",
+      "integrity": "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-rect": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",
@@ -2862,6 +3183,39 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@tanstack/react-table": {
+      "version": "8.21.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.21.3.tgz",
+      "integrity": "sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/table-core": "8.21.3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/@tanstack/table-core": {
+      "version": "8.21.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.21.3.tgz",
+      "integrity": "sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.1",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",

package.json

@@ -8,16 +8,22 @@
     "start": "next start",
     "lint": "eslint",
     "seed": "node scripts/seed-projects-via-api.js",
+    "seed:tasks": "node scripts/seed-tasks.js",
     "seed:direct": "node scripts/seed-projects.js",
     "diagnose": "node scripts/diagnose.js"
   },
   "dependencies": {
     "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
+    "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.556.0",

scripts/seed-tasks.js

@@ -0,0 +1,334 @@
+#!/usr/bin/env node
+
+/**
+ * Script para crear tareas de prueba en proyectos de Dolibarr
+ * 
+ * REQUISITO: El servidor de Next.js debe estar corriendo (npm run dev)
+ * Uso: node scripts/seed-tasks.js
+ */
+
+const NEXT_API_URL = 'http://localhost:3000/api/dolibarr';
+
+// Plantillas de tareas variadas para cada proyecto
+const taskTemplates = [
+  // Tareas de análisis/planificación
+  {
+    label: "Análisis de requisitos",
+    description: "Documentar todos los requisitos funcionales y no funcionales del proyecto con el cliente.",
+    planned_workload: 28800, // 8 horas en segundos
+    progress: 100,
+    priority: 2,
+  },
+  {
+    label: "Diseño de arquitectura",
+    description: "Definir la arquitectura técnica, selección de tecnologías y patrones de diseño a utilizar.",
+    planned_workload: 36000, // 10 horas
+    progress: 100,
+    priority: 3,
+  },
+  {
+    label: "Creación de wireframes",
+    description: "Diseñar los wireframes y mockups de las principales pantallas de la aplicación.",
+    planned_workload: 21600, // 6 horas
+    progress: 80,
+    priority: 2,
+  },
+  // Tareas de desarrollo
+  {
+    label: "Configuración del entorno de desarrollo",
+    description: "Preparar repositorio, CI/CD, entornos de desarrollo y staging.",
+    planned_workload: 14400, // 4 horas
+    progress: 100,
+    priority: 3,
+  },
+  {
+    label: "Desarrollo del backend",
+    description: "Implementar la API REST, modelos de datos y lógica de negocio del servidor.",
+    planned_workload: 72000, // 20 horas
+    progress: 60,
+    priority: 3,
+  },
+  {
+    label: "Desarrollo del frontend",
+    description: "Implementar la interfaz de usuario con componentes, estados y conexión con API.",
+    planned_workload: 64800, // 18 horas
+    progress: 45,
+    priority: 3,
+  },
+  {
+    label: "Integración con servicios externos",
+    description: "Conectar con APIs de terceros, pasarelas de pago y servicios cloud.",
+    planned_workload: 28800, // 8 horas
+    progress: 30,
+    priority: 2,
+  },
+  // Tareas de testing
+  {
+    label: "Pruebas unitarias",
+    description: "Escribir y ejecutar tests unitarios para componentes críticos del sistema.",
+    planned_workload: 21600, // 6 horas
+    progress: 25,
+    priority: 2,
+  },
+  {
+    label: "Pruebas de integración",
+    description: "Realizar pruebas de integración entre módulos y con servicios externos.",
+    planned_workload: 18000, // 5 horas
+    progress: 10,
+    priority: 2,
+  },
+  {
+    label: "QA y corrección de bugs",
+    description: "Ejecutar plan de QA, documentar bugs encontrados y corregirlos.",
+    planned_workload: 36000, // 10 horas
+    progress: 0,
+    priority: 1,
+  },
+  // Tareas de documentación
+  {
+    label: "Documentación técnica",
+    description: "Crear documentación de API, guías de instalación y arquitectura del sistema.",
+    planned_workload: 14400, // 4 horas
+    progress: 15,
+    priority: 1,
+  },
+  {
+    label: "Manual de usuario",
+    description: "Redactar el manual de usuario con capturas y tutoriales paso a paso.",
+    planned_workload: 10800, // 3 horas
+    progress: 0,
+    priority: 1,
+  },
+  // Tareas de despliegue
+  {
+    label: "Configuración de producción",
+    description: "Preparar servidores, certificados SSL, dominios y configuraciones de producción.",
+    planned_workload: 18000, // 5 horas
+    progress: 0,
+    priority: 3,
+  },
+  {
+    label: "Despliegue inicial",
+    description: "Realizar el despliegue a producción y verificar el correcto funcionamiento.",
+    planned_workload: 7200, // 2 horas
+    progress: 0,
+    priority: 3,
+  },
+  {
+    label: "Formación al cliente",
+    description: "Sesión de formación al equipo del cliente sobre el uso del sistema.",
+    planned_workload: 10800, // 3 horas
+    progress: 0,
+    priority: 2,
+  },
+];
+
+/**
+ * Obtener todos los proyectos existentes
+ */
+async function getProjects() {
+  const url = `${NEXT_API_URL}/projects`;
+  
+  const response = await fetch(url, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error(`Error obteniendo proyectos: ${response.status}`);
+  }
+
+  return response.json();
+}
+
+// Contador global para generar refs únicos
+let taskCounter = 0;
+
+/**
+ * Generar referencia única para una tarea
+ */
+function generateTaskRef(projectId) {
+  taskCounter++;
+  const timestamp = Date.now().toString(36).toUpperCase();
+  return `TASK-P${projectId}-${String(taskCounter).padStart(3, '0')}`;
+}
+
+/**
+ * Crear una tarea en un proyecto
+ */
+async function createTask(projectId, taskData) {
+  const url = `${NEXT_API_URL}/tasks`;
+  
+  // Calcular fechas basadas en la fecha actual
+  const now = new Date();
+  const startDate = new Date(now);
+  startDate.setDate(startDate.getDate() - Math.floor(Math.random() * 30)); // Hace 0-30 días
+  
+  const endDate = new Date(startDate);
+  endDate.setDate(endDate.getDate() + Math.floor(Math.random() * 30) + 7); // 7-37 días después
+  
+  const payload = {
+    ref: generateTaskRef(projectId), // Campo requerido por Dolibarr
+    fk_project: String(projectId),   // Dolibarr espera string
+    label: taskData.label,
+    description: taskData.description,
+    planned_workload: taskData.planned_workload,
+    progress: taskData.progress,
+    priority: taskData.priority,
+    dateo: Math.floor(startDate.getTime() / 1000), // Fecha inicio planificada
+    datee: Math.floor(endDate.getTime() / 1000),   // Fecha fin planificada
+    date_start: taskData.progress > 0 ? Math.floor(startDate.getTime() / 1000) : null,
+    date_end: taskData.progress >= 100 ? Math.floor(new Date().getTime() / 1000) : null,
+  };
+
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(payload),
+  });
+
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({}));
+    throw new Error(`Error ${response.status}: ${errorData.error || 'Unknown error'}`);
+  }
+
+  return response.json();
+}
+
+/**
+ * Seleccionar tareas aleatorias para un proyecto
+ */
+function selectTasksForProject(projectProgress, count = 6) {
+  // Mezclar las tareas aleatoriamente
+  const shuffled = [...taskTemplates].sort(() => Math.random() - 0.5);
+  
+  // Seleccionar las primeras 'count' tareas
+  const selected = shuffled.slice(0, count);
+  
+  // Ajustar el progreso de las tareas según el progreso del proyecto
+  return selected.map((task, index) => {
+    let adjustedProgress = task.progress;
+    
+    // Si el proyecto tiene poco progreso, reducir el progreso de las tareas
+    if (projectProgress < 30) {
+      adjustedProgress = Math.min(task.progress, 30 + Math.random() * 20);
+    } else if (projectProgress >= 100) {
+      // Si el proyecto está completo, completar más tareas
+      adjustedProgress = index < count - 1 ? 100 : Math.max(task.progress, 80);
+    } else {
+      // Ajustar proporcionalmente
+      const factor = projectProgress / 50;
+      adjustedProgress = Math.min(100, Math.round(task.progress * factor));
+    }
+    
+    return {
+      ...task,
+      progress: Math.round(adjustedProgress),
+    };
+  });
+}
+
+/**
+ * Script principal
+ */
+async function main() {
+  console.log('\n📋 SEED DE TAREAS PARA PROYECTOS DE DOLIBARR\n');
+  console.log('═'.repeat(60));
+  console.log(`📡 API Next.js: ${NEXT_API_URL}`);
+  console.log(`📝 Plantillas de tareas: ${taskTemplates.length}`);
+  console.log('═'.repeat(60));
+  console.log('');
+  
+  // Verificar conexión con Next.js
+  console.log('🔍 Verificando conexión con Next.js...');
+  try {
+    const testResponse = await fetch('http://localhost:3000');
+    if (!testResponse.ok && testResponse.status !== 404) {
+      throw new Error('Server not responding');
+    }
+    console.log('✅ Servidor Next.js está corriendo\n');
+  } catch (error) {
+    console.error('❌ ERROR: No se puede conectar al servidor Next.js');
+    console.error('   Por favor, ejecuta "npm run dev" en otra terminal primero.\n');
+    process.exit(1);
+  }
+
+  // Obtener proyectos existentes
+  console.log('📂 Obteniendo proyectos existentes...');
+  let projects;
+  try {
+    projects = await getProjects();
+    console.log(`✅ Encontrados ${projects.length} proyectos\n`);
+  } catch (error) {
+    console.error('❌ Error obteniendo proyectos:', error.message);
+    process.exit(1);
+  }
+
+  if (projects.length === 0) {
+    console.log('⚠️  No hay proyectos. Ejecuta primero: npm run seed\n');
+    process.exit(0);
+  }
+
+  let totalTasks = 0;
+  let totalErrors = 0;
+  const TASKS_PER_PROJECT = 6;
+
+  for (let i = 0; i < projects.length; i++) {
+    const project = projects[i];
+    const projectId = project.id;
+    const projectTitle = project.title || project.ref || `Proyecto ${projectId}`;
+    const projectProgress = parseFloat(project.opp_percent || '0');
+    
+    console.log(`\n[${i + 1}/${projects.length}] 📁 ${projectTitle}`);
+    console.log(`    ID: ${projectId} | Progreso: ${projectProgress}%`);
+    console.log('    Creando tareas:');
+    
+    // Seleccionar tareas para este proyecto
+    const tasksToCreate = selectTasksForProject(projectProgress, TASKS_PER_PROJECT);
+    
+    for (let j = 0; j < tasksToCreate.length; j++) {
+      const task = tasksToCreate[j];
+      
+      try {
+        const taskId = await createTask(projectId, task);
+        const progressBar = '█'.repeat(Math.floor(task.progress / 10)) + '░'.repeat(10 - Math.floor(task.progress / 10));
+        console.log(`    ✅ [${progressBar}] ${task.progress}% - ${task.label}`);
+        totalTasks++;
+        
+        // Pequeña pausa para no saturar la API
+        await new Promise(resolve => setTimeout(resolve, 200));
+      } catch (error) {
+        console.log(`    ❌ Error: ${task.label} - ${error.message}`);
+        totalErrors++;
+      }
+    }
+  }
+
+  // Resumen final
+  console.log('\n');
+  console.log('═'.repeat(60));
+  console.log('✨ PROCESO COMPLETADO\n');
+  console.log(`📊 Proyectos procesados: ${projects.length}`);
+  console.log(`✅ Tareas creadas: ${totalTasks}`);
+  console.log(`❌ Errores: ${totalErrors}`);
+  console.log('═'.repeat(60));
+  
+  if (totalTasks > 0) {
+    console.log('\n💡 ¡Recarga tu aplicación para ver las tareas!');
+    console.log('   Haz clic en cualquier proyecto para ver sus tareas.\n');
+  }
+}
+
+// Ejecutar
+main().catch(error => {
+  console.error('\n❌ ERROR FATAL:', error.message);
+  console.error('\nAsegúrate de que:');
+  console.error('  1. El servidor Next.js está corriendo (npm run dev)');
+  console.error('  2. Dolibarr está accesible');
+  console.error('  3. Existen proyectos (ejecuta "npm run seed" primero)\n');
+  process.exit(1);
+});

types/task.ts

@@ -0,0 +1,176 @@
+// types/task.ts
+
+// Estado de la tarea en Dolibarr
+export type TaskStatus = '0' | '1' | '2'; // 0: borrador, 1: validada, 2: cerrada/completada
+
+// Prioridad de la tarea
+export type TaskPriority = '0' | '1' | '2' | '3'; // 0: ninguna, 1: baja, 2: media, 3: alta
+
+// Interface para los datos crudos que vienen de Dolibarr
+export interface DolibarrTask {
+  id: string | number;
+  ref: string;
+  label: string;
+  description: string;
+  fk_project: string | number;
+  fk_task_parent: string | number;
+  date_start: number | null;
+  date_end: number | null;
+  dateo: number | null; // fecha planificada inicio
+  datee: number | null; // fecha planificada fin
+  date_c: number | null;
+  date_m: number | null;
+  duration_effective: number; // segundos trabajados
+  planned_workload: number; // segundos planificados
+  progress: number | string;
+  priority: string | number;
+  budget_amount: string | number;
+  rang: number;
+  status: string;
+  note_public: string;
+  note_private: string;
+  fk_user_creat: string | number;
+  fk_user_valid: string | number;
+  // Campos adicionales que puede devolver la API
+  timespent?: number;
+  array_options?: Record<string, unknown>;
+}
+
+// Interface normalizada para la UI
+export interface Task {
+  id: number;
+  ref: string;
+  title: string;
+  description: string;
+  projectId: number;
+  parentTaskId: number | null;
+  status: TaskStatus;
+  priority: TaskPriority;
+  progress: number;
+  plannedHours: number;
+  workedHours: number;
+  budget: number;
+  startDate: string | null;
+  endDate: string | null;
+  plannedStartDate: string | null;
+  plannedEndDate: string | null;
+  createdAt: string;
+  updatedAt: string;
+  createdBy: number;
+  order: number;
+}
+
+// Configuración de estados de tarea
+export const TASK_STATUS_CONFIG: Record<TaskStatus, { label: string; color: string; bgClass: string }> = {
+  '0': { 
+    label: 'Borrador', 
+    color: 'gray',
+    bgClass: 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300'
+  },
+  '1': { 
+    label: 'Validada', 
+    color: 'blue',
+    bgClass: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
+  },
+  '2': { 
+    label: 'Completada', 
+    color: 'green',
+    bgClass: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
+  },
+};
+
+// Configuración de prioridades
+export const TASK_PRIORITY_CONFIG: Record<TaskPriority, { label: string; color: string; bgClass: string }> = {
+  '0': { 
+    label: 'Sin prioridad', 
+    color: 'gray',
+    bgClass: 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400'
+  },
+  '1': { 
+    label: 'Baja', 
+    color: 'blue',
+    bgClass: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
+  },
+  '2': { 
+    label: 'Media', 
+    color: 'yellow',
+    bgClass: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400'
+  },
+  '3': { 
+    label: 'Alta', 
+    color: 'red',
+    bgClass: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
+  },
+};
+
+// Helper para convertir timestamp a fecha ISO
+function timestampToDateString(timestamp: number | null | undefined): string | null {
+  if (!timestamp || timestamp === 0) {
+    return null;
+  }
+  return new Date(timestamp * 1000).toISOString().split('T')[0];
+}
+
+// Helper para convertir segundos a horas
+function secondsToHours(seconds: number | null | undefined): number {
+  if (!seconds) return 0;
+  return Math.round((seconds / 3600) * 10) / 10; // Redondear a 1 decimal
+}
+
+// Función para mapear tarea de Dolibarr al formato UI
+export function mapDolibarrTask(dolibarr: DolibarrTask): Task {
+  const progress = typeof dolibarr.progress === 'string' 
+    ? parseFloat(dolibarr.progress) 
+    : (dolibarr.progress || 0);
+
+  const priority = String(dolibarr.priority || '0') as TaskPriority;
+  const validPriorities: TaskPriority[] = ['0', '1', '2', '3'];
+  const safePriority: TaskPriority = validPriorities.includes(priority) ? priority : '0';
+
+  const status = String(dolibarr.status || '0') as TaskStatus;
+  const validStatuses: TaskStatus[] = ['0', '1', '2'];
+  const safeStatus: TaskStatus = validStatuses.includes(status) ? status : '0';
+
+  return {
+    id: typeof dolibarr.id === 'string' ? parseInt(dolibarr.id) : dolibarr.id,
+    ref: dolibarr.ref || '',
+    title: dolibarr.label || 'Sin título',
+    description: dolibarr.description || '',
+    projectId: typeof dolibarr.fk_project === 'string' 
+      ? parseInt(dolibarr.fk_project) 
+      : dolibarr.fk_project,
+    parentTaskId: dolibarr.fk_task_parent 
+      ? (typeof dolibarr.fk_task_parent === 'string' 
+          ? parseInt(dolibarr.fk_task_parent) 
+          : dolibarr.fk_task_parent)
+      : null,
+    status: safeStatus,
+    priority: safePriority,
+    progress: Math.min(Math.max(progress, 0), 100), // Asegurar entre 0-100
+    plannedHours: secondsToHours(dolibarr.planned_workload),
+    workedHours: secondsToHours(dolibarr.duration_effective || dolibarr.timespent),
+    budget: typeof dolibarr.budget_amount === 'string' 
+      ? parseFloat(dolibarr.budget_amount) || 0 
+      : (dolibarr.budget_amount || 0),
+    startDate: timestampToDateString(dolibarr.date_start),
+    endDate: timestampToDateString(dolibarr.date_end),
+    plannedStartDate: timestampToDateString(dolibarr.dateo),
+    plannedEndDate: timestampToDateString(dolibarr.datee),
+    createdAt: timestampToDateString(dolibarr.date_c) || new Date().toISOString().split('T')[0],
+    updatedAt: timestampToDateString(dolibarr.date_m) || new Date().toISOString().split('T')[0],
+    createdBy: typeof dolibarr.fk_user_creat === 'string' 
+      ? parseInt(dolibarr.fk_user_creat) 
+      : (dolibarr.fk_user_creat || 0),
+    order: dolibarr.rang || 0,
+  };
+}
+
+// Helper para obtener label de estado
+export function getTaskStatusLabel(status: TaskStatus): string {
+  return TASK_STATUS_CONFIG[status]?.label || 'Desconocido';
+}
+
+// Helper para obtener label de prioridad
+export function getTaskPriorityLabel(priority: TaskPriority): string {
+  return TASK_PRIORITY_CONFIG[priority]?.label || 'Sin prioridad';
+}