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

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"
               )}