feat: pagination + hide fields in settings

app/transactions/[transactionId]/page.tsx

@@ -57,7 +57,7 @@ export default async function TransactionPage({ params }: { params: Promise<{ tr
         </div>
       </Card>
 
-      <div className="w-1/3 max-w-[380px] space-y-4">
+      <div className="w-1/2 max-w-[400px] space-y-4">
         <TransactionFiles transaction={transaction} files={files} />
       </div>
     </div>

app/transactions/page.tsx

@@ -3,6 +3,7 @@ import { UploadButton } from "@/components/files/upload-button"
 import { TransactionSearchAndFilters } from "@/components/transactions/filters"
 import { TransactionList } from "@/components/transactions/list"
 import { NewTransactionDialog } from "@/components/transactions/new"
+import { Pagination } from "@/components/transactions/pagination"
 import { Button } from "@/components/ui/button"
 import { getCategories } from "@/models/categories"
 import { getFields } from "@/models/fields"
@@ -10,25 +11,37 @@ import { getProjects } from "@/models/projects"
 import { getTransactions, TransactionFilters } from "@/models/transactions"
 import { Download, Plus, Upload } from "lucide-react"
 import { Metadata } from "next"
+import { redirect } from "next/navigation"
 
 export const metadata: Metadata = {
   title: "Transactions",
   description: "Manage your transactions",
 }
 
+const TRANSACTIONS_PER_PAGE = 1000
+
 export default async function TransactionsPage({ searchParams }: { searchParams: Promise<TransactionFilters> }) {
-  const filters = await searchParams
-  const transactions = await getTransactions(filters)
+  const { page, ...filters } = await searchParams
+  const { transactions, total } = await getTransactions(filters, {
+    limit: TRANSACTIONS_PER_PAGE,
+    offset: ((page ?? 1) - 1) * TRANSACTIONS_PER_PAGE,
+  })
   const categories = await getCategories()
   const projects = await getProjects()
   const fields = await getFields()
 
+  // Reset page if user clicks a filter and no transactions are found
+  if (page && page > 1 && transactions.length === 0) {
+    const params = new URLSearchParams(filters as Record<string, string>)
+    redirect(`?${params.toString()}`)
+  }
+
   return (
     <>
       <header className="flex flex-wrap items-center justify-between gap-2 mb-8">
         <h2 className="flex flex-row gap-3 md:gap-5">
           <span className="text-3xl font-bold tracking-tight">Transactions</span>
-          <span className="text-3xl tracking-tight opacity-20">{transactions.length}</span>
+          <span className="text-3xl tracking-tight opacity-20">{total}</span>
         </h2>
         <div className="flex gap-2">
           <ExportTransactionsDialog fields={fields} categories={categories} projects={projects}>
@@ -50,6 +63,8 @@ export default async function TransactionsPage({ searchParams }: { searchParams:
       <main>
         <TransactionList transactions={transactions} fields={fields} />
 
+        {total > TRANSACTIONS_PER_PAGE && <Pagination totalItems={total} itemsPerPage={TRANSACTIONS_PER_PAGE} />}
+
         {transactions.length === 0 && (
           <div className="flex flex-col items-center justify-center gap-2 h-full min-h-[400px]">
             <p className="text-muted-foreground">