251205:0000 Just start debug backend/frontend

frontend/components/common/pagination.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useRouter, useSearchParams, usePathname } from "next/navigation";
+
+interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  total: number;
+}
+
+export function Pagination({
+  currentPage,
+  totalPages,
+  total,
+}: PaginationProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const createPageURL = (pageNumber: number) => {
+    const params = new URLSearchParams(searchParams);
+    params.set("page", pageNumber.toString());
+    return `${pathname}?${params.toString()}`;
+  };
+
+  return (
+    <div className="flex items-center justify-between">
+      <div className="text-sm text-muted-foreground">
+        Showing page {currentPage} of {totalPages} ({total} total items)
+      </div>
+
+      <div className="flex gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => router.push(createPageURL(currentPage - 1))}
+          disabled={currentPage <= 1}
+        >
+          <ChevronLeft className="h-4 w-4" />
+          Previous
+        </Button>
+
+        {/* Simple pagination logic: show max 5 pages */}
+        {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
+          // Logic to center current page could be added here for large page counts
+          // For now, just showing first 5 or all if < 5
+          const pageNum = i + 1;
+          return (
+            <Button
+              key={pageNum}
+              variant={pageNum === currentPage ? "default" : "outline"}
+              size="sm"
+              onClick={() => router.push(createPageURL(pageNum))}
+            >
+              {pageNum}
+            </Button>
+          );
+        })}
+
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => router.push(createPageURL(currentPage + 1))}
+          disabled={currentPage >= totalPages}
+        >
+          Next
+          <ChevronRight className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}