feat: update css

package.json

@@ -3,7 +3,7 @@
 	"version": "0.1.0",
 	"private": true,
 	"scripts": {
-		"dev": "next dev",
+		"dev": "next dev --turbopack",
 		"build": "next build",
 		"start": "next start",
 		"lint": "next lint",
@@ -13,6 +13,7 @@
 	},
 	"dependencies": {
 		"@opennextjs/cloudflare": "^1.3.1",
+		"bootstrap": "^5.3.7",
 		"next": "15.3.4",
 		"react": "^19.0.0",
 		"react-dom": "^19.0.0"
@@ -20,4 +21,4 @@
 	"devDependencies": {
 		"wrangler": "^4.22.0"
 	}
-}
+}

src/app/bidv/page.jsx

@@ -170,7 +170,7 @@ export default function BidvPage() {
   }
 
   return (
-    <div style={{ background: "#fff", padding: 24, borderRadius: 8, boxShadow: "0 2px 8px rgba(0,0,0,0.07)", maxWidth: 700, margin: "auto" }}>
+    <div className="container">
       <h1>Exchange Rate Export (USD)</h1>
       <div style={{ marginBottom: 20 }}>
         <label htmlFor="start-date">Start Date:</label>

src/app/globals.css

@@ -22,6 +22,8 @@ body {
   font-family: Arial, Helvetica, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  margin: 40px;
+  background: #f7f7f7;
 }
 
 * {
@@ -40,3 +42,70 @@ a {
     color-scheme: dark;
   }
 }
+
+.container {
+  background: #fff;
+  padding: 24px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
+  max-width: 700px;
+  margin: auto;
+}
+
+h1 {
+  text-align: center;
+}
+
+label {
+  margin-right: 8px;
+}
+
+input[type="date"] {
+  margin-right: 16px;
+  padding: 4px 8px;
+}
+
+button {
+  padding: 8px 16px;
+  margin-right: 8px;
+  border: none;
+  border-radius: 4px;
+  background: #007bff;
+  color: #fff;
+  cursor: pointer;
+  font-size: 1rem;
+}
+
+button:disabled {
+  background: #aaa;
+  cursor: not-allowed;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 24px;
+}
+
+th, td {
+  border: 1px solid #ddd;
+  padding: 8px;
+  text-align: center;
+}
+
+th {
+  background: #007bff;
+  color: #fff;
+}
+
+.loading {
+  text-align: center;
+  margin-top: 20px;
+  color: #007bff;
+}
+
+.error {
+  color: red;
+  text-align: center;
+  margin-top: 20px;
+}

src/app/layout.js

@@ -1,5 +1,6 @@
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 const geistSans = Geist({
   variable: "--font-geist-sans",

src/app/page.js

@@ -18,7 +18,7 @@ export default function Home() {
   }
 
   return (
-    <div style={{ background: "#fff", padding: 24, borderRadius: 8, boxShadow: "0 2px 8px rgba(0,0,0,0.07)", maxWidth: 700, margin: "auto" }}>
+    <div className="container">
       <h1>Exchange Rate Export (USD)</h1>
       <div style={{ marginBottom: 20 }}>
         <label htmlFor="start-date">Start Date:</label>

src/app/tcb/page.jsx

@@ -146,7 +146,7 @@ export default function TcbPage() {
   }
 
   return (
-    <div style={{ background: "#fff", padding: 24, borderRadius: 8, boxShadow: "0 2px 8px rgba(0,0,0,0.07)", maxWidth: 700, margin: "auto" }}>
+    <div className="container">
       <h1>Exchange Rate Export (USD, Techcombank)</h1>
       <div style={{ marginBottom: 20 }}>
         <label htmlFor="start-date">Start Date:</label>