General History Drawer now works

This commit is contained in:
Gabriel Brown 2024-07-29 14:54:29 -05:00
parent 8a00507431
commit c95ee5957c
4 changed files with 96 additions and 27 deletions

0
.prod/update.sh Executable file → Normal file
View File

View File

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

View File

@ -1,3 +1,4 @@
import React, { useState, useEffect } from "react";
import Image from "next/image"; import Image from "next/image";
import { import {
Drawer, Drawer,
@ -19,14 +20,56 @@ import {
import { import {
Pagination, Pagination,
PaginationContent, PaginationContent,
PaginationEllipsis,
PaginationItem, PaginationItem,
PaginationLink,
PaginationNext, PaginationNext,
PaginationPrevious, PaginationPrevious,
} from "~/components/ui/shadcn/pagination"; } 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() { 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 ( return (
<Drawer> <Drawer>
<DrawerTrigger> <DrawerTrigger>
@ -49,38 +92,50 @@ export default function History_Drawer() {
</div> </div>
</DrawerTitle> </DrawerTitle>
</DrawerHeader> </DrawerHeader>
<Table className="w-5/6 lg:w-1/2 m-auto" <Table className="w-5/6 lg:w-1/2 m-auto ">
>
<TableHeader> <TableHeader>
<TableRow> <TableRow>
<TableHead className="">Name</TableHead> <TableHead>Name</TableHead>
<TableHead>Status</TableHead> <TableHead>Status</TableHead>
<TableHead>Updated At</TableHead> <TableHead>Updated At</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <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>
<TableCell>{new Date(entry.updatedAt).toLocaleString()}</TableCell>
</TableRow> </TableRow>
))}
</TableBody> </TableBody>
</Table> </Table>
<DrawerFooter> <DrawerFooter>
<Pagination> <Pagination>
<PaginationContent> <PaginationContent>
{page > 1 && (
<PaginationItem> <PaginationItem>
<PaginationPrevious href="#" /> <PaginationPrevious
href="#"
onClick={(e) => {
e.preventDefault();
handlePageChange(page - 1);
}}
/>
</PaginationItem> </PaginationItem>
)}
<h3 className="text-center font-semibold">Page {page}</h3>
{page < totalPages && (
<PaginationItem> <PaginationItem>
<PaginationLink href="#">1</PaginationLink> <PaginationNext
</PaginationItem> href="#"
<PaginationItem> onClick={(e) => {
<PaginationEllipsis /> e.preventDefault();
</PaginationItem> handlePageChange(page + 1);
<PaginationItem> }}
<PaginationNext href="#" /> />
</PaginationItem> </PaginationItem>
)}
</PaginationContent> </PaginationContent>
</Pagination> </Pagination>
<DrawerClose> <DrawerClose>
@ -89,4 +144,18 @@ export default function History_Drawer() {
</DrawerContent> </DrawerContent>
</Drawer> </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>
//))}

View File

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