From 8cacc2105115b7deaeabb7941163bed2eda1c030 Mon Sep 17 00:00:00 2001
From: Pontus Abrahamsson <pontus@lostisland.co>
Date: Mon, 18 Dec 2023 08:11:05 +0100
Subject: [PATCH] Pagination

---
 .../@dashboard/(root)/transactions/page.tsx   | 28 +++++++++++--------
 .../components/tables/transactions/index.tsx  |  2 +-
 .../src/components/transaction-details.tsx    |  2 +-
 3 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/apps/dashboard/src/app/[locale]/@dashboard/(root)/transactions/page.tsx b/apps/dashboard/src/app/[locale]/@dashboard/(root)/transactions/page.tsx
index e1159f60b2..a5967783aa 100644
--- a/apps/dashboard/src/app/[locale]/@dashboard/(root)/transactions/page.tsx
+++ b/apps/dashboard/src/app/[locale]/@dashboard/(root)/transactions/page.tsx
@@ -1,3 +1,4 @@
+import { ErrorFallback } from "@/components/error-fallback";
 import { Filter } from "@/components/filter";
 import { TransactionsModal } from "@/components/modals/transactions-modal";
 import { Table } from "@/components/tables/transactions";
@@ -6,6 +7,7 @@ import { Loading } from "@/components/tables/transactions/loading";
 import { getBankConnectionsByTeamId } from "@midday/supabase/cached-queries";
 import { cn } from "@midday/ui/utils";
 import { Metadata } from "next";
+import { ErrorBoundary } from "next/dist/client/components/error-boundary";
 import { Suspense } from "react";
 
 export const metadata: Metadata = {
@@ -34,18 +36,20 @@ export default async function Transactions({
       </div>
 
       <div className={cn(empty && "opacity-20 pointer-events-none")}>
-        <Suspense
-          fallback={<Loading collapsed={Boolean(transactionId)} />}
-          key={page}
-        >
-          <Table
-            filter={filter}
-            page={page}
-            sort={sort}
-            noAccounts={empty}
-            initialTransactionId={searchParams.id}
-          />
-        </Suspense>
+        <ErrorBoundary errorComponent={ErrorFallback}>
+          <Suspense
+            fallback={<Loading collapsed={Boolean(transactionId)} />}
+            key={page}
+          >
+            <Table
+              filter={filter}
+              page={page}
+              sort={sort}
+              noAccounts={empty}
+              initialTransactionId={searchParams.id}
+            />
+          </Suspense>
+        </ErrorBoundary>
       </div>
 
       {!isOpen && empty && <TransactionsModal />}
diff --git a/apps/dashboard/src/components/tables/transactions/index.tsx b/apps/dashboard/src/components/tables/transactions/index.tsx
index fa7c19ea90..5227b5c999 100644
--- a/apps/dashboard/src/components/tables/transactions/index.tsx
+++ b/apps/dashboard/src/components/tables/transactions/index.tsx
@@ -33,7 +33,7 @@ export async function Table({
     return <NoResults hasFilters={hasFilters} />;
   }
 
-  const hasNextPage = meta.count + 1 * page > pageSize;
+  const hasNextPage = meta.count / (page + 1) > pageSize;
 
   return (
     <div className="relative">
diff --git a/apps/dashboard/src/components/transaction-details.tsx b/apps/dashboard/src/components/transaction-details.tsx
index 9c6796c06a..8a2c522c98 100644
--- a/apps/dashboard/src/components/transaction-details.tsx
+++ b/apps/dashboard/src/components/transaction-details.tsx
@@ -56,7 +56,7 @@ export function TransactionDetails({
   }, [data]);
 
   return (
-    <div className="border h-full min-h-[calc(100vh-150px)] w-full p-6">
+    <div className="border h-full min-h-[calc(100vh-150px)] w-full p-6 bg-background">
       <div className="sticky top-12">
         <div className="flex justify-between mb-8">
           <div className="flex-1 flex-col">