feat: pagination + hide fields in settings

2026-01-13 13:25:18 +00:00 · 2025-03-27 08:48:47 +01:00
parent a80684c3fb
commit 61da617f68
25 changed files with 813 additions and 220 deletions
--- a/app/export/transactions/route.ts
+++ b/app/export/transactions/route.ts
@@ -15,7 +15,7 @@ export async function GET(request: Request) {
  const fields = (url.searchParams.get("fields")?.split(",") ?? []) as ExportFields
  const includeAttachments = url.searchParams.get("includeAttachments") === "true"

-  const transactions = await getTransactions(filters)
+  const { transactions } = await getTransactions(filters)
  const existingFields = await getFields()

  // Generate CSV file with all transactions
--- a/app/settings/actions.ts
+++ b/app/settings/actions.ts
@@ -1,12 +1,19 @@
 "use server"

-import { settingsFormSchema } from "@/forms/settings"
-import { codeFromName } from "@/lib/utils"
+import {
+  categoryFormSchema,
+  currencyFormSchema,
+  fieldFormSchema,
+  projectFormSchema,
+  settingsFormSchema,
+} from "@/forms/settings"
+import { codeFromName, randomHexColor } from "@/lib/utils"
 import { createCategory, deleteCategory, updateCategory } from "@/models/categories"
 import { createCurrency, deleteCurrency, updateCurrency } from "@/models/currencies"
 import { createField, deleteField, updateField } from "@/models/fields"
 import { createProject, deleteProject, updateProject } from "@/models/projects"
 import { updateSettings } from "@/models/settings"
+import { Prisma } from "@prisma/client"
 import { revalidatePath } from "next/cache"
 import { redirect } from "next/navigation"

@@ -26,106 +33,180 @@ export async function saveSettingsAction(prevState: any, formData: FormData) {
  // return { success: true }
 }

-export async function addProjectAction(data: { name: string; llm_prompt?: string; color?: string }) {
+export async function addProjectAction(data: Prisma.ProjectCreateInput) {
+  const validatedForm = projectFormSchema.safeParse(data)
+
+  if (!validatedForm.success) {
+    return { success: false, error: validatedForm.error.message }
+  }
+
  const project = await createProject({
-    code: codeFromName(data.name),
-    name: data.name,
-    llm_prompt: data.llm_prompt || null,
-    color: data.color || "#000000",
+    code: codeFromName(validatedForm.data.name),
+    name: validatedForm.data.name,
+    llm_prompt: validatedForm.data.llm_prompt || null,
+    color: validatedForm.data.color || randomHexColor(),
  })
  revalidatePath("/settings/projects")
-  return project
+
+  return { success: true, project }
 }

-export async function editProjectAction(code: string, data: { name: string; llm_prompt?: string; color?: string }) {
+export async function editProjectAction(code: string, data: Prisma.ProjectUpdateInput) {
+  const validatedForm = projectFormSchema.safeParse(data)
+
+  if (!validatedForm.success) {
+    return { success: false, error: validatedForm.error.message }
+  }
+
  const project = await updateProject(code, {
-    name: data.name,
-    llm_prompt: data.llm_prompt,
-    color: data.color,
+    name: validatedForm.data.name,
+    llm_prompt: validatedForm.data.llm_prompt,
+    color: validatedForm.data.color || "",
  })
  revalidatePath("/settings/projects")
-  return project
+
+  return { success: true, project }
 }

 export async function deleteProjectAction(code: string) {
-  await deleteProject(code)
+  try {
+    await deleteProject(code)
+  } catch (error) {
+    return { success: false, error: "Failed to delete project" + error }
+  }
  revalidatePath("/settings/projects")
+  return { success: true }
 }

-export async function addCurrencyAction(data: { code: string; name: string }) {
+export async function addCurrencyAction(data: Prisma.CurrencyCreateInput) {
+  const validatedForm = currencyFormSchema.safeParse(data)
+
+  if (!validatedForm.success) {
+    return { success: false, error: validatedForm.error.message }
+  }
+
  const currency = await createCurrency({
-    code: data.code,
-    name: data.name,
+    code: validatedForm.data.code,
+    name: validatedForm.data.name,
  })
  revalidatePath("/settings/currencies")
-  return currency
+
+  return { success: true, currency }
 }

-export async function editCurrencyAction(code: string, data: { name: string }) {
-  const currency = await updateCurrency(code, { name: data.name })
+export async function editCurrencyAction(code: string, data: Prisma.CurrencyUpdateInput) {
+  const validatedForm = currencyFormSchema.safeParse(data)
+
+  if (!validatedForm.success) {
+    return { success: false, error: validatedForm.error.message }
+  }
+
+  const currency = await updateCurrency(code, { name: validatedForm.data.name })
  revalidatePath("/settings/currencies")
-  return currency
+  return { success: true, currency }
 }

 export async function deleteCurrencyAction(code: string) {
-  await deleteCurrency(code)
+  try {
+    await deleteCurrency(code)
+  } catch (error) {
+    return { success: false, error: "Failed to delete currency" + error }
+  }
  revalidatePath("/settings/currencies")
+  return { success: true }
 }

-export async function addCategoryAction(data: { name: string; llm_prompt?: string; color?: string }) {
+export async function addCategoryAction(data: Prisma.CategoryCreateInput) {
+  const validatedForm = categoryFormSchema.safeParse(data)
+
+  if (!validatedForm.success) {
+    return { success: false, error: validatedForm.error.message }
+  }
+
  const category = await createCategory({
-    code: codeFromName(data.name),
-    name: data.name,
-    llm_prompt: data.llm_prompt,
-    color: data.color,
+    code: codeFromName(validatedForm.data.name),
+    name: validatedForm.data.name,
+    llm_prompt: validatedForm.data.llm_prompt,
+    color: validatedForm.data.color || "",
  })
  revalidatePath("/settings/categories")
-  return category
+
+  return { success: true, category }
 }

-export async function editCategoryAction(code: string, data: { name: string; llm_prompt?: string; color?: string }) {
+export async function editCategoryAction(code: string, data: Prisma.CategoryUpdateInput) {
+  const validatedForm = categoryFormSchema.safeParse(data)
+
+  if (!validatedForm.success) {
+    return { success: false, error: validatedForm.error.message }
+  }
+
  const category = await updateCategory(code, {
-    name: data.name,
-    llm_prompt: data.llm_prompt,
-    color: data.color,
+    name: validatedForm.data.name,
+    llm_prompt: validatedForm.data.llm_prompt,
+    color: validatedForm.data.color || "",
  })
  revalidatePath("/settings/categories")
-  return category
+
+  return { success: true, category }
 }

 export async function deleteCategoryAction(code: string) {
-  await deleteCategory(code)
+  try {
+    await deleteCategory(code)
+  } catch (error) {
+    return { success: false, error: "Failed to delete category" + error }
+  }
  revalidatePath("/settings/categories")
+  return { success: true }
 }

-export async function addFieldAction(data: { name: string; type: string; llm_prompt?: string; isRequired?: boolean }) {
+export async function addFieldAction(data: Prisma.FieldCreateInput) {
+  const validatedForm = fieldFormSchema.safeParse(data)
+
+  if (!validatedForm.success) {
+    return { success: false, error: validatedForm.error.message }
+  }
+
  const field = await createField({
-    code: codeFromName(data.name),
-    name: data.name,
-    type: data.type,
-    llm_prompt: data.llm_prompt,
-    isRequired: data.isRequired,
+    code: codeFromName(validatedForm.data.name),
+    name: validatedForm.data.name,
+    type: validatedForm.data.type,
+    llm_prompt: validatedForm.data.llm_prompt,
+    isVisibleInList: validatedForm.data.isVisibleInList,
+    isVisibleInAnalysis: validatedForm.data.isVisibleInAnalysis,
    isExtra: true,
  })
  revalidatePath("/settings/fields")
-  return field
+
+  return { success: true, field }
 }

-export async function editFieldAction(
-  code: string,
-  data: { name: string; type: string; llm_prompt?: string; isRequired?: boolean }
-) {
+export async function editFieldAction(code: string, data: Prisma.FieldUpdateInput) {
+  const validatedForm = fieldFormSchema.safeParse(data)
+
+  if (!validatedForm.success) {
+    return { success: false, error: validatedForm.error.message }
+  }
+
  const field = await updateField(code, {
-    name: data.name,
-    type: data.type,
-    llm_prompt: data.llm_prompt,
-    isRequired: data.isRequired,
+    name: validatedForm.data.name,
+    type: validatedForm.data.type,
+    llm_prompt: validatedForm.data.llm_prompt,
+    isVisibleInList: validatedForm.data.isVisibleInList,
+    isVisibleInAnalysis: validatedForm.data.isVisibleInAnalysis,
  })
  revalidatePath("/settings/fields")
-  return field
+
+  return { success: true, field }
 }

 export async function deleteFieldAction(code: string) {
-  await deleteField(code)
+  try {
+    await deleteField(code)
+  } catch (error) {
+    return { success: false, error: "Failed to delete field" + error }
+  }
  revalidatePath("/settings/fields")
+  return { success: true }
 }
--- a/app/settings/categories/page.tsx
+++ b/app/settings/categories/page.tsx
@@ -2,6 +2,7 @@ import { addCategoryAction, deleteCategoryAction, editCategoryAction } from "@/a
 import { CrudTable } from "@/components/settings/crud"
 import { randomHexColor } from "@/lib/utils"
 import { getCategories } from "@/models/categories"
+import { Prisma } from "@prisma/client"

 export default async function CategoriesSettingsPage() {
  const categories = await getCategories()
@@ -13,7 +14,12 @@ export default async function CategoriesSettingsPage() {

  return (
    <div className="container">
-      <h1 className="text-2xl font-bold mb-6">Categories</h1>
+      <h1 className="text-2xl font-bold mb-2">Categories</h1>
+      <p className="text-sm text-gray-500 mb-6 max-w-prose">
+        Create your own categories that better reflect the type of income and expenses you have. Define an LLM Prompt so
+        that AI can determine this category automatically.
+      </p>
+
      <CrudTable
        items={categoriesWithActions}
        columns={[
@@ -23,29 +29,15 @@ export default async function CategoriesSettingsPage() {
        ]}
        onDelete={async (code) => {
          "use server"
-          await deleteCategoryAction(code)
+          return await deleteCategoryAction(code)
        }}
        onAdd={async (data) => {
          "use server"
-          await addCategoryAction(
-            data as {
-              code: string
-              name: string
-              llm_prompt?: string
-              color: string
-            }
-          )
+          return await addCategoryAction(data as Prisma.CategoryCreateInput)
        }}
        onEdit={async (code, data) => {
          "use server"
-          await editCategoryAction(
-            code,
-            data as {
-              name: string
-              llm_prompt?: string
-              color?: string
-            }
-          )
+          return await editCategoryAction(code, data as Prisma.CategoryUpdateInput)
        }}
      />
    </div>
--- a/app/settings/currencies/page.tsx
+++ b/app/settings/currencies/page.tsx
@@ -12,7 +12,10 @@ export default async function CurrenciesSettingsPage() {

  return (
    <div className="container">
-      <h1 className="text-2xl font-bold mb-6">Currencies</h1>
+      <h1 className="text-2xl font-bold mb-2">Currencies</h1>
+      <p className="text-sm text-gray-500 mb-6 max-w-prose">
+        Custom currencies would not be automatically converted but you still can have them.
+      </p>
      <CrudTable
        items={currenciesWithActions}
        columns={[
@@ -21,15 +24,15 @@ export default async function CurrenciesSettingsPage() {
        ]}
        onDelete={async (code) => {
          "use server"
-          await deleteCurrencyAction(code)
+          return await deleteCurrencyAction(code)
        }}
        onAdd={async (data) => {
          "use server"
-          await addCurrencyAction(data as { code: string; name: string })
+          return await addCurrencyAction(data as { code: string; name: string })
        }}
        onEdit={async (code, data) => {
          "use server"
-          await editCurrencyAction(code, data as { name: string })
+          return await editCurrencyAction(code, data as { name: string })
        }}
      />
    </div>
--- a/app/settings/fields/page.tsx
+++ b/app/settings/fields/page.tsx
@@ -1,6 +1,7 @@
 import { addFieldAction, deleteFieldAction, editFieldAction } from "@/app/settings/actions"
 import { CrudTable } from "@/components/settings/crud"
 import { getFields } from "@/models/fields"
+import { Prisma } from "@prisma/client"

 export default async function FieldsSettingsPage() {
  const fields = await getFields()
@@ -12,38 +13,50 @@ export default async function FieldsSettingsPage() {

  return (
    <div className="container">
-      <h1 className="text-2xl font-bold mb-6">Custom Fields</h1>
+      <h1 className="text-2xl font-bold mb-2">Custom Fields</h1>
+      <p className="text-sm text-gray-500 mb-6 max-w-prose">
+        You can add new fields to your transactions. Standard fields can't be removed but you can tweak their prompts or
+        hide them. If you don't want a field to be analyzed by AI but filled in by hand, leave the "LLM prompt" empty.
+      </p>
      <CrudTable
        items={fieldsWithActions}
        columns={[
          { key: "name", label: "Name", editable: true },
-          { key: "type", label: "Type", defaultValue: "string", editable: true },
+          {
+            key: "type",
+            label: "Type",
+            type: "select",
+            options: ["string", "number", "boolean"],
+            defaultValue: "string",
+            editable: true,
+          },
          { key: "llm_prompt", label: "LLM Prompt", editable: true },
+          {
+            key: "isVisibleInList",
+            label: "Show in transactions table",
+            type: "checkbox",
+            defaultValue: false,
+            editable: true,
+          },
+          {
+            key: "isVisibleInAnalysis",
+            label: "Show in analysis form",
+            type: "checkbox",
+            defaultValue: false,
+            editable: true,
+          },
        ]}
        onDelete={async (code) => {
          "use server"
-          await deleteFieldAction(code)
+          return await deleteFieldAction(code)
        }}
        onAdd={async (data) => {
          "use server"
-          await addFieldAction(
-            data as {
-              name: string
-              type: string
-              llm_prompt?: string
-            }
-          )
+          return await addFieldAction(data as Prisma.FieldCreateInput)
        }}
        onEdit={async (code, data) => {
          "use server"
-          await editFieldAction(
-            code,
-            data as {
-              name: string
-              type: string
-              llm_prompt?: string
-            }
-          )
+          return await editFieldAction(code, data as Prisma.FieldUpdateInput)
        }}
      />
    </div>
--- a/app/settings/projects/page.tsx
+++ b/app/settings/projects/page.tsx
@@ -2,6 +2,7 @@ import { addProjectAction, deleteProjectAction, editProjectAction } from "@/app/
 import { CrudTable } from "@/components/settings/crud"
 import { randomHexColor } from "@/lib/utils"
 import { getProjects } from "@/models/projects"
+import { Prisma } from "@prisma/client"

 export default async function ProjectsSettingsPage() {
  const projects = await getProjects()
@@ -13,7 +14,11 @@ export default async function ProjectsSettingsPage() {

  return (
    <div className="container">
-      <h1 className="text-2xl font-bold mb-6">Projects</h1>
+      <h1 className="text-2xl font-bold mb-2">Projects</h1>
+      <p className="text-sm text-gray-500 mb-6 max-w-prose">
+        Use projects to differentiate between the type of activities you do For example: Freelancing, YouTube channel,
+        Blogging. Projects are just a convenient way to separate statistics.
+      </p>
      <CrudTable
        items={projectsWithActions}
        columns={[
@@ -23,15 +28,15 @@ export default async function ProjectsSettingsPage() {
        ]}
        onDelete={async (code) => {
          "use server"
-          await deleteProjectAction(code)
+          return await deleteProjectAction(code)
        }}
        onAdd={async (data) => {
          "use server"
-          await addProjectAction(data as { code: string; name: string; llm_prompt: string; color: string })
+          return await addProjectAction(data as Prisma.ProjectCreateInput)
        }}
        onEdit={async (code, data) => {
          "use server"
-          await editProjectAction(code, data as { name: string; llm_prompt: string; color: string })
+          return await editProjectAction(code, data as Prisma.ProjectUpdateInput)
        }}
      />
    </div>
--- a/app/transactions/[transactionId]/page.tsx
+++ b/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>
--- a/app/transactions/page.tsx
+++ b/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">
--- a/components/export/transactions.tsx
+++ b/components/export/transactions.tsx
@@ -43,7 +43,12 @@ export function ExportTransactionsDialog({
  const handleSubmit = () => {
    router.push(
      `/export/transactions?${new URLSearchParams({
-        ...exportFilters,
+        search: exportFilters?.search || "",
+        dateFrom: exportFilters?.dateFrom || "",
+        dateTo: exportFilters?.dateTo || "",
+        ordering: exportFilters?.ordering || "",
+        categoryCode: exportFilters?.categoryCode || "",
+        projectCode: exportFilters?.projectCode || "",
        fields: exportFields.join(","),
        includeAttachments: includeAttachments.toString(),
      }).toString()}`
--- a/components/files/preview.tsx
+++ b/components/files/preview.tsx
@@ -41,12 +41,12 @@ export function FilePreview({ file }: { file: File }) {
          <p className="text-sm overflow-ellipsis">
            <strong>Type:</strong> {file.mimetype}
          </p>
+          {/* <p className="text-sm overflow-ellipsis">
+            <strong>Uploaded:</strong> {format(file.createdAt, "MMM d, yyyy")}
+          </p> */}
          <p className="text-sm">
            <strong>Size:</strong> {fileSize < 1 ? (fileSize * 1024).toFixed(2) + " KB" : fileSize.toFixed(2) + " MB"}
          </p>
-          <p className="text-xs overflow-ellipsis">
-            <strong>Path:</strong> {file.path}
-          </p>
        </div>
      </div>
    </>
--- a/components/forms/select-category.tsx
+++ b/components/forms/select-category.tsx
@@ -10,11 +10,27 @@ export const FormSelectCategory = ({
  categories,
  emptyValue,
  placeholder,
+  hideIfEmpty = false,
  ...props
-}: { title: string; categories: Category[]; emptyValue?: string; placeholder?: string } & SelectProps) => {
+}: {
+  title: string
+  categories: Category[]
+  emptyValue?: string
+  placeholder?: string
+  hideIfEmpty?: boolean
+} & SelectProps) => {
  const items = useMemo(
    () => categories.map((category) => ({ code: category.code, name: category.name, color: category.color })),
    [categories]
  )
-  return <FormSelect title={title} items={items} emptyValue={emptyValue} placeholder={placeholder} {...props} />
+  return (
+    <FormSelect
+      title={title}
+      items={items}
+      emptyValue={emptyValue}
+      placeholder={placeholder}
+      hideIfEmpty={hideIfEmpty}
+      {...props}
+    />
+  )
 }
--- a/components/forms/select-currency.tsx
+++ b/components/forms/select-currency.tsx
@@ -8,11 +8,27 @@ export const FormSelectCurrency = ({
  currencies,
  emptyValue,
  placeholder,
+  hideIfEmpty = false,
  ...props
-}: { title: string; currencies: Currency[]; emptyValue?: string; placeholder?: string } & SelectProps) => {
+}: {
+  title: string
+  currencies: Currency[]
+  emptyValue?: string
+  placeholder?: string
+  hideIfEmpty?: boolean
+} & SelectProps) => {
  const items = useMemo(
    () => currencies.map((currency) => ({ code: currency.code, name: `${currency.code} - ${currency.name}` })),
    [currencies]
  )
-  return <FormSelect title={title} items={items} emptyValue={emptyValue} placeholder={placeholder} {...props} />
+  return (
+    <FormSelect
+      title={title}
+      items={items}
+      emptyValue={emptyValue}
+      placeholder={placeholder}
+      hideIfEmpty={hideIfEmpty}
+      {...props}
+    />
+  )
 }
--- a/components/forms/select-project.tsx
+++ b/components/forms/select-project.tsx
@@ -7,14 +7,22 @@ export const FormSelectProject = ({
  projects,
  emptyValue,
  placeholder,
+  hideIfEmpty = false,
  ...props
-}: { title: string; projects: Project[]; emptyValue?: string; placeholder?: string } & SelectProps) => {
+}: {
+  title: string
+  projects: Project[]
+  emptyValue?: string
+  placeholder?: string
+  hideIfEmpty?: boolean
+} & SelectProps) => {
  return (
    <FormSelect
      title={title}
      items={projects.map((project) => ({ code: project.code, name: project.name, color: project.color }))}
      emptyValue={emptyValue}
      placeholder={placeholder}
+      hideIfEmpty={hideIfEmpty}
      {...props}
    />
  )
--- a/components/forms/select-type.tsx
+++ b/components/forms/select-type.tsx
@@ -5,8 +5,9 @@ export const FormSelectType = ({
  title,
  emptyValue,
  placeholder,
+  hideIfEmpty = false,
  ...props
-}: { title: string; emptyValue?: string; placeholder?: string } & SelectProps) => {
+}: { title: string; emptyValue?: string; placeholder?: string; hideIfEmpty?: boolean } & SelectProps) => {
  const items = [
    { code: "expense", name: "Expense" },
    { code: "income", name: "Income" },
@@ -14,5 +15,14 @@ export const FormSelectType = ({
    { code: "other", name: "Other" },
  ]

-  return <FormSelect title={title} items={items} emptyValue={emptyValue} placeholder={placeholder} {...props} />
+  return (
+    <FormSelect
+      title={title}
+      items={items}
+      emptyValue={emptyValue}
+      placeholder={placeholder}
+      hideIfEmpty={hideIfEmpty}
+      {...props}
+    />
+  )
 }
--- a/components/forms/simple.tsx
+++ b/components/forms/simple.tsx
@@ -53,13 +53,19 @@ export const FormSelect = ({
  items,
  emptyValue,
  placeholder,
+  hideIfEmpty = false,
  ...props
 }: {
  title: string
  items: Array<{ code: string; name: string; color?: string }>
  emptyValue?: string
  placeholder?: string
+  hideIfEmpty?: boolean
 } & SelectProps) => {
+  if (hideIfEmpty && (!props.defaultValue || props.defaultValue.toString().trim() === "") && !props.value) {
+    return null
+  }
+
  return (
    <span className="flex flex-col gap-1">
      <span className="text-sm font-medium">{title}</span>
--- a/components/settings/crud.tsx
+++ b/components/settings/crud.tsx
@@ -3,35 +3,146 @@
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
-import { CircleCheck, Edit, Trash2 } from "lucide-react"
+import { Check, Edit, Trash2 } from "lucide-react"
 import { useOptimistic, useState } from "react"

+interface CrudColumn<T> {
+  key: keyof T
+  label: string
+  type?: "text" | "number" | "checkbox" | "select"
+  options?: string[]
+  defaultValue?: string | boolean
+  editable?: boolean
+}
+
 interface CrudProps<T> {
  items: T[]
-  columns: {
-    key: keyof T
-    label: string
-    type?: "text" | "number" | "checkbox"
-    defaultValue?: string
-    editable?: boolean
-  }[]
-  onDelete: (id: string) => Promise<void>
-  onAdd: (data: Partial<T>) => Promise<void>
-  onEdit?: (id: string, data: Partial<T>) => Promise<void>
+  columns: CrudColumn<T>[]
+  onDelete: (id: string) => Promise<{ success: boolean; error?: string }>
+  onAdd: (data: Partial<T>) => Promise<{ success: boolean; error?: string }>
+  onEdit?: (id: string, data: Partial<T>) => Promise<{ success: boolean; error?: string }>
 }

 export function CrudTable<T extends { [key: string]: any }>({ items, columns, onDelete, onAdd, onEdit }: CrudProps<T>) {
  const [isAdding, setIsAdding] = useState(false)
  const [editingId, setEditingId] = useState<string | null>(null)
-  const [newItem, setNewItem] = useState<Partial<T>>({})
-  const [editingItem, setEditingItem] = useState<Partial<T>>({})
+  const [newItem, setNewItem] = useState<Partial<T>>(itemDefaults(columns))
+  const [editingItem, setEditingItem] = useState<Partial<T>>(itemDefaults(columns))
  const [optimisticItems, addOptimisticItem] = useOptimistic(items, (state, newItem: T) => [...state, newItem])

+  const FormCell = (item: T, column: CrudColumn<T>) => {
+    if (column.type === "checkbox") {
+      return item[column.key] ? <Check /> : ""
+    }
+    return item[column.key]
+  }
+
+  const EditFormCell = (item: T, column: CrudColumn<T>) => {
+    if (column.type === "checkbox") {
+      return (
+        <input
+          type="checkbox"
+          checked={editingItem[column.key]}
+          onChange={(e) =>
+            setEditingItem({
+              ...editingItem,
+              [column.key]: e.target.checked,
+            })
+          }
+        />
+      )
+    } else if (column.type === "select") {
+      return (
+        <select
+          value={editingItem[column.key]}
+          className="p-2 rounded-md border bg-transparent"
+          onChange={(e) =>
+            setEditingItem({
+              ...editingItem,
+              [column.key]: e.target.value,
+            })
+          }
+        >
+          {column.options?.map((option) => (
+            <option key={option} value={option}>
+              {option}
+            </option>
+          ))}
+        </select>
+      )
+    }
+
+    return (
+      <Input
+        type="text"
+        value={editingItem[column.key] || ""}
+        onChange={(e) =>
+          setEditingItem({
+            ...editingItem,
+            [column.key]: e.target.value,
+          })
+        }
+      />
+    )
+  }
+
+  const AddFormCell = (column: CrudColumn<T>) => {
+    if (column.type === "checkbox") {
+      return (
+        <input
+          type="checkbox"
+          checked={Boolean(newItem[column.key] || column.defaultValue)}
+          onChange={(e) =>
+            setNewItem({
+              ...newItem,
+              [column.key]: e.target.checked,
+            })
+          }
+        />
+      )
+    } else if (column.type === "select") {
+      return (
+        <select
+          value={String(newItem[column.key] || column.defaultValue || "")}
+          className="p-2 rounded-md border bg-transparent"
+          onChange={(e) =>
+            setNewItem({
+              ...newItem,
+              [column.key]: e.target.value,
+            })
+          }
+        >
+          {column.options?.map((option) => (
+            <option key={option} value={option}>
+              {option}
+            </option>
+          ))}
+        </select>
+      )
+    }
+    return (
+      <Input
+        type={column.type || "text"}
+        value={String(newItem[column.key] || column.defaultValue || "")}
+        onChange={(e) =>
+          setNewItem({
+            ...newItem,
+            [column.key]: e.target.value,
+          })
+        }
+      />
+    )
+  }
+
  const handleAdd = async () => {
    try {
-      await onAdd(newItem)
-      setIsAdding(false)
-      setNewItem({})
+      const result = await onAdd(newItem)
+      if (result.success) {
+        setIsAdding(false)
+        setNewItem(itemDefaults(columns))
+      } else {
+        alert(result.error)
+      }
    } catch (error) {
      console.error("Failed to add item:", error)
    }
@@ -40,9 +151,13 @@ export function CrudTable<T extends { [key: string]: any }>({ items, columns, on
  const handleEdit = async (id: string) => {
    if (!onEdit) return
    try {
-      await onEdit(id, editingItem)
-      setEditingId(null)
-      setEditingItem({})
+      const result = await onEdit(id, editingItem)
+      if (result.success) {
+        setEditingId(null)
+        setEditingItem({})
+      } else {
+        alert(result.error)
+      }
    } catch (error) {
      console.error("Failed to edit item:", error)
    }
@@ -55,7 +170,10 @@ export function CrudTable<T extends { [key: string]: any }>({ items, columns, on

  const handleDelete = async (id: string) => {
    try {
-      await onDelete(id)
+      const result = await onDelete(id)
+      if (!result.success) {
+        alert(result.error)
+      }
    } catch (error) {
      console.error("Failed to delete item:", error)
    }
@@ -77,26 +195,9 @@ export function CrudTable<T extends { [key: string]: any }>({ items, columns, on
            <TableRow key={index}>
              {columns.map((column) => (
                <TableCell key={String(column.key)} className="first:font-semibold">
-                  {editingId === (item.code || item.id) && column.editable ? (
-                    <Input
-                      type={column.type || "text"}
-                      value={editingItem[column.key] || ""}
-                      onChange={(e) =>
-                        setEditingItem({
-                          ...editingItem,
-                          [column.key]: column.type === "checkbox" ? e.target.checked : e.target.value,
-                        })
-                      }
-                    />
-                  ) : column.type === "checkbox" ? (
-                    item[column.key] ? (
-                      <CircleCheck />
-                    ) : (
-                      ""
-                    )
-                  ) : (
-                    item[column.key]
-                  )}
+                  {editingId === (item.code || item.id) && column.editable
+                    ? EditFormCell(item, column)
+                    : FormCell(item, column)}
                </TableCell>
              ))}
              <TableCell>
@@ -113,7 +214,14 @@ export function CrudTable<T extends { [key: string]: any }>({ items, columns, on
                  ) : (
                    <>
                      {onEdit && (
-                        <Button variant="ghost" size="icon" onClick={() => startEditing(item)}>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={() => {
+                            startEditing(item)
+                            setIsAdding(false)
+                          }}
+                        >
                          <Edit />
                        </Button>
                      )}
@@ -132,18 +240,7 @@ export function CrudTable<T extends { [key: string]: any }>({ items, columns, on
            <TableRow>
              {columns.map((column) => (
                <TableCell key={String(column.key)} className="first:font-semibold">
-                  {column.editable && (
-                    <Input
-                      type={column.type || "text"}
-                      value={newItem[column.key] || column.defaultValue || ""}
-                      onChange={(e) =>
-                        setNewItem({
-                          ...newItem,
-                          [column.key]: column.type === "checkbox" ? e.target.checked : e.target.value,
-                        })
-                      }
-                    />
-                  )}
+                  {column.editable && AddFormCell(column)}
                </TableCell>
              ))}
              <TableCell>
@@ -160,7 +257,23 @@ export function CrudTable<T extends { [key: string]: any }>({ items, columns, on
          )}
        </TableBody>
      </Table>
-      {!isAdding && <Button onClick={() => setIsAdding(true)}>Add New</Button>}
+      {!isAdding && (
+        <Button
+          onClick={() => {
+            setIsAdding(true)
+            setEditingId(null)
+          }}
+        >
+          Add New
+        </Button>
+      )}
    </div>
  )
 }
+
+function itemDefaults<T>(columns: CrudColumn<T>[]) {
+  return columns.reduce((acc, column) => {
+    acc[column.key] = column.defaultValue as T[keyof T]
+    return acc
+  }, {} as Partial<T>)
+}
--- a/components/settings/llm-settings-form.tsx
+++ b/components/settings/llm-settings-form.tsx
@@ -27,7 +27,7 @@ export default function LLMSettingsForm({ settings, fields }: { settings: Record
        </small>

        <FormTextarea
-          title="Prompt for Analyze Transaction"
+          title="Prompt for File Analysis Form"
          name="prompt_analyse_new_file"
          defaultValue={settings.prompt_analyse_new_file}
          className="h-96"
--- a/components/transactions/pagination.tsx
+++ b/components/transactions/pagination.tsx
@@ -0,0 +1,114 @@
+"use client"
+
+import {
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  Pagination as PaginationRoot,
+} from "@/components/ui/pagination"
+import { useRouter, useSearchParams } from "next/navigation"
+
+const MAX_VISIBLE_PAGES = 5
+
+export function Pagination({ totalItems, itemsPerPage = 1000 }: { totalItems: number; itemsPerPage: number }) {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+
+  const totalPages = Math.ceil(totalItems / itemsPerPage)
+  const currentPage = parseInt(searchParams.get("page") || "1")
+
+  const onPageChange = (page: number) => {
+    const params = new URLSearchParams(searchParams.toString())
+    params.set("page", page.toString())
+    router.push(`?${params.toString()}`)
+  }
+
+  const getPageNumbers = () => {
+    const pageNumbers = []
+
+    // Show all page numbers if total pages is small
+    if (totalPages <= MAX_VISIBLE_PAGES) {
+      for (let i = 1; i <= totalPages; i++) {
+        pageNumbers.push(i)
+      }
+    } else {
+      // Always include the first page
+      pageNumbers.push(1)
+
+      // Calculate the range around the current page
+      let startPage = Math.max(2, currentPage - 1)
+      let endPage = Math.min(totalPages - 1, currentPage + 1)
+
+      // Adjust if we're near the start
+      if (currentPage <= 3) {
+        endPage = Math.min(totalPages - 1, 4)
+      }
+
+      // Adjust if we're near the end
+      if (currentPage >= totalPages - 2) {
+        startPage = Math.max(2, totalPages - 3)
+      }
+
+      // Add ellipsis after first page if needed
+      if (startPage > 2) {
+        pageNumbers.push("ellipsis-start")
+      }
+
+      // Add middle page numbers
+      for (let i = startPage; i <= endPage; i++) {
+        pageNumbers.push(i)
+      }
+
+      // Add ellipsis before last page if needed
+      if (endPage < totalPages - 1) {
+        pageNumbers.push("ellipsis-end")
+      }
+
+      // Always include the last page
+      pageNumbers.push(totalPages)
+    }
+
+    return pageNumbers
+  }
+
+  return (
+    <div className="flex justify-center w-full mt-4">
+      <PaginationRoot>
+        <PaginationContent>
+          {/* <PaginationItem>
+            <PaginationPrevious
+              onClick={() => currentPage > 1 && onPageChange(currentPage - 1)}
+              className={currentPage <= 1 ? "pointer-events-none opacity-50" : "cursor-pointer"}
+            />
+          </PaginationItem> */}
+
+          {getPageNumbers().map((pageNumber, index) =>
+            pageNumber === "ellipsis-start" || pageNumber === "ellipsis-end" ? (
+              <PaginationItem key={`ellipsis-${index}`}>
+                <PaginationEllipsis />
+              </PaginationItem>
+            ) : (
+              <PaginationItem key={pageNumber}>
+                <PaginationLink
+                  isActive={currentPage === pageNumber}
+                  onClick={() => onPageChange(pageNumber as number)}
+                  className="cursor-pointer"
+                >
+                  {pageNumber}
+                </PaginationLink>
+              </PaginationItem>
+            )
+          )}
+
+          {/* <PaginationItem>
+            <PaginationNext
+              onClick={() => currentPage < totalPages && onPageChange(currentPage + 1)}
+              className={currentPage >= totalPages ? "pointer-events-none opacity-50" : "cursor-pointer"}
+            />
+          </PaginationItem> */}
+        </PaginationContent>
+      </PaginationRoot>
+    </div>
+  )
+}
--- a/components/ui/checkbox.tsx
+++ b/components/ui/checkbox.tsx
@@ -1,8 +1,8 @@
 "use client"

-import * as React from "react"
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 import { Check } from "lucide-react"
+import * as React from "react"

 import { cn } from "@/lib/utils"

@@ -13,14 +13,12 @@ const Checkbox = React.forwardRef<
  <CheckboxPrimitive.Root
    ref={ref}
    className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      "flex peer size-4 justify-center items-center shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
      className
    )}
    {...props}
  >
-    <CheckboxPrimitive.Indicator
-      className={cn("flex items-center justify-center text-current")}
-    >
+    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
      <Check className="h-4 w-4" />
    </CheckboxPrimitive.Indicator>
  </CheckboxPrimitive.Root>
--- a/components/ui/pagination.tsx
+++ b/components/ui/pagination.tsx
@@ -0,0 +1,117 @@
+import * as React from "react"
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { ButtonProps, buttonVariants } from "@/components/ui/button"
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+)
+Pagination.displayName = "Pagination"
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn("flex flex-row items-center gap-1", className)}
+    {...props}
+  />
+))
+PaginationContent.displayName = "PaginationContent"
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+))
+PaginationItem.displayName = "PaginationItem"
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<ButtonProps, "size"> &
+  React.ComponentProps<"a">
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      }),
+      className
+    )}
+    {...props}
+  />
+)
+PaginationLink.displayName = "PaginationLink"
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn("gap-1 pl-2.5", className)}
+    {...props}
+  >
+    <ChevronLeft className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+)
+PaginationPrevious.displayName = "PaginationPrevious"
+
+const PaginationNext = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn("gap-1 pr-2.5", className)}
+    {...props}
+  >
+    <span>Next</span>
+    <ChevronRight className="h-4 w-4" />
+  </PaginationLink>
+)
+PaginationNext.displayName = "PaginationNext"
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    aria-hidden
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+)
+PaginationEllipsis.displayName = "PaginationEllipsis"
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+}
--- a/components/unsorted/analyze-form.tsx
+++ b/components/unsorted/analyze-form.tsx
@@ -38,6 +38,14 @@ export default function AnalyzeForm({
  const [isSaving, setIsSaving] = useState(false)
  const [saveError, setSaveError] = useState("")

+  const fieldsMap = useMemo(
+    () =>
+      fields.reduce((acc, field) => {
+        acc[field.code] = field
+        return acc
+      }, {} as Record<string, Field>),
+    [fields]
+  )
  const extraFields = useMemo(() => fields.filter((field) => field.isExtra), [fields])
  const initialFormState = useMemo(
    () => ({
@@ -151,6 +159,7 @@ export default function AnalyzeForm({
          name="merchant"
          value={formData.merchant}
          onChange={(e) => setFormData((prev) => ({ ...prev, merchant: e.target.value }))}
+          hideIfEmpty={!fieldsMap["merchant"]?.isVisibleInAnalysis}
        />

        <FormInput
@@ -158,7 +167,7 @@ export default function AnalyzeForm({
          name="description"
          value={formData.description}
          onChange={(e) => setFormData((prev) => ({ ...prev, description: e.target.value }))}
-          hideIfEmpty={true}
+          hideIfEmpty={!fieldsMap["description"]?.isVisibleInAnalysis}
        />

        <div className="flex flex-wrap gap-4">
@@ -182,6 +191,7 @@ export default function AnalyzeForm({
            name="currencyCode"
            value={formData.currencyCode}
            onValueChange={(value) => setFormData((prev) => ({ ...prev, currencyCode: value }))}
+            hideIfEmpty={!fieldsMap["currencyCode"]?.isVisibleInAnalysis}
          />

          <FormSelectType
@@ -189,6 +199,7 @@ export default function AnalyzeForm({
            name="type"
            value={formData.type}
            onValueChange={(value) => setFormData((prev) => ({ ...prev, type: value }))}
+            hideIfEmpty={!fieldsMap["type"]?.isVisibleInAnalysis}
          />
        </div>

@@ -212,7 +223,7 @@ export default function AnalyzeForm({
            name="issuedAt"
            value={formData.issuedAt}
            onChange={(e) => setFormData((prev) => ({ ...prev, issuedAt: e.target.value }))}
-            hideIfEmpty={true}
+            hideIfEmpty={!fieldsMap["issuedAt"]?.isVisibleInAnalysis}
          />
        </div>

@@ -224,9 +235,10 @@ export default function AnalyzeForm({
            value={formData.categoryCode}
            onValueChange={(value) => setFormData((prev) => ({ ...prev, categoryCode: value }))}
            placeholder="Select Category"
+            hideIfEmpty={!fieldsMap["categoryCode"]?.isVisibleInAnalysis}
          />

-          {projects.length >= 0 && (
+          {projects.length > 0 && (
            <FormSelectProject
              title="Project"
              projects={projects}
@@ -234,6 +246,7 @@ export default function AnalyzeForm({
              value={formData.projectCode}
              onValueChange={(value) => setFormData((prev) => ({ ...prev, projectCode: value }))}
              placeholder="Select Project"
+              hideIfEmpty={!fieldsMap["projectCode"]?.isVisibleInAnalysis}
            />
          )}
        </div>
@@ -243,7 +256,7 @@ export default function AnalyzeForm({
          name="note"
          value={formData.note}
          onChange={(e) => setFormData((prev) => ({ ...prev, note: e.target.value }))}
-          hideIfEmpty={true}
+          hideIfEmpty={!fieldsMap["note"]?.isVisibleInAnalysis}
        />

        {extraFields.map((field) => (
@@ -254,7 +267,7 @@ export default function AnalyzeForm({
            name={field.code}
            value={formData[field.code as keyof typeof formData]}
            onChange={(e) => setFormData((prev) => ({ ...prev, [field.code]: e.target.value }))}
-            hideIfEmpty={true}
+            hideIfEmpty={!field.isVisibleInAnalysis}
          />
        ))}

@@ -264,7 +277,7 @@ export default function AnalyzeForm({
            name="text"
            value={formData.text}
            onChange={(e) => setFormData((prev) => ({ ...prev, text: e.target.value }))}
-            hideIfEmpty={true}
+            hideIfEmpty={!fieldsMap["text"]?.isVisibleInAnalysis}
          />
        </div>

--- a/forms/settings.ts
+++ b/forms/settings.ts
@@ -1,3 +1,4 @@
+import { randomHexColor } from "@/lib/utils"
 import { z } from "zod"

 export const settingsFormSchema = z.object({
@@ -10,3 +11,28 @@ export const settingsFormSchema = z.object({
  prompt_analyse_new_file: z.string().optional(),
  is_welcome_message_hidden: z.boolean().optional(),
 })
+
+export const currencyFormSchema = z.object({
+  code: z.string().max(5),
+  name: z.string().max(32),
+})
+
+export const projectFormSchema = z.object({
+  name: z.string().max(128),
+  llm_prompt: z.string().max(512).nullable().optional(),
+  color: z.string().max(7).default(randomHexColor()).nullable().optional(),
+})
+
+export const categoryFormSchema = z.object({
+  name: z.string().max(128),
+  llm_prompt: z.string().max(512).nullable().optional(),
+  color: z.string().max(7).default(randomHexColor()).nullable().optional(),
+})
+
+export const fieldFormSchema = z.object({
+  name: z.string().max(128),
+  type: z.string().max(128).default("string"),
+  llm_prompt: z.string().max(512).nullable().optional(),
+  isVisibleInList: z.boolean().optional(),
+  isVisibleInAnalysis: z.boolean().optional(),
+})
--- a/models/transactions.ts
+++ b/models/transactions.ts
@@ -15,54 +15,84 @@ export type TransactionFilters = {
  ordering?: string
  categoryCode?: string
  projectCode?: string
+  page?: number
 }

-export const getTransactions = cache(async (filters?: TransactionFilters): Promise<Transaction[]> => {
-  const where: Prisma.TransactionWhereInput = {}
-  let orderBy: Prisma.TransactionOrderByWithRelationInput = { issuedAt: "desc" }
+export type TransactionPagination = {
+  limit: number
+  offset: number
+}

-  if (filters) {
-    if (filters.search) {
-      where.OR = [
-        { name: { contains: filters.search } },
-        { merchant: { contains: filters.search } },
-        { description: { contains: filters.search } },
-        { note: { contains: filters.search } },
-        { text: { contains: filters.search } },
-      ]
-    }
+export const getTransactions = cache(
+  async (
+    filters?: TransactionFilters,
+    pagination?: TransactionPagination
+  ): Promise<{
+    transactions: Transaction[]
+    total: number
+  }> => {
+    const where: Prisma.TransactionWhereInput = {}
+    let orderBy: Prisma.TransactionOrderByWithRelationInput = { issuedAt: "desc" }

-    if (filters.dateFrom || filters.dateTo) {
-      where.issuedAt = {
-        gte: filters.dateFrom ? new Date(filters.dateFrom) : undefined,
-        lte: filters.dateTo ? new Date(filters.dateTo) : undefined,
+    if (filters) {
+      if (filters.search) {
+        where.OR = [
+          { name: { contains: filters.search } },
+          { merchant: { contains: filters.search } },
+          { description: { contains: filters.search } },
+          { note: { contains: filters.search } },
+          { text: { contains: filters.search } },
+        ]
+      }
+
+      if (filters.dateFrom || filters.dateTo) {
+        where.issuedAt = {
+          gte: filters.dateFrom ? new Date(filters.dateFrom) : undefined,
+          lte: filters.dateTo ? new Date(filters.dateTo) : undefined,
+        }
+      }
+
+      if (filters.categoryCode) {
+        where.categoryCode = filters.categoryCode
+      }
+
+      if (filters.projectCode) {
+        where.projectCode = filters.projectCode
+      }
+
+      if (filters.ordering) {
+        const isDesc = filters.ordering.startsWith("-")
+        const field = isDesc ? filters.ordering.slice(1) : filters.ordering
+        orderBy = { [field]: isDesc ? "desc" : "asc" }
      }
    }

-    if (filters.categoryCode) {
-      where.categoryCode = filters.categoryCode
-    }
-
-    if (filters.projectCode) {
-      where.projectCode = filters.projectCode
-    }
-
-    if (filters.ordering) {
-      const isDesc = filters.ordering.startsWith("-")
-      const field = isDesc ? filters.ordering.slice(1) : filters.ordering
-      orderBy = { [field]: isDesc ? "desc" : "asc" }
+    if (pagination) {
+      const total = await prisma.transaction.count({ where })
+      const transactions = await prisma.transaction.findMany({
+        where,
+        include: {
+          category: true,
+          project: true,
+        },
+        orderBy,
+        take: pagination?.limit,
+        skip: pagination?.offset,
+      })
+      return { transactions, total }
+    } else {
+      const transactions = await prisma.transaction.findMany({
+        where,
+        include: {
+          category: true,
+          project: true,
+        },
+        orderBy,
+      })
+      return { transactions, total: transactions.length }
    }
  }
-
-  return await prisma.transaction.findMany({
-    where,
-    include: {
-      category: true,
-      project: true,
-    },
-    orderBy,
-  })
-})
+)

 export const getTransactionById = cache(async (id: string): Promise<Transaction | null> => {
  return await prisma.transaction.findUnique({
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "taxhacker",
-  "version": "0.1.0",
+  "version": "0.2.1",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "taxhacker",
-      "version": "0.1.0",
+      "version": "0.2.1",
      "dependencies": {
        "@fast-csv/format": "^5.0.2",
        "@fast-csv/parse": "^5.0.2",
--- a/prisma/seed.js
+++ b/prisma/seed.js
@@ -317,7 +317,7 @@ const fields = [
    type: "string",
    llm_prompt: "description of the transaction",
    isVisibleInList: false,
-    isVisibleInAnalysis: true,
+    isVisibleInAnalysis: false,
    isRequired: false,
    isExtra: false,
  },
@@ -431,11 +431,21 @@ const fields = [
    isRequired: false,
    isExtra: false,
  },
+  {
+    code: "vat_rate",
+    name: "VAT Rate",
+    type: "number",
+    llm_prompt: "VAT rate in percentage 0-100",
+    isVisibleInList: false,
+    isVisibleInAnalysis: false,
+    isRequired: false,
+    isExtra: true,
+  },
  {
    code: "vat",
    name: "VAT Amount",
    type: "number",
-    llm_prompt: "total VAT total in currency of the invoice",
+    llm_prompt: "total VAT in currency of the invoice",
    isVisibleInList: false,
    isVisibleInAnalysis: false,
    isRequired: false,
@@ -446,6 +456,8 @@ const fields = [
    name: "Extracted Text",
    type: "string",
    llm_prompt: "extract all recognised text from the invoice",
+    isVisibleInList: false,
+    isVisibleInAnalysis: false,
    isRequired: false,
    isExtra: false,
  },