From ae81b486689d58fc605bc9493f348267778b2bc6 Mon Sep 17 00:00:00 2001 From: v0 Date: Sat, 28 Jun 2025 16:46:55 +0000 Subject: [PATCH] Initialized repository for project exchange-rate-export Co-authored-by: Tien Nguyen Minh <39063457+tiennm99@users.noreply.github.com> --- .gitignore | 27 + README.md | 30 + app/api/exchange/bidv/route.ts | 88 + app/api/exchange/route.ts | 23 + app/api/exchange/techcombank/route.ts | 23 + app/globals.css | 94 + app/layout.tsx | 20 + app/page.tsx | 425 +++ components.json | 21 + components/theme-provider.tsx | 11 + components/ui/accordion.tsx | 58 + components/ui/alert-dialog.tsx | 141 + components/ui/alert.tsx | 59 + components/ui/aspect-ratio.tsx | 7 + components/ui/avatar.tsx | 50 + components/ui/badge.tsx | 36 + components/ui/breadcrumb.tsx | 115 + components/ui/button.tsx | 56 + components/ui/calendar.tsx | 66 + components/ui/card.tsx | 79 + components/ui/carousel.tsx | 262 ++ components/ui/chart.tsx | 365 +++ components/ui/checkbox.tsx | 30 + components/ui/collapsible.tsx | 11 + components/ui/command.tsx | 153 + components/ui/context-menu.tsx | 200 ++ components/ui/dialog.tsx | 122 + components/ui/drawer.tsx | 118 + components/ui/dropdown-menu.tsx | 200 ++ components/ui/form.tsx | 178 ++ components/ui/hover-card.tsx | 29 + components/ui/input-otp.tsx | 71 + components/ui/input.tsx | 22 + components/ui/label.tsx | 26 + components/ui/menubar.tsx | 236 ++ components/ui/navigation-menu.tsx | 128 + components/ui/pagination.tsx | 117 + components/ui/popover.tsx | 31 + components/ui/progress.tsx | 28 + components/ui/radio-group.tsx | 44 + components/ui/resizable.tsx | 45 + components/ui/scroll-area.tsx | 48 + components/ui/select.tsx | 145 + components/ui/separator.tsx | 31 + components/ui/sheet.tsx | 140 + components/ui/sidebar.tsx | 763 +++++ components/ui/skeleton.tsx | 15 + components/ui/slider.tsx | 28 + components/ui/sonner.tsx | 31 + components/ui/switch.tsx | 29 + components/ui/table.tsx | 71 + components/ui/tabs.tsx | 55 + components/ui/textarea.tsx | 22 + components/ui/toast.tsx | 129 + components/ui/toaster.tsx | 35 + components/ui/toggle-group.tsx | 61 + components/ui/toggle.tsx | 45 + components/ui/tooltip.tsx | 30 + components/ui/use-mobile.tsx | 19 + components/ui/use-toast.ts | 194 ++ hooks/use-mobile.tsx | 19 + hooks/use-toast.ts | 194 ++ lib/utils.ts | 6 + next.config.mjs | 14 + package.json | 71 + pnpm-lock.yaml | 3967 +++++++++++++++++++++++++ postcss.config.mjs | 8 + public/placeholder-logo.png | Bin 0 -> 568 bytes public/placeholder-logo.svg | 1 + public/placeholder-user.jpg | Bin 0 -> 1635 bytes public/placeholder.jpg | Bin 0 -> 1064 bytes public/placeholder.svg | 1 + styles/globals.css | 94 + tailwind.config.ts | 96 + tsconfig.json | 27 + 75 files changed, 10234 insertions(+) create mode 100644 .gitignore create mode 100644 README.md create mode 100644 app/api/exchange/bidv/route.ts create mode 100644 app/api/exchange/route.ts create mode 100644 app/api/exchange/techcombank/route.ts create mode 100644 app/globals.css create mode 100644 app/layout.tsx create mode 100644 app/page.tsx create mode 100644 components.json create mode 100644 components/theme-provider.tsx create mode 100644 components/ui/accordion.tsx create mode 100644 components/ui/alert-dialog.tsx create mode 100644 components/ui/alert.tsx create mode 100644 components/ui/aspect-ratio.tsx create mode 100644 components/ui/avatar.tsx create mode 100644 components/ui/badge.tsx create mode 100644 components/ui/breadcrumb.tsx create mode 100644 components/ui/button.tsx create mode 100644 components/ui/calendar.tsx create mode 100644 components/ui/card.tsx create mode 100644 components/ui/carousel.tsx create mode 100644 components/ui/chart.tsx create mode 100644 components/ui/checkbox.tsx create mode 100644 components/ui/collapsible.tsx create mode 100644 components/ui/command.tsx create mode 100644 components/ui/context-menu.tsx create mode 100644 components/ui/dialog.tsx create mode 100644 components/ui/drawer.tsx create mode 100644 components/ui/dropdown-menu.tsx create mode 100644 components/ui/form.tsx create mode 100644 components/ui/hover-card.tsx create mode 100644 components/ui/input-otp.tsx create mode 100644 components/ui/input.tsx create mode 100644 components/ui/label.tsx create mode 100644 components/ui/menubar.tsx create mode 100644 components/ui/navigation-menu.tsx create mode 100644 components/ui/pagination.tsx create mode 100644 components/ui/popover.tsx create mode 100644 components/ui/progress.tsx create mode 100644 components/ui/radio-group.tsx create mode 100644 components/ui/resizable.tsx create mode 100644 components/ui/scroll-area.tsx create mode 100644 components/ui/select.tsx create mode 100644 components/ui/separator.tsx create mode 100644 components/ui/sheet.tsx create mode 100644 components/ui/sidebar.tsx create mode 100644 components/ui/skeleton.tsx create mode 100644 components/ui/slider.tsx create mode 100644 components/ui/sonner.tsx create mode 100644 components/ui/switch.tsx create mode 100644 components/ui/table.tsx create mode 100644 components/ui/tabs.tsx create mode 100644 components/ui/textarea.tsx create mode 100644 components/ui/toast.tsx create mode 100644 components/ui/toaster.tsx create mode 100644 components/ui/toggle-group.tsx create mode 100644 components/ui/toggle.tsx create mode 100644 components/ui/tooltip.tsx create mode 100644 components/ui/use-mobile.tsx create mode 100644 components/ui/use-toast.ts create mode 100644 hooks/use-mobile.tsx create mode 100644 hooks/use-toast.ts create mode 100644 lib/utils.ts create mode 100644 next.config.mjs create mode 100644 package.json create mode 100644 pnpm-lock.yaml create mode 100644 postcss.config.mjs create mode 100644 public/placeholder-logo.png create mode 100644 public/placeholder-logo.svg create mode 100644 public/placeholder-user.jpg create mode 100644 public/placeholder.jpg create mode 100644 public/placeholder.svg create mode 100644 styles/globals.css create mode 100644 tailwind.config.ts create mode 100644 tsconfig.json diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..f650315 --- /dev/null +++ b/.gitignore @@ -0,0 +1,27 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules + +# next.js +/.next/ +/out/ + +# production +/build + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# env files +.env* + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..1bcf7b5 --- /dev/null +++ b/README.md @@ -0,0 +1,30 @@ +# exchange-rate-export + +*Automatically synced with your [v0.dev](https://v0.dev) deployments* + +[![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/miti99/v0-exchange-rate-export) +[![Built with v0](https://img.shields.io/badge/Built%20with-v0.dev-black?style=for-the-badge)](https://v0.dev/chat/projects/L8YX00K6aIO) + +## Overview + +This repository will stay in sync with your deployed chats on [v0.dev](https://v0.dev). +Any changes you make to your deployed app will be automatically pushed to this repository from [v0.dev](https://v0.dev). + +## Deployment + +Your project is live at: + +**[https://vercel.com/miti99/v0-exchange-rate-export](https://vercel.com/miti99/v0-exchange-rate-export)** + +## Build your app + +Continue building your app on: + +**[https://v0.dev/chat/projects/L8YX00K6aIO](https://v0.dev/chat/projects/L8YX00K6aIO)** + +## How It Works + +1. Create and modify your project using [v0.dev](https://v0.dev) +2. Deploy your chats from the v0 interface +3. Changes are automatically pushed to this repository +4. Vercel deploys the latest version from this repository \ No newline at end of file diff --git a/app/api/exchange/bidv/route.ts b/app/api/exchange/bidv/route.ts new file mode 100644 index 0000000..ea9094b --- /dev/null +++ b/app/api/exchange/bidv/route.ts @@ -0,0 +1,88 @@ +import { type NextRequest, NextResponse } from "next/server" + +async function safeFetch(bidvUrl: string, tries = 2) { + const headers = { + "User-Agent": + "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125 Safari/537.36", + Accept: "application/json, text/javascript, */*; q=0.01", + Referer: "https://bidv.com.vn/", + "X-Requested-With": "XMLHttpRequest", + } as const + + // 1️⃣ helper that really performs the fetch + const doFetch = (target: string) => + fetch(target, { + headers, + cache: "no-store", + }) + + // 2️⃣ Build the 2 proxy urls + const encoded = encodeURIComponent(bidvUrl) + const urls = [ + // Fast proxy, no wrapping + `https://corsproxy.io/?${encoded}`, + // More reliable fallback + `https://api.allorigins.win/raw?url=${encoded}`, + ] + + for (let attempt = 0; attempt < tries; attempt++) { + for (const url of urls) { + try { + const res = await doFetch(url) + if (res.ok) return res + } catch { + /* swallow & try next proxy */ + } + } + // small back-off + await new Promise((r) => setTimeout(r, 400)) + } + + throw new Error("fetch failed") +} + +export async function GET(request: NextRequest) { + const { searchParams } = new URL(request.url) + const date = searchParams.get("date") + + if (!date) { + return NextResponse.json({ error: "Missing ?date=YYYY-MM-DD" }, { status: 400 }) + } + + // Convert YYYY-MM-DD to DD/MM/YYYY for BIDV API + const [year, month, day] = date.split("-") + const bidvDate = `${day}/${month}/${year}` + + try { + // Step 1: Get time records for the date + const timeUrl = `https://bidv.com.vn/ServicesBIDV/ExchangeDetailSearchTimeServlet?date=${bidvDate}` + const timeRes = await safeFetch(timeUrl) + + if (!timeRes.ok) { + return NextResponse.json({ error: `Time search failed: ${timeRes.status}` }, { status: timeRes.status }) + } + + const timeData = await timeRes.json() + + if (!timeData.data || timeData.data.length === 0) { + return NextResponse.json({ error: "No time records found" }, { status: 404 }) + } + + // Step 2: Find the record with highest time value + const latestRecord = timeData.data.reduce((prev: any, current: any) => (current.time > prev.time ? current : prev)) + + // Step 3: Get exchange rates using the namerecord + const rateUrl = `https://bidv.com.vn/ServicesBIDV/ExchangeDetailServlet?date=${bidvDate}&time=${latestRecord.namerecord}` + const rateRes = await safeFetch(rateUrl) + + if (!rateRes.ok) { + return NextResponse.json({ error: `Rate fetch failed: ${rateRes.status}` }, { status: rateRes.status }) + } + + const rateData = await rateRes.json() + return NextResponse.json(rateData) + } catch (error) { + console.error("BIDV API error:", (error as Error).message) + return NextResponse.json({ error: "Failed to fetch from BIDV" }, { status: 502 }) + } +} diff --git a/app/api/exchange/route.ts b/app/api/exchange/route.ts new file mode 100644 index 0000000..0d7bf05 --- /dev/null +++ b/app/api/exchange/route.ts @@ -0,0 +1,23 @@ +import { type NextRequest, NextResponse } from "next/server" + +export async function GET(request: NextRequest) { + const { searchParams } = new URL(request.url) + const date = searchParams.get("date") + + if (!date) { + return NextResponse.json({ error: "Missing ?date=YYYY-MM-DD" }, { status: 400 }) + } + + const remoteURL = `https://techcombank.com/content/techcombank/web/vn/vi/cong-cu-tien-ich/ty-gia/_jcr_content.exchange-rates.${date}.integration.json` + + try { + const res = await fetch(remoteURL, { cache: "no-store" }) + if (!res.ok) { + return NextResponse.json({ error: `Upstream error ${res.status}` }, { status: res.status }) + } + const json = await res.json() + return NextResponse.json(json) + } catch (error) { + return NextResponse.json({ error: "Failed to fetch upstream" }, { status: 502 }) + } +} diff --git a/app/api/exchange/techcombank/route.ts b/app/api/exchange/techcombank/route.ts new file mode 100644 index 0000000..0d7bf05 --- /dev/null +++ b/app/api/exchange/techcombank/route.ts @@ -0,0 +1,23 @@ +import { type NextRequest, NextResponse } from "next/server" + +export async function GET(request: NextRequest) { + const { searchParams } = new URL(request.url) + const date = searchParams.get("date") + + if (!date) { + return NextResponse.json({ error: "Missing ?date=YYYY-MM-DD" }, { status: 400 }) + } + + const remoteURL = `https://techcombank.com/content/techcombank/web/vn/vi/cong-cu-tien-ich/ty-gia/_jcr_content.exchange-rates.${date}.integration.json` + + try { + const res = await fetch(remoteURL, { cache: "no-store" }) + if (!res.ok) { + return NextResponse.json({ error: `Upstream error ${res.status}` }, { status: res.status }) + } + const json = await res.json() + return NextResponse.json(json) + } catch (error) { + return NextResponse.json({ error: "Failed to fetch upstream" }, { status: 502 }) + } +} diff --git a/app/globals.css b/app/globals.css new file mode 100644 index 0000000..ac68442 --- /dev/null +++ b/app/globals.css @@ -0,0 +1,94 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +body { + font-family: Arial, Helvetica, sans-serif; +} + +@layer utilities { + .text-balance { + text-wrap: balance; + } +} + +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 0 0% 3.9%; + --card: 0 0% 100%; + --card-foreground: 0 0% 3.9%; + --popover: 0 0% 100%; + --popover-foreground: 0 0% 3.9%; + --primary: 0 0% 9%; + --primary-foreground: 0 0% 98%; + --secondary: 0 0% 96.1%; + --secondary-foreground: 0 0% 9%; + --muted: 0 0% 96.1%; + --muted-foreground: 0 0% 45.1%; + --accent: 0 0% 96.1%; + --accent-foreground: 0 0% 9%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 89.8%; + --input: 0 0% 89.8%; + --ring: 0 0% 3.9%; + --chart-1: 12 76% 61%; + --chart-2: 173 58% 39%; + --chart-3: 197 37% 24%; + --chart-4: 43 74% 66%; + --chart-5: 27 87% 67%; + --radius: 0.5rem; + --sidebar-background: 0 0% 98%; + --sidebar-foreground: 240 5.3% 26.1%; + --sidebar-primary: 240 5.9% 10%; + --sidebar-primary-foreground: 0 0% 98%; + --sidebar-accent: 240 4.8% 95.9%; + --sidebar-accent-foreground: 240 5.9% 10%; + --sidebar-border: 220 13% 91%; + --sidebar-ring: 217.2 91.2% 59.8%; + } + .dark { + --background: 0 0% 3.9%; + --foreground: 0 0% 98%; + --card: 0 0% 3.9%; + --card-foreground: 0 0% 98%; + --popover: 0 0% 3.9%; + --popover-foreground: 0 0% 98%; + --primary: 0 0% 98%; + --primary-foreground: 0 0% 9%; + --secondary: 0 0% 14.9%; + --secondary-foreground: 0 0% 98%; + --muted: 0 0% 14.9%; + --muted-foreground: 0 0% 63.9%; + --accent: 0 0% 14.9%; + --accent-foreground: 0 0% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 14.9%; + --input: 0 0% 14.9%; + --ring: 0 0% 83.1%; + --chart-1: 220 70% 50%; + --chart-2: 160 60% 45%; + --chart-3: 30 80% 55%; + --chart-4: 280 65% 60%; + --chart-5: 340 75% 55%; + --sidebar-background: 240 5.9% 10%; + --sidebar-foreground: 240 4.8% 95.9%; + --sidebar-primary: 224.3 76.3% 48%; + --sidebar-primary-foreground: 0 0% 100%; + --sidebar-accent: 240 3.7% 15.9%; + --sidebar-accent-foreground: 240 4.8% 95.9%; + --sidebar-border: 240 3.7% 15.9%; + --sidebar-ring: 217.2 91.2% 59.8%; + } +} + +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } +} diff --git a/app/layout.tsx b/app/layout.tsx new file mode 100644 index 0000000..17b2ce8 --- /dev/null +++ b/app/layout.tsx @@ -0,0 +1,20 @@ +import type { Metadata } from 'next' +import './globals.css' + +export const metadata: Metadata = { + title: 'v0 App', + description: 'Created with v0', + generator: 'v0.dev', +} + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode +}>) { + return ( + + {children} + + ) +} diff --git a/app/page.tsx b/app/page.tsx new file mode 100644 index 0000000..774d98b --- /dev/null +++ b/app/page.tsx @@ -0,0 +1,425 @@ +"use client" + +import { useState } from "react" +import { Button } from "@/components/ui/button" +import { Input } from "@/components/ui/input" +import { Label } from "@/components/ui/label" +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" +import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" +import { Download, Loader2 } from "lucide-react" +import * as XLSX from "xlsx" + +interface ExchangeRateData { + date: string + bank: string + currency: string + askRate: string + bidRateCK: string + bidRateTM: string + askRateTM: string + inputDate: string +} + +type BankType = "techcombank" | "bidv" + +// Currency options for each bank +const BANK_CURRENCIES = { + techcombank: [ + { value: "USD (50,100)", label: "USD (50,100)" }, + { value: "USD (1,2)", label: "USD (1,2)" }, + { value: "USD (5,10,20)", label: "USD (5,10,20)" }, + { value: "EUR", label: "EUR" }, + { value: "GBP", label: "GBP" }, + { value: "JPY", label: "JPY" }, + { value: "AUD", label: "AUD" }, + { value: "CAD", label: "CAD" }, + { value: "CHF", label: "CHF" }, + { value: "CNY", label: "CNY" }, + { value: "HKD", label: "HKD" }, + { value: "SGD", label: "SGD" }, + { value: "THB", label: "THB" }, + { value: "KRW", label: "KRW" }, + { value: "NZD", label: "NZD" }, + ], + bidv: [ + { value: "USD", label: "USD" }, + { value: "USD(1-2-5)", label: "USD (1-2-5)" }, + { value: "USD(10-20)", label: "USD (10-20)" }, + { value: "EUR", label: "EUR" }, + { value: "GBP", label: "GBP" }, + { value: "JPY", label: "JPY" }, + { value: "AUD", label: "AUD" }, + { value: "CAD", label: "CAD" }, + { value: "CHF", label: "CHF" }, + { value: "CNY", label: "CNY" }, + { value: "HKD", label: "HKD" }, + { value: "SGD", label: "SGD" }, + { value: "THB", label: "THB" }, + { value: "KRW", label: "KRW" }, + { value: "NZD", label: "NZD" }, + { value: "SEK", label: "SEK" }, + { value: "DKK", label: "DKK" }, + { value: "NOK", label: "NOK" }, + { value: "RUB", label: "RUB" }, + { value: "TWD", label: "TWD" }, + { value: "MYR", label: "MYR" }, + { value: "SAR", label: "SAR" }, + { value: "KWD", label: "KWD" }, + { value: "LAK", label: "LAK" }, + { value: "XAU", label: "Gold (XAU)" }, + ], +} + +// Helper function to get default dates +const getDefaultDates = () => { + const today = new Date() + const lastMonth = new Date() + lastMonth.setMonth(lastMonth.getMonth() - 1) + + return { + endDate: today.toISOString().split("T")[0], + startDate: lastMonth.toISOString().split("T")[0], + } +} + +export default function ExchangeRateExporter() { + const [bank, setBank] = useState("techcombank") + const [currency, setCurrency] = useState("USD (50,100)") + const defaultDates = getDefaultDates() + const [startDate, setStartDate] = useState(defaultDates.startDate) + const [endDate, setEndDate] = useState(defaultDates.endDate) + const [data, setData] = useState([]) + const [loading, setLoading] = useState(false) + const [error, setError] = useState("") + + // Update currency when bank changes + const handleBankChange = (newBank: BankType) => { + setBank(newBank) + // Set default currency for the selected bank + const defaultCurrency = newBank === "techcombank" ? "USD (50,100)" : "USD" + setCurrency(defaultCurrency) + } + + const generateDateRange = (start: string, end: string): string[] => { + const dates = [] + const startDate = new Date(start) + const endDate = new Date(end) + + for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) { + dates.push(new Date(d).toISOString().split("T")[0]) + } + + return dates + } + + const fetchTechcombankRate = async (date: string): Promise => { + try { + const res = await fetch(`/api/exchange/techcombank?date=${date}`) + if (!res.ok) { + if (res.status === 404) { + return null + } + console.error(`Techcombank API returned ${res.status} for ${date}`) + return null + } + + const result = await res.json() + const currencyData = result.exchangeRate?.data?.find((item: any) => item.label === currency) + if (!currencyData) return null + + return { + date, + bank: "Techcombank", + currency, + askRate: currencyData.askRate || "N/A", + bidRateCK: currencyData.bidRateCK || "N/A", + bidRateTM: currencyData.bidRateTM || "N/A", + askRateTM: currencyData.askRateTM || "N/A", + inputDate: currencyData.inputDate || "N/A", + } + } catch (err) { + console.error(`Techcombank fetch failed for ${date}`, err) + return null + } + } + + const fetchBIDVRate = async (date: string): Promise => { + try { + const res = await fetch(`/api/exchange/bidv?date=${date}`) + if (!res.ok) { + if (res.status === 404) { + return null + } + console.error(`BIDV API returned ${res.status} for ${date}`) + return null + } + + const result = await res.json() + const currencyData = result.data?.find((item: any) => item.currency === currency) + if (!currencyData) return null + + return { + date, + bank: "BIDV", + currency, + askRate: currencyData.ban || "N/A", + bidRateCK: currencyData.muaCk || "N/A", + bidRateTM: currencyData.muaTm || "N/A", + askRateTM: currencyData.ban || "N/A", + inputDate: `${result.day_vi} ${result.hour}` || "N/A", + } + } catch (err) { + console.error(`BIDV fetch failed for ${date}`, err) + return null + } + } + + const fetchExchangeRate = async (date: string): Promise => { + if (bank === "techcombank") { + return fetchTechcombankRate(date) + } else { + return fetchBIDVRate(date) + } + } + + const handleFetchData = async () => { + if (!startDate || !endDate) { + setError("Please select both start and end dates") + return + } + + if (new Date(startDate) > new Date(endDate)) { + setError("Start date must be before end date") + return + } + + setLoading(true) + setError("") + setData([]) + + try { + const dates = generateDateRange(startDate, endDate) + const results: ExchangeRateData[] = [] + + for (const date of dates) { + const rateData = await fetchExchangeRate(date) + if (rateData) { + results.push(rateData) + } + // Add a small delay to avoid overwhelming the API + await new Promise((resolve) => setTimeout(resolve, 200)) + } + + setData(results) + if (results.length === 0) { + setError("No data found for the selected date range") + } + } catch (error) { + setError("An error occurred while fetching data") + console.error(error) + } finally { + setLoading(false) + } + } + + const exportToCSV = () => { + if (data.length === 0) return + + const headers = ["Date", "Bank", "Currency", "Ask Rate", "Bid Rate CK", "Bid Rate TM", "Ask Rate TM", "Input Date"] + const csvContent = [ + headers.join(","), + ...data.map((row) => + [ + row.date, + row.bank, + row.currency, + row.askRate, + row.bidRateCK, + row.bidRateTM, + row.askRateTM, + row.inputDate, + ].join(","), + ), + ].join("\n") + + const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" }) + const link = document.createElement("a") + const url = URL.createObjectURL(blob) + link.setAttribute("href", url) + link.setAttribute( + "download", + `exchange_rates_${bank}_${currency.replace(/[^a-zA-Z0-9]/g, "_")}_${startDate}_to_${endDate}.csv`, + ) + link.style.visibility = "hidden" + document.body.appendChild(link) + link.click() + document.body.removeChild(link) + } + + const exportToXLSX = () => { + if (data.length === 0) return + + const worksheet = XLSX.utils.json_to_sheet( + data.map((row) => ({ + Date: row.date, + Bank: row.bank, + Currency: row.currency, + "Ask Rate": row.askRate, + "Bid Rate CK": row.bidRateCK, + "Bid Rate TM": row.bidRateTM, + "Ask Rate TM": row.askRateTM, + "Input Date": row.inputDate, + })), + ) + const workbook = XLSX.utils.book_new() + XLSX.utils.book_append_sheet(workbook, worksheet, "Exchange Rates") + + const arrayBuffer = XLSX.write(workbook, { + bookType: "xlsx", + type: "array", + }) + + const blob = new Blob([arrayBuffer], { + type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8", + }) + const url = URL.createObjectURL(blob) + const link = document.createElement("a") + link.href = url + link.download = `exchange_rates_${bank}_${currency.replace(/[^a-zA-Z0-9]/g, "_")}_${startDate}_to_${endDate}.xlsx` + document.body.appendChild(link) + link.click() + document.body.removeChild(link) + URL.revokeObjectURL(url) + } + + const formatNumber = (value: string) => { + if (value === "N/A" || !value || value === "-") return value + // Remove commas and parse + const numValue = Number.parseFloat(value.replace(/,/g, "")) + if (isNaN(numValue)) return value + return numValue.toLocaleString() + } + + const currentCurrencies = BANK_CURRENCIES[bank] + + return ( +
+ + + Vietnam Bank Exchange Rate Exporter + + Fetch exchange rates from Vietnamese banks for a date range and export to CSV or XLSX + + + +
+
+ + +
+
+ + +
+
+ + setStartDate(e.target.value)} /> +
+
+ + setEndDate(e.target.value)} /> +
+ +
+ {error &&
{error}
} + + + + {data.length > 0 && ( + + +
+
+ Exchange Rate Data + + {currency} rates from {bank.toUpperCase()} from {startDate} to {endDate} ({data.length} records) + +
+
+ + +
+
+ + +
+ + + + Date + Bank + Currency + Ask Rate + Bid Rate CK + Bid Rate TM + Ask Rate TM + Input Date + + + + {data.map((row, index) => ( + + {row.date} + {row.bank} + {row.currency} + {formatNumber(row.askRate)} + {formatNumber(row.bidRateCK)} + {formatNumber(row.bidRateTM)} + {formatNumber(row.askRateTM)} + {row.inputDate} + + ))} + +
+
+ + + )} +
+ ) +} diff --git a/components.json b/components.json new file mode 100644 index 0000000..d9ef0ae --- /dev/null +++ b/components.json @@ -0,0 +1,21 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "default", + "rsc": true, + "tsx": true, + "tailwind": { + "config": "tailwind.config.ts", + "css": "app/globals.css", + "baseColor": "neutral", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils", + "ui": "@/components/ui", + "lib": "@/lib", + "hooks": "@/hooks" + }, + "iconLibrary": "lucide" +} \ No newline at end of file diff --git a/components/theme-provider.tsx b/components/theme-provider.tsx new file mode 100644 index 0000000..55c2f6e --- /dev/null +++ b/components/theme-provider.tsx @@ -0,0 +1,11 @@ +'use client' + +import * as React from 'react' +import { + ThemeProvider as NextThemesProvider, + type ThemeProviderProps, +} from 'next-themes' + +export function ThemeProvider({ children, ...props }: ThemeProviderProps) { + return {children} +} diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx new file mode 100644 index 0000000..24c788c --- /dev/null +++ b/components/ui/accordion.tsx @@ -0,0 +1,58 @@ +"use client" + +import * as React from "react" +import * as AccordionPrimitive from "@radix-ui/react-accordion" +import { ChevronDown } from "lucide-react" + +import { cn } from "@/lib/utils" + +const Accordion = AccordionPrimitive.Root + +const AccordionItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AccordionItem.displayName = "AccordionItem" + +const AccordionTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + svg]:rotate-180", + className + )} + {...props} + > + {children} + + + +)) +AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName + +const AccordionContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + +
{children}
+ +)) + +AccordionContent.displayName = AccordionPrimitive.Content.displayName + +export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } diff --git a/components/ui/alert-dialog.tsx b/components/ui/alert-dialog.tsx new file mode 100644 index 0000000..25e7b47 --- /dev/null +++ b/components/ui/alert-dialog.tsx @@ -0,0 +1,141 @@ +"use client" + +import * as React from "react" +import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" + +import { cn } from "@/lib/utils" +import { buttonVariants } from "@/components/ui/button" + +const AlertDialog = AlertDialogPrimitive.Root + +const AlertDialogTrigger = AlertDialogPrimitive.Trigger + +const AlertDialogPortal = AlertDialogPrimitive.Portal + +const AlertDialogOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName + +const AlertDialogContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + +)) +AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName + +const AlertDialogHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +AlertDialogHeader.displayName = "AlertDialogHeader" + +const AlertDialogFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +AlertDialogFooter.displayName = "AlertDialogFooter" + +const AlertDialogTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName + +const AlertDialogDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogDescription.displayName = + AlertDialogPrimitive.Description.displayName + +const AlertDialogAction = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName + +const AlertDialogCancel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName + +export { + AlertDialog, + AlertDialogPortal, + AlertDialogOverlay, + AlertDialogTrigger, + AlertDialogContent, + AlertDialogHeader, + AlertDialogFooter, + AlertDialogTitle, + AlertDialogDescription, + AlertDialogAction, + AlertDialogCancel, +} diff --git a/components/ui/alert.tsx b/components/ui/alert.tsx new file mode 100644 index 0000000..41fa7e0 --- /dev/null +++ b/components/ui/alert.tsx @@ -0,0 +1,59 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const alertVariants = cva( + "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", + { + variants: { + variant: { + default: "bg-background text-foreground", + destructive: + "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +const Alert = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes & VariantProps +>(({ className, variant, ...props }, ref) => ( +
+)) +Alert.displayName = "Alert" + +const AlertTitle = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +AlertTitle.displayName = "AlertTitle" + +const AlertDescription = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +AlertDescription.displayName = "AlertDescription" + +export { Alert, AlertTitle, AlertDescription } diff --git a/components/ui/aspect-ratio.tsx b/components/ui/aspect-ratio.tsx new file mode 100644 index 0000000..d6a5226 --- /dev/null +++ b/components/ui/aspect-ratio.tsx @@ -0,0 +1,7 @@ +"use client" + +import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio" + +const AspectRatio = AspectRatioPrimitive.Root + +export { AspectRatio } diff --git a/components/ui/avatar.tsx b/components/ui/avatar.tsx new file mode 100644 index 0000000..51e507b --- /dev/null +++ b/components/ui/avatar.tsx @@ -0,0 +1,50 @@ +"use client" + +import * as React from "react" +import * as AvatarPrimitive from "@radix-ui/react-avatar" + +import { cn } from "@/lib/utils" + +const Avatar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +Avatar.displayName = AvatarPrimitive.Root.displayName + +const AvatarImage = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarImage.displayName = AvatarPrimitive.Image.displayName + +const AvatarFallback = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName + +export { Avatar, AvatarImage, AvatarFallback } diff --git a/components/ui/badge.tsx b/components/ui/badge.tsx new file mode 100644 index 0000000..f000e3e --- /dev/null +++ b/components/ui/badge.tsx @@ -0,0 +1,36 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const badgeVariants = cva( + "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + { + variants: { + variant: { + default: + "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", + secondary: + "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", + destructive: + "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", + outline: "text-foreground", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +export interface BadgeProps + extends React.HTMLAttributes, + VariantProps {} + +function Badge({ className, variant, ...props }: BadgeProps) { + return ( +
+ ) +} + +export { Badge, badgeVariants } diff --git a/components/ui/breadcrumb.tsx b/components/ui/breadcrumb.tsx new file mode 100644 index 0000000..60e6c96 --- /dev/null +++ b/components/ui/breadcrumb.tsx @@ -0,0 +1,115 @@ +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { ChevronRight, MoreHorizontal } from "lucide-react" + +import { cn } from "@/lib/utils" + +const Breadcrumb = React.forwardRef< + HTMLElement, + React.ComponentPropsWithoutRef<"nav"> & { + separator?: React.ReactNode + } +>(({ ...props }, ref) =>