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.
This commit is contained in:
parent
997ff4d64d
commit
88781f5094
|
|
@ -1,19 +1,27 @@
|
|||
import { notFound } from 'next/navigation';
|
||||
import { getProjectById } from '@/lib/projectsService';
|
||||
import ProjectDetail from '@/components/dashboard/project-detail';
|
||||
import { notFound } from "next/navigation";
|
||||
import { getProjectById } from "@/lib/projectsService";
|
||||
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" };
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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";
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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";
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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 }
|
||||
|
|
@ -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 }
|
||||
|
|
@ -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,
|
||||
}
|
||||
|
|
@ -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,
|
||||
}
|
||||
|
|
@ -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 }
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
};
|
||||
}
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
|
|
@ -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';
|
||||
}
|
||||
Loading…
Reference in New Issue