);
@@ -33,12 +33,9 @@ export function ErrorMessage({ message }) {
export function EmptyState() {
return (
-
-
-
No exchange rate data
-
Select a bank and date range, then click Fetch Rates to get started.
+
+
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
index 88a1dc5..54ac777 100644
--- a/src/app/components/exchange-rate-table.js
+++ b/src/app/components/exchange-rate-table.js
@@ -3,202 +3,95 @@
import React from "react";
export function ComparisonTable({ results }) {
- const headers = [
- { label: "Date", numeric: false },
- { label: "Currency", numeric: false },
- { label: "BIDV Buy TM", numeric: true },
- { label: "BIDV Sell", numeric: true },
- { label: "TCB Bid TM", numeric: true },
- { label: "TCB Ask", numeric: true },
- ];
+ const headers = ["Date", "Currency", "BIDV Buy TM", "BIDV Sell", "TCB Bid TM", "TCB Ask"];
return (
- <>
- {/* Desktop table */}
-
-
-
-
- {headers.map((h) => (
-
+
+
+
+ {headers.map((h) => (
+ |
+ {h}
+ |
+ ))}
+
+
+
+ {results.map((row, idx) => (
+
+ {[row.date, row.currency, row.bidvBuyTm, row.bidvSell, row.tcbBidTm, row.tcbAsk].map((cell, i) => (
+ |
- {h.label}
-
+ {cell || "-"}
+ |
))}
-
-
- {results.map((row, idx) => {
- const cells = [
- { value: row.date, numeric: false },
- { value: row.currency, numeric: false },
- { value: row.bidvBuyTm, numeric: true },
- { value: row.bidvSell, numeric: true },
- { value: row.tcbBidTm, numeric: true },
- { value: row.tcbAsk, numeric: true },
- ];
- return (
-
- {cells.map((cell, i) => (
- |
- {cell.value || "-"}
- |
- ))}
-
- );
- })}
-
-
-
- {/* Mobile cards */}
-
- {results.map((row, idx) => (
-
-
- {row.date}
- {row.currency}
-
-
- BIDV Buy{row.bidvBuyTm || "-"}
- TCB Bid{row.tcbBidTm || "-"}
- BIDV Sell{row.bidvSell || "-"}
- TCB Ask{row.tcbAsk || "-"}
-
-
- ))}
- |
+
);
}
export function RateTable({ results, selectedBank }) {
- const bidvHeaders = [
- { label: "Date", numeric: false },
- { label: "Name (VI)", numeric: false },
- { label: "Buy TM", numeric: true },
- { label: "Buy CK", numeric: true },
- { label: "Currency", numeric: false },
- { label: "Name (EN)", numeric: false },
- { label: "Sell", numeric: true },
- ];
- const tcbHeaders = [
- { label: "Date", numeric: false },
- { label: "Label", numeric: false },
- { label: "Ask Rate", numeric: true },
- { label: "Bid CK", numeric: true },
- { label: "Bid TM", numeric: true },
- { label: "Source", numeric: false },
- { label: "Target", numeric: false },
- { label: "Ask TM", numeric: true },
- ];
+ 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 [
- { value: row.date, numeric: false },
- { value: row.nameVI, numeric: false },
- { value: row.muaTm, numeric: true },
- { value: row.muaCk, numeric: true },
- { value: row.currency, numeric: false },
- { value: row.nameEN, numeric: false },
- { value: row.ban, numeric: true },
- ];
+ return [row.date, row.nameVI, row.muaTm, row.muaCk, row.currency, row.nameEN, row.ban];
}
- return [
- { value: row.date, numeric: false },
- { value: row.label, numeric: false },
- { value: row.askRate, numeric: true },
- { value: row.bidRateCK, numeric: true },
- { value: row.bidRateTM, numeric: true },
- { value: row.sourceCurrency, numeric: false },
- { value: row.targetCurrency, numeric: false },
- { value: row.askRateTM, numeric: true },
- ];
- };
-
- const getMobileCard = (row) => {
- if (selectedBank === "bidv") {
- return { title: row.nameVI || row.nameEN, subtitle: `${row.currency} - ${row.date}`, fields: [
- { label: "Buy TM", value: row.muaTm }, { label: "Buy CK", value: row.muaCk }, { label: "Sell", value: row.ban },
- ]};
- }
- return { title: row.label, subtitle: `${row.sourceCurrency} - ${row.date}`, fields: [
- { label: "Bid TM", value: row.bidRateTM }, { label: "Bid CK", value: row.bidRateCK },
- { label: "Ask", value: row.askRate }, { label: "Ask TM", value: row.askRateTM },
- ]};
+ return [row.date, row.label, row.askRate, row.bidRateCK, row.bidRateTM, row.sourceCurrency, row.targetCurrency, row.askRateTM];
};
return (
- <>
- {/* Desktop table */}
-
-
-
-
- {headers.map((h) => (
-
+
+
+
+ {headers.map((h) => (
+ |
+ {h}
+ |
+ ))}
+
+
+
+ {results.map((row, idx) => (
+
+ {getRowCells(row).map((cell, i) => (
+ |
- {h.label}
-
+ {cell}
+ |
))}
-
-
- {results.map((row, idx) => {
- const cells = getRowCells(row);
- return (
-
- {cells.map((cell, i) => (
- |
- {cell.value}
- |
- ))}
-
- );
- })}
-
-
-
- {/* Mobile cards */}
-
- {results.map((row, idx) => {
- const card = getMobileCard(row);
- return (
-
-
- {card.title}
- {card.subtitle}
-
-
- {card.fields.map((f, i) => (
-
- {f.label}
- {f.value || "-"}
-
- ))}
-
-
- );
- })}
- |
+
);
}
diff --git a/src/app/globals.css b/src/app/globals.css
index 4beb2e1..1dc835d 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -20,23 +20,8 @@
--font-sans: var(--font-geist-sans);
}
-/* Dark mode: explicit toggle OR system preference (unless overridden to light) */
-:root[data-theme="dark"] {
- --background: #0a0a0a;
- --foreground: #ededed;
- --card-bg: #18181b;
- --card-border: #27272a;
- --input-bg: #1e1e22;
- --input-border: #3f3f46;
- --input-focus: #60a5fa;
- --table-header-bg: #1e1e22;
- --table-row-hover: #27272a;
- --table-row-stripe: #141416;
- --muted: #a1a1aa;
-}
-
@media (prefers-color-scheme: dark) {
- :root:not([data-theme="light"]) {
+ :root {
--background: #0a0a0a;
--foreground: #ededed;
--card-bg: #18181b;