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";
|
"use client";
|
||||||
|
|
||||||
import { useState, useEffect, useMemo } from "react";
|
import { useEffect, useMemo, useState } from "react";
|
||||||
|
import Link from "next/link";
|
||||||
import {
|
import {
|
||||||
GanttChart as GanttIcon,
|
|
||||||
AlertCircle,
|
AlertCircle,
|
||||||
|
Calendar,
|
||||||
|
CalendarRange,
|
||||||
|
CheckCircle2,
|
||||||
ChevronLeft,
|
ChevronLeft,
|
||||||
ChevronRight,
|
ChevronRight,
|
||||||
Calendar,
|
|
||||||
History,
|
|
||||||
Clock,
|
|
||||||
Filter,
|
Filter,
|
||||||
|
GanttChartSquare,
|
||||||
|
Layers,
|
||||||
|
Search,
|
||||||
} from "lucide-react";
|
} 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 { Badge } from "@/components/ui/badge";
|
||||||
import { Skeleton } from "@/components/ui/skeleton";
|
import { Button } from "@/components/ui/button";
|
||||||
import {
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
Tooltip,
|
import { Checkbox } from "@/components/ui/checkbox";
|
||||||
TooltipContent,
|
import { Input } from "@/components/ui/input";
|
||||||
TooltipProvider,
|
|
||||||
TooltipTrigger,
|
|
||||||
} from "@/components/ui/tooltip";
|
|
||||||
import {
|
import {
|
||||||
Select,
|
Select,
|
||||||
SelectContent,
|
SelectContent,
|
||||||
|
|
@ -28,22 +27,15 @@ import {
|
||||||
SelectTrigger,
|
SelectTrigger,
|
||||||
SelectValue,
|
SelectValue,
|
||||||
} from "@/components/ui/select";
|
} from "@/components/ui/select";
|
||||||
|
import { Skeleton } from "@/components/ui/skeleton";
|
||||||
import { getProjects } from "@/lib/projectsService";
|
import { getProjects } from "@/lib/projectsService";
|
||||||
import { Project, ProjectStatus } from "@/types/project";
|
import { Project, ProjectStatus } from "@/types/project";
|
||||||
|
|
||||||
// Paleta de colores para proyectos
|
const MONTH_WIDTH_PX = 72;
|
||||||
const PROJECT_COLORS = [
|
const ROW_HEIGHT_PX = 52;
|
||||||
{ 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" },
|
type ProjectStatusFilter = "all" | ProjectStatus;
|
||||||
{ bg: "bg-cyan-500", light: "bg-cyan-100", text: "text-cyan-700", hex: "#06b6d4" },
|
type ZoomLevel = "compact" | "normal" | "detailed";
|
||||||
{ 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> = {
|
const STATUS_LABELS: Record<ProjectStatus, string> = {
|
||||||
"0": "Borrador",
|
"0": "Borrador",
|
||||||
|
|
@ -51,27 +43,34 @@ const STATUS_LABELS: Record<ProjectStatus, string> = {
|
||||||
"2": "Cerrado",
|
"2": "Cerrado",
|
||||||
};
|
};
|
||||||
|
|
||||||
type ViewMode = "month" | "quarter" | "year";
|
const STATUS_BADGE_CLASS: Record<ProjectStatus, string> = {
|
||||||
type TimeRange = "future" | "past" | "all";
|
"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) {
|
const BAR_COLOR_BY_STATUS: Record<ProjectStatus, { base: string; fill: string }> = {
|
||||||
return PROJECT_COLORS[index % PROJECT_COLORS.length];
|
"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
|
interface PlannedProject {
|
||||||
function formatDate(dateStr: string): string {
|
project: Project;
|
||||||
const date = new Date(dateStr);
|
start: Date;
|
||||||
return date.toLocaleDateString("es-ES", { day: "2-digit", month: "short", year: "numeric" });
|
end: Date;
|
||||||
|
startOffsetDays: number;
|
||||||
|
durationDays: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Obtener días entre dos fechas
|
function getMonthsBetween(start: Date, end: Date): TimelineMonth[] {
|
||||||
function getDaysBetween(start: Date, end: Date): number {
|
const months: TimelineMonth[] = [];
|
||||||
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 current = new Date(start.getFullYear(), start.getMonth(), 1);
|
||||||
const endMonth = new Date(end.getFullYear(), end.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;
|
return months;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Obtener días en un mes
|
function getDaysBetween(start: Date, end: Date): number {
|
||||||
function getDaysInMonth(month: number, year: number): number {
|
const msPerDay = 1000 * 60 * 60 * 24;
|
||||||
return new Date(year, month + 1, 0).getDate();
|
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() {
|
export default function GanttPage() {
|
||||||
const [projects, setProjects] = useState<Project[]>([]);
|
const [projects, setProjects] = useState<Project[]>([]);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
const [viewMode, setViewMode] = useState<ViewMode>("month");
|
|
||||||
const [statusFilter, setStatusFilter] = useState<string>("all");
|
const [statusFilter, setStatusFilter] = useState<ProjectStatusFilter>("all");
|
||||||
const [timeRange, setTimeRange] = useState<TimeRange>("future");
|
const [search, setSearch] = useState("");
|
||||||
const [viewOffset, setViewOffset] = useState(0);
|
const [zoom, setZoom] = useState<ZoomLevel>("normal");
|
||||||
|
const [selectedIds, setSelectedIds] = useState<number[]>([]);
|
||||||
|
const [showSelectionPanel, setShowSelectionPanel] = useState(true);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
async function loadProjects() {
|
async function load() {
|
||||||
try {
|
try {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
const data = await getProjects();
|
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);
|
setError(null);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error("Error loading projects:", err);
|
console.error("Error loading projects:", err);
|
||||||
setError("Error al cargar los proyectos");
|
setError("No se pudieron cargar los proyectos para el Gantt");
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
loadProjects();
|
|
||||||
|
load();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
// Filtrar proyectos
|
|
||||||
const filteredProjects = useMemo(() => {
|
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
|
return statusOk && searchOk;
|
||||||
if (statusFilter !== "all") {
|
});
|
||||||
filtered = filtered.filter(p => p.status === statusFilter);
|
}, [projects, search, statusFilter]);
|
||||||
}
|
|
||||||
|
|
||||||
// Filtrar por rango temporal
|
useEffect(() => {
|
||||||
const now = new Date();
|
setSelectedIds((current) => {
|
||||||
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
|
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") {
|
const visibleProjects = useMemo(() => {
|
||||||
// Proyectos que terminan hoy o en el futuro
|
const selected = new Set(selectedIds);
|
||||||
filtered = filtered.filter(p => new Date(p.endDate) >= today);
|
return filteredProjects.filter((project) => selected.has(project.id));
|
||||||
} else if (timeRange === "past") {
|
}, [filteredProjects, selectedIds]);
|
||||||
// Proyectos que ya terminaron
|
|
||||||
filtered = filtered.filter(p => new Date(p.endDate) < today);
|
|
||||||
}
|
|
||||||
// "all" no filtra
|
|
||||||
|
|
||||||
return filtered;
|
const { timelineStart, timelineEnd, months, totalDays } = useMemo(() => {
|
||||||
}, [projects, statusFilter, timeRange]);
|
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
|
if (projectsWithDates.length === 0) {
|
||||||
// - Futuro: desde el mes actual hasta el fin del proyecto más tardío
|
const now = new Date();
|
||||||
// - Pasado: desde el inicio del proyecto más antiguo hasta el mes actual
|
const start = new Date(now.getFullYear(), now.getMonth() - 2, 1);
|
||||||
// - Todo: desde el inicio del proyecto más antiguo hasta el fin del más tardío
|
const end = new Date(now.getFullYear(), now.getMonth() + 3, 0);
|
||||||
const { timelineStart, timelineEnd, months } = useMemo(() => {
|
const monthList = getMonthsBetween(start, end);
|
||||||
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);
|
|
||||||
return {
|
return {
|
||||||
timelineStart: start,
|
timelineStart: start,
|
||||||
timelineEnd: end,
|
timelineEnd: end,
|
||||||
months: getMonthsBetween(start, end),
|
months: monthList,
|
||||||
|
totalDays: Math.max(1, getDaysBetween(start, end) + 1),
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
// Calcular fechas extremas de los proyectos
|
const minStart = new Date(
|
||||||
const allStartDates = filteredProjects.map(p => new Date(p.startDate));
|
Math.min(...projectsWithDates.map((item) => item.parsed.start.getTime()))
|
||||||
const allEndDates = filteredProjects.map(p => new Date(p.endDate));
|
);
|
||||||
const minProjectStart = new Date(Math.min(...allStartDates.map(d => d.getTime())));
|
const maxEnd = new Date(
|
||||||
const maxProjectEnd = new Date(Math.max(...allEndDates.map(d => d.getTime())));
|
Math.max(...projectsWithDates.map((item) => item.parsed.end.getTime()))
|
||||||
|
);
|
||||||
|
|
||||||
if (timeRange === "future") {
|
const start = new Date(minStart.getFullYear(), minStart.getMonth(), 1);
|
||||||
// Desde el mes actual hasta el fin del proyecto más tardío
|
const end = new Date(maxEnd.getFullYear(), maxEnd.getMonth() + 1, 0);
|
||||||
const start = currentMonthStart;
|
const monthList = getMonthsBetween(start, end);
|
||||||
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);
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
totalDays: getDaysBetween(start, end),
|
timelineStart: start,
|
||||||
visibleStart: start,
|
timelineEnd: end,
|
||||||
visibleEnd: end,
|
months: monthList,
|
||||||
|
totalDays: Math.max(1, getDaysBetween(start, end) + 1),
|
||||||
};
|
};
|
||||||
}, [visibleMonths]);
|
}, [visibleProjects]);
|
||||||
|
|
||||||
// Navegación
|
const todayPercent = useMemo(() => {
|
||||||
const monthsToShow = viewMode === "month" ? 3 : viewMode === "quarter" ? 6 : 12;
|
const now = new Date();
|
||||||
const maxOffset = Math.max(0, months.length - monthsToShow);
|
if (now < timelineStart || now > timelineEnd) return null;
|
||||||
const canGoBack = viewOffset > 0;
|
const offset = getDaysBetween(timelineStart, now);
|
||||||
const canGoForward = viewOffset < maxOffset;
|
return clamp((offset / totalDays) * 100, 0, 100);
|
||||||
|
}, [timelineEnd, timelineStart, totalDays]);
|
||||||
|
|
||||||
const goBack = () => {
|
const plannedRows = useMemo<PlannedProject[]>(() => {
|
||||||
const step = viewMode === "month" ? 1 : viewMode === "quarter" ? 3 : 6;
|
return visibleProjects
|
||||||
setViewOffset(Math.max(0, viewOffset - step));
|
.map((project) => {
|
||||||
};
|
const parsed = parseProjectDates(project);
|
||||||
|
if (!parsed) return null;
|
||||||
|
|
||||||
const goForward = () => {
|
const startOffsetDays = clamp(getDaysBetween(timelineStart, parsed.start), 0, totalDays - 1);
|
||||||
const step = viewMode === "month" ? 1 : viewMode === "quarter" ? 3 : 6;
|
const durationDays = Math.max(1, getDaysBetween(parsed.start, parsed.end) + 1);
|
||||||
setViewOffset(Math.min(maxOffset, viewOffset + step));
|
|
||||||
};
|
|
||||||
|
|
||||||
const goToToday = () => {
|
return {
|
||||||
setViewOffset(0); // Volver al mes actual
|
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) {
|
if (error) {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-background flex items-center justify-center">
|
<div className="min-h-screen bg-background flex items-center justify-center px-4">
|
||||||
<div className="text-center">
|
<div className="text-center max-w-md">
|
||||||
<AlertCircle className="w-16 h-16 text-red-400 dark:text-red-500 mx-auto mb-4" />
|
<AlertCircle className="w-12 h-12 text-red-500 mx-auto mb-3" />
|
||||||
<p className="text-red-600 dark:text-red-400 text-lg">{error}</p>
|
<h2 className="text-lg font-semibold text-foreground">Error cargando el Gantt</h2>
|
||||||
<button
|
<p className="text-sm text-muted-foreground mt-1">{error}</p>
|
||||||
onClick={() => window.location.reload()}
|
<Button onClick={() => window.location.reload()} className="mt-4">Reintentar</Button>
|
||||||
className="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
|
|
||||||
>
|
|
||||||
Reintentar
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="h-screen flex flex-col bg-background">
|
<div className="min-h-screen bg-background">
|
||||||
{/* Header - siempre visible */}
|
<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">
|
||||||
<header className="bg-card border-b flex-shrink-0 z-10">
|
<div className="px-4 sm:px-6 lg:px-8 py-5 space-y-4">
|
||||||
<div className="px-4 sm:px-6 lg:px-8 py-4">
|
<div className="flex items-start justify-between gap-4 flex-wrap">
|
||||||
<div className="flex items-center justify-between flex-wrap gap-4">
|
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<div className="p-2 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg">
|
<div className="p-2 rounded-lg bg-gradient-to-r from-blue-500 to-violet-600 shadow-sm">
|
||||||
<GanttIcon className="w-6 h-6 text-white" />
|
<GanttChartSquare className="w-5 h-5 text-white" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-2xl font-bold text-foreground">Diagrama de Gantt</h1>
|
<h1 className="text-2xl font-bold text-foreground">Roadmap de Proyectos</h1>
|
||||||
<p className="text-sm text-muted-foreground">
|
<p className="text-sm text-muted-foreground">Vista global rediseñada para planificación ejecutiva</p>
|
||||||
Timeline de {filteredProjects.length} proyectos
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Controles */}
|
<div className="flex items-center gap-2 flex-wrap">
|
||||||
<div className="flex items-center gap-3 flex-wrap">
|
<Button
|
||||||
{/* Filtro de estado */}
|
variant={showSelectionPanel ? "default" : "outline"}
|
||||||
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
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">
|
<SelectTrigger className="w-40">
|
||||||
<Filter className="w-4 h-4 mr-2" />
|
<Filter className="w-4 h-4 mr-2" />
|
||||||
<SelectValue placeholder="Estado" />
|
<SelectValue placeholder="Estado" />
|
||||||
|
|
@ -314,230 +323,192 @@ export default function GanttPage() {
|
||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
|
|
||||||
{/* Selector de rango temporal */}
|
<Select value={zoom} onValueChange={(value: ZoomLevel) => setZoom(value)}>
|
||||||
<div className="flex items-center gap-1 border rounded-lg p-1">
|
<SelectTrigger className="w-36">
|
||||||
<Button
|
<CalendarRange className="w-4 h-4 mr-2" />
|
||||||
variant={timeRange === "past" ? "default" : "ghost"}
|
<SelectValue placeholder="Zoom" />
|
||||||
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 />
|
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
<SelectItem value="month">3 meses</SelectItem>
|
<SelectItem value="compact">Compacto</SelectItem>
|
||||||
<SelectItem value="quarter">6 meses</SelectItem>
|
<SelectItem value="normal">Normal</SelectItem>
|
||||||
<SelectItem value="year">12 meses</SelectItem>
|
<SelectItem value="detailed">Detallado</SelectItem>
|
||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</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>
|
</div>
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
{/* Content - área scrollable */}
|
<div className="flex items-center gap-2 flex-wrap">
|
||||||
<main className="flex-1 overflow-auto px-4 sm:px-6 lg:px-8 py-6">
|
<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 ? (
|
{loading ? (
|
||||||
<GanttSkeleton />
|
<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">
|
<div className={`grid grid-cols-1 gap-4 ${showSelectionPanel ? "xl:grid-cols-[320px_1fr]" : "xl:grid-cols-1"}`}>
|
||||||
<CardContent className="p-0 overflow-hidden">
|
{showSelectionPanel && (
|
||||||
<div className="flex w-full overflow-hidden">
|
<Card className="border shadow-sm">
|
||||||
{/* Columna de nombres de proyectos - fija */}
|
<CardContent className="p-4 space-y-3">
|
||||||
<div className="w-64 flex-shrink-0 border-r bg-muted/50">
|
<div className="flex items-center justify-between">
|
||||||
{/* Header */}
|
<h2 className="text-sm font-semibold text-foreground flex items-center gap-2">
|
||||||
<div className="h-16 border-b flex items-center px-4">
|
<Layers className="w-4 h-4" />
|
||||||
<span className="font-semibold text-foreground">Proyecto</span>
|
Selección de proyectos
|
||||||
|
</h2>
|
||||||
|
<span className="text-xs text-muted-foreground">{selectedIds.length}/{filteredProjects.length}</span>
|
||||||
</div>
|
</div>
|
||||||
{/* Lista de proyectos */}
|
|
||||||
{filteredProjects.map((project, index) => {
|
<div className="flex items-center gap-2">
|
||||||
const color = getProjectColor(index);
|
<Button variant="outline" size="sm" onClick={selectAll}>Seleccionar todos</Button>
|
||||||
return (
|
<Button variant="ghost" size="sm" onClick={clearSelection}>Limpiar</Button>
|
||||||
<div
|
</div>
|
||||||
key={project.id}
|
|
||||||
className="h-14 border-b flex items-center px-4 hover:bg-muted transition-colors"
|
<div className="max-h-[60vh] overflow-auto border rounded-md">
|
||||||
>
|
{filteredProjects.length === 0 ? (
|
||||||
<div className="flex items-center gap-3 min-w-0">
|
<div className="p-4 text-sm text-muted-foreground">No hay proyectos con este filtro.</div>
|
||||||
<div className={`w-3 h-3 rounded-full ${color.bg} flex-shrink-0`} />
|
) : (
|
||||||
<div className="min-w-0">
|
filteredProjects.map((project) => {
|
||||||
<p className="text-sm font-medium text-foreground truncate" title={project.name}>
|
const checked = selectedIds.includes(project.id);
|
||||||
{project.name}
|
return (
|
||||||
</p>
|
<label
|
||||||
<p className="text-xs text-muted-foreground">{project.progress}%</p>
|
key={project.id}
|
||||||
</div>
|
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>
|
</div>
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Timeline - scroll horizontal en modo "todo" */}
|
{plannedRows.map((row) => {
|
||||||
<div
|
const barStyle = BAR_COLOR_BY_STATUS[row.project.status];
|
||||||
className={`${timeRange === "all" ? "overflow-x-auto overflow-y-hidden" : "overflow-hidden"}`}
|
const leftPercent = (row.startOffsetDays / totalDays) * 100;
|
||||||
style={{ width: "calc(100% - 256px)" }}
|
const widthPercent = (row.durationDays / totalDays) * 100;
|
||||||
>
|
const isCompleted = row.project.progress >= 100;
|
||||||
<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;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div key={row.project.id} className="grid grid-cols-[320px_1fr] border-b" style={{ minHeight: `${ROW_HEIGHT_PX}px` }}>
|
||||||
key={`${month.year}-${month.month}`}
|
<Link
|
||||||
className={`flex-1 border-r flex flex-col justify-center px-2 ${
|
href={`/proyectos/${row.project.id}`}
|
||||||
isCurrentMonth ? "bg-blue-50 dark:bg-blue-950/30" : "bg-card"
|
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">
|
||||||
<span className={`text-xs font-medium ${isCurrentMonth ? "text-blue-700 dark:text-blue-400" : "text-muted-foreground"}`}>
|
<p className="text-sm font-medium text-foreground truncate">{row.project.name}</p>
|
||||||
{month.label}
|
<div className="mt-1 flex items-center gap-2">
|
||||||
</span>
|
<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>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</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>
|
)}
|
||||||
</div>
|
</CardContent>
|
||||||
</CardContent>
|
</Card>
|
||||||
</Card>
|
</div>
|
||||||
)}
|
)}
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -546,41 +517,27 @@ export default function GanttPage() {
|
||||||
|
|
||||||
function GanttSkeleton() {
|
function GanttSkeleton() {
|
||||||
return (
|
return (
|
||||||
<Card className="border">
|
<div className="grid grid-cols-1 xl:grid-cols-[320px_1fr] gap-4">
|
||||||
<CardContent className="p-0">
|
<Card className="border">
|
||||||
<div className="flex">
|
<CardContent className="p-4 space-y-3">
|
||||||
<div className="w-64 flex-shrink-0 border-r bg-muted/50">
|
<Skeleton className="h-5 w-40" />
|
||||||
<div className="h-16 border-b flex items-center px-4">
|
<div className="space-y-2">
|
||||||
<Skeleton className="h-4 w-20" />
|
{Array.from({ length: 7 }).map((_, index) => (
|
||||||
</div>
|
<Skeleton key={index} className="h-14 w-full" />
|
||||||
{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>
|
</div>
|
||||||
<div className="flex-1">
|
</CardContent>
|
||||||
<div className="h-16 border-b flex">
|
</Card>
|
||||||
{Array.from({ length: 3 }).map((_, i) => (
|
<Card className="border">
|
||||||
<div key={i} className="flex-1 border-r flex items-center justify-center">
|
<CardContent className="p-0">
|
||||||
<Skeleton className="h-4 w-20" />
|
<div className="space-y-0">
|
||||||
</div>
|
<Skeleton className="h-12 w-full rounded-none" />
|
||||||
))}
|
{Array.from({ length: 8 }).map((_, index) => (
|
||||||
</div>
|
<Skeleton key={index} className="h-[52px] w-full rounded-none border-t" />
|
||||||
{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>
|
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</CardContent>
|
||||||
</CardContent>
|
</Card>
|
||||||
</Card>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
export { ProjectHeader } from "./project-header";
|
export { ProjectHeader } from "./project-header";
|
||||||
export { ProjectStats } from "./project-stats";
|
export { ProjectStats } from "./project-stats";
|
||||||
export { ProjectInfo } from "./project-info";
|
export { ProjectInfo } from "./project-info";
|
||||||
|
export { ProjectTaskGantt } from "./project-task-gantt";
|
||||||
export { TasksSection } from "./tasks-section";
|
export { TasksSection } from "./tasks-section";
|
||||||
export { ProjectDetailView, ProjectDetailSkeleton } from "./project-detail-view";
|
export { ProjectDetailView, ProjectDetailSkeleton } from "./project-detail-view";
|
||||||
export { taskColumns } from "./task-columns";
|
export { taskColumns } from "./task-columns";
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useState, useEffect, useCallback } from "react";
|
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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
|
|
@ -12,6 +12,7 @@ import { ProjectHeader } from "./project-header";
|
||||||
import { ProjectStats } from "./project-stats";
|
import { ProjectStats } from "./project-stats";
|
||||||
import { ProjectInfo } from "./project-info";
|
import { ProjectInfo } from "./project-info";
|
||||||
import { TasksSection } from "./tasks-section";
|
import { TasksSection } from "./tasks-section";
|
||||||
|
import { ProjectTaskGantt } from "./project-task-gantt";
|
||||||
|
|
||||||
import { Project } from "@/types/project";
|
import { Project } from "@/types/project";
|
||||||
import { Task } from "@/types/task";
|
import { Task } from "@/types/task";
|
||||||
|
|
@ -160,6 +161,10 @@ export function ProjectDetailView({ project: initialProject }: ProjectDetailView
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
|
<TabsTrigger value="gantt" className="gap-2">
|
||||||
|
<GanttChartSquare className="h-4 w-4" />
|
||||||
|
Gantt
|
||||||
|
</TabsTrigger>
|
||||||
<TabsTrigger value="details" className="gap-2">
|
<TabsTrigger value="details" className="gap-2">
|
||||||
<FileText className="h-4 w-4" />
|
<FileText className="h-4 w-4" />
|
||||||
Detalles
|
Detalles
|
||||||
|
|
@ -223,6 +228,20 @@ export function ProjectDetailView({ project: initialProject }: ProjectDetailView
|
||||||
)}
|
)}
|
||||||
</TabsContent>
|
</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 */}
|
{/* Tab: Detalles */}
|
||||||
<TabsContent value="details">
|
<TabsContent value="details">
|
||||||
<ProjectInfo project={project} />
|
<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;
|
onTaskDeleted?: (taskId: number) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Tarjeta de tarea para vista grid
|
// Tarjeta de tarea para vista grid
|
||||||
function TaskCard({ task }: { task: Task }) {
|
function TaskCard({ task }: { task: Task }) {
|
||||||
const statusConfig = TASK_STATUS_CONFIG[task.status];
|
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" />
|
<List className="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
variant={viewMode === "grid" ? "secondary" : "ghost"}
|
variant={viewMode === "grid" ? "secondary" : "ghost"}
|
||||||
size="sm"
|
size="sm"
|
||||||
className="h-8 px-2 rounded-l-none"
|
className="h-8 px-2 rounded-l-none"
|
||||||
onClick={() => setViewMode("grid")}
|
onClick={() => setViewMode("grid")}
|
||||||
>
|
>
|
||||||
<LayoutGrid className="h-4 w-4" />
|
<LayoutGrid className="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Nueva tarea */}
|
{/* Nueva tarea */}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue