fix: restore from backup, restart button for tools, loader for fields

app/(app)/settings/backups/page.tsx

@@ -44,7 +44,7 @@ export default function BackupSettingsPage() {
               progress?.current ? (
                 `Archiving ${progress.current}/${progress.total} files`
               ) : (
-                "Preparing backup..."
+                "Preparing backup. Don't close the page..."
               )
             ) : isDownloading ? (
               "Archive is created. Downloading..."

app/(app)/settings/danger/actions.ts

@@ -24,10 +24,13 @@ export async function resetFieldsAndCategories(user: User) {
   for (const category of DEFAULT_CATEGORIES) {
     await prisma.category.upsert({
       where: { userId_code: { code: category.code, userId: user.id } },
-      update: { name: category.name, color: category.color, llm_prompt: category.llm_prompt },
+      update: { name: category.name, color: category.color, llm_prompt: category.llm_prompt, createdAt: new Date() },
-      create: { ...category, userId: user.id },
+      create: { ...category, userId: user.id, createdAt: new Date() },
     })
   }
+  await prisma.category.deleteMany({
+    where: { userId: user.id, code: { notIn: DEFAULT_CATEGORIES.map((category) => category.code) } },
+  })
 
   // Reset currencies
   for (const currency of DEFAULT_CURRENCIES) {
@@ -37,6 +40,9 @@ export async function resetFieldsAndCategories(user: User) {
       create: { ...currency, userId: user.id },
     })
   }
+  await prisma.currency.deleteMany({
+    where: { userId: user.id, code: { notIn: DEFAULT_CURRENCIES.map((currency) => currency.code) } },
+  })
 
   // Reset fields
   for (const field of DEFAULT_FIELDS) {
@@ -46,14 +52,18 @@ export async function resetFieldsAndCategories(user: User) {
         name: field.name,
         type: field.type,
         llm_prompt: field.llm_prompt,
+        createdAt: new Date(),
         isVisibleInList: field.isVisibleInList,
         isVisibleInAnalysis: field.isVisibleInAnalysis,
         isRequired: field.isRequired,
         isExtra: field.isExtra,
       },
-      create: { ...field, userId: user.id },
+      create: { ...field, userId: user.id, createdAt: new Date() },
     })
   }
+  await prisma.field.deleteMany({
+    where: { userId: user.id, code: { notIn: DEFAULT_FIELDS.map((field) => field.code) } },
+  })
 
   redirect("/settings/fields")
 }

app/(app)/transactions/[transactionId]/page.tsx

@@ -3,6 +3,7 @@ import TransactionEditForm from "@/components/transactions/edit"
 import TransactionFiles from "@/components/transactions/transaction-files"
 import { Card } from "@/components/ui/card"
 import { getCurrentUser } from "@/lib/auth"
+import { incompleteTransactionFields } from "@/lib/stats"
 import { getCategories } from "@/models/categories"
 import { getCurrencies } from "@/models/currencies"
 import { getFields } from "@/models/fields"
@@ -11,6 +12,7 @@ import { getProjects } from "@/models/projects"
 import { getSettings } from "@/models/settings"
 import { getTransactionById } from "@/models/transactions"
 import { notFound } from "next/navigation"
+import Link from "next/link"
 
 export default async function TransactionPage({ params }: { params: Promise<{ transactionId: string }> }) {
   const { transactionId } = await params
@@ -26,11 +28,26 @@ export default async function TransactionPage({ params }: { params: Promise<{ tr
   const settings = await getSettings(user.id)
   const fields = await getFields(user.id)
   const projects = await getProjects(user.id)
+  const incompleteFields = incompleteTransactionFields(fields, transaction)
 
   return (
     <div className="flex flex-wrap flex-row items-start justify-center gap-4 max-w-6xl">
-      <Card className="w-full flex-1 flex flex-col flex-wrap justify-center items-start gap-10 p-5 bg-accent">
+      <Card className="w-full flex-1 flex flex-col flex-wrap justify-center items-start overflow-hidden">
-        <div className="w-full">
+        {incompleteFields.length > 0 && (
+          <div className="w-full flex flex-col gap-1 rounded-md bg-yellow-50 p-5">
+            <span>
+              Some fields are incomplete: <strong>{incompleteFields.map((field) => field.name).join(", ")}</strong>
+            </span>
+            <span className="text-xs text-muted-foreground">
+              You can decide which fields are required for you in{" "}
+              <Link href="/settings/fields" className="underline">
+                Fields settings
+              </Link>
+              .
+            </span>
+          </div>
+        )}
+        <div className="w-full p-5 bg-accent">
           <TransactionEditForm
             transaction={transaction}
             categories={categories}

app/(app)/transactions/loading.tsx

@@ -1,6 +1,6 @@
 import { Button } from "@/components/ui/button"
 import { Skeleton } from "@/components/ui/skeleton"
-import { Download, Plus } from "lucide-react"
+import { Download, Loader2, Plus } from "lucide-react"
 
 export default function Loading() {
   return (
@@ -8,7 +8,7 @@ export default function Loading() {
       <header className="flex items-center justify-between mb-12">
         <h2 className="flex flex-row gap-3 md:gap-5">
           <span className="text-3xl font-bold tracking-tight">Transactions</span>
-          <Skeleton className="h-10 w-16" />
+          <Loader2 className="h-10 w-10 animate-spin" />
         </h2>
         <div className="flex gap-2">
           <Button variant="outline">

app/(app)/transactions/page.tsx

@@ -19,7 +19,7 @@ export const metadata: Metadata = {
   description: "Manage your transactions",
 }
 
-const TRANSACTIONS_PER_PAGE = 1000
+const TRANSACTIONS_PER_PAGE = 500
 
 export default async function TransactionsPage({ searchParams }: { searchParams: Promise<TransactionFilters> }) {
   const { page, ...filters } = await searchParams

app/(app)/unsorted/layout.tsx

@@ -1,3 +0,0 @@
-export default function UnsortedLayout({ children }: { children: React.ReactNode }) {
-  return <div className="flex flex-col gap-4 p-4 max-w-6xl">{children}</div>
-}

app/(app)/unsorted/loading.tsx

@@ -3,10 +3,11 @@ import { Loader2 } from "lucide-react"
 
 export default function Loading() {
   return (
-    <div className="flex flex-col gap-4">
+    <div className="flex flex-col gap-4 p-4 w-full max-w-6xl">
       <header className="flex items-center justify-between">
         <h2 className="text-3xl font-bold tracking-tight flex flex-row gap-2">
-          <Loader2 className="h-10 w-10 animate-spin" /> <span>Loading unsorted files...</span>
+          <span>Loading unsorted files...</span>
+          <Loader2 className="h-10 w-10 animate-spin" />
         </h2>
       </header>
 

app/(app)/unsorted/page.tsx

@@ -31,7 +31,7 @@ export default async function UnsortedPage() {
   const settings = await getSettings(user.id)
 
   return (
-    <>
+    <div className="flex flex-col gap-4 p-4 w-full max-w-6xl">
       <header className="flex items-center justify-between">
         <h2 className="text-3xl font-bold tracking-tight">You have {files.length} unsorted files</h2>
       </header>
@@ -101,6 +101,6 @@ export default async function UnsortedPage() {
           </div>
         )}
       </main>
-    </>
+    </div>
   )
 }

app/globals.css

@@ -82,10 +82,13 @@
   body {
     @apply bg-background text-foreground;
   }
-  input[type="number"]::-webkit-inner-spin-button,
+  input::-webkit-outer-spin-button,
-  input[type="number"]::-webkit-outer-spin-button {
+  input::-webkit-inner-spin-button {
     -webkit-appearance: none;
     appearance: none;
     margin: 0;
   }
+  input[type="number"] {
+    -moz-appearance: textfield;
+  }
 }

components/agents/tool-window.tsx

@@ -1,6 +1,6 @@
 import { Bot } from "lucide-react"
 
-export default function AgentWindow({ title, children }: { title: string; children: React.ReactNode }) {
+export default function ToolWindow({ title, children }: { title: string; children: React.ReactNode }) {
   return (
     <div className="border-2 border-purple-500 bg-purple-100 rounded-md overflow-hidden">
       <div className="flex flex-row gap-1 items-center font-bold text-xs bg-purple-200 text-purple-800 p-1">

components/forms/convert-currency.tsx

@@ -3,6 +3,22 @@ import { formatCurrency } from "@/lib/utils"
 import { format, startOfDay } from "date-fns"
 import { Loader2 } from "lucide-react"
 import { useEffect, useState } from "react"
+import { Button } from "../ui/button"
+
+async function getCurrencyRate(currencyCodeFrom: string, currencyCodeTo: string, date: Date): Promise<number> {
+  const formattedDate = format(date, "yyyy-MM-dd")
+  const response = await fetch(`/api/currency?from=${currencyCodeFrom}&to=${currencyCodeTo}&date=${formattedDate}`)
+
+  if (!response.ok) {
+    const errorData = await response.json()
+    console.log("Currency API error:", errorData.error)
+    throw new Error(errorData.error || "Failed to fetch currency rate")
+  }
+
+  const data = await response.json()
+  return data.rate
+}
+
 export const FormConvertCurrency = ({
   originalTotal,
   originalCurrencyCode,
@@ -23,27 +39,31 @@ export const FormConvertCurrency = ({
   const [isLoading, setIsLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
 
-  useEffect(() => {
+  const fetchAndUpdateRates = async () => {
-    const fetchData = async () => {
+    try {
-      try {
+      setIsLoading(true)
-        setIsLoading(true)
+      setError(null)
-        setError(null)
 
-        const exchangeRate = await getCurrencyRate(originalCurrencyCode, targetCurrencyCode, normalizedDate)
+      const rate = await getCurrencyRate(originalCurrencyCode, targetCurrencyCode, normalizedDate)
-
+      setExchangeRate(rate)
-        setExchangeRate(exchangeRate)
+      setConvertedTotal(Math.round(originalTotal * rate * 100) / 100)
-        setConvertedTotal(Math.round(originalTotal * exchangeRate * 100) / 100)
+    } catch (error) {
-      } catch (error) {
+      console.error("Error fetching currency rates:", error)
-        console.error("Error fetching currency rates:", error)
+      setExchangeRate(0)
-        setExchangeRate(0)
+      setConvertedTotal(0)
-        setConvertedTotal(0)
+      setError(error instanceof Error ? error.message : "Failed to fetch currency rate")
-        setError(error instanceof Error ? error.message : "Failed to fetch currency rate")
+    } finally {
-      } finally {
+      setIsLoading(false)
-        setIsLoading(false)
-      }
     }
+  }
 
-    fetchData()
+  const handleRestart = () => {
+    setError(null)
+    fetchAndUpdateRates()
+  }
+
+  useEffect(() => {
+    fetchAndUpdateRates()
   }, [originalCurrencyCode, targetCurrencyCode, normalizedDateString, originalTotal])
 
   useEffect(() => {
@@ -82,23 +102,16 @@ export const FormConvertCurrency = ({
           {!error && (
             <div className="text-xs text-muted-foreground">The exchange rate will be added to the transaction</div>
           )}
-          {error && <FormError className="mt-0 text-sm">{error}</FormError>}
+          {error && (
+            <div className="flex flex-row gap-2">
+              <FormError className="mt-0 text-sm">{error}</FormError>
+              <Button variant="outline" size="sm" className="text-xs" onClick={handleRestart}>
+                Retry
+              </Button>
+            </div>
+          )}
         </div>
       )}
     </div>
   )
 }
-
-async function getCurrencyRate(currencyCodeFrom: string, currencyCodeTo: string, date: Date): Promise<number> {
-  const formattedDate = format(date, "yyyy-MM-dd")
-  const response = await fetch(`/api/currency?from=${currencyCodeFrom}&to=${currencyCodeTo}&date=${formattedDate}`)
-
-  if (!response.ok) {
-    const errorData = await response.json()
-    console.log("Currency API error:", errorData.error)
-    throw new Error(errorData.error || "Failed to fetch currency rate")
-  }
-
-  const data = await response.json()
-  return data.rate
-}

components/forms/simple.tsx

@@ -29,7 +29,11 @@ export function FormInput({ title, hideIfEmpty = false, isRequired = false, ...p
   return (
     <label className="flex flex-col gap-1">
       {title && <span className="text-sm font-medium">{title}</span>}
-      <Input {...props} className={cn("bg-background", isRequired && isEmpty && "bg-yellow-50", props.className)} />
+      <Input
+        {...props}
+        className={cn("bg-background", isRequired && isEmpty && "bg-yellow-50", props.className)}
+        data-1p-ignore
+      />
     </label>
   )
 }
@@ -70,6 +74,7 @@ export function FormTextarea({ title, hideIfEmpty = false, isRequired = false, .
         ref={textareaRef}
         {...props}
         className={cn("bg-background", isRequired && isEmpty && "bg-yellow-50", props.className)}
+        data-1p-ignore
       />
     </label>
   )

components/transactions/edit.tsx

@@ -136,30 +136,6 @@ export default function TransactionEditForm({
         />
       </div>
 
-      {formData.currencyCode !== settings.default_currency || formData.convertedTotal !== 0 ? (
-        <div className="flex flex-row gap-4">
-          <FormInput
-            title={`Total converted to ${formData.convertedCurrencyCode || "UNKNOWN CURRENCY"}`}
-            type="number"
-            step="0.01"
-            name="convertedTotal"
-            defaultValue={formData.convertedTotal.toFixed(2)}
-            isRequired={fieldMap.convertedTotal.isRequired}
-          />
-          {(!formData.convertedCurrencyCode || formData.convertedCurrencyCode !== settings.default_currency) && (
-            <FormSelectCurrency
-              title="Convert to"
-              name="convertedCurrencyCode"
-              defaultValue={formData.convertedCurrencyCode || settings.default_currency}
-              currencies={currencies}
-              isRequired={fieldMap.convertedCurrencyCode.isRequired}
-            />
-          )}
-        </div>
-      ) : (
-        <></>
-      )}
-
       <div className="flex flex-row flex-grow gap-4">
         <FormInput
           title={fieldMap.issuedAt.name}
@@ -168,6 +144,30 @@ export default function TransactionEditForm({
           defaultValue={formData.issuedAt}
           isRequired={fieldMap.issuedAt.isRequired}
         />
+        {formData.currencyCode !== settings.default_currency || formData.convertedTotal !== 0 ? (
+          <>
+            <FormInput
+              title={`Total converted to ${formData.convertedCurrencyCode || "UNKNOWN CURRENCY"}`}
+              type="number"
+              step="0.01"
+              name="convertedTotal"
+              defaultValue={formData.convertedTotal.toFixed(2)}
+              isRequired={fieldMap.convertedTotal.isRequired}
+              className="max-w-36"
+            />
+            {(!formData.convertedCurrencyCode || formData.convertedCurrencyCode !== settings.default_currency) && (
+              <FormSelectCurrency
+                title="Convert to"
+                name="convertedCurrencyCode"
+                defaultValue={formData.convertedCurrencyCode || settings.default_currency}
+                currencies={currencies}
+                isRequired={fieldMap.convertedCurrencyCode.isRequired}
+              />
+            )}
+          </>
+        ) : (
+          <></>
+        )}
       </div>
 
       <div className="flex flex-row gap-4">
@@ -195,16 +195,20 @@ export default function TransactionEditForm({
         className="h-24"
         isRequired={fieldMap.note.isRequired}
       />
-      {extraFields.map((field) => (
+
-        <FormInput
+      <div className="flex flex-wrap gap-4">
-          key={field.code}
+        {extraFields.map((field) => (
-          type="text"
+          <FormInput
-          title={field.name}
+            key={field.code}
-          name={field.code}
+            type="text"
-          defaultValue={formData[field.code as keyof typeof formData] || ""}
+            title={field.name}
-          isRequired={field.isRequired}
+            name={field.code}
-        />
+            defaultValue={formData[field.code as keyof typeof formData] || ""}
-      ))}
+            isRequired={field.isRequired}
+            className={field.type === "number" ? "max-w-36" : "max-w-full"}
+          />
+        ))}
+      </div>
 
       <div className="flex justify-between space-x-4 pt-6">
         <Button type="button" onClick={handleDelete} variant="destructive" disabled={isDeleting}>

components/transactions/fields-selector.tsx

@@ -11,16 +11,16 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import { Field } from "@/prisma/client"
-import { ColumnsIcon } from "lucide-react"
+import { ColumnsIcon, Loader2 } from "lucide-react"
 import { useRouter } from "next/navigation"
 import { useState } from "react"
 
 export function ColumnSelector({ fields, onChange }: { fields: Field[]; onChange?: () => void }) {
   const router = useRouter()
-  const [isLoading, setIsLoading] = useState<{ [key: string]: boolean }>({})
+  const [isLoading, setIsLoading] = useState(false)
 
   const handleToggle = async (fieldCode: string, isCurrentlyVisible: boolean) => {
-    setIsLoading((prev) => ({ ...prev, [fieldCode]: true }))
+    setIsLoading(true)
 
     try {
       await updateFieldVisibilityAction(fieldCode, !isCurrentlyVisible)
@@ -34,7 +34,7 @@ export function ColumnSelector({ fields, onChange }: { fields: Field[]; onChange
     } catch (error) {
       console.error("Failed to toggle column visibility:", error)
     } finally {
-      setIsLoading((prev) => ({ ...prev, [fieldCode]: false }))
+      setIsLoading(false)
     }
   }
 
@@ -42,7 +42,7 @@ export function ColumnSelector({ fields, onChange }: { fields: Field[]; onChange
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant="outline" size="icon" title="Select table columns">
-          <ColumnsIcon className="h-4 w-4" />
+          {isLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : <ColumnsIcon className="h-4 w-4" />}
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="w-56">
@@ -53,10 +53,9 @@ export function ColumnSelector({ fields, onChange }: { fields: Field[]; onChange
             key={field.code}
             checked={field.isVisibleInList}
             onCheckedChange={() => handleToggle(field.code, field.isVisibleInList)}
-            disabled={isLoading[field.code]}
+            disabled={isLoading}
           >
             {field.name}
-            {isLoading[field.code] && <span className="ml-2 text-xs opacity-50">Saving...</span>}
           </DropdownMenuCheckboxItem>
         ))}
       </DropdownMenuContent>

components/transactions/list.tsx

@@ -4,7 +4,7 @@ import { BulkActionsMenu } from "@/components/transactions/bulk-actions"
 import { Badge } from "@/components/ui/badge"
 import { Checkbox } from "@/components/ui/checkbox"
 import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "@/components/ui/table"
-import { calcTotalPerCurrency } from "@/lib/stats"
+import { calcTotalPerCurrency, isTransactionIncomplete } from "@/lib/stats"
 import { cn, formatCurrency } from "@/lib/utils"
 import { Category, Field, Project, Transaction } from "@/prisma/client"
 import { formatDate } from "date-fns"
@@ -230,19 +230,6 @@ export function TransactionList({ transactions, fields = [] }: { transactions: T
     ) : null
   }
 
-  // Function to check if a transaction is incomplete
-  const isTransactionIncomplete = (transaction: Transaction): boolean => {
-    const requiredFields = fields.filter((field) => field.isRequired)
-
-    return requiredFields.some((field) => {
-      const value = field.isExtra
-        ? (transaction.extra as Record<string, any>)?.[field.code]
-        : transaction[field.code as keyof Transaction]
-
-      return value === undefined || value === null || value === "" || value === 0
-    })
-  }
-
   return (
     <div className="rounded-md border">
       <Table>
@@ -271,7 +258,7 @@ export function TransactionList({ transactions, fields = [] }: { transactions: T
             <TableRow
               key={transaction.id}
               className={cn(
-                isTransactionIncomplete(transaction) && "bg-yellow-50",
+                isTransactionIncomplete(fields, transaction) && "bg-yellow-50",
                 selectedIds.includes(transaction.id) && "bg-muted",
                 "cursor-pointer hover:bg-muted/50"
               )}

components/unsorted/analyze-form.tsx

@@ -14,7 +14,7 @@ import { Category, Currency, Field, File, Project } from "@/prisma/client"
 import { format } from "date-fns"
 import { Brain, Loader2 } from "lucide-react"
 import { startTransition, useActionState, useMemo, useState } from "react"
-import AgentWindow from "../agents/agent-window"
+import ToolWindow from "../agents/tool-window"
 
 export default function AnalyzeForm({
   file,
@@ -199,7 +199,7 @@ export default function AnalyzeForm({
         </div>
 
         {formData.total != 0 && formData.currencyCode && formData.currencyCode !== settings.default_currency && (
-          <AgentWindow title={`Exchange rate on ${format(new Date(formData.issuedAt || Date.now()), "LLLL dd, yyyy")}`}>
+          <ToolWindow title={`Exchange rate on ${format(new Date(formData.issuedAt || Date.now()), "LLLL dd, yyyy")}`}>
             <FormConvertCurrency
               originalTotal={formData.total}
               originalCurrencyCode={formData.currencyCode}
@@ -208,7 +208,7 @@ export default function AnalyzeForm({
               onChange={(value) => setFormData((prev) => ({ ...prev, convertedTotal: value }))}
             />
             <input type="hidden" name="convertedCurrencyCode" value={settings.default_currency} />
-          </AgentWindow>
+          </ToolWindow>
         )}
 
         <div className="flex flex-row gap-4">

lib/stats.ts

@@ -1,4 +1,4 @@
-import { Transaction } from "@/prisma/client"
+import { Field, Transaction } from "@/prisma/client"
 
 export function calcTotalPerCurrency(transactions: Transaction[]): Record<string, number> {
   return transactions.reduce(
@@ -15,3 +15,21 @@ export function calcTotalPerCurrency(transactions: Transaction[]): Record<string
     {} as Record<string, number>
   )
 }
+
+export const isTransactionIncomplete = (fields: Field[], transaction: Transaction): boolean => {
+  const incompleteFields = incompleteTransactionFields(fields, transaction)
+
+  return incompleteFields.length > 0
+}
+
+export const incompleteTransactionFields = (fields: Field[], transaction: Transaction): Field[] => {
+  const requiredFields = fields.filter((field) => field.isRequired)
+
+  return requiredFields.filter((field) => {
+    const value = field.isExtra
+      ? (transaction.extra as Record<string, any>)?.[field.code]
+      : transaction[field.code as keyof Transaction]
+
+    return value === undefined || value === null || value === ""
+  })
+}

models/transactions.ts

@@ -38,11 +38,11 @@ export const getTransactions = cache(
     if (filters) {
       if (filters.search) {
         where.OR = [
-          { name: { contains: filters.search } },
+          { name: { contains: filters.search, mode: 'insensitive' } },
-          { merchant: { contains: filters.search } },
+          { merchant: { contains: filters.search, mode: 'insensitive' } },
-          { description: { contains: filters.search } },
+          { description: { contains: filters.search, mode: 'insensitive' } },
-          { note: { contains: filters.search } },
+          { note: { contains: filters.search, mode: 'insensitive' } },
-          { text: { contains: filters.search } },
+          { text: { contains: filters.search, mode: 'insensitive' } },
         ]
       }