diff --git a/components/gantt/gantt-page.tsx b/components/gantt/gantt-page.tsx index dd5b038..aeb9d3c 100644 --- a/components/gantt/gantt-page.tsx +++ b/components/gantt/gantt-page.tsx @@ -7,8 +7,8 @@ import { ChevronLeft, ChevronRight, Calendar, - ZoomIn, - ZoomOut, + History, + Clock, Filter, } from "lucide-react"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; @@ -52,6 +52,7 @@ const STATUS_LABELS: Record = { }; type ViewMode = "month" | "quarter" | "year"; +type TimeRange = "future" | "past" | "all"; function getProjectColor(index: number) { return PROJECT_COLORS[index % PROJECT_COLORS.length]; @@ -97,6 +98,7 @@ export default function GanttPage() { const [error, setError] = useState(null); const [viewMode, setViewMode] = useState("month"); const [statusFilter, setStatusFilter] = useState("all"); + const [timeRange, setTimeRange] = useState("future"); const [viewOffset, setViewOffset] = useState(0); useEffect(() => { @@ -118,42 +120,110 @@ export default function GanttPage() { // Filtrar proyectos const filteredProjects = useMemo(() => { - if (statusFilter === "all") return projects; - return projects.filter(p => p.status === statusFilter); - }, [projects, statusFilter]); + let filtered = projects; + + // Filtrar por estado + if (statusFilter !== "all") { + filtered = filtered.filter(p => p.status === statusFilter); + } + + // Filtrar por rango temporal + const now = new Date(); + const today = new Date(now.getFullYear(), now.getMonth(), now.getDate()); + + 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 + + return filtered; + }, [projects, statusFilter, timeRange]); - // Calcular rango de fechas del timeline + // 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 now = new Date(); + const start = new Date(now.getFullYear(), now.getMonth() - 6, 1); + const end = new Date(now.getFullYear(), now.getMonth() + 6, 0); return { - timelineStart: new Date(now.getFullYear(), now.getMonth(), 1), - timelineEnd: new Date(now.getFullYear(), now.getMonth() + 6, 0), - months: [], + timelineStart: start, + timelineEnd: end, + months: getMonthsBetween(start, end), }; } - - 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); + // 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()))); - return { - timelineStart: start, - timelineEnd: end, - months: getMonthsBetween(start, end), - }; - }, [filteredProjects]); + 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; - const startIdx = Math.max(0, Math.min(viewOffset, months.length - monthsToShow)); - return months.slice(startIdx, startIdx + monthsToShow); - }, [months, viewMode, viewOffset]); + + 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(() => { @@ -174,8 +244,10 @@ export default function GanttPage() { }, [visibleMonths]); // 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 + (viewMode === "month" ? 3 : viewMode === "quarter" ? 6 : 12) < months.length; + const canGoForward = viewOffset < maxOffset; const goBack = () => { const step = viewMode === "month" ? 1 : viewMode === "quarter" ? 3 : 6; @@ -184,16 +256,11 @@ export default function GanttPage() { 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)); - } + setViewOffset(0); // Volver al mes actual }; if (error) { @@ -214,11 +281,11 @@ export default function GanttPage() { } return ( -
- {/* Header */} -
-
-
+
+ {/* Header - siempre visible */} +
+
+
@@ -232,7 +299,7 @@ export default function GanttPage() {
{/* Controles */} -
+
{/* Filtro de estado */} + {/* Selector de rango temporal */} +
+ + + +
+ {/* Selector de vista */}