feat: Introduce Gantt chart page with project timeline visualization and add Radix UI select component.
This commit is contained in:
marcos
parent
8e7f6ca198
commit
8994c240eb
|
|
@ -0,0 +1,5 @@
|
|||
import GanttPage from "@/components/gantt/gantt-page";
|
||||
|
||||
export default function Gantt() {
|
||||
return <GanttPage />;
|
||||
}
|
||||
|
|
@ -29,7 +29,8 @@ import {
|
|||
Settings,
|
||||
ChevronUp,
|
||||
LogOut,
|
||||
User
|
||||
User,
|
||||
GanttChart
|
||||
} from "lucide-react";
|
||||
|
||||
// Datos del menú
|
||||
|
|
@ -49,6 +50,11 @@ const items = [
|
|||
url: "/estadisticas",
|
||||
icon: BarChart3,
|
||||
},
|
||||
{
|
||||
title: "Gantt",
|
||||
url: "/gantt",
|
||||
icon: GanttChart,
|
||||
},
|
||||
];
|
||||
|
||||
export function AppSidebar() {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,513 @@
|
|||
"use client";
|
||||
|
||||
import { useState, useEffect, useMemo } from "react";
|
||||
import {
|
||||
GanttChart as GanttIcon,
|
||||
AlertCircle,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Calendar,
|
||||
ZoomIn,
|
||||
ZoomOut,
|
||||
Filter,
|
||||
} from "lucide-react";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { getProjects } from "@/lib/projectsService";
|
||||
import { Project, ProjectStatus } from "@/types/project";
|
||||
|
||||
// Paleta de colores para proyectos
|
||||
const PROJECT_COLORS = [
|
||||
{ bg: "bg-blue-500", light: "bg-blue-100", text: "text-blue-700", hex: "#3b82f6" },
|
||||
{ bg: "bg-violet-500", light: "bg-violet-100", text: "text-violet-700", hex: "#8b5cf6" },
|
||||
{ bg: "bg-cyan-500", light: "bg-cyan-100", text: "text-cyan-700", hex: "#06b6d4" },
|
||||
{ bg: "bg-emerald-500", light: "bg-emerald-100", text: "text-emerald-700", hex: "#10b981" },
|
||||
{ bg: "bg-amber-500", light: "bg-amber-100", text: "text-amber-700", hex: "#f59e0b" },
|
||||
{ bg: "bg-rose-500", light: "bg-rose-100", text: "text-rose-700", hex: "#f43f5e" },
|
||||
{ bg: "bg-pink-500", light: "bg-pink-100", text: "text-pink-700", hex: "#ec4899" },
|
||||
{ bg: "bg-indigo-500", light: "bg-indigo-100", text: "text-indigo-700", hex: "#6366f1" },
|
||||
{ bg: "bg-teal-500", light: "bg-teal-100", text: "text-teal-700", hex: "#14b8a6" },
|
||||
{ bg: "bg-orange-500", light: "bg-orange-100", text: "text-orange-700", hex: "#f97316" },
|
||||
];
|
||||
|
||||
const STATUS_LABELS: Record<ProjectStatus, string> = {
|
||||
"0": "Borrador",
|
||||
"1": "Abierto",
|
||||
"2": "Cerrado",
|
||||
};
|
||||
|
||||
type ViewMode = "month" | "quarter" | "year";
|
||||
|
||||
function getProjectColor(index: number) {
|
||||
return PROJECT_COLORS[index % PROJECT_COLORS.length];
|
||||
}
|
||||
|
||||
// Formatear fecha
|
||||
function formatDate(dateStr: string): string {
|
||||
const date = new Date(dateStr);
|
||||
return date.toLocaleDateString("es-ES", { day: "2-digit", month: "short", year: "numeric" });
|
||||
}
|
||||
|
||||
// Obtener días entre dos fechas
|
||||
function getDaysBetween(start: Date, end: Date): number {
|
||||
return Math.ceil((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24));
|
||||
}
|
||||
|
||||
// Generar array de meses entre dos fechas
|
||||
function getMonthsBetween(start: Date, end: Date): { month: number; year: number; label: string }[] {
|
||||
const months: { month: number; year: number; label: string }[] = [];
|
||||
const current = new Date(start.getFullYear(), start.getMonth(), 1);
|
||||
const endMonth = new Date(end.getFullYear(), end.getMonth(), 1);
|
||||
|
||||
while (current <= endMonth) {
|
||||
months.push({
|
||||
month: current.getMonth(),
|
||||
year: current.getFullYear(),
|
||||
label: current.toLocaleDateString("es-ES", { month: "short", year: "numeric" }),
|
||||
});
|
||||
current.setMonth(current.getMonth() + 1);
|
||||
}
|
||||
|
||||
return months;
|
||||
}
|
||||
|
||||
// Obtener días en un mes
|
||||
function getDaysInMonth(month: number, year: number): number {
|
||||
return new Date(year, month + 1, 0).getDate();
|
||||
}
|
||||
|
||||
export default function GanttPage() {
|
||||
const [projects, setProjects] = useState<Project[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [viewMode, setViewMode] = useState<ViewMode>("month");
|
||||
const [statusFilter, setStatusFilter] = useState<string>("all");
|
||||
const [viewOffset, setViewOffset] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
async function loadProjects() {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await getProjects();
|
||||
setProjects(data);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
console.error("Error loading projects:", err);
|
||||
setError("Error al cargar los proyectos");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
loadProjects();
|
||||
}, []);
|
||||
|
||||
// Filtrar proyectos
|
||||
const filteredProjects = useMemo(() => {
|
||||
if (statusFilter === "all") return projects;
|
||||
return projects.filter(p => p.status === statusFilter);
|
||||
}, [projects, statusFilter]);
|
||||
|
||||
// Calcular rango de fechas del timeline
|
||||
const { timelineStart, timelineEnd, months } = useMemo(() => {
|
||||
if (filteredProjects.length === 0) {
|
||||
const now = new Date();
|
||||
return {
|
||||
timelineStart: new Date(now.getFullYear(), now.getMonth(), 1),
|
||||
timelineEnd: new Date(now.getFullYear(), now.getMonth() + 6, 0),
|
||||
months: [],
|
||||
};
|
||||
}
|
||||
|
||||
const allDates = filteredProjects.flatMap(p => [new Date(p.startDate), new Date(p.endDate)]);
|
||||
const minDate = new Date(Math.min(...allDates.map(d => d.getTime())));
|
||||
const maxDate = new Date(Math.max(...allDates.map(d => d.getTime())));
|
||||
|
||||
// Añadir margen de un mes antes y después
|
||||
const start = new Date(minDate.getFullYear(), minDate.getMonth() - 1, 1);
|
||||
const end = new Date(maxDate.getFullYear(), maxDate.getMonth() + 2, 0);
|
||||
|
||||
return {
|
||||
timelineStart: start,
|
||||
timelineEnd: end,
|
||||
months: getMonthsBetween(start, end),
|
||||
};
|
||||
}, [filteredProjects]);
|
||||
|
||||
// Calcular meses visibles según el modo de vista
|
||||
const visibleMonths = useMemo(() => {
|
||||
const monthsToShow = viewMode === "month" ? 3 : viewMode === "quarter" ? 6 : 12;
|
||||
const startIdx = Math.max(0, Math.min(viewOffset, months.length - monthsToShow));
|
||||
return months.slice(startIdx, startIdx + monthsToShow);
|
||||
}, [months, viewMode, viewOffset]);
|
||||
|
||||
// Calcular el ancho total en días para los meses visibles
|
||||
const { totalDays, visibleStart, visibleEnd } = useMemo(() => {
|
||||
if (visibleMonths.length === 0) {
|
||||
return { totalDays: 30, visibleStart: new Date(), visibleEnd: new Date() };
|
||||
}
|
||||
|
||||
const first = visibleMonths[0];
|
||||
const last = visibleMonths[visibleMonths.length - 1];
|
||||
const start = new Date(first.year, first.month, 1);
|
||||
const end = new Date(last.year, last.month + 1, 0);
|
||||
|
||||
return {
|
||||
totalDays: getDaysBetween(start, end),
|
||||
visibleStart: start,
|
||||
visibleEnd: end,
|
||||
};
|
||||
}, [visibleMonths]);
|
||||
|
||||
// Navegación
|
||||
const canGoBack = viewOffset > 0;
|
||||
const canGoForward = viewOffset + (viewMode === "month" ? 3 : viewMode === "quarter" ? 6 : 12) < months.length;
|
||||
|
||||
const goBack = () => {
|
||||
const step = viewMode === "month" ? 1 : viewMode === "quarter" ? 3 : 6;
|
||||
setViewOffset(Math.max(0, viewOffset - step));
|
||||
};
|
||||
|
||||
const goForward = () => {
|
||||
const step = viewMode === "month" ? 1 : viewMode === "quarter" ? 3 : 6;
|
||||
const maxOffset = Math.max(0, months.length - (viewMode === "month" ? 3 : viewMode === "quarter" ? 6 : 12));
|
||||
setViewOffset(Math.min(maxOffset, viewOffset + step));
|
||||
};
|
||||
|
||||
const goToToday = () => {
|
||||
const now = new Date();
|
||||
const todayIndex = months.findIndex(m => m.month === now.getMonth() && m.year === now.getFullYear());
|
||||
if (todayIndex >= 0) {
|
||||
setViewOffset(Math.max(0, todayIndex - 1));
|
||||
}
|
||||
};
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<AlertCircle className="w-16 h-16 text-red-400 mx-auto mb-4" />
|
||||
<p className="text-red-600 text-lg">{error}</p>
|
||||
<button
|
||||
onClick={() => window.location.reload()}
|
||||
className="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
|
||||
>
|
||||
Reintentar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
|
||||
{/* Header */}
|
||||
<header className="bg-white border-b border-gray-200 sticky top-0 z-10">
|
||||
<div className="max-w-full mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg">
|
||||
<GanttIcon className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Diagrama de Gantt</h1>
|
||||
<p className="text-sm text-gray-500">
|
||||
Timeline de {filteredProjects.length} proyectos
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Controles */}
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Filtro de estado */}
|
||||
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||||
<SelectTrigger className="w-40">
|
||||
<Filter className="w-4 h-4 mr-2" />
|
||||
<SelectValue placeholder="Estado" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">Todos</SelectItem>
|
||||
<SelectItem value="0">Borrador</SelectItem>
|
||||
<SelectItem value="1">Abierto</SelectItem>
|
||||
<SelectItem value="2">Cerrado</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{/* Selector de vista */}
|
||||
<Select value={viewMode} onValueChange={(v: ViewMode) => setViewMode(v)}>
|
||||
<SelectTrigger className="w-32">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="month">3 meses</SelectItem>
|
||||
<SelectItem value="quarter">6 meses</SelectItem>
|
||||
<SelectItem value="year">12 meses</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{/* Navegación */}
|
||||
<div className="flex items-center gap-1">
|
||||
<Button variant="outline" size="icon" onClick={goBack} disabled={!canGoBack}>
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={goToToday}>
|
||||
<Calendar className="w-4 h-4 mr-1" />
|
||||
Hoy
|
||||
</Button>
|
||||
<Button variant="outline" size="icon" onClick={goForward} disabled={!canGoForward}>
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Content */}
|
||||
<main className="max-w-full mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
||||
{loading ? (
|
||||
<GanttSkeleton />
|
||||
) : filteredProjects.length === 0 ? (
|
||||
<Card className="border-gray-200">
|
||||
<CardContent className="py-16 text-center">
|
||||
<GanttIcon className="w-16 h-16 text-gray-300 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-semibold text-gray-700">No hay proyectos</h3>
|
||||
<p className="text-gray-500 mt-2">No se encontraron proyectos con los filtros seleccionados</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<Card className="border-gray-200 overflow-hidden">
|
||||
<CardContent className="p-0">
|
||||
<div className="flex">
|
||||
{/* Columna de nombres de proyectos */}
|
||||
<div className="w-64 flex-shrink-0 border-r border-gray-200 bg-gray-50">
|
||||
{/* Header */}
|
||||
<div className="h-16 border-b border-gray-200 flex items-center px-4">
|
||||
<span className="font-semibold text-gray-700">Proyecto</span>
|
||||
</div>
|
||||
{/* Lista de proyectos */}
|
||||
{filteredProjects.map((project, index) => {
|
||||
const color = getProjectColor(index);
|
||||
return (
|
||||
<div
|
||||
key={project.id}
|
||||
className="h-14 border-b border-gray-100 flex items-center px-4 hover:bg-gray-100 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<div className={`w-3 h-3 rounded-full ${color.bg} flex-shrink-0`} />
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium text-gray-800 truncate" title={project.name}>
|
||||
{project.name}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">{project.progress}%</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Timeline */}
|
||||
<div className="flex-1 overflow-x-auto">
|
||||
{/* Header con meses */}
|
||||
<div className="h-16 border-b border-gray-200 flex">
|
||||
{visibleMonths.map((month, idx) => {
|
||||
const daysInMonth = getDaysInMonth(month.month, month.year);
|
||||
const widthPercent = (daysInMonth / totalDays) * 100;
|
||||
const isCurrentMonth = new Date().getMonth() === month.month && new Date().getFullYear() === month.year;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`${month.year}-${month.month}`}
|
||||
className={`flex-shrink-0 border-r border-gray-200 flex flex-col justify-center px-2 ${
|
||||
isCurrentMonth ? "bg-blue-50" : "bg-white"
|
||||
}`}
|
||||
style={{ width: `${widthPercent}%`, minWidth: "80px" }}
|
||||
>
|
||||
<span className={`text-xs font-medium ${isCurrentMonth ? "text-blue-700" : "text-gray-600"}`}>
|
||||
{month.label}
|
||||
</span>
|
||||
<span className="text-xs text-gray-400">{daysInMonth} días</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Barras del Gantt */}
|
||||
<TooltipProvider>
|
||||
{filteredProjects.map((project, index) => {
|
||||
const color = getProjectColor(index);
|
||||
const projectStart = new Date(project.startDate);
|
||||
const projectEnd = new Date(project.endDate);
|
||||
|
||||
// Calcular posición y ancho de la barra
|
||||
const startOffset = Math.max(0, getDaysBetween(visibleStart, projectStart));
|
||||
const endOffset = Math.min(totalDays, getDaysBetween(visibleStart, projectEnd));
|
||||
|
||||
const leftPercent = (startOffset / totalDays) * 100;
|
||||
const widthPercent = Math.max(1, ((endOffset - startOffset) / totalDays) * 100);
|
||||
|
||||
// Verificar si el proyecto está visible en el rango actual
|
||||
const isVisible = projectEnd >= visibleStart && projectStart <= visibleEnd;
|
||||
const isOverdue = projectEnd < new Date() && project.progress < 100 && project.status === "1";
|
||||
|
||||
return (
|
||||
<div
|
||||
key={project.id}
|
||||
className="h-14 border-b border-gray-100 relative"
|
||||
>
|
||||
{/* Grid de meses */}
|
||||
<div className="absolute inset-0 flex">
|
||||
{visibleMonths.map((month, idx) => {
|
||||
const daysInMonth = getDaysInMonth(month.month, month.year);
|
||||
const monthWidthPercent = (daysInMonth / totalDays) * 100;
|
||||
const isCurrentMonth = new Date().getMonth() === month.month && new Date().getFullYear() === month.year;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`grid-${month.year}-${month.month}`}
|
||||
className={`flex-shrink-0 border-r border-gray-100 ${
|
||||
isCurrentMonth ? "bg-blue-50/30" : ""
|
||||
}`}
|
||||
style={{ width: `${monthWidthPercent}%`, minWidth: "80px" }}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Barra del proyecto */}
|
||||
{isVisible && (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div
|
||||
className={`absolute top-2 h-10 rounded-md cursor-pointer transition-all hover:scale-[1.02] hover:shadow-md ${
|
||||
isOverdue ? "ring-2 ring-red-400" : ""
|
||||
}`}
|
||||
style={{
|
||||
left: `${leftPercent}%`,
|
||||
width: `${widthPercent}%`,
|
||||
minWidth: "20px",
|
||||
}}
|
||||
>
|
||||
{/* Fondo de la barra */}
|
||||
<div className={`absolute inset-0 ${color.light} rounded-md`} />
|
||||
|
||||
{/* Progreso */}
|
||||
<div
|
||||
className={`absolute inset-y-0 left-0 ${color.bg} rounded-md transition-all`}
|
||||
style={{ width: `${project.progress}%` }}
|
||||
/>
|
||||
|
||||
{/* Contenido de la barra */}
|
||||
<div className="relative h-full flex items-center px-2 z-10">
|
||||
<span className="text-xs font-medium text-white truncate drop-shadow-sm">
|
||||
{project.progress >= 30 ? `${project.progress}%` : ""}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="top" className="max-w-xs">
|
||||
<div className="space-y-1">
|
||||
<p className="font-semibold">{project.name}</p>
|
||||
<div className="text-xs space-y-0.5">
|
||||
<p><span className="text-gray-500">Estado:</span> {STATUS_LABELS[project.status]}</p>
|
||||
<p><span className="text-gray-500">Progreso:</span> {project.progress}%</p>
|
||||
<p><span className="text-gray-500">Inicio:</span> {formatDate(project.startDate)}</p>
|
||||
<p><span className="text-gray-500">Fin:</span> {formatDate(project.endDate)}</p>
|
||||
<p><span className="text-gray-500">Cliente:</span> {project.client}</p>
|
||||
{isOverdue && (
|
||||
<p className="text-red-500 font-medium">Proyecto retrasado</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Leyenda */}
|
||||
{!loading && filteredProjects.length > 0 && (
|
||||
<div className="mt-6 flex flex-wrap items-center gap-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-16 h-4 bg-gray-200 rounded relative overflow-hidden">
|
||||
<div className="absolute inset-y-0 left-0 w-1/2 bg-blue-500 rounded" />
|
||||
</div>
|
||||
<span className="text-sm text-gray-600">Progreso del proyecto</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-4 h-4 bg-blue-50 border-2 border-blue-500 rounded" />
|
||||
<span className="text-sm text-gray-600">Mes actual</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-4 h-4 bg-gray-200 ring-2 ring-red-400 rounded" />
|
||||
<span className="text-sm text-gray-600">Proyecto retrasado</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function GanttSkeleton() {
|
||||
return (
|
||||
<Card className="border-gray-200">
|
||||
<CardContent className="p-0">
|
||||
<div className="flex">
|
||||
<div className="w-64 flex-shrink-0 border-r border-gray-200 bg-gray-50">
|
||||
<div className="h-16 border-b border-gray-200 flex items-center px-4">
|
||||
<Skeleton className="h-4 w-20" />
|
||||
</div>
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<div key={i} className="h-14 border-b border-gray-100 flex items-center px-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<Skeleton className="w-3 h-3 rounded-full" />
|
||||
<div>
|
||||
<Skeleton className="h-4 w-32 mb-1" />
|
||||
<Skeleton className="h-3 w-12" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="h-16 border-b border-gray-200 flex">
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<div key={i} className="flex-1 border-r border-gray-200 flex items-center justify-center">
|
||||
<Skeleton className="h-4 w-20" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<div key={i} className="h-14 border-b border-gray-100 px-4 flex items-center">
|
||||
<Skeleton className="h-8 w-full max-w-md rounded-md" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,160 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as SelectPrimitive from "@radix-ui/react-select"
|
||||
import { Check, ChevronDown, ChevronUp } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Select = SelectPrimitive.Root
|
||||
|
||||
const SelectGroup = SelectPrimitive.Group
|
||||
|
||||
const SelectValue = SelectPrimitive.Value
|
||||
|
||||
const SelectTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Trigger>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<SelectPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<SelectPrimitive.Icon asChild>
|
||||
<ChevronDown className="h-4 w-4 opacity-50" />
|
||||
</SelectPrimitive.Icon>
|
||||
</SelectPrimitive.Trigger>
|
||||
))
|
||||
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
|
||||
|
||||
const SelectScrollUpButton = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.ScrollUpButton
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex cursor-default items-center justify-center py-1",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronUp className="h-4 w-4" />
|
||||
</SelectPrimitive.ScrollUpButton>
|
||||
))
|
||||
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
|
||||
|
||||
const SelectScrollDownButton = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.ScrollDownButton
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex cursor-default items-center justify-center py-1",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
</SelectPrimitive.ScrollDownButton>
|
||||
))
|
||||
SelectScrollDownButton.displayName =
|
||||
SelectPrimitive.ScrollDownButton.displayName
|
||||
|
||||
const SelectContent = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
|
||||
>(({ className, children, position = "popper", ...props }, ref) => (
|
||||
<SelectPrimitive.Portal>
|
||||
<SelectPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
|
||||
position === "popper" &&
|
||||
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
||||
className
|
||||
)}
|
||||
position={position}
|
||||
{...props}
|
||||
>
|
||||
<SelectScrollUpButton />
|
||||
<SelectPrimitive.Viewport
|
||||
className={cn(
|
||||
"p-1",
|
||||
position === "popper" &&
|
||||
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</SelectPrimitive.Viewport>
|
||||
<SelectScrollDownButton />
|
||||
</SelectPrimitive.Content>
|
||||
</SelectPrimitive.Portal>
|
||||
))
|
||||
SelectContent.displayName = SelectPrimitive.Content.displayName
|
||||
|
||||
const SelectLabel = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Label>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.Label
|
||||
ref={ref}
|
||||
className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
SelectLabel.displayName = SelectPrimitive.Label.displayName
|
||||
|
||||
const SelectItem = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<SelectPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<SelectPrimitive.ItemIndicator>
|
||||
<Check className="h-4 w-4" />
|
||||
</SelectPrimitive.ItemIndicator>
|
||||
</span>
|
||||
|
||||
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
||||
</SelectPrimitive.Item>
|
||||
))
|
||||
SelectItem.displayName = SelectPrimitive.Item.displayName
|
||||
|
||||
const SelectSeparator = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Separator>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.Separator
|
||||
ref={ref}
|
||||
className={cn("-mx-1 my-1 h-px bg-muted", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
SelectSeparator.displayName = SelectPrimitive.Separator.displayName
|
||||
|
||||
export {
|
||||
Select,
|
||||
SelectGroup,
|
||||
SelectValue,
|
||||
SelectTrigger,
|
||||
SelectContent,
|
||||
SelectLabel,
|
||||
SelectItem,
|
||||
SelectSeparator,
|
||||
SelectScrollUpButton,
|
||||
SelectScrollDownButton,
|
||||
}
|
||||
|
|
@ -11,6 +11,7 @@
|
|||
"@radix-ui/react-avatar": "^1.1.11",
|
||||
"@radix-ui/react-dialog": "^1.1.15",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
||||
"@radix-ui/react-select": "^2.2.6",
|
||||
"@radix-ui/react-separator": "^1.1.8",
|
||||
"@radix-ui/react-slot": "^1.2.4",
|
||||
"@radix-ui/react-tabs": "^1.1.13",
|
||||
|
|
@ -1272,6 +1273,12 @@
|
|||
"node": ">=12.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/number": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz",
|
||||
"integrity": "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@radix-ui/primitive": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
|
||||
|
|
@ -2223,6 +2230,105 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-select": {
|
||||
"version": "2.2.6",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.6.tgz",
|
||||
"integrity": "sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/number": "1.1.1",
|
||||
"@radix-ui/primitive": "1.1.3",
|
||||
"@radix-ui/react-collection": "1.1.7",
|
||||
"@radix-ui/react-compose-refs": "1.1.2",
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-direction": "1.1.1",
|
||||
"@radix-ui/react-dismissable-layer": "1.1.11",
|
||||
"@radix-ui/react-focus-guards": "1.1.3",
|
||||
"@radix-ui/react-focus-scope": "1.1.7",
|
||||
"@radix-ui/react-id": "1.1.1",
|
||||
"@radix-ui/react-popper": "1.2.8",
|
||||
"@radix-ui/react-portal": "1.1.9",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-slot": "1.2.3",
|
||||
"@radix-ui/react-use-callback-ref": "1.1.1",
|
||||
"@radix-ui/react-use-controllable-state": "1.2.2",
|
||||
"@radix-ui/react-use-layout-effect": "1.1.1",
|
||||
"@radix-ui/react-use-previous": "1.1.1",
|
||||
"@radix-ui/react-visually-hidden": "1.2.3",
|
||||
"aria-hidden": "^1.2.4",
|
||||
"react-remove-scroll": "^2.6.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-context": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
|
||||
"integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-primitive": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
|
||||
"integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-slot": "1.2.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-slot": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
|
||||
"integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-compose-refs": "1.1.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-separator": {
|
||||
"version": "1.1.8",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.8.tgz",
|
||||
|
|
@ -2543,6 +2649,21 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-use-previous": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.1.tgz",
|
||||
"integrity": "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-use-rect": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
"@radix-ui/react-avatar": "^1.1.11",
|
||||
"@radix-ui/react-dialog": "^1.1.15",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
||||
"@radix-ui/react-select": "^2.2.6",
|
||||
"@radix-ui/react-separator": "^1.1.8",
|
||||
"@radix-ui/react-slot": "^1.2.4",
|
||||
"@radix-ui/react-tabs": "^1.1.13",
|
||||
|
|
|
|||
Loading…
Reference in New Issue