514 lines
22 KiB
TypeScript
514 lines
22 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { useState, useEffect, useMemo } from "react";
|
||
|
|
import {
|
||
|
|
GanttChart as GanttIcon,
|
||
|
|
AlertCircle,
|
||
|
|
ChevronLeft,
|
||
|
|
ChevronRight,
|
||
|
|
Calendar,
|
||
|
|
ZoomIn,
|
||
|
|
ZoomOut,
|
||
|
|
Filter,
|
||
|
|
} from "lucide-react";
|
||
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { Badge } from "@/components/ui/badge";
|
||
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
||
|
|
import {
|
||
|
|
Tooltip,
|
||
|
|
TooltipContent,
|
||
|
|
TooltipProvider,
|
||
|
|
TooltipTrigger,
|
||
|
|
} from "@/components/ui/tooltip";
|
||
|
|
import {
|
||
|
|
Select,
|
||
|
|
SelectContent,
|
||
|
|
SelectItem,
|
||
|
|
SelectTrigger,
|
||
|
|
SelectValue,
|
||
|
|
} from "@/components/ui/select";
|
||
|
|
import { getProjects } from "@/lib/projectsService";
|
||
|
|
import { Project, ProjectStatus } from "@/types/project";
|
||
|
|
|
||
|
|
// Paleta de colores para proyectos
|
||
|
|
const PROJECT_COLORS = [
|
||
|
|
{ bg: "bg-blue-500", light: "bg-blue-100", text: "text-blue-700", hex: "#3b82f6" },
|
||
|
|
{ bg: "bg-violet-500", light: "bg-violet-100", text: "text-violet-700", hex: "#8b5cf6" },
|
||
|
|
{ bg: "bg-cyan-500", light: "bg-cyan-100", text: "text-cyan-700", hex: "#06b6d4" },
|
||
|
|
{ bg: "bg-emerald-500", light: "bg-emerald-100", text: "text-emerald-700", hex: "#10b981" },
|
||
|
|
{ bg: "bg-amber-500", light: "bg-amber-100", text: "text-amber-700", hex: "#f59e0b" },
|
||
|
|
{ bg: "bg-rose-500", light: "bg-rose-100", text: "text-rose-700", hex: "#f43f5e" },
|
||
|
|
{ bg: "bg-pink-500", light: "bg-pink-100", text: "text-pink-700", hex: "#ec4899" },
|
||
|
|
{ bg: "bg-indigo-500", light: "bg-indigo-100", text: "text-indigo-700", hex: "#6366f1" },
|
||
|
|
{ bg: "bg-teal-500", light: "bg-teal-100", text: "text-teal-700", hex: "#14b8a6" },
|
||
|
|
{ bg: "bg-orange-500", light: "bg-orange-100", text: "text-orange-700", hex: "#f97316" },
|
||
|
|
];
|
||
|
|
|
||
|
|
const STATUS_LABELS: Record<ProjectStatus, string> = {
|
||
|
|
"0": "Borrador",
|
||
|
|
"1": "Abierto",
|
||
|
|
"2": "Cerrado",
|
||
|
|
};
|
||
|
|
|
||
|
|
type ViewMode = "month" | "quarter" | "year";
|
||
|
|
|
||
|
|
function getProjectColor(index: number) {
|
||
|
|
return PROJECT_COLORS[index % PROJECT_COLORS.length];
|
||
|
|
}
|
||
|
|
|
||
|
|
// Formatear fecha
|
||
|
|
function formatDate(dateStr: string): string {
|
||
|
|
const date = new Date(dateStr);
|
||
|
|
return date.toLocaleDateString("es-ES", { day: "2-digit", month: "short", year: "numeric" });
|
||
|
|
}
|
||
|
|
|
||
|
|
// Obtener días entre dos fechas
|
||
|
|
function getDaysBetween(start: Date, end: Date): number {
|
||
|
|
return Math.ceil((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24));
|
||
|
|
}
|
||
|
|
|
||
|
|
// Generar array de meses entre dos fechas
|
||
|
|
function getMonthsBetween(start: Date, end: Date): { month: number; year: number; label: string }[] {
|
||
|
|
const months: { month: number; year: number; label: string }[] = [];
|
||
|
|
const current = new Date(start.getFullYear(), start.getMonth(), 1);
|
||
|
|
const endMonth = new Date(end.getFullYear(), end.getMonth(), 1);
|
||
|
|
|
||
|
|
while (current <= endMonth) {
|
||
|
|
months.push({
|
||
|
|
month: current.getMonth(),
|
||
|
|
year: current.getFullYear(),
|
||
|
|
label: current.toLocaleDateString("es-ES", { month: "short", year: "numeric" }),
|
||
|
|
});
|
||
|
|
current.setMonth(current.getMonth() + 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
return months;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Obtener días en un mes
|
||
|
|
function getDaysInMonth(month: number, year: number): number {
|
||
|
|
return new Date(year, month + 1, 0).getDate();
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function GanttPage() {
|
||
|
|
const [projects, setProjects] = useState<Project[]>([]);
|
||
|
|
const [loading, setLoading] = useState(true);
|
||
|
|
const [error, setError] = useState<string | null>(null);
|
||
|
|
const [viewMode, setViewMode] = useState<ViewMode>("month");
|
||
|
|
const [statusFilter, setStatusFilter] = useState<string>("all");
|
||
|
|
const [viewOffset, setViewOffset] = useState(0);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
async function loadProjects() {
|
||
|
|
try {
|
||
|
|
setLoading(true);
|
||
|
|
const data = await getProjects();
|
||
|
|
setProjects(data);
|
||
|
|
setError(null);
|
||
|
|
} catch (err) {
|
||
|
|
console.error("Error loading projects:", err);
|
||
|
|
setError("Error al cargar los proyectos");
|
||
|
|
} finally {
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
loadProjects();
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
// Filtrar proyectos
|
||
|
|
const filteredProjects = useMemo(() => {
|
||
|
|
if (statusFilter === "all") return projects;
|
||
|
|
return projects.filter(p => p.status === statusFilter);
|
||
|
|
}, [projects, statusFilter]);
|
||
|
|
|
||
|
|
// Calcular rango de fechas del timeline
|
||
|
|
const { timelineStart, timelineEnd, months } = useMemo(() => {
|
||
|
|
if (filteredProjects.length === 0) {
|
||
|
|
const now = new Date();
|
||
|
|
return {
|
||
|
|
timelineStart: new Date(now.getFullYear(), now.getMonth(), 1),
|
||
|
|
timelineEnd: new Date(now.getFullYear(), now.getMonth() + 6, 0),
|
||
|
|
months: [],
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
const allDates = filteredProjects.flatMap(p => [new Date(p.startDate), new Date(p.endDate)]);
|
||
|
|
const minDate = new Date(Math.min(...allDates.map(d => d.getTime())));
|
||
|
|
const maxDate = new Date(Math.max(...allDates.map(d => d.getTime())));
|
||
|
|
|
||
|
|
// Añadir margen de un mes antes y después
|
||
|
|
const start = new Date(minDate.getFullYear(), minDate.getMonth() - 1, 1);
|
||
|
|
const end = new Date(maxDate.getFullYear(), maxDate.getMonth() + 2, 0);
|
||
|
|
|
||
|
|
return {
|
||
|
|
timelineStart: start,
|
||
|
|
timelineEnd: end,
|
||
|
|
months: getMonthsBetween(start, end),
|
||
|
|
};
|
||
|
|
}, [filteredProjects]);
|
||
|
|
|
||
|
|
// Calcular meses visibles según el modo de vista
|
||
|
|
const visibleMonths = useMemo(() => {
|
||
|
|
const monthsToShow = viewMode === "month" ? 3 : viewMode === "quarter" ? 6 : 12;
|
||
|
|
const startIdx = Math.max(0, Math.min(viewOffset, months.length - monthsToShow));
|
||
|
|
return months.slice(startIdx, startIdx + monthsToShow);
|
||
|
|
}, [months, viewMode, viewOffset]);
|
||
|
|
|
||
|
|
// Calcular el ancho total en días para los meses visibles
|
||
|
|
const { totalDays, visibleStart, visibleEnd } = useMemo(() => {
|
||
|
|
if (visibleMonths.length === 0) {
|
||
|
|
return { totalDays: 30, visibleStart: new Date(), visibleEnd: new Date() };
|
||
|
|
}
|
||
|
|
|
||
|
|
const first = visibleMonths[0];
|
||
|
|
const last = visibleMonths[visibleMonths.length - 1];
|
||
|
|
const start = new Date(first.year, first.month, 1);
|
||
|
|
const end = new Date(last.year, last.month + 1, 0);
|
||
|
|
|
||
|
|
return {
|
||
|
|
totalDays: getDaysBetween(start, end),
|
||
|
|
visibleStart: start,
|
||
|
|
visibleEnd: end,
|
||
|
|
};
|
||
|
|
}, [visibleMonths]);
|
||
|
|
|
||
|
|
// Navegación
|
||
|
|
const canGoBack = viewOffset > 0;
|
||
|
|
const canGoForward = viewOffset + (viewMode === "month" ? 3 : viewMode === "quarter" ? 6 : 12) < months.length;
|
||
|
|
|
||
|
|
const goBack = () => {
|
||
|
|
const step = viewMode === "month" ? 1 : viewMode === "quarter" ? 3 : 6;
|
||
|
|
setViewOffset(Math.max(0, viewOffset - step));
|
||
|
|
};
|
||
|
|
|
||
|
|
const goForward = () => {
|
||
|
|
const step = viewMode === "month" ? 1 : viewMode === "quarter" ? 3 : 6;
|
||
|
|
const maxOffset = Math.max(0, months.length - (viewMode === "month" ? 3 : viewMode === "quarter" ? 6 : 12));
|
||
|
|
setViewOffset(Math.min(maxOffset, viewOffset + step));
|
||
|
|
};
|
||
|
|
|
||
|
|
const goToToday = () => {
|
||
|
|
const now = new Date();
|
||
|
|
const todayIndex = months.findIndex(m => m.month === now.getMonth() && m.year === now.getFullYear());
|
||
|
|
if (todayIndex >= 0) {
|
||
|
|
setViewOffset(Math.max(0, todayIndex - 1));
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
if (error) {
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 flex items-center justify-center">
|
||
|
|
<div className="text-center">
|
||
|
|
<AlertCircle className="w-16 h-16 text-red-400 mx-auto mb-4" />
|
||
|
|
<p className="text-red-600 text-lg">{error}</p>
|
||
|
|
<button
|
||
|
|
onClick={() => window.location.reload()}
|
||
|
|
className="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
|
||
|
|
>
|
||
|
|
Reintentar
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
|
||
|
|
{/* Header */}
|
||
|
|
<header className="bg-white border-b border-gray-200 sticky top-0 z-10">
|
||
|
|
<div className="max-w-full mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<div className="flex items-center gap-3">
|
||
|
|
<div className="p-2 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg">
|
||
|
|
<GanttIcon className="w-6 h-6 text-white" />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h1 className="text-2xl font-bold text-gray-900">Diagrama de Gantt</h1>
|
||
|
|
<p className="text-sm text-gray-500">
|
||
|
|
Timeline de {filteredProjects.length} proyectos
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Controles */}
|
||
|
|
<div className="flex items-center gap-3">
|
||
|
|
{/* Filtro de estado */}
|
||
|
|
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||
|
|
<SelectTrigger className="w-40">
|
||
|
|
<Filter className="w-4 h-4 mr-2" />
|
||
|
|
<SelectValue placeholder="Estado" />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectItem value="all">Todos</SelectItem>
|
||
|
|
<SelectItem value="0">Borrador</SelectItem>
|
||
|
|
<SelectItem value="1">Abierto</SelectItem>
|
||
|
|
<SelectItem value="2">Cerrado</SelectItem>
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
|
||
|
|
{/* Selector de vista */}
|
||
|
|
<Select value={viewMode} onValueChange={(v: ViewMode) => setViewMode(v)}>
|
||
|
|
<SelectTrigger className="w-32">
|
||
|
|
<SelectValue />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectItem value="month">3 meses</SelectItem>
|
||
|
|
<SelectItem value="quarter">6 meses</SelectItem>
|
||
|
|
<SelectItem value="year">12 meses</SelectItem>
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
|
||
|
|
{/* Navegación */}
|
||
|
|
<div className="flex items-center gap-1">
|
||
|
|
<Button variant="outline" size="icon" onClick={goBack} disabled={!canGoBack}>
|
||
|
|
<ChevronLeft className="w-4 h-4" />
|
||
|
|
</Button>
|
||
|
|
<Button variant="outline" size="sm" onClick={goToToday}>
|
||
|
|
<Calendar className="w-4 h-4 mr-1" />
|
||
|
|
Hoy
|
||
|
|
</Button>
|
||
|
|
<Button variant="outline" size="icon" onClick={goForward} disabled={!canGoForward}>
|
||
|
|
<ChevronRight className="w-4 h-4" />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
{/* Content */}
|
||
|
|
<main className="max-w-full mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
||
|
|
{loading ? (
|
||
|
|
<GanttSkeleton />
|
||
|
|
) : filteredProjects.length === 0 ? (
|
||
|
|
<Card className="border-gray-200">
|
||
|
|
<CardContent className="py-16 text-center">
|
||
|
|
<GanttIcon className="w-16 h-16 text-gray-300 mx-auto mb-4" />
|
||
|
|
<h3 className="text-xl font-semibold text-gray-700">No hay proyectos</h3>
|
||
|
|
<p className="text-gray-500 mt-2">No se encontraron proyectos con los filtros seleccionados</p>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
) : (
|
||
|
|
<Card className="border-gray-200 overflow-hidden">
|
||
|
|
<CardContent className="p-0">
|
||
|
|
<div className="flex">
|
||
|
|
{/* Columna de nombres de proyectos */}
|
||
|
|
<div className="w-64 flex-shrink-0 border-r border-gray-200 bg-gray-50">
|
||
|
|
{/* Header */}
|
||
|
|
<div className="h-16 border-b border-gray-200 flex items-center px-4">
|
||
|
|
<span className="font-semibold text-gray-700">Proyecto</span>
|
||
|
|
</div>
|
||
|
|
{/* Lista de proyectos */}
|
||
|
|
{filteredProjects.map((project, index) => {
|
||
|
|
const color = getProjectColor(index);
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
key={project.id}
|
||
|
|
className="h-14 border-b border-gray-100 flex items-center px-4 hover:bg-gray-100 transition-colors"
|
||
|
|
>
|
||
|
|
<div className="flex items-center gap-3 min-w-0">
|
||
|
|
<div className={`w-3 h-3 rounded-full ${color.bg} flex-shrink-0`} />
|
||
|
|
<div className="min-w-0">
|
||
|
|
<p className="text-sm font-medium text-gray-800 truncate" title={project.name}>
|
||
|
|
{project.name}
|
||
|
|
</p>
|
||
|
|
<p className="text-xs text-gray-500">{project.progress}%</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Timeline */}
|
||
|
|
<div className="flex-1 overflow-x-auto">
|
||
|
|
{/* Header con meses */}
|
||
|
|
<div className="h-16 border-b border-gray-200 flex">
|
||
|
|
{visibleMonths.map((month, idx) => {
|
||
|
|
const daysInMonth = getDaysInMonth(month.month, month.year);
|
||
|
|
const widthPercent = (daysInMonth / totalDays) * 100;
|
||
|
|
const isCurrentMonth = new Date().getMonth() === month.month && new Date().getFullYear() === month.year;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
key={`${month.year}-${month.month}`}
|
||
|
|
className={`flex-shrink-0 border-r border-gray-200 flex flex-col justify-center px-2 ${
|
||
|
|
isCurrentMonth ? "bg-blue-50" : "bg-white"
|
||
|
|
}`}
|
||
|
|
style={{ width: `${widthPercent}%`, minWidth: "80px" }}
|
||
|
|
>
|
||
|
|
<span className={`text-xs font-medium ${isCurrentMonth ? "text-blue-700" : "text-gray-600"}`}>
|
||
|
|
{month.label}
|
||
|
|
</span>
|
||
|
|
<span className="text-xs text-gray-400">{daysInMonth} días</span>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Barras del Gantt */}
|
||
|
|
<TooltipProvider>
|
||
|
|
{filteredProjects.map((project, index) => {
|
||
|
|
const color = getProjectColor(index);
|
||
|
|
const projectStart = new Date(project.startDate);
|
||
|
|
const projectEnd = new Date(project.endDate);
|
||
|
|
|
||
|
|
// Calcular posición y ancho de la barra
|
||
|
|
const startOffset = Math.max(0, getDaysBetween(visibleStart, projectStart));
|
||
|
|
const endOffset = Math.min(totalDays, getDaysBetween(visibleStart, projectEnd));
|
||
|
|
|
||
|
|
const leftPercent = (startOffset / totalDays) * 100;
|
||
|
|
const widthPercent = Math.max(1, ((endOffset - startOffset) / totalDays) * 100);
|
||
|
|
|
||
|
|
// Verificar si el proyecto está visible en el rango actual
|
||
|
|
const isVisible = projectEnd >= visibleStart && projectStart <= visibleEnd;
|
||
|
|
const isOverdue = projectEnd < new Date() && project.progress < 100 && project.status === "1";
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
key={project.id}
|
||
|
|
className="h-14 border-b border-gray-100 relative"
|
||
|
|
>
|
||
|
|
{/* Grid de meses */}
|
||
|
|
<div className="absolute inset-0 flex">
|
||
|
|
{visibleMonths.map((month, idx) => {
|
||
|
|
const daysInMonth = getDaysInMonth(month.month, month.year);
|
||
|
|
const monthWidthPercent = (daysInMonth / totalDays) * 100;
|
||
|
|
const isCurrentMonth = new Date().getMonth() === month.month && new Date().getFullYear() === month.year;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
key={`grid-${month.year}-${month.month}`}
|
||
|
|
className={`flex-shrink-0 border-r border-gray-100 ${
|
||
|
|
isCurrentMonth ? "bg-blue-50/30" : ""
|
||
|
|
}`}
|
||
|
|
style={{ width: `${monthWidthPercent}%`, minWidth: "80px" }}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Barra del proyecto */}
|
||
|
|
{isVisible && (
|
||
|
|
<Tooltip>
|
||
|
|
<TooltipTrigger asChild>
|
||
|
|
<div
|
||
|
|
className={`absolute top-2 h-10 rounded-md cursor-pointer transition-all hover:scale-[1.02] hover:shadow-md ${
|
||
|
|
isOverdue ? "ring-2 ring-red-400" : ""
|
||
|
|
}`}
|
||
|
|
style={{
|
||
|
|
left: `${leftPercent}%`,
|
||
|
|
width: `${widthPercent}%`,
|
||
|
|
minWidth: "20px",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{/* Fondo de la barra */}
|
||
|
|
<div className={`absolute inset-0 ${color.light} rounded-md`} />
|
||
|
|
|
||
|
|
{/* Progreso */}
|
||
|
|
<div
|
||
|
|
className={`absolute inset-y-0 left-0 ${color.bg} rounded-md transition-all`}
|
||
|
|
style={{ width: `${project.progress}%` }}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* Contenido de la barra */}
|
||
|
|
<div className="relative h-full flex items-center px-2 z-10">
|
||
|
|
<span className="text-xs font-medium text-white truncate drop-shadow-sm">
|
||
|
|
{project.progress >= 30 ? `${project.progress}%` : ""}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</TooltipTrigger>
|
||
|
|
<TooltipContent side="top" className="max-w-xs">
|
||
|
|
<div className="space-y-1">
|
||
|
|
<p className="font-semibold">{project.name}</p>
|
||
|
|
<div className="text-xs space-y-0.5">
|
||
|
|
<p><span className="text-gray-500">Estado:</span> {STATUS_LABELS[project.status]}</p>
|
||
|
|
<p><span className="text-gray-500">Progreso:</span> {project.progress}%</p>
|
||
|
|
<p><span className="text-gray-500">Inicio:</span> {formatDate(project.startDate)}</p>
|
||
|
|
<p><span className="text-gray-500">Fin:</span> {formatDate(project.endDate)}</p>
|
||
|
|
<p><span className="text-gray-500">Cliente:</span> {project.client}</p>
|
||
|
|
{isOverdue && (
|
||
|
|
<p className="text-red-500 font-medium">Proyecto retrasado</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</TooltipContent>
|
||
|
|
</Tooltip>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</TooltipProvider>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Leyenda */}
|
||
|
|
{!loading && filteredProjects.length > 0 && (
|
||
|
|
<div className="mt-6 flex flex-wrap items-center gap-6">
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<div className="w-16 h-4 bg-gray-200 rounded relative overflow-hidden">
|
||
|
|
<div className="absolute inset-y-0 left-0 w-1/2 bg-blue-500 rounded" />
|
||
|
|
</div>
|
||
|
|
<span className="text-sm text-gray-600">Progreso del proyecto</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<div className="w-4 h-4 bg-blue-50 border-2 border-blue-500 rounded" />
|
||
|
|
<span className="text-sm text-gray-600">Mes actual</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<div className="w-4 h-4 bg-gray-200 ring-2 ring-red-400 rounded" />
|
||
|
|
<span className="text-sm text-gray-600">Proyecto retrasado</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
function GanttSkeleton() {
|
||
|
|
return (
|
||
|
|
<Card className="border-gray-200">
|
||
|
|
<CardContent className="p-0">
|
||
|
|
<div className="flex">
|
||
|
|
<div className="w-64 flex-shrink-0 border-r border-gray-200 bg-gray-50">
|
||
|
|
<div className="h-16 border-b border-gray-200 flex items-center px-4">
|
||
|
|
<Skeleton className="h-4 w-20" />
|
||
|
|
</div>
|
||
|
|
{Array.from({ length: 5 }).map((_, i) => (
|
||
|
|
<div key={i} className="h-14 border-b border-gray-100 flex items-center px-4">
|
||
|
|
<div className="flex items-center gap-3">
|
||
|
|
<Skeleton className="w-3 h-3 rounded-full" />
|
||
|
|
<div>
|
||
|
|
<Skeleton className="h-4 w-32 mb-1" />
|
||
|
|
<Skeleton className="h-3 w-12" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
<div className="flex-1">
|
||
|
|
<div className="h-16 border-b border-gray-200 flex">
|
||
|
|
{Array.from({ length: 3 }).map((_, i) => (
|
||
|
|
<div key={i} className="flex-1 border-r border-gray-200 flex items-center justify-center">
|
||
|
|
<Skeleton className="h-4 w-20" />
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
{Array.from({ length: 5 }).map((_, i) => (
|
||
|
|
<div key={i} className="h-14 border-b border-gray-100 px-4 flex items-center">
|
||
|
|
<Skeleton className="h-8 w-full max-w-md rounded-md" />
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
);
|
||
|
|
}
|