feat: split into multiple items

2026-01-13 13:25:18 +00:00 · 2025-05-23 14:33:40 +02:00
parent 289b436236
commit 25c61f0519
17 changed files with 332 additions and 57 deletions
--- a/components/agents/currency-converter.tsx
+++ b/components/agents/currency-converter.tsx
@@ -0,0 +1,117 @@
+import { FormError } from "@/components/forms/error"
+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 CurrencyConverterTool = ({
+  originalTotal,
+  originalCurrencyCode,
+  targetCurrencyCode,
+  date,
+  onChange,
+}: {
+  originalTotal: number
+  originalCurrencyCode: string
+  targetCurrencyCode: string
+  date?: Date | undefined
+  onChange?: (value: number) => void
+}) => {
+  const normalizedDate = startOfDay(date || new Date(Date.now() - 24 * 60 * 60 * 1000))
+  const normalizedDateString = format(normalizedDate, "yyyy-MM-dd")
+  const [exchangeRate, setExchangeRate] = useState(0)
+  const [convertedTotal, setConvertedTotal] = useState(0)
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const fetchAndUpdateRates = async () => {
+    try {
+      setIsLoading(true)
+      setError(null)
+
+      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)
+    }
+  }
+
+  const handleRestart = () => {
+    setError(null)
+    fetchAndUpdateRates()
+  }
+
+  useEffect(() => {
+    fetchAndUpdateRates()
+  }, [originalCurrencyCode, targetCurrencyCode, normalizedDateString, originalTotal])
+
+  useEffect(() => {
+    onChange?.(convertedTotal)
+  }, [convertedTotal])
+
+  if (!originalTotal || !originalCurrencyCode || !targetCurrencyCode || originalCurrencyCode === targetCurrencyCode) {
+    return <></>
+  }
+
+  return (
+    <div className="flex flex-row gap-2 items-center">
+      {isLoading ? (
+        <div className="flex flex-row items-center gap-2 text-sm text-muted-foreground">
+          <Loader2 className="w-4 h-4 animate-spin" />
+          <div className="font-semibold">Loading exchange rates...</div>
+        </div>
+      ) : (
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center gap-2">
+            <div>{formatCurrency(originalTotal * 100, originalCurrencyCode)}</div>
+            <div>=</div>
+            <div>{formatCurrency(originalTotal * 100 * exchangeRate, targetCurrencyCode).slice(0, 1)}</div>
+            <input
+              type="number"
+              step="0.01"
+              name="convertedTotal"
+              value={convertedTotal}
+              onChange={(e) => {
+                const newValue = parseFloat(e.target.value || "0")
+                !isNaN(newValue) && setConvertedTotal(Math.round(newValue * 100) / 100)
+              }}
+              className="w-32 rounded-md border border-input px-2 py-1"
+            />
+          </div>
+          {!error && (
+            <div className="text-xs text-muted-foreground">The exchange rate will be added to the transaction</div>
+          )}
+          {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>
+  )
+}