General History Drawer now works

src/app/api/get_paginated_history/route.ts

@@ -8,6 +8,7 @@ export const GET = async (request: Request) => {
     const url = new URL(request.url);
     const apiKey = url.searchParams.get('apikey');
     const page = Number(url.searchParams.get('page')) || 1;
+    const perPage = Number(url.searchParams.get('per_page')) || 50;
     if (apiKey !== process.env.API_KEY) {
       const session = await auth();
       if (!session)
@@ -16,7 +17,6 @@ export const GET = async (request: Request) => {
           { status: 401 }
         );
     }
-    const perPage = 50;
     const historyData = await getHistory(page, perPage);
     return NextResponse.json(historyData, { status: 200 });
   } catch (error) {

src/components/ui/History_Drawer.tsx

@@ -1,3 +1,4 @@
+import React, { useState, useEffect } from "react";
 import Image from "next/image";
 import {
   Drawer,
@@ -19,14 +20,56 @@ import {
 import {
   Pagination,
   PaginationContent,
-  PaginationEllipsis,
   PaginationItem,
-  PaginationLink,
   PaginationNext,
   PaginationPrevious,
 } from "~/components/ui/shadcn/pagination";
 
+// Type definitions for Paginated History API
+type HistoryEntry = {
+  name: string;
+  status: string;
+  updatedAt: Date;
+}
+type PaginatedHistory = {
+  data: HistoryEntry[];
+  meta: {
+    current_page: number;
+    per_page: number;
+    total_pages: number;
+    total_count: number;
+  }
+}
+
 export default function History_Drawer() {
+  const [history, setHistory] = useState<HistoryEntry[]>([]);
+  const [page, setPage] = useState<number>(1);
+  const [totalPages, setTotalPages] = useState<number>(1);
+  const perPage = 5;
+
+  useEffect(() => {
+    const fetchHistory = async (currentPage: number) => {
+      try {
+        const response = await fetch(`/api/get_paginated_history?page=${currentPage}&per_page=${perPage}`);
+        if (!response.ok)
+          throw new Error('Failed to fetch history');
+        const data: PaginatedHistory = await response.json() as PaginatedHistory;
+        setHistory(data.data);
+        setTotalPages(data.meta.total_pages);
+      } catch (error) {
+        console.error('Error fetching history:', error);
+      }
+    };
+    fetchHistory(page)
+    .catch((error) => {
+      console.error('Error fetching history:', error);
+    });
+  }, [page]);
+
+  const handlePageChange = (newPage: number) => {
+    setPage(newPage);
+  };
+
   return (
     <Drawer>
       <DrawerTrigger>
@@ -49,38 +92,50 @@ export default function History_Drawer() {
             </div>
           </DrawerTitle>
         </DrawerHeader>
-        <Table className="w-5/6 lg:w-1/2 m-auto"
+        <Table className="w-5/6 lg:w-1/2 m-auto ">
-        >
           <TableHeader>
             <TableRow>
-              <TableHead className="">Name</TableHead>
+              <TableHead>Name</TableHead>
               <TableHead>Status</TableHead>
               <TableHead>Updated At</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
-            <TableRow>
+            {history.map((entry, index) => (
-              <TableCell className="font-medium">INV001</TableCell>
+              <TableRow key={index}>
-              <TableCell>Paid</TableCell>
+                <TableCell className="font-medium">{entry.name}</TableCell>
-              <TableCell>Credit Card</TableCell>
+                <TableCell>{entry.status}</TableCell>
-            </TableRow>
+                <TableCell>{new Date(entry.updatedAt).toLocaleString()}</TableCell>
+              </TableRow>
+            ))}
           </TableBody>
         </Table>
         <DrawerFooter>
           <Pagination>
             <PaginationContent>
-              <PaginationItem>
+              {page > 1 && (
-                <PaginationPrevious href="#" />
+                <PaginationItem>
-              </PaginationItem>
+                  <PaginationPrevious
-              <PaginationItem>
+                    href="#"
-                <PaginationLink href="#">1</PaginationLink>
+                    onClick={(e) => {
-              </PaginationItem>
+                      e.preventDefault();
-              <PaginationItem>
+                      handlePageChange(page - 1);
-                <PaginationEllipsis />
+                    }}
-              </PaginationItem>
+                  />
-              <PaginationItem>
+                </PaginationItem>
-                <PaginationNext href="#" />
+              )}
-              </PaginationItem>
+              <h3 className="text-center font-semibold">Page {page}</h3>
+              {page < totalPages && (
+                <PaginationItem>
+                  <PaginationNext
+                    href="#"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      handlePageChange(page + 1);
+                    }}
+                  />
+                </PaginationItem>
+              )}
             </PaginationContent>
           </Pagination>
           <DrawerClose>
@@ -88,5 +143,19 @@ export default function History_Drawer() {
         </DrawerFooter>
       </DrawerContent>
     </Drawer>
-      );
+  );
-};
+}
+// If you want to show all page numbers:
+//{Array.from({ length: totalPages }).map((_, idx) => (
+  //<PaginationItem key={idx}>
+    //<PaginationLink
+      //href="#"
+      //onClick={(e) => {
+        //e.preventDefault();
+        //handlePageChange(idx + 1);
+      //}}
+    //>{idx + 1}
+    //</PaginationLink>
+  //</PaginationItem>
+//))}
+

src/server/functions.ts

@@ -53,12 +53,12 @@ export const updateEmployeeStatusByName =
 };
 
 // Type definitions for Paginated History API
-interface HistoryEntry {
+type HistoryEntry = {
   name: string;
   status: string;
   updatedAt: Date;
 }
-interface PaginatedHistory {
+type PaginatedHistory = {
   data: HistoryEntry[];
   meta: {
     current_page: number;