- {filtered.length} de {projects.length}{" "}
- {projects.length === 1 ? "proyecto" : "proyectos"}
-
+
+
+
Proyectos
+
+
+
+
+ {(
+ [
+ ["todos", "Todos"],
+ ["abiertos", "Activos"],
+ ["cerrados", "Cerrados"],
+ ] as const
+ ).map(([k, l]) => (
+ setFilter(k)}
+ className={`px-3.5 py-1.5 rounded-full transition-colors font-medium ${
+ filter === k
+ ? "bg-card text-foreground shadow-sm"
+ : "text-muted-foreground hover:text-foreground"
+ }`}
+ >
+ {l}
+
+ ))}
+
+
-
- {(
- [
- ["todos", "Todos"],
- ["abiertos", "Activos"],
- ["cerrados", "Cerrados"],
- ] as const
- ).map(([k, l]) => (
-
setFilter(k)}
- className={`px-3.5 py-1.5 rounded-full transition-colors font-medium ${
- filter === k
- ? "bg-card text-foreground shadow-sm"
- : "text-muted-foreground hover:text-foreground"
- }`}
- >
- {l}
-
- ))}
+
+
+
{/* Grid */}
- {filtered.length === 0 ? (
- 0} />
+ {error && (
+
+
+
+ No se pudieron cargar los proyectos. {error}
+
+
+
void refresh()} className="gap-1.5">
+
+
0} filter={filter} query={query} />
) : (
- {filtered.map((p) => (
+ {paginatedProjects.map((p) => (
openEdit(p)} />
))}
- {/* Add tile */}
-
-
- Nuevo proyecto
-
@@ -202,20 +278,174 @@ export default function BoardPage() {
);
}
-function EmptyState({ onNew, hasProjects }: { onNew: () => void; hasProjects: boolean }) {
+function PaginationControls({
+ currentPage,
+ totalPages,
+ visibleStart,
+ visibleEnd,
+ totalItems,
+ onPageChange,
+}: {
+ currentPage: number;
+ totalPages: number;
+ visibleStart: number;
+ visibleEnd: number;
+ totalItems: number;
+ onPageChange: (page: number) => void;
+}) {
+ const pages = getVisiblePages(currentPage, totalPages);
+
+ return (
+
+
+
+ {visibleStart}-{visibleEnd}
+ {" "}
+ de {totalItems} proyectos
+
+
+
+
onPageChange(currentPage - 1)}
+ disabled={currentPage === 1}
+ >
+ Anterior
+
+
+
+ {pages.map((page, index) =>
+ page === "ellipsis" ? (
+
+ …
+
+ ) : (
+ onPageChange(page)}
+ aria-current={page === currentPage ? "page" : undefined}
+ >
+ {page}
+
+ ),
+ )}
+
+
+
onPageChange(currentPage + 1)}
+ disabled={currentPage === totalPages}
+ >
+ Siguiente
+
+
+
+ );
+}
+
+function getVisiblePages(currentPage: number, totalPages: number): Array
{
+ if (totalPages <= 7) return Array.from({ length: totalPages }, (_, index) => index + 1);
+
+ const pages = new Set([1, totalPages, currentPage]);
+
+ if (currentPage > 1) pages.add(currentPage - 1);
+ if (currentPage < totalPages) pages.add(currentPage + 1);
+ if (currentPage <= 3) {
+ pages.add(2);
+ pages.add(3);
+ pages.add(4);
+ }
+ if (currentPage >= totalPages - 2) {
+ pages.add(totalPages - 3);
+ pages.add(totalPages - 2);
+ pages.add(totalPages - 1);
+ }
+
+ const sortedPages = Array.from(pages)
+ .filter((page) => page >= 1 && page <= totalPages)
+ .sort((a, b) => a - b);
+
+ return sortedPages.reduce>((acc, page) => {
+ const previous = acc[acc.length - 1];
+ if (typeof previous === "number" && page - previous > 1) acc.push("ellipsis");
+ acc.push(page);
+ return acc;
+ }, []);
+}
+
+function LoadingState() {
+ return (
+
+ {Array.from({ length: 8 }).map((_, index) => (
+
+ ))}
+
-
- {hasProjects ? "Nada coincide con el filtro" : "Tu tablero está vacío"}
-
-
- {hasProjects
- ? "Probá quitar el filtro o cambiar la búsqueda."
- : "Creá tu primer proyecto. Cuando entre un brief nuevo, abrís una caja con su nombre y ya todo el equipo lo ve."}
-
+
{title}
+
{message}
{!hasProjects && (