Arreglar y rediseñar un poco el tema de los Gantts, Aun hay que cambiarlo
This commit is contained in:
marcos
parent
5a9b509b1b
commit
2f42b7bbad
|
|
@ -1,26 +1,25 @@
|
|||
"use client";
|
||||
|
||||
import { useState, useEffect, useMemo } from "react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
GanttChart as GanttIcon,
|
||||
AlertCircle,
|
||||
Calendar,
|
||||
CalendarRange,
|
||||
CheckCircle2,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Calendar,
|
||||
History,
|
||||
Clock,
|
||||
Filter,
|
||||
GanttChartSquare,
|
||||
Layers,
|
||||
Search,
|
||||
} 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 { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
|
|
@ -28,22 +27,15 @@ import {
|
|||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
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 MONTH_WIDTH_PX = 72;
|
||||
const ROW_HEIGHT_PX = 52;
|
||||
|
||||
type ProjectStatusFilter = "all" | ProjectStatus;
|
||||
type ZoomLevel = "compact" | "normal" | "detailed";
|
||||
|
||||
const STATUS_LABELS: Record<ProjectStatus, string> = {
|
||||
"0": "Borrador",
|
||||
|
|
@ -51,27 +43,34 @@ const STATUS_LABELS: Record<ProjectStatus, string> = {
|
|||
"2": "Cerrado",
|
||||
};
|
||||
|
||||
type ViewMode = "month" | "quarter" | "year";
|
||||
type TimeRange = "future" | "past" | "all";
|
||||
const STATUS_BADGE_CLASS: Record<ProjectStatus, string> = {
|
||||
"0": "bg-gray-100 text-gray-700 border-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-700",
|
||||
"1": "bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-900/35 dark:text-blue-300 dark:border-blue-800",
|
||||
"2": "bg-green-100 text-green-700 border-green-200 dark:bg-green-900/35 dark:text-green-300 dark:border-green-800",
|
||||
};
|
||||
|
||||
function getProjectColor(index: number) {
|
||||
return PROJECT_COLORS[index % PROJECT_COLORS.length];
|
||||
const BAR_COLOR_BY_STATUS: Record<ProjectStatus, { base: string; fill: string }> = {
|
||||
"0": { base: "bg-gray-200 dark:bg-gray-700", fill: "bg-gray-500 dark:bg-gray-400" },
|
||||
"1": { base: "bg-blue-100 dark:bg-blue-950/50", fill: "bg-gradient-to-r from-blue-500 to-violet-600" },
|
||||
"2": { base: "bg-green-100 dark:bg-green-950/50", fill: "bg-gradient-to-r from-emerald-500 to-green-600" },
|
||||
};
|
||||
|
||||
interface TimelineMonth {
|
||||
month: number;
|
||||
year: number;
|
||||
label: string;
|
||||
}
|
||||
|
||||
// Formatear fecha
|
||||
function formatDate(dateStr: string): string {
|
||||
const date = new Date(dateStr);
|
||||
return date.toLocaleDateString("es-ES", { day: "2-digit", month: "short", year: "numeric" });
|
||||
interface PlannedProject {
|
||||
project: Project;
|
||||
start: Date;
|
||||
end: Date;
|
||||
startOffsetDays: number;
|
||||
durationDays: number;
|
||||
}
|
||||
|
||||
// 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 }[] = [];
|
||||
function getMonthsBetween(start: Date, end: Date): TimelineMonth[] {
|
||||
const months: TimelineMonth[] = [];
|
||||
const current = new Date(start.getFullYear(), start.getMonth(), 1);
|
||||
const endMonth = new Date(end.getFullYear(), end.getMonth(), 1);
|
||||
|
||||
|
|
@ -87,221 +86,231 @@ function getMonthsBetween(start: Date, end: Date): { month: number; year: number
|
|||
return months;
|
||||
}
|
||||
|
||||
// Obtener días en un mes
|
||||
function getDaysInMonth(month: number, year: number): number {
|
||||
return new Date(year, month + 1, 0).getDate();
|
||||
function getDaysBetween(start: Date, end: Date): number {
|
||||
const msPerDay = 1000 * 60 * 60 * 24;
|
||||
const startMidnight = new Date(start.getFullYear(), start.getMonth(), start.getDate());
|
||||
const endMidnight = new Date(end.getFullYear(), end.getMonth(), end.getDate());
|
||||
return Math.floor((endMidnight.getTime() - startMidnight.getTime()) / msPerDay);
|
||||
}
|
||||
|
||||
function clamp(value: number, min: number, max: number): number {
|
||||
return Math.min(max, Math.max(min, value));
|
||||
}
|
||||
|
||||
function parseProjectDates(project: Project): { start: Date; end: Date } | null {
|
||||
const start = new Date(project.startDate);
|
||||
const end = new Date(project.endDate);
|
||||
if (isNaN(start.getTime()) || isNaN(end.getTime())) return null;
|
||||
|
||||
if (start <= end) return { start, end };
|
||||
return { start: end, end: start };
|
||||
}
|
||||
|
||||
function formatDate(date: Date): string {
|
||||
return date.toLocaleDateString("es-ES", {
|
||||
day: "2-digit",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
});
|
||||
}
|
||||
|
||||
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 [timeRange, setTimeRange] = useState<TimeRange>("future");
|
||||
const [viewOffset, setViewOffset] = useState(0);
|
||||
|
||||
const [statusFilter, setStatusFilter] = useState<ProjectStatusFilter>("all");
|
||||
const [search, setSearch] = useState("");
|
||||
const [zoom, setZoom] = useState<ZoomLevel>("normal");
|
||||
const [selectedIds, setSelectedIds] = useState<number[]>([]);
|
||||
const [showSelectionPanel, setShowSelectionPanel] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
async function loadProjects() {
|
||||
async function load() {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await getProjects();
|
||||
setProjects(data);
|
||||
const sorted = [...data].sort((a, b) => {
|
||||
const da = parseProjectDates(a)?.start.getTime() ?? Number.MAX_SAFE_INTEGER;
|
||||
const db = parseProjectDates(b)?.start.getTime() ?? Number.MAX_SAFE_INTEGER;
|
||||
return da - db;
|
||||
});
|
||||
setProjects(sorted);
|
||||
setSelectedIds(sorted.map((project) => project.id));
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
console.error("Error loading projects:", err);
|
||||
setError("Error al cargar los proyectos");
|
||||
setError("No se pudieron cargar los proyectos para el Gantt");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
loadProjects();
|
||||
|
||||
load();
|
||||
}, []);
|
||||
|
||||
// Filtrar proyectos
|
||||
const filteredProjects = useMemo(() => {
|
||||
let filtered = projects;
|
||||
return projects.filter((project) => {
|
||||
const statusOk = statusFilter === "all" || project.status === statusFilter;
|
||||
const searchValue = search.trim().toLowerCase();
|
||||
const searchOk =
|
||||
searchValue.length === 0 ||
|
||||
project.name.toLowerCase().includes(searchValue) ||
|
||||
project.client.toLowerCase().includes(searchValue) ||
|
||||
project.ref.toLowerCase().includes(searchValue);
|
||||
|
||||
// Filtrar por estado
|
||||
if (statusFilter !== "all") {
|
||||
filtered = filtered.filter(p => p.status === statusFilter);
|
||||
}
|
||||
return statusOk && searchOk;
|
||||
});
|
||||
}, [projects, search, statusFilter]);
|
||||
|
||||
// Filtrar por rango temporal
|
||||
const now = new Date();
|
||||
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
|
||||
useEffect(() => {
|
||||
setSelectedIds((current) => {
|
||||
const available = new Set(filteredProjects.map((project) => project.id));
|
||||
const kept = current.filter((id) => available.has(id));
|
||||
if (kept.length === current.length) return current;
|
||||
return kept;
|
||||
});
|
||||
}, [filteredProjects]);
|
||||
|
||||
if (timeRange === "future") {
|
||||
// Proyectos que terminan hoy o en el futuro
|
||||
filtered = filtered.filter(p => new Date(p.endDate) >= today);
|
||||
} else if (timeRange === "past") {
|
||||
// Proyectos que ya terminaron
|
||||
filtered = filtered.filter(p => new Date(p.endDate) < today);
|
||||
}
|
||||
// "all" no filtra
|
||||
const visibleProjects = useMemo(() => {
|
||||
const selected = new Set(selectedIds);
|
||||
return filteredProjects.filter((project) => selected.has(project.id));
|
||||
}, [filteredProjects, selectedIds]);
|
||||
|
||||
return filtered;
|
||||
}, [projects, statusFilter, timeRange]);
|
||||
const { timelineStart, timelineEnd, months, totalDays } = useMemo(() => {
|
||||
const projectsWithDates = visibleProjects
|
||||
.map((project) => ({ project, parsed: parseProjectDates(project) }))
|
||||
.filter((item): item is { project: Project; parsed: { start: Date; end: Date } } => item.parsed !== null);
|
||||
|
||||
// Calcular rango de fechas del timeline basado en los proyectos
|
||||
// - Futuro: desde el mes actual hasta el fin del proyecto más tardío
|
||||
// - Pasado: desde el inicio del proyecto más antiguo hasta el mes actual
|
||||
// - Todo: desde el inicio del proyecto más antiguo hasta el fin del más tardío
|
||||
const { timelineStart, timelineEnd, months } = useMemo(() => {
|
||||
const now = new Date();
|
||||
const currentMonthStart = new Date(now.getFullYear(), now.getMonth(), 1);
|
||||
const currentMonthEnd = new Date(now.getFullYear(), now.getMonth() + 1, 0);
|
||||
|
||||
// Si no hay proyectos, mostrar 12 meses desde el actual
|
||||
if (filteredProjects.length === 0) {
|
||||
const start = new Date(now.getFullYear(), now.getMonth() - 6, 1);
|
||||
const end = new Date(now.getFullYear(), now.getMonth() + 6, 0);
|
||||
if (projectsWithDates.length === 0) {
|
||||
const now = new Date();
|
||||
const start = new Date(now.getFullYear(), now.getMonth() - 2, 1);
|
||||
const end = new Date(now.getFullYear(), now.getMonth() + 3, 0);
|
||||
const monthList = getMonthsBetween(start, end);
|
||||
return {
|
||||
timelineStart: start,
|
||||
timelineEnd: end,
|
||||
months: getMonthsBetween(start, end),
|
||||
months: monthList,
|
||||
totalDays: Math.max(1, getDaysBetween(start, end) + 1),
|
||||
};
|
||||
}
|
||||
|
||||
// Calcular fechas extremas de los proyectos
|
||||
const allStartDates = filteredProjects.map(p => new Date(p.startDate));
|
||||
const allEndDates = filteredProjects.map(p => new Date(p.endDate));
|
||||
const minProjectStart = new Date(Math.min(...allStartDates.map(d => d.getTime())));
|
||||
const maxProjectEnd = new Date(Math.max(...allEndDates.map(d => d.getTime())));
|
||||
const minStart = new Date(
|
||||
Math.min(...projectsWithDates.map((item) => item.parsed.start.getTime()))
|
||||
);
|
||||
const maxEnd = new Date(
|
||||
Math.max(...projectsWithDates.map((item) => item.parsed.end.getTime()))
|
||||
);
|
||||
|
||||
if (timeRange === "future") {
|
||||
// Desde el mes actual hasta el fin del proyecto más tardío
|
||||
const start = currentMonthStart;
|
||||
const end = new Date(maxProjectEnd.getFullYear(), maxProjectEnd.getMonth() + 1, 0);
|
||||
|
||||
return {
|
||||
timelineStart: start,
|
||||
timelineEnd: end,
|
||||
months: getMonthsBetween(start, end),
|
||||
};
|
||||
} else if (timeRange === "past") {
|
||||
// Desde el inicio del proyecto más antiguo hasta el mes actual
|
||||
const start = new Date(minProjectStart.getFullYear(), minProjectStart.getMonth(), 1);
|
||||
const end = currentMonthEnd;
|
||||
|
||||
return {
|
||||
timelineStart: start,
|
||||
timelineEnd: end,
|
||||
months: getMonthsBetween(start, end),
|
||||
};
|
||||
} else {
|
||||
// "all" - Desde el inicio del proyecto más antiguo hasta el fin del más tardío
|
||||
const start = new Date(minProjectStart.getFullYear(), minProjectStart.getMonth(), 1);
|
||||
const end = new Date(maxProjectEnd.getFullYear(), maxProjectEnd.getMonth() + 1, 0);
|
||||
|
||||
return {
|
||||
timelineStart: start,
|
||||
timelineEnd: end,
|
||||
months: getMonthsBetween(start, end),
|
||||
};
|
||||
}
|
||||
}, [filteredProjects, timeRange]);
|
||||
|
||||
// Calcular meses visibles según el modo de vista
|
||||
// En modo "todo", mostrar TODOS los meses (scroll horizontal en el timeline)
|
||||
// En modo "pasado", empezamos desde los meses más recientes
|
||||
const visibleMonths = useMemo(() => {
|
||||
// En modo "todo", mostrar todos los meses
|
||||
if (timeRange === "all") {
|
||||
return months;
|
||||
}
|
||||
|
||||
const monthsToShow = viewMode === "month" ? 3 : viewMode === "quarter" ? 6 : 12;
|
||||
|
||||
if (timeRange === "past") {
|
||||
// En pasado, viewOffset 0 = meses más recientes (final del array)
|
||||
const maxOffset = Math.max(0, months.length - monthsToShow);
|
||||
const startIdx = Math.max(0, maxOffset - viewOffset);
|
||||
return months.slice(startIdx, startIdx + monthsToShow);
|
||||
} else {
|
||||
// En futuro, viewOffset 0 = primeros meses
|
||||
const startIdx = Math.max(0, Math.min(viewOffset, months.length - monthsToShow));
|
||||
return months.slice(startIdx, startIdx + monthsToShow);
|
||||
}
|
||||
}, [months, viewMode, viewOffset, timeRange]);
|
||||
|
||||
// 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);
|
||||
const start = new Date(minStart.getFullYear(), minStart.getMonth(), 1);
|
||||
const end = new Date(maxEnd.getFullYear(), maxEnd.getMonth() + 1, 0);
|
||||
const monthList = getMonthsBetween(start, end);
|
||||
|
||||
return {
|
||||
totalDays: getDaysBetween(start, end),
|
||||
visibleStart: start,
|
||||
visibleEnd: end,
|
||||
timelineStart: start,
|
||||
timelineEnd: end,
|
||||
months: monthList,
|
||||
totalDays: Math.max(1, getDaysBetween(start, end) + 1),
|
||||
};
|
||||
}, [visibleMonths]);
|
||||
}, [visibleProjects]);
|
||||
|
||||
// Navegación
|
||||
const monthsToShow = viewMode === "month" ? 3 : viewMode === "quarter" ? 6 : 12;
|
||||
const maxOffset = Math.max(0, months.length - monthsToShow);
|
||||
const canGoBack = viewOffset > 0;
|
||||
const canGoForward = viewOffset < maxOffset;
|
||||
const todayPercent = useMemo(() => {
|
||||
const now = new Date();
|
||||
if (now < timelineStart || now > timelineEnd) return null;
|
||||
const offset = getDaysBetween(timelineStart, now);
|
||||
return clamp((offset / totalDays) * 100, 0, 100);
|
||||
}, [timelineEnd, timelineStart, totalDays]);
|
||||
|
||||
const goBack = () => {
|
||||
const step = viewMode === "month" ? 1 : viewMode === "quarter" ? 3 : 6;
|
||||
setViewOffset(Math.max(0, viewOffset - step));
|
||||
};
|
||||
const plannedRows = useMemo<PlannedProject[]>(() => {
|
||||
return visibleProjects
|
||||
.map((project) => {
|
||||
const parsed = parseProjectDates(project);
|
||||
if (!parsed) return null;
|
||||
|
||||
const goForward = () => {
|
||||
const step = viewMode === "month" ? 1 : viewMode === "quarter" ? 3 : 6;
|
||||
setViewOffset(Math.min(maxOffset, viewOffset + step));
|
||||
};
|
||||
const startOffsetDays = clamp(getDaysBetween(timelineStart, parsed.start), 0, totalDays - 1);
|
||||
const durationDays = Math.max(1, getDaysBetween(parsed.start, parsed.end) + 1);
|
||||
|
||||
const goToToday = () => {
|
||||
setViewOffset(0); // Volver al mes actual
|
||||
return {
|
||||
project,
|
||||
start: parsed.start,
|
||||
end: parsed.end,
|
||||
startOffsetDays,
|
||||
durationDays,
|
||||
};
|
||||
})
|
||||
.filter((item): item is PlannedProject => item !== null);
|
||||
}, [timelineStart, totalDays, visibleProjects]);
|
||||
|
||||
const timelineWidth = months.length * MONTH_WIDTH_PX;
|
||||
|
||||
const stats = useMemo(() => {
|
||||
const total = visibleProjects.length;
|
||||
const open = visibleProjects.filter((project) => project.status === "1").length;
|
||||
const closed = visibleProjects.filter((project) => project.status === "2").length;
|
||||
const draft = visibleProjects.filter((project) => project.status === "0").length;
|
||||
return { total, open, closed, draft };
|
||||
}, [visibleProjects]);
|
||||
|
||||
const selectAll = () => setSelectedIds(filteredProjects.map((project) => project.id));
|
||||
const clearSelection = () => setSelectedIds([]);
|
||||
|
||||
const toggleProjectSelection = (projectId: number, checked: boolean) => {
|
||||
setSelectedIds((current) => {
|
||||
if (checked && current.includes(projectId)) return current;
|
||||
if (!checked && !current.includes(projectId)) return current;
|
||||
return checked ? [...current, projectId] : current.filter((id) => id !== projectId);
|
||||
});
|
||||
};
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="min-h-screen bg-background flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<AlertCircle className="w-16 h-16 text-red-400 dark:text-red-500 mx-auto mb-4" />
|
||||
<p className="text-red-600 dark:text-red-400 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 className="min-h-screen bg-background flex items-center justify-center px-4">
|
||||
<div className="text-center max-w-md">
|
||||
<AlertCircle className="w-12 h-12 text-red-500 mx-auto mb-3" />
|
||||
<h2 className="text-lg font-semibold text-foreground">Error cargando el Gantt</h2>
|
||||
<p className="text-sm text-muted-foreground mt-1">{error}</p>
|
||||
<Button onClick={() => window.location.reload()} className="mt-4">Reintentar</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-screen flex flex-col bg-background">
|
||||
{/* Header - siempre visible */}
|
||||
<header className="bg-card border-b flex-shrink-0 z-10">
|
||||
<div className="px-4 sm:px-6 lg:px-8 py-4">
|
||||
<div className="flex items-center justify-between flex-wrap gap-4">
|
||||
<div className="min-h-screen bg-background">
|
||||
<section className="border-b bg-gradient-to-r from-blue-50/70 via-background to-violet-50/70 dark:from-blue-950/25 dark:via-background dark:to-violet-950/25">
|
||||
<div className="px-4 sm:px-6 lg:px-8 py-5 space-y-4">
|
||||
<div className="flex items-start justify-between gap-4 flex-wrap">
|
||||
<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 className="p-2 rounded-lg bg-gradient-to-r from-blue-500 to-violet-600 shadow-sm">
|
||||
<GanttChartSquare className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-foreground">Diagrama de Gantt</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Timeline de {filteredProjects.length} proyectos
|
||||
</p>
|
||||
<h1 className="text-2xl font-bold text-foreground">Roadmap de Proyectos</h1>
|
||||
<p className="text-sm text-muted-foreground">Vista global rediseñada para planificación ejecutiva</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Controles */}
|
||||
<div className="flex items-center gap-3 flex-wrap">
|
||||
{/* Filtro de estado */}
|
||||
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<Button
|
||||
variant={showSelectionPanel ? "default" : "outline"}
|
||||
onClick={() => setShowSelectionPanel((current) => !current)}
|
||||
className="gap-2"
|
||||
>
|
||||
<Layers className="w-4 h-4" />
|
||||
{showSelectionPanel ? "Ocultar selección" : "Mostrar selección"}
|
||||
</Button>
|
||||
|
||||
<div className="relative">
|
||||
<Search className="w-4 h-4 text-muted-foreground absolute left-2.5 top-2.5" />
|
||||
<Input
|
||||
value={search}
|
||||
onChange={(event) => setSearch(event.target.value)}
|
||||
placeholder="Buscar proyecto..."
|
||||
className="pl-8 w-56"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Select value={statusFilter} onValueChange={(value: ProjectStatusFilter) => setStatusFilter(value)}>
|
||||
<SelectTrigger className="w-40">
|
||||
<Filter className="w-4 h-4 mr-2" />
|
||||
<SelectValue placeholder="Estado" />
|
||||
|
|
@ -314,230 +323,192 @@ export default function GanttPage() {
|
|||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{/* Selector de rango temporal */}
|
||||
<div className="flex items-center gap-1 border rounded-lg p-1">
|
||||
<Button
|
||||
variant={timeRange === "past" ? "default" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => { setTimeRange("past"); setViewOffset(0); }}
|
||||
>
|
||||
<History className="w-4 h-4 mr-1" />
|
||||
Pasado
|
||||
</Button>
|
||||
<Button
|
||||
variant={timeRange === "future" ? "default" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => { setTimeRange("future"); setViewOffset(0); }}
|
||||
>
|
||||
<Clock className="w-4 h-4 mr-1" />
|
||||
Futuro
|
||||
</Button>
|
||||
<Button
|
||||
variant={timeRange === "all" ? "default" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => { setTimeRange("all"); setViewOffset(0); }}
|
||||
>
|
||||
<Calendar className="w-4 h-4 mr-1" />
|
||||
Todo
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Selector de vista */}
|
||||
<Select value={viewMode} onValueChange={(v: ViewMode) => setViewMode(v)}>
|
||||
<SelectTrigger className="w-32">
|
||||
<SelectValue />
|
||||
<Select value={zoom} onValueChange={(value: ZoomLevel) => setZoom(value)}>
|
||||
<SelectTrigger className="w-36">
|
||||
<CalendarRange className="w-4 h-4 mr-2" />
|
||||
<SelectValue placeholder="Zoom" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="month">3 meses</SelectItem>
|
||||
<SelectItem value="quarter">6 meses</SelectItem>
|
||||
<SelectItem value="year">12 meses</SelectItem>
|
||||
<SelectItem value="compact">Compacto</SelectItem>
|
||||
<SelectItem value="normal">Normal</SelectItem>
|
||||
<SelectItem value="detailed">Detallado</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} disabled={viewOffset === 0}>
|
||||
<Calendar className="w-4 h-4 mr-1" />
|
||||
Inicio
|
||||
</Button>
|
||||
<Button variant="outline" size="icon" onClick={goForward} disabled={!canGoForward}>
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Content - área scrollable */}
|
||||
<main className="flex-1 overflow-auto px-4 sm:px-6 lg:px-8 py-6">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<Badge variant="outline" className="bg-background/80">{stats.total} visibles</Badge>
|
||||
<Badge variant="outline" className="bg-background/80">{stats.open} abiertos</Badge>
|
||||
<Badge variant="outline" className="bg-background/80">{stats.closed} cerrados</Badge>
|
||||
<Badge variant="outline" className="bg-background/80">{stats.draft} borradores</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<main className="px-4 sm:px-6 lg:px-8 py-6">
|
||||
{loading ? (
|
||||
<GanttSkeleton />
|
||||
) : filteredProjects.length === 0 ? (
|
||||
<Card className="border">
|
||||
<CardContent className="py-16 text-center">
|
||||
<GanttIcon className="w-16 h-16 text-muted-foreground/50 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-semibold text-foreground">No hay proyectos</h3>
|
||||
<p className="text-muted-foreground mt-2">No se encontraron proyectos con los filtros seleccionados</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<Card className="border w-full">
|
||||
<CardContent className="p-0 overflow-hidden">
|
||||
<div className="flex w-full overflow-hidden">
|
||||
{/* Columna de nombres de proyectos - fija */}
|
||||
<div className="w-64 flex-shrink-0 border-r bg-muted/50">
|
||||
{/* Header */}
|
||||
<div className="h-16 border-b flex items-center px-4">
|
||||
<span className="font-semibold text-foreground">Proyecto</span>
|
||||
<div className={`grid grid-cols-1 gap-4 ${showSelectionPanel ? "xl:grid-cols-[320px_1fr]" : "xl:grid-cols-1"}`}>
|
||||
{showSelectionPanel && (
|
||||
<Card className="border shadow-sm">
|
||||
<CardContent className="p-4 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-sm font-semibold text-foreground flex items-center gap-2">
|
||||
<Layers className="w-4 h-4" />
|
||||
Selección de proyectos
|
||||
</h2>
|
||||
<span className="text-xs text-muted-foreground">{selectedIds.length}/{filteredProjects.length}</span>
|
||||
</div>
|
||||
{/* Lista de proyectos */}
|
||||
{filteredProjects.map((project, index) => {
|
||||
const color = getProjectColor(index);
|
||||
return (
|
||||
<div
|
||||
key={project.id}
|
||||
className="h-14 border-b flex items-center px-4 hover:bg-muted 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-foreground truncate" title={project.name}>
|
||||
{project.name}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">{project.progress}%</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" onClick={selectAll}>Seleccionar todos</Button>
|
||||
<Button variant="ghost" size="sm" onClick={clearSelection}>Limpiar</Button>
|
||||
</div>
|
||||
|
||||
<div className="max-h-[60vh] overflow-auto border rounded-md">
|
||||
{filteredProjects.length === 0 ? (
|
||||
<div className="p-4 text-sm text-muted-foreground">No hay proyectos con este filtro.</div>
|
||||
) : (
|
||||
filteredProjects.map((project) => {
|
||||
const checked = selectedIds.includes(project.id);
|
||||
return (
|
||||
<label
|
||||
key={project.id}
|
||||
className="flex items-start gap-2.5 p-2.5 border-b last:border-b-0 hover:bg-muted/50 cursor-pointer"
|
||||
>
|
||||
<Checkbox
|
||||
checked={checked}
|
||||
onCheckedChange={(value) => toggleProjectSelection(project.id, Boolean(value))}
|
||||
className="mt-0.5"
|
||||
/>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-sm font-medium text-foreground truncate">{project.name}</p>
|
||||
<div className="mt-1 flex items-center gap-2">
|
||||
<Badge variant="outline" className={`text-[10px] px-1.5 py-0 h-5 ${STATUS_BADGE_CLASS[project.status]}`}>
|
||||
{STATUS_LABELS[project.status]}
|
||||
</Badge>
|
||||
<span className="text-[11px] text-muted-foreground truncate">{project.client}</span>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Card className="border shadow-sm overflow-hidden">
|
||||
<CardContent className="p-0">
|
||||
{plannedRows.length === 0 ? (
|
||||
<div className="py-14 px-6 text-center">
|
||||
<Calendar className="w-10 h-10 text-muted-foreground/60 mx-auto mb-3" />
|
||||
<p className="font-medium text-foreground">No hay proyectos seleccionados para mostrar</p>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Selecciona proyectos en el panel izquierdo para ver el cronograma.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-auto">
|
||||
<div style={{ width: `${Math.max(980, timelineWidth + 320)}px` }}>
|
||||
<div className="grid grid-cols-[320px_1fr] border-b sticky top-0 z-10 bg-card/95 backdrop-blur">
|
||||
<div className="h-12 flex items-center px-4 text-xs font-semibold text-muted-foreground border-r sticky left-0 z-20 bg-card/95">
|
||||
Proyecto
|
||||
</div>
|
||||
<div className="h-12 flex">
|
||||
{months.map((month) => (
|
||||
<div
|
||||
key={`${month.year}-${month.month}`}
|
||||
className="border-r flex items-center justify-center"
|
||||
style={{ width: `${MONTH_WIDTH_PX}px` }}
|
||||
>
|
||||
<span className="text-[11px] font-medium text-muted-foreground uppercase">{month.label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Timeline - scroll horizontal en modo "todo" */}
|
||||
<div
|
||||
className={`${timeRange === "all" ? "overflow-x-auto overflow-y-hidden" : "overflow-hidden"}`}
|
||||
style={{ width: "calc(100% - 256px)" }}
|
||||
>
|
||||
<div style={{ width: timeRange === "all" ? `${visibleMonths.length * 100}px` : "100%" }}>
|
||||
{/* Header con meses */}
|
||||
<div className="h-16 border-b flex">
|
||||
{visibleMonths.map((month) => {
|
||||
const isCurrentMonth = new Date().getMonth() === month.month && new Date().getFullYear() === month.year;
|
||||
{plannedRows.map((row) => {
|
||||
const barStyle = BAR_COLOR_BY_STATUS[row.project.status];
|
||||
const leftPercent = (row.startOffsetDays / totalDays) * 100;
|
||||
const widthPercent = (row.durationDays / totalDays) * 100;
|
||||
const isCompleted = row.project.progress >= 100;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`${month.year}-${month.month}`}
|
||||
className={`flex-1 border-r flex flex-col justify-center px-2 ${
|
||||
isCurrentMonth ? "bg-blue-50 dark:bg-blue-950/30" : "bg-card"
|
||||
}`}
|
||||
>
|
||||
<span className={`text-xs font-medium ${isCurrentMonth ? "text-blue-700 dark:text-blue-400" : "text-muted-foreground"}`}>
|
||||
{month.label}
|
||||
</span>
|
||||
<div key={row.project.id} className="grid grid-cols-[320px_1fr] border-b" style={{ minHeight: `${ROW_HEIGHT_PX}px` }}>
|
||||
<Link
|
||||
href={`/proyectos/${row.project.id}`}
|
||||
className="px-4 py-2.5 border-r hover:bg-muted/50 transition-colors flex items-center sticky left-0 z-10 bg-background"
|
||||
>
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium text-foreground truncate">{row.project.name}</p>
|
||||
<div className="mt-1 flex items-center gap-2">
|
||||
<Badge variant="outline" className={`text-[10px] px-1.5 py-0 h-5 ${STATUS_BADGE_CLASS[row.project.status]}`}>
|
||||
{STATUS_LABELS[row.project.status]}
|
||||
</Badge>
|
||||
<span className="text-[11px] text-muted-foreground">{row.project.progress}%</span>
|
||||
{isCompleted && <CheckCircle2 className="w-3.5 h-3.5 text-green-500" />}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 flex pointer-events-none">
|
||||
{months.map((month) => (
|
||||
<div key={`grid-${row.project.id}-${month.year}-${month.month}`} className="border-r" style={{ width: `${MONTH_WIDTH_PX}px` }} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{todayPercent !== null && (
|
||||
<div
|
||||
className="absolute top-0 bottom-0 w-px bg-red-400/70 z-[1]"
|
||||
style={{ left: `${todayPercent}%` }}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Link
|
||||
href={`/proyectos/${row.project.id}`}
|
||||
className="absolute top-1/2 -translate-y-1/2 h-8 rounded-md transition-all hover:scale-[1.01] hover:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
|
||||
style={{
|
||||
left: `${leftPercent}%`,
|
||||
width: `${Math.max(widthPercent, 1.2)}%`,
|
||||
minWidth: zoom === "compact" ? "18px" : zoom === "normal" ? "22px" : "26px",
|
||||
}}
|
||||
>
|
||||
<div className={`absolute inset-0 rounded-md ${barStyle.base}`} />
|
||||
<div
|
||||
className={`absolute inset-y-0 left-0 rounded-md ${barStyle.fill}`}
|
||||
style={{ width: `${clamp(row.project.progress, 0, 100)}%` }}
|
||||
/>
|
||||
<div className="relative h-full px-2 flex items-center justify-between z-10">
|
||||
{zoom !== "compact" && (
|
||||
<span className="text-[11px] font-semibold text-white drop-shadow truncate">
|
||||
{zoom === "detailed" ? `${row.project.progress}%` : row.project.progress >= 35 ? `${row.project.progress}%` : ""}
|
||||
</span>
|
||||
)}
|
||||
{zoom === "detailed" && (
|
||||
<span className="text-[10px] text-white/95 hidden md:inline-flex items-center gap-1">
|
||||
<ChevronLeft className="w-3 h-3 rotate-180" />
|
||||
{formatDate(row.start)}
|
||||
<ChevronRight className="w-3 h-3" />
|
||||
{formatDate(row.end)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</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 basado en días
|
||||
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 relative"
|
||||
>
|
||||
{/* Grid de meses */}
|
||||
<div className="absolute inset-0 flex">
|
||||
{visibleMonths.map((month) => {
|
||||
const isCurrentMonth = new Date().getMonth() === month.month && new Date().getFullYear() === month.year;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`grid-${month.year}-${month.month}`}
|
||||
className={`flex-1 border-r ${
|
||||
isCurrentMonth ? "bg-blue-50/30 dark:bg-blue-950/20" : ""
|
||||
}`}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</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>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
|
|
@ -546,41 +517,27 @@ export default function GanttPage() {
|
|||
|
||||
function GanttSkeleton() {
|
||||
return (
|
||||
<Card className="border">
|
||||
<CardContent className="p-0">
|
||||
<div className="flex">
|
||||
<div className="w-64 flex-shrink-0 border-r bg-muted/50">
|
||||
<div className="h-16 border-b 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 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 className="grid grid-cols-1 xl:grid-cols-[320px_1fr] gap-4">
|
||||
<Card className="border">
|
||||
<CardContent className="p-4 space-y-3">
|
||||
<Skeleton className="h-5 w-40" />
|
||||
<div className="space-y-2">
|
||||
{Array.from({ length: 7 }).map((_, index) => (
|
||||
<Skeleton key={index} className="h-14 w-full" />
|
||||
))}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="h-16 border-b flex">
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<div key={i} className="flex-1 border-r 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 px-4 flex items-center">
|
||||
<Skeleton className="h-8 w-full max-w-md rounded-md" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="border">
|
||||
<CardContent className="p-0">
|
||||
<div className="space-y-0">
|
||||
<Skeleton className="h-12 w-full rounded-none" />
|
||||
{Array.from({ length: 8 }).map((_, index) => (
|
||||
<Skeleton key={index} className="h-[52px] w-full rounded-none border-t" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
export { ProjectHeader } from "./project-header";
|
||||
export { ProjectStats } from "./project-stats";
|
||||
export { ProjectInfo } from "./project-info";
|
||||
export { ProjectTaskGantt } from "./project-task-gantt";
|
||||
export { TasksSection } from "./tasks-section";
|
||||
export { ProjectDetailView, ProjectDetailSkeleton } from "./project-detail-view";
|
||||
export { taskColumns } from "./task-columns";
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
"use client";
|
||||
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { FolderKanban, RefreshCw, LayoutDashboard, ListTodo, FileText } from "lucide-react";
|
||||
import { FolderKanban, RefreshCw, LayoutDashboard, ListTodo, FileText, GanttChartSquare } from "lucide-react";
|
||||
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
|
@ -12,6 +12,7 @@ import { ProjectHeader } from "./project-header";
|
|||
import { ProjectStats } from "./project-stats";
|
||||
import { ProjectInfo } from "./project-info";
|
||||
import { TasksSection } from "./tasks-section";
|
||||
import { ProjectTaskGantt } from "./project-task-gantt";
|
||||
|
||||
import { Project } from "@/types/project";
|
||||
import { Task } from "@/types/task";
|
||||
|
|
@ -160,6 +161,10 @@ export function ProjectDetailView({ project: initialProject }: ProjectDetailView
|
|||
</span>
|
||||
)}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="gantt" className="gap-2">
|
||||
<GanttChartSquare className="h-4 w-4" />
|
||||
Gantt
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="details" className="gap-2">
|
||||
<FileText className="h-4 w-4" />
|
||||
Detalles
|
||||
|
|
@ -223,6 +228,20 @@ export function ProjectDetailView({ project: initialProject }: ProjectDetailView
|
|||
)}
|
||||
</TabsContent>
|
||||
|
||||
{/* Tab: Gantt de tareas */}
|
||||
<TabsContent value="gantt">
|
||||
{isLoadingTasks ? (
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-10 w-48" />
|
||||
<Skeleton className="h-[420px] w-full" />
|
||||
</div>
|
||||
) : tasksError ? (
|
||||
<ErrorState onRetry={fetchTasks} />
|
||||
) : (
|
||||
<ProjectTaskGantt tasks={tasks} />
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
{/* Tab: Detalles */}
|
||||
<TabsContent value="details">
|
||||
<ProjectInfo project={project} />
|
||||
|
|
|
|||
|
|
@ -0,0 +1,394 @@
|
|||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import {
|
||||
AlertTriangle,
|
||||
CalendarClock,
|
||||
CalendarDays,
|
||||
CheckCircle2,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
ZoomIn,
|
||||
} from "lucide-react";
|
||||
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { Task, TASK_STATUS_CONFIG } from "@/types/task";
|
||||
|
||||
type Zoom = "fit" | "week" | "day";
|
||||
|
||||
interface ProjectTaskGanttProps {
|
||||
tasks: Task[];
|
||||
}
|
||||
|
||||
interface TaskTimelineItem {
|
||||
task: Task;
|
||||
start: Date;
|
||||
end: Date;
|
||||
}
|
||||
|
||||
interface Tick {
|
||||
key: string;
|
||||
label: string;
|
||||
date: Date;
|
||||
}
|
||||
|
||||
const LEFT_COL_WIDTH = 340;
|
||||
const ROW_HEIGHT = 56;
|
||||
|
||||
function startOfDay(date: Date): Date {
|
||||
return new Date(date.getFullYear(), date.getMonth(), date.getDate());
|
||||
}
|
||||
|
||||
function addDays(date: Date, days: number): Date {
|
||||
const next = new Date(date);
|
||||
next.setDate(next.getDate() + days);
|
||||
return next;
|
||||
}
|
||||
|
||||
function diffDays(start: Date, end: Date): number {
|
||||
const msPerDay = 1000 * 60 * 60 * 24;
|
||||
return Math.floor((startOfDay(end).getTime() - startOfDay(start).getTime()) / msPerDay);
|
||||
}
|
||||
|
||||
function parseTaskRange(task: Task): { start: Date; end: Date } | null {
|
||||
const startRaw = task.startDate || task.plannedStartDate || task.endDate || task.plannedEndDate;
|
||||
const endRaw = task.endDate || task.plannedEndDate || task.startDate || task.plannedStartDate;
|
||||
|
||||
if (!startRaw || !endRaw) return null;
|
||||
|
||||
const a = startOfDay(new Date(startRaw));
|
||||
const b = startOfDay(new Date(endRaw));
|
||||
if (isNaN(a.getTime()) || isNaN(b.getTime())) return null;
|
||||
|
||||
return a <= b ? { start: a, end: b } : { start: b, end: a };
|
||||
}
|
||||
|
||||
function formatDate(date: Date): string {
|
||||
return date.toLocaleDateString("es-ES", { day: "2-digit", month: "short", year: "numeric" });
|
||||
}
|
||||
|
||||
function monday(date: Date): Date {
|
||||
const d = startOfDay(date);
|
||||
const day = d.getDay();
|
||||
const offset = day === 0 ? -6 : 1 - day;
|
||||
return addDays(d, offset);
|
||||
}
|
||||
|
||||
function buildWeekTicks(start: Date, end: Date): Tick[] {
|
||||
const ticks: Tick[] = [];
|
||||
let cursor = monday(start);
|
||||
while (cursor <= end) {
|
||||
ticks.push({
|
||||
key: `w-${cursor.getFullYear()}-${cursor.getMonth()}-${cursor.getDate()}`,
|
||||
label: cursor.toLocaleDateString("es-ES", { day: "2-digit", month: "short" }).toUpperCase(),
|
||||
date: cursor,
|
||||
});
|
||||
cursor = addDays(cursor, 7);
|
||||
}
|
||||
return ticks;
|
||||
}
|
||||
|
||||
function buildDayTicks(start: Date, end: Date): Tick[] {
|
||||
const ticks: Tick[] = [];
|
||||
let cursor = startOfDay(start);
|
||||
while (cursor <= end) {
|
||||
ticks.push({
|
||||
key: `d-${cursor.getFullYear()}-${cursor.getMonth()}-${cursor.getDate()}`,
|
||||
label: cursor.toLocaleDateString("es-ES", { day: "2-digit" }),
|
||||
date: cursor,
|
||||
});
|
||||
cursor = addDays(cursor, 1);
|
||||
}
|
||||
return ticks;
|
||||
}
|
||||
|
||||
export function ProjectTaskGantt({ tasks }: ProjectTaskGanttProps) {
|
||||
const [zoom, setZoom] = useState<Zoom>("fit");
|
||||
const [windowStartOffset, setWindowStartOffset] = useState(0);
|
||||
const viewportRef = useRef<HTMLDivElement | null>(null);
|
||||
const [viewportWidth, setViewportWidth] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (!viewportRef.current) return;
|
||||
|
||||
const observer = new ResizeObserver((entries) => {
|
||||
const entry = entries[0];
|
||||
if (!entry) return;
|
||||
setViewportWidth(Math.floor(entry.contentRect.width));
|
||||
});
|
||||
|
||||
observer.observe(viewportRef.current);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
const timelineItems = useMemo<TaskTimelineItem[]>(() => {
|
||||
return tasks
|
||||
.map((task) => {
|
||||
const range = parseTaskRange(task);
|
||||
if (!range) return null;
|
||||
return { task, start: range.start, end: range.end };
|
||||
})
|
||||
.filter((item): item is TaskTimelineItem => item !== null)
|
||||
.sort((a, b) => a.start.getTime() - b.start.getTime());
|
||||
}, [tasks]);
|
||||
|
||||
if (tasks.length === 0) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="py-12 text-center">
|
||||
<CalendarDays className="w-10 h-10 text-muted-foreground/60 mx-auto mb-3" />
|
||||
<p className="font-medium text-foreground">No hay tareas para mostrar en el Gantt</p>
|
||||
<p className="text-sm text-muted-foreground mt-1">Crea tareas con fechas para planificar el proyecto.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (timelineItems.length === 0) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="py-12 text-center">
|
||||
<CalendarClock className="w-10 h-10 text-muted-foreground/60 mx-auto mb-3" />
|
||||
<p className="font-medium text-foreground">Faltan fechas en las tareas</p>
|
||||
<p className="text-sm text-muted-foreground mt-1">Asigna fecha de inicio y fin para usar el planificador.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const projectStart = new Date(Math.min(...timelineItems.map((item) => item.start.getTime())));
|
||||
const projectEnd = new Date(Math.max(...timelineItems.map((item) => item.end.getTime())));
|
||||
|
||||
const fullStart = addDays(projectStart, -2);
|
||||
const fullEnd = addDays(projectEnd, 2);
|
||||
const fullDurationDays = Math.max(1, diffDays(fullStart, fullEnd) + 1);
|
||||
|
||||
const completed = tasks.filter((task) => task.status === "2").length;
|
||||
const overdue = timelineItems.filter((item) => item.end < startOfDay(new Date()) && item.task.status !== "2").length;
|
||||
|
||||
// Nueva filosofia:
|
||||
// - fit: todo el rango en pantalla (sin scroll horizontal)
|
||||
// - week/day: ventana movil con navegacion
|
||||
const windowDays = zoom === "fit" ? fullDurationDays : zoom === "week" ? 56 : 21;
|
||||
const clampedOffset = Math.max(0, Math.min(windowStartOffset, Math.max(0, fullDurationDays - windowDays)));
|
||||
const visibleStart = addDays(fullStart, clampedOffset);
|
||||
const visibleEnd = addDays(visibleStart, windowDays - 1);
|
||||
const visibleDurationDays = Math.max(1, diffDays(visibleStart, visibleEnd) + 1);
|
||||
|
||||
const canGoBack = zoom !== "fit" && clampedOffset > 0;
|
||||
const canGoForward = zoom !== "fit" && clampedOffset + windowDays < fullDurationDays;
|
||||
|
||||
const ticks = zoom === "day" ? buildDayTicks(visibleStart, visibleEnd) : buildWeekTicks(visibleStart, visibleEnd);
|
||||
|
||||
const fitTimelineWidth = Math.max(
|
||||
360,
|
||||
(viewportWidth > 0 ? viewportWidth : LEFT_COL_WIDTH + 640) - LEFT_COL_WIDTH
|
||||
);
|
||||
|
||||
const timelineWidth = zoom === "fit"
|
||||
? fitTimelineWidth
|
||||
: zoom === "week"
|
||||
? ticks.length * 96
|
||||
: ticks.length * 38;
|
||||
|
||||
const today = startOfDay(new Date());
|
||||
const showToday = today >= visibleStart && today <= visibleEnd;
|
||||
const todayPercent = showToday ? (diffDays(visibleStart, today) / visibleDurationDays) * 100 : null;
|
||||
|
||||
const goBack = () => {
|
||||
const step = zoom === "day" ? 7 : 28;
|
||||
setWindowStartOffset((current) => Math.max(0, current - step));
|
||||
};
|
||||
|
||||
const goForward = () => {
|
||||
const step = zoom === "day" ? 7 : 28;
|
||||
setWindowStartOffset((current) => Math.min(Math.max(0, fullDurationDays - windowDays), current + step));
|
||||
};
|
||||
|
||||
const setZoomAndReset = (next: Zoom) => {
|
||||
setZoom(next);
|
||||
setWindowStartOffset(0);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4 w-full min-w-0 overflow-x-hidden">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Badge variant="outline">{tasks.length} tareas</Badge>
|
||||
<Badge variant="outline">{completed} completadas</Badge>
|
||||
<Badge variant="outline">{formatDate(visibleStart)} - {formatDate(visibleEnd)}</Badge>
|
||||
{overdue > 0 && (
|
||||
<Badge className="bg-red-100 text-red-700 hover:bg-red-100 dark:bg-red-900/35 dark:text-red-300">
|
||||
<AlertTriangle className="w-3.5 h-3.5 mr-1" />
|
||||
{overdue} retrasadas
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-1 border rounded-md p-1">
|
||||
<ZoomIn className="w-4 h-4 text-muted-foreground ml-1" />
|
||||
<Button size="sm" variant={zoom === "fit" ? "default" : "ghost"} onClick={() => setZoomAndReset("fit")}>Ajustar</Button>
|
||||
<Button size="sm" variant={zoom === "week" ? "default" : "ghost"} onClick={() => setZoomAndReset("week")}>Semanas</Button>
|
||||
<Button size="sm" variant={zoom === "day" ? "default" : "ghost"} onClick={() => setZoomAndReset("day")}>Días</Button>
|
||||
</div>
|
||||
|
||||
{zoom !== "fit" && (
|
||||
<div className="flex items-center gap-1">
|
||||
<Button size="icon" variant="outline" onClick={goBack} disabled={!canGoBack}>
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
</Button>
|
||||
<Button size="icon" variant="outline" onClick={goForward} disabled={!canGoForward}>
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card className="border shadow-sm overflow-hidden w-full max-w-full">
|
||||
<CardContent className="p-0 w-full max-w-full overflow-hidden">
|
||||
<TooltipProvider>
|
||||
<div
|
||||
ref={viewportRef}
|
||||
className="w-full max-w-full max-h-[620px] overflow-x-auto overflow-y-auto overscroll-x-contain [scrollbar-gutter:stable_both-edges]"
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
minWidth: `${LEFT_COL_WIDTH + timelineWidth}px`,
|
||||
width: zoom === "fit" ? "100%" : "max-content",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="border-b sticky top-0 z-20 bg-card/95 backdrop-blur"
|
||||
style={{ display: "grid", gridTemplateColumns: `${LEFT_COL_WIDTH}px ${timelineWidth}px` }}
|
||||
>
|
||||
<div className="h-12 border-r px-4 flex items-center text-xs font-semibold text-muted-foreground sticky left-0 z-30 bg-card/95">
|
||||
Tarea
|
||||
</div>
|
||||
<div className="h-12 flex">
|
||||
{ticks.map((tick) => (
|
||||
<div
|
||||
key={tick.key}
|
||||
className="border-r flex items-center justify-center"
|
||||
style={{ width: `${timelineWidth / ticks.length}px` }}
|
||||
title={tick.label}
|
||||
>
|
||||
<span className="text-[11px] font-medium text-muted-foreground uppercase">{tick.label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{timelineItems.map((item) => {
|
||||
const statusConfig = TASK_STATUS_CONFIG[item.task.status];
|
||||
const startsInWindow = item.end >= visibleStart && item.start <= visibleEnd;
|
||||
|
||||
const startOffset = Math.max(0, diffDays(visibleStart, item.start));
|
||||
const endOffset = Math.min(visibleDurationDays, diffDays(visibleStart, item.end) + 1);
|
||||
const leftPercent = (startOffset / visibleDurationDays) * 100;
|
||||
const widthPercent = Math.max(0.7, ((endOffset - startOffset) / visibleDurationDays) * 100);
|
||||
const taskDurationDays = Math.max(1, diffDays(item.start, item.end) + 1);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={item.task.id}
|
||||
className="border-b"
|
||||
style={{ display: "grid", gridTemplateColumns: `${LEFT_COL_WIDTH}px ${timelineWidth}px` }}
|
||||
>
|
||||
<Link
|
||||
href={`/tareas/${item.task.id}`}
|
||||
className="h-[56px] border-r px-4 py-2 hover:bg-muted/50 transition-colors sticky left-0 z-10 bg-background"
|
||||
>
|
||||
<p className="text-sm font-semibold text-foreground truncate">{item.task.title}</p>
|
||||
<div className="mt-1.5 flex items-center gap-2">
|
||||
<Badge variant="outline" className={`text-[10px] px-1.5 py-0 h-5 ${statusConfig.bgClass}`}>
|
||||
{statusConfig.label}
|
||||
</Badge>
|
||||
<span className="text-[11px] text-muted-foreground">{item.task.progress}%</span>
|
||||
{item.task.status === "2" && <CheckCircle2 className="w-3.5 h-3.5 text-green-500" />}
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<div className="relative h-[56px]">
|
||||
<div className="absolute inset-0 flex pointer-events-none">
|
||||
{ticks.map((tick) => (
|
||||
<div key={`grid-${item.task.id}-${tick.key}`} className="border-r" style={{ width: `${timelineWidth / ticks.length}px` }} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{todayPercent !== null && (
|
||||
<div className="absolute top-0 bottom-0 w-px bg-red-400/70 z-[1]" style={{ left: `${todayPercent}%` }} />
|
||||
)}
|
||||
|
||||
{startsInWindow && (() => {
|
||||
const barWidthPx = Math.max((widthPercent / 100) * timelineWidth, zoom === "day" ? 28 : 40);
|
||||
const showFullLabel = barWidthPx >= 72;
|
||||
const showCompactLabel = !showFullLabel && barWidthPx >= 52;
|
||||
|
||||
return (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Link
|
||||
href={`/tareas/${item.task.id}`}
|
||||
className="absolute top-1/2 -translate-y-1/2 h-9 rounded-md transition-all hover:scale-[1.01] hover:shadow-sm"
|
||||
style={{
|
||||
left: `${leftPercent}%`,
|
||||
width: `${widthPercent}%`,
|
||||
minWidth: zoom === "day" ? "28px" : "40px",
|
||||
}}
|
||||
aria-label={`${item.task.title} - ${item.task.progress}%`}
|
||||
>
|
||||
<div className="absolute inset-0 rounded-md bg-blue-100 dark:bg-blue-900/40" />
|
||||
<div
|
||||
className="absolute inset-y-0 left-0 rounded-md bg-gradient-to-r from-blue-500 to-violet-600"
|
||||
style={{ width: `${Math.max(0, Math.min(100, item.task.progress))}%` }}
|
||||
/>
|
||||
<div className="relative h-full px-2.5 flex items-center z-10">
|
||||
{showFullLabel && (
|
||||
<span className="text-[11px] font-semibold text-white drop-shadow truncate">
|
||||
{`${item.task.progress}%`}
|
||||
</span>
|
||||
)}
|
||||
{showCompactLabel && (
|
||||
<span className="text-[11px] font-semibold text-white drop-shadow truncate">
|
||||
{`${item.task.progress}`}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="top" className="max-w-xs">
|
||||
<div className="space-y-1 text-xs">
|
||||
<p className="font-semibold text-sm">{item.task.title}</p>
|
||||
<p><span className="text-muted-foreground">Progreso:</span> {item.task.progress}%</p>
|
||||
<p><span className="text-muted-foreground">Estado:</span> {statusConfig.label}</p>
|
||||
<p><span className="text-muted-foreground">Inicio:</span> {formatDate(item.start)}</p>
|
||||
<p><span className="text-muted-foreground">Fin:</span> {formatDate(item.end)}</p>
|
||||
<p><span className="text-muted-foreground">Duración:</span> {taskDurationDays} día{taskDurationDays === 1 ? "" : "s"}</p>
|
||||
</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -41,6 +41,7 @@ interface TasksSectionProps {
|
|||
onTaskDeleted?: (taskId: number) => void;
|
||||
}
|
||||
|
||||
|
||||
// Tarjeta de tarea para vista grid
|
||||
function TaskCard({ task }: { task: Task }) {
|
||||
const statusConfig = TASK_STATUS_CONFIG[task.status];
|
||||
|
|
@ -341,14 +342,14 @@ export function TasksSection({ tasks, projectId, isLoading, onTaskCreated, onTas
|
|||
>
|
||||
<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>
|
||||
<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 */}
|
||||
|
|
|
|||
Loading…
Reference in New Issue