- {/* Row 1: Selectors and date pickers */}
-
-
-
-
-
-
-
-
-
-
- {error &&
}
- {isLoading &&
}
- {!isLoading && hasFetched && results.length === 0 &&
}
- {!isLoading && hasFetched && results.length > 0 && (
-
-
-
- {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
deleted file mode 100644
index 4f51c3a..0000000
--- a/src/app/components/exchange-rate-chart.js
+++ /dev/null
@@ -1,99 +0,0 @@
-"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 }) {
- const chartData = [];
-
- if (compareMode) {
- 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;
-
- 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
deleted file mode 100644
index 8d0f549..0000000
--- a/src/app/components/exchange-rate-status.js
+++ /dev/null
@@ -1,44 +0,0 @@
-"use client";
-
-import React from "react";
-
-export function LoadingSpinner({ progress }) {
- return (
-
-
-
-
- {progress?.total ? `Fetching rates for ${progress.total} day${progress.total > 1 ? "s" : ""}...` : "Fetching exchange rates..."}
-
- {progress?.total > 1 && (
-
- )}
-
-
- );
-}
-
-export function ErrorMessage({ message }) {
- return (
-
- );
-}
-
-export function EmptyState() {
- return (
-
-
-
No exchange rate data
-
Select a bank and date range, then click Fetch Rates to get started.
-
- );
-}
diff --git a/src/app/components/exchange-rate-table.js b/src/app/components/exchange-rate-table.js
deleted file mode 100644
index 88a1dc5..0000000
--- a/src/app/components/exchange-rate-table.js
+++ /dev/null
@@ -1,204 +0,0 @@
-"use client";
-
-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 },
- ];
-
- return (
- <>
- {/* Desktop table */}
-
-
-
-
- {headers.map((h) => (
- |
- {h.label}
- |
- ))}
-
-
-
- {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 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 [
- { 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 (
- <>
- {/* Desktop table */}
-
-
-
-
- {headers.map((h) => (
- |
- {h.label}
- |
- ))}
-
-
-
- {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..a2dc41e 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,53 +1,21 @@
@import "tailwindcss";
:root {
- --background: #f8fafc;
+ --background: #ffffff;
--foreground: #171717;
- --card-bg: #ffffff;
- --card-border: #e2e8f0;
- --input-bg: #ffffff;
- --input-border: #cbd5e1;
- --input-focus: #3b82f6;
- --table-header-bg: #f1f5f9;
- --table-row-hover: #e2e8f0;
- --table-row-stripe: #f1f5f9;
- --muted: #64748b;
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--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;
+ --font-mono: var(--font-geist-mono);
}
@media (prefers-color-scheme: dark) {
- :root:not([data-theme="light"]) {
+ :root {
--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;
}
}
@@ -56,60 +24,3 @@ body {
color: var(--foreground);
font-family: Arial, Helvetica, sans-serif;
}
-
-/* Date picker dark mode support */
-.react-datepicker-wrapper {
- width: 100%;
-}
-
-.react-datepicker__input-container input {
- background: var(--input-bg) !important;
- color: var(--foreground) !important;
- border-color: var(--input-border) !important;
-}
-
-.react-datepicker {
- background-color: var(--card-bg) !important;
- border-color: var(--card-border) !important;
- color: var(--foreground) !important;
- font-family: inherit !important;
- box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12) !important;
-}
-
-.react-datepicker__header {
- background-color: var(--table-header-bg) !important;
- border-bottom-color: var(--card-border) !important;
-}
-
-.react-datepicker__current-month,
-.react-datepicker__day-name {
- color: var(--foreground) !important;
-}
-
-.react-datepicker__day {
- color: var(--foreground) !important;
- border-radius: 6px !important;
-}
-
-.react-datepicker__day:hover {
- background-color: var(--table-row-hover) !important;
-}
-
-.react-datepicker__day--selected,
-.react-datepicker__day--keyboard-selected {
- background-color: #3b82f6 !important;
- color: #fff !important;
-}
-
-.react-datepicker__day--disabled {
- color: var(--muted) !important;
- opacity: 0.4;
-}
-
-.react-datepicker__navigation-icon::before {
- border-color: var(--muted) !important;
-}
-
-.react-datepicker__triangle {
- display: none !important;
-}
diff --git a/src/app/layout.js b/src/app/layout.js
index ae7d66a..bb0c64c 100644
--- a/src/app/layout.js
+++ b/src/app/layout.js
@@ -1,4 +1,4 @@
-import { Geist } from "next/font/google";
+import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { Analytics } from "@vercel/analytics/react";
import { SpeedInsights } from '@vercel/speed-insights/next';
@@ -8,16 +8,21 @@ const geistSans = Geist({
subsets: ["latin"],
});
+const geistMono = Geist_Mono({
+ variable: "--font-geist-mono",
+ subsets: ["latin"],
+});
+
export const metadata = {
- title: "Exchange Rate Export",
- description: "Fetch exchange rates from BIDV or Techcombank and export to CSV",
+ title: "Create Next App",
+ description: "Generated by create next app",
};
export default function RootLayout({ children }) {
return (
-
+
{children}
diff --git a/src/app/page.js b/src/app/page.js
index 4f7f4a4..dfc33ed 100644
--- a/src/app/page.js
+++ b/src/app/page.js
@@ -1,10 +1,28 @@
+"use client";
+import React, { useEffect, useState } from "react";
import ExchangeRateViewer from "./components/ExchangeRateViewer";
+import { format, subDays } from "date-fns";
export default function Home() {
+ const [defaultStartDate, setDefaultStartDate] = useState("");
+ const [defaultEndDate, setDefaultEndDate] = useState("");
+
+ useEffect(() => {
+ const today = new Date();
+ const weekAgo = subDays(today, 7);
+ setDefaultStartDate(format(weekAgo, "yyyy-MM-dd"));
+ setDefaultEndDate(format(today, "yyyy-MM-dd"));
+ }, []);
+
return (
-
+ {defaultStartDate && defaultEndDate && (
+
+ )}
);