-
+
-
+
-
+
-
+
- {/* Compare toggle + Date presets */}
+
|
- {[
- { label: "Today", start: new Date(), end: new Date() },
- { label: "Last 7 days", start: subDays(new Date(), 7), end: new Date() },
- { label: "Last 30 days", start: subDays(new Date(), 30), end: new Date() },
- { label: "This month", start: startOfMonth(new Date()), end: new Date() },
- ].map((preset) => (
+ {DATE_PRESETS.map((preset) => (
))}
- {/* Buttons row */}
- {/* Status area - announced to screen readers */}
{error && }
{isLoading && }
@@ -472,6 +308,9 @@ export default function ExchangeRateViewer() {
{results.length} {results.length === 1 ? "record" : "records"} found
+ {showChart && (
+
+ )}
{compareMode
?
:
diff --git a/src/app/components/exchange-rate-chart.js b/src/app/components/exchange-rate-chart.js
new file mode 100644
index 0000000..52f3ebd
--- /dev/null
+++ b/src/app/components/exchange-rate-chart.js
@@ -0,0 +1,104 @@
+"use client";
+
+import React from "react";
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts";
+
+// Parse rate string to number (handles comma-separated values like "25,880")
+function parseRate(val) {
+ if (!val) return null;
+ const num = parseFloat(String(val).replace(/,/g, ""));
+ return isNaN(num) ? null : num;
+}
+
+export function RateTrendChart({ results, selectedBank, compareMode }) {
+ // Build chart data from results
+ const chartData = [];
+
+ if (compareMode) {
+ // Group by date, show BIDV sell vs TCB ask
+ const byDate = new Map();
+ for (const row of results) {
+ if (!byDate.has(row.date)) byDate.set(row.date, {});
+ const entry = byDate.get(row.date);
+ entry.date = row.date;
+ if (row.bidvSell) entry["BIDV Sell"] = parseRate(row.bidvSell);
+ if (row.tcbAsk) entry["TCB Ask"] = parseRate(row.tcbAsk);
+ }
+ chartData.push(...byDate.values());
+ } else if (selectedBank === "bidv") {
+ const byDate = new Map();
+ for (const row of results) {
+ if (!byDate.has(row.date)) byDate.set(row.date, { date: row.date });
+ const entry = byDate.get(row.date);
+ const label = row.currency || "USD";
+ entry[`${label} Buy`] = parseRate(row.muaTm);
+ entry[`${label} Sell`] = parseRate(row.ban);
+ }
+ chartData.push(...byDate.values());
+ } else {
+ const byDate = new Map();
+ for (const row of results) {
+ if (!byDate.has(row.date)) byDate.set(row.date, { date: row.date });
+ const entry = byDate.get(row.date);
+ const label = row.sourceCurrency || "USD";
+ entry[`${label} Bid`] = parseRate(row.bidRateTM);
+ entry[`${label} Ask`] = parseRate(row.askRate);
+ }
+ chartData.push(...byDate.values());
+ }
+
+ if (chartData.length === 0) return null;
+
+ // Collect all numeric keys for lines
+ const lineKeys = new Set();
+ for (const row of chartData) {
+ for (const key of Object.keys(row)) {
+ if (key !== "date" && typeof row[key] === "number") lineKeys.add(key);
+ }
+ }
+
+ const colors = ["#3b82f6", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6", "#ec4899", "#06b6d4", "#84cc16"];
+
+ return (
+
+
+
+
+
+
+
+ {lineKeys.size <= 8 && }
+ {Array.from(lineKeys).map((key, i) => (
+
+ ))}
+
+
+
+ );
+}
diff --git a/src/app/components/exchange-rate-status.js b/src/app/components/exchange-rate-status.js
new file mode 100644
index 0000000..86d402d
--- /dev/null
+++ b/src/app/components/exchange-rate-status.js
@@ -0,0 +1,41 @@
+"use client";
+
+import React from "react";
+
+export function LoadingSpinner({ progress }) {
+ return (
+
+
+
+
+ {progress ? `Fetching ${progress.current}/${progress.total} days...` : "Fetching exchange rates..."}
+
+
+
+ );
+}
+
+export function ErrorMessage({ message }) {
+ return (
+
+ ⚠
+ {message}
+
+ );
+}
+
+export function EmptyState() {
+ return (
+
+
No results yet
+
Select a bank and date range, then click Fetch Rates.
+
+ );
+}
diff --git a/src/app/components/exchange-rate-table.js b/src/app/components/exchange-rate-table.js
new file mode 100644
index 0000000..54ac777
--- /dev/null
+++ b/src/app/components/exchange-rate-table.js
@@ -0,0 +1,97 @@
+"use client";
+
+import React from "react";
+
+export function ComparisonTable({ results }) {
+ const headers = ["Date", "Currency", "BIDV Buy TM", "BIDV Sell", "TCB Bid TM", "TCB Ask"];
+
+ return (
+
+
+
+
+ {headers.map((h) => (
+ |
+ {h}
+ |
+ ))}
+
+
+
+ {results.map((row, idx) => (
+
+ {[row.date, row.currency, row.bidvBuyTm, row.bidvSell, row.tcbBidTm, row.tcbAsk].map((cell, i) => (
+ |
+ {cell || "-"}
+ |
+ ))}
+
+ ))}
+
+
+
+ );
+}
+
+export function RateTable({ results, selectedBank }) {
+ const bidvHeaders = ["Date", "Name (VI)", "Buy TM", "Buy CK", "Currency", "Name (EN)", "Sell"];
+ const tcbHeaders = ["Date", "Label", "Ask Rate", "Bid CK", "Bid TM", "Source", "Target", "Ask TM"];
+
+ const headers = selectedBank === "bidv" ? bidvHeaders : tcbHeaders;
+
+ const getRowCells = (row) => {
+ if (selectedBank === "bidv") {
+ return [row.date, row.nameVI, row.muaTm, row.muaCk, row.currency, row.nameEN, row.ban];
+ }
+ return [row.date, row.label, row.askRate, row.bidRateCK, row.bidRateTM, row.sourceCurrency, row.targetCurrency, row.askRateTM];
+ };
+
+ return (
+
+
+
+
+ {headers.map((h) => (
+ |
+ {h}
+ |
+ ))}
+
+
+
+ {results.map((row, idx) => (
+
+ {getRowCells(row).map((cell, i) => (
+ |
+ {cell}
+ |
+ ))}
+
+ ))}
+
+
+
+ );
+}