fix: filters for tx list

components/forms/date-range-picker.tsx

@@ -2,7 +2,7 @@
 
 import { format, startOfMonth, startOfQuarter, subMonths, subWeeks } from "date-fns"
 import { CalendarIcon } from "lucide-react"
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import { DateRange } from "react-day-picker"
 
 import { Button } from "@/components/ui/button"
@@ -66,6 +66,13 @@ export function DateRangePicker({
   const [rangeName, setRangeName] = useState<string>(defaultDate?.from ? "custom" : defaultRange)
   const [dateRange, setDateRange] = useState<DateRange | undefined>(defaultDate)
 
+  useEffect(() => {
+    if (!defaultDate?.from) {
+      setRangeName(defaultRange)
+      setDateRange(undefined)
+    }
+  }, [defaultDate, defaultRange])
+
   const getDisplayText = () => {
     if (rangeName === "custom") {
       if (dateRange?.from) {

components/transactions/list.tsx

@@ -124,6 +124,30 @@ export const standardFieldRenderers: Record<string, FieldRenderer> = {
       )
     },
   },
+  convertedTotal: {
+    name: "Converted Total",
+    code: "convertedTotal",
+    classes: "text-right",
+    sortable: true,
+    formatValue: (transaction: Transaction) => (
+      <div
+        className={cn(
+          { income: "text-green-500", expense: "text-red-500", other: "text-black" }[transaction.type || "other"],
+          "flex flex-col justify-end text-right text-lg"
+        )}
+      >
+        {transaction.convertedTotal && transaction.convertedCurrencyCode
+          ? formatCurrency(transaction.convertedTotal, transaction.convertedCurrencyCode)
+          : transaction.convertedTotal}
+      </div>
+    ),
+  },
+  currencyCode: {
+    name: "Currency",
+    code: "currencyCode",
+    classes: "text-right",
+    sortable: true,
+  },
 }
 
 const getFieldRenderer = (field: Field): FieldRenderer => {