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

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 fetchData = async () => {
-      try {
-        setIsLoading(true)
-        setError(null)
+  const fetchAndUpdateRates = async () => {
+    try {
+      setIsLoading(true)
+      setError(null)
 
-        const exchangeRate = await getCurrencyRate(originalCurrencyCode, targetCurrencyCode, normalizedDate)
-
-        setExchangeRate(exchangeRate)
-        setConvertedTotal(Math.round(originalTotal * exchangeRate * 100) / 100)
-      } catch (error) {
-        console.error("Error fetching currency rates:", error)
-        setExchangeRate(0)
-        setConvertedTotal(0)
-        setError(error instanceof Error ? error.message : "Failed to fetch currency rate")
-      } finally {
-        setIsLoading(false)
-      }
+      const rate = await getCurrencyRate(originalCurrencyCode, targetCurrencyCode, normalizedDate)
+      setExchangeRate(rate)
+      setConvertedTotal(Math.round(originalTotal * rate * 100) / 100)
+    } catch (error) {
+      console.error("Error fetching currency rates:", error)
+      setExchangeRate(0)
+      setConvertedTotal(0)
+      setError(error instanceof Error ? error.message : "Failed to fetch currency rate")
+    } finally {
+      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
-          key={field.code}
-          type="text"
-          title={field.name}
-          name={field.code}
-          defaultValue={formData[field.code as keyof typeof formData] || ""}
-          isRequired={field.isRequired}
-        />
-      ))}
+
+      <div className="flex flex-wrap gap-4">
+        {extraFields.map((field) => (
+          <FormInput
+            key={field.code}
+            type="text"
+            title={field.name}
+            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">