Pagination

midday-ai · Dec 18, 2023 · 8cacc21 · 8cacc21
1 parent 2ce2264
commit 8cacc21
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 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
@@ -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
@@ -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
@@ -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">