fix appointments and pagination

web/app/products/page.js

@@ -14,10 +14,13 @@ export default function ProductsPage() {
   const [query, setQuery] = useState("");
 
   const PAGE_SIZE = 100;
+  const ITEMS_PER_PAGE = 20;
+  const [currentPage, setCurrentPage] = useState(0);
 
   useEffect(() => {
     setLoading(true);
     setError(null);
+    setCurrentPage(0);
 
     fetchAllPages((page) => {
       const params = new URLSearchParams({
@@ -37,10 +40,14 @@ export default function ProductsPage() {
       .finally(() => setLoading(false));
   }, [query]);
 
+  const totalPages = Math.ceil(products.length / ITEMS_PER_PAGE);
+  const displayedProducts = products.slice(currentPage * ITEMS_PER_PAGE, (currentPage + 1) * ITEMS_PER_PAGE);
+
   function handleSearch(e) {
     e.preventDefault();
     setLoading(true);
     setError(null);
+    setCurrentPage(0);
     setQuery(search.trim());
   }
 
@@ -92,7 +99,7 @@ export default function ProductsPage() {
 
         {!loading && !error && products.length > 0 && (
           <div className="adopt-grid">
-            {products.map((product) => (
+            {displayedProducts.map((product) => (
               <ProductCard
                 key={product.prodId}
                 prodId={product.prodId}
@@ -104,7 +111,25 @@ export default function ProductsPage() {
             ))}
           </div>
         )}
-
+        {!loading && !error && totalPages > 1 && (
+          <div className="pagination-controls">
+            <button
+              className="pagination-btn"
+              onClick={() => setCurrentPage((p) => Math.max(0, p - 1))}
+              disabled={currentPage === 0}
+            >
+              ← Prev
+            </button>
+            <span className="pagination-info">Page {currentPage + 1} of {totalPages}</span>
+            <button
+              className="pagination-btn"
+              onClick={() => setCurrentPage((p) => Math.min(totalPages - 1, p + 1))}
+              disabled={currentPage === totalPages - 1}
+            >
+              Next →
+            </button>
+          </div>
+        )}
       </section>
     </main>
   );