create-butterfly-app-v2 1.1.0 → 2.0.0

package/cli.js

@@ -2,62 +2,189 @@
 const fs = require("fs");
 const path = require("path");
 const { execSync } = require("child_process");
+const readline = require("readline");
 
-const projectName = process.argv[2] || "my-fullstack-app";
-const targetDir = path.resolve(process.cwd(), projectName);
-const templateDir = path.join(__dirname, "templates", "fullstack");
+const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+const ask = (q) => new Promise((r) => rl.question(q, r));
 
-if (fs.existsSync(targetDir)) {
-  console.error(`Error: Directory "${projectName}" already exists.`);
-  process.exit(1);
+const C = {
+  reset: "\x1b[0m",
+  blue: "\x1b[34m",
+  cyan: "\x1b[36m",
+  green: "\x1b[32m",
+  yellow: "\x1b[33m",
+  red: "\x1b[31m",
+  magenta: "\x1b[35m",
+  bold: "\x1b[1m",
+  dim: "\x1b[2m",
+};
+
+function c(color, text) {
+  return `${C[color] || ""}${text}${C.reset}`;
+}
+
+function showBanner() {
+  console.log(`
+${c("cyan", "  ╔══════════════════════════════════════════╗")}
+${c("cyan", "  ║")}          ${c("bold", "CREATE BUTTERFLY APP")}          ${c("cyan", "║")}
+${c("cyan", "  ║")}     ${c("dim", "Full-Stack Project Generator")}     ${c("cyan", "║")}
+${c("cyan", "  ╠══════════════════════════════════════════╣")}
+${c("cyan", "  ║")}                                          ${c("cyan", "║")}
+${c("cyan", "  ║")}    ${c("blue", "  ,,_")}                            ${c("cyan", "║")}
+${c("cyan", "  ║")}    ${c("blue", "  \\\\\'-.")}                           ${c("cyan", "║")}
+${c("cyan", "  ║")}    ${c("blue", "   )  -'\\")}    ${c("green", "Node.js")}  ${c("blue", "+")}  ${c("green", "React")}   ${c("blue", "   +")}    ${c("cyan", "║")}
+${c("cyan", "  ║")}    ${c("blue", "  /_/|_\\\\")}   ${c("green", "Tailwind")} ${c("blue", "+")} ${c("green", "MySQL")}      ${c("cyan", "║")}
+${c("cyan", "  ║")}    ${c("blue", "  \\\\__/")}                           ${c("cyan", "║")}
+${c("cyan", "  ║")}                                          ${c("cyan", "║")}
+${c("cyan", "  ╚══════════════════════════════════════════╝${c("reset", "")}
+`));
+}
+
+const PROJECT_TYPES = [
+  { id: "hotel", name: "Hotel Reservation", emoji: "🏨" },
+  { id: "parking", name: "Car Parking", emoji: "🅿️" },
+  { id: "student", name: "Student Management", emoji: "🎓" },
+];
+
+async function selectProjectType() {
+  console.log(`  ${c("bold", "Select your project type:")}\n`);
+  for (let i = 0; i < PROJECT_TYPES.length; i++) {
+    const t = PROJECT_TYPES[i];
+    console.log(`    ${c("yellow", `[${i + 1}]`)} ${t.emoji} ${c("bold", t.name)}`);
+  }
+  console.log(`    ${c("yellow", "[r]")} 🎲 ${c("bold", "Random")} - Surprise me!\n`);
+
+  let choice;
+  while (true) {
+    const input = await ask(`  ${c("cyan", "?>")} Enter number or ${c("yellow", "r")} for random: `);
+    if (input.toLowerCase() === "r") {
+      const rand = Math.floor(Math.random() * PROJECT_TYPES.length);
+      choice = PROJECT_TYPES[rand];
+      console.log(`  ${c("green", "✓")} Randomly selected: ${choice.emoji} ${c("bold", choice.name)}\n`);
+      break;
+    }
+    const num = parseInt(input);
+    if (num >= 1 && num <= PROJECT_TYPES.length) {
+      choice = PROJECT_TYPES[num - 1];
+      break;
+    }
+    console.log(`  ${c("red", "✗")} Invalid choice, try again\n`);
+  }
+  return choice;
 }
 
-console.log(`\n  Creating ${projectName}...\n`);
-
-function copyRecursive(src, dest) {
-  fs.mkdirSync(dest, { recursive: true });
-  const entries = fs.readdirSync(src, { withFileTypes: true });
-  for (const entry of entries) {
-    const srcPath = path.join(src, entry.name);
-    const destPath = path.join(dest, entry.name);
-    if (entry.isDirectory()) {
-      copyRecursive(srcPath, destPath);
-    } else {
-      let content = fs.readFileSync(srcPath, "utf-8");
-      content = content.replace(/__PROJECT_NAME__/g, projectName);
-      fs.writeFileSync(destPath, content);
+async function askProjectName() {
+  console.log(`  ${c("bold", "Name your project:")}\n`);
+  while (true) {
+    const name = await ask(`  ${c("cyan", "?>")} Project name (e.g. my-hotel-app): `);
+    if (name && name.trim()) {
+      return name.trim();
     }
+    console.log(`  ${c("red", "✗")} Name cannot be empty\n`);
   }
 }
 
-copyRecursive(templateDir, targetDir);
-console.log(`  Created project at: ${targetDir}\n`);
-
-try {
-  console.log("  Installing backend dependencies...");
-  execSync("npm install", { cwd: path.join(targetDir, "backend"), stdio: "inherit" });
-  console.log("  Installing frontend dependencies...");
-  execSync("npm install", { cwd: path.join(targetDir, "frontend"), stdio: "inherit" });
-  console.log("  Installing root dependencies...");
-  execSync("npm install", { cwd: targetDir, stdio: "inherit" });
-} catch {
-  console.log("\n  Run 'npm install' in each folder manually if install failed.");
+function showProgress(msg) {
+  process.stdout.write(`  ${c("yellow", "→")} ${msg}...`);
+}
+
+function done() {
+  console.log(` ${c("green", "✓")}`);
+}
+
+async function main() {
+  showBanner();
+
+  const projectType = await selectProjectType();
+  const projectName = await askProjectName();
+  const targetDir = path.resolve(process.cwd(), projectName);
+  const baseDir = path.join(__dirname, "templates", "base");
+  const typeDir = path.join(__dirname, "templates", "types", projectType.id);
+
+  if (fs.existsSync(targetDir)) {
+    console.log(`\n  ${c("red", "✗")} Error: Directory "${projectName}" already exists.\n`);
+    rl.close();
+    process.exit(1);
+  }
+
+  console.log(`\n  ${c("bold", "Creating project...")}\n  ${c("dim", "━━━━━━━━━━━━━━━━━━━━━━━━━━━━")}\n`);
+
+  function copyRecursive(src, dest, type) {
+    if (!fs.existsSync(src)) return;
+    fs.mkdirSync(dest, { recursive: true });
+    const entries = fs.readdirSync(src, { withFileTypes: true });
+    for (const entry of entries) {
+      const srcPath = path.join(src, entry.name);
+      const destPath = path.join(dest, entry.name);
+      if (entry.isDirectory()) {
+        copyRecursive(srcPath, destPath, type);
+      } else {
+        let content = fs.readFileSync(srcPath, "utf-8");
+        content = content.replace(/__PROJECT_NAME__/g, projectName);
+        content = content.replace(/__PROJECT_TYPE__/g, type);
+        fs.writeFileSync(destPath, content);
+      }
+    }
+  }
+
+  showProgress("Scaffolding project files");
+  copyRecursive(baseDir, targetDir, projectType.id);
+  copyRecursive(typeDir, targetDir, projectType.id);
+  done();
+
+  showProgress("Installing backend dependencies");
+  try {
+    execSync("npm install", { cwd: path.join(targetDir, "backend"), stdio: "pipe" });
+    done();
+  } catch {
+    console.log(` ${c("red", "✗")}`);
+  }
+
+  showProgress("Installing frontend dependencies");
+  try {
+    execSync("npm install", { cwd: path.join(targetDir, "frontend"), stdio: "pipe" });
+    done();
+  } catch {
+    console.log(` ${c("red", "✗")}`);
+  }
+
+  showProgress("Installing root dependencies");
+  try {
+    execSync("npm install", { cwd: targetDir, stdio: "pipe" });
+    done();
+  } catch {
+    console.log(` ${c("red", "✗")}`);
+  }
+
+  console.log(`
+  ${c("bold", c("green", "✔ Project created successfully!"))}
+  ${c("dim", "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━")}
+
+  ${c("bold", "Next steps:")}
+
+  ${c("cyan", "  1.")} Start XAMPP (Apache + MySQL)
+  ${c("cyan", "  2.")} Open phpMyAdmin and create database: ${c("yellow", projectName)}
+  ${c("cyan", "  3.")} Run these commands:
+
+  ${c("bold", "    cd " + projectName)}
+  ${c("bold", "    npm run dev")}
+
+  ${c("cyan", "  4.")} Open ${c("green", "http://localhost:5173")}
+  ${c("cyan", "  5.")} Register a new account
+
+  ${c("dim", "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━")}
+
+  ${c("bold", c("magenta", "  🦋 Goodluck with your " + projectType.name + " project! 🦋"))}
+
+  ${c("dim", "(Tables are auto-created on server start - no manual SQL needed)")}
+  ${c("dim", "Sample data is seeded automatically for you!")}
+
+`);
+  rl.close();
 }
 
-console.log(`\n  Goodluck with your project! 🚀\n`);
-console.log(`  ─────────────────────────────`);
-console.log(`  cd ${projectName}`);
-console.log(`  npm run dev`);
-console.log(`  ─────────────────────────────\n`);
-console.log(`  1. Start XAMPP (Apache + MySQL)`);
-console.log(`  2. Create database "${projectName}" in phpMyAdmin`);
-console.log(`  3. Run this SQL to create tables:\n`);
-console.log(`     CREATE TABLE users (`);
-console.log(`       id INT AUTO_INCREMENT PRIMARY KEY,`);
-console.log(`       name VARCHAR(100) NOT NULL,`);
-console.log(`       email VARCHAR(100) NOT NULL UNIQUE,`);
-console.log(`       password VARCHAR(255) DEFAULT '',`);
-console.log(`       created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP`);
-console.log(`     );\n`);
-console.log(`  4. Open http://localhost:5173`);
-console.log(`  5. Register a new account and start using the app!\n`);
+main().catch((err) => {
+  console.error(err);
+  rl.close();
+  process.exit(1);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-butterfly-app-v2",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "Scaffold a full-stack Node.js + React + Tailwind + MySQL project",
   "bin": {
     "create-butterfly-app-v2": "cli.js"

package/templates/base/backend/db/init.js

@@ -0,0 +1,14 @@
+const db = require("../config/db");
+
+module.exports = async function init() {
+  await db.query(`
+    CREATE TABLE IF NOT EXISTS users (
+      id INT AUTO_INCREMENT PRIMARY KEY,
+      name VARCHAR(100) NOT NULL,
+      email VARCHAR(100) NOT NULL UNIQUE,
+      password VARCHAR(255) DEFAULT '',
+      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+    )
+  `);
+  console.log("Tables initialized");
+};

package/templates/{fullstack → base}/backend/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "__PROJECT_NAME__-backend",
+  "name": "__PROJECT_TYPE__-backend",
   "private": true,
   "scripts": {
     "dev": "nodemon server.js"

package/templates/{fullstack → base}/backend/server.js

@@ -10,18 +10,22 @@ app.use(cors());
 app.use(express.json());
 
 app.get("/api/health", (req, res) => {
-  res.json({ status: "ok", project: "__PROJECT_NAME__" });
+  res.json({ status: "ok", project: "__PROJECT_NAME__", type: "__PROJECT_TYPE__" });
 });
 
 app.use("/api/auth", require("./routes/auth"));
 app.use("/api", require("./routes/api"));
 
-db.query("SELECT 1")
-  .then(() => {
+async function start() {
+  try {
+    await db.query("SELECT 1");
     console.log("MySQL connected");
+    await require("./db/init")();
     app.listen(PORT, () => console.log(`Backend on http://localhost:${PORT}`));
-  })
-  .catch((err) => {
-    console.error("MySQL connection failed:", err.message);
+  } catch (err) {
+    console.error("Startup failed:", err.message);
     process.exit(1);
-  });
+  }
+}
+
+start();

package/templates/{fullstack → base}/frontend/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "__PROJECT_NAME__-frontend",
+  "name": "__PROJECT_TYPE__-frontend",
   "private": true,
   "type": "module",
   "scripts": {

package/templates/{fullstack → base}/frontend/src/App.jsx

@@ -16,7 +16,7 @@ function Guest({ children }) {
   return user ? <Navigate to="/dashboard" /> : children;
 }
 
-function App() {
+export default function App() {
   return (
     <BrowserRouter>
       <AuthProvider>
@@ -30,5 +30,3 @@ function App() {
     </BrowserRouter>
   );
 }
-
-export default App;

package/templates/{fullstack → base}/frontend/src/context/AuthContext.jsx

@@ -8,10 +8,7 @@ export function AuthProvider({ children }) {
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    if (!token) {
-      setLoading(false);
-      return;
-    }
+    if (!token) { setLoading(false); return; }
     fetch("/api/auth/me", {
       headers: { Authorization: `Bearer ${token}` },
     })
@@ -23,17 +20,8 @@ export function AuthProvider({ children }) {
       .finally(() => setLoading(false));
   }, [token]);
 
-  const login = (t, u) => {
-    localStorage.setItem("token", t);
-    setToken(t);
-    setUser(u);
-  };
-
-  const logout = () => {
-    localStorage.removeItem("token");
-    setToken(null);
-    setUser(null);
-  };
+  const login = (t, u) => { localStorage.setItem("token", t); setToken(t); setUser(u); };
+  const logout = () => { localStorage.removeItem("token"); setToken(null); setUser(null); };
 
   return (
     <AuthContext.Provider value={{ user, token, loading, login, logout }}>

package/templates/types/hotel/backend/db/init.js

@@ -0,0 +1,44 @@
+const db = require("../config/db");
+
+module.exports = async function init() {
+  await db.query(`
+    CREATE TABLE IF NOT EXISTS users (
+      id INT AUTO_INCREMENT PRIMARY KEY,
+      name VARCHAR(100) NOT NULL,
+      email VARCHAR(100) NOT NULL UNIQUE,
+      password VARCHAR(255) DEFAULT '',
+      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+    )
+  `);
+  await db.query(`
+    CREATE TABLE IF NOT EXISTS rooms (
+      id INT AUTO_INCREMENT PRIMARY KEY,
+      number VARCHAR(10) NOT NULL UNIQUE,
+      type VARCHAR(50) NOT NULL DEFAULT 'standard',
+      price DECIMAL(10,2) NOT NULL DEFAULT 0,
+      capacity INT NOT NULL DEFAULT 2,
+      status VARCHAR(20) NOT NULL DEFAULT 'available',
+      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+    )
+  `);
+  await db.query(`
+    CREATE TABLE IF NOT EXISTS reservations (
+      id INT AUTO_INCREMENT PRIMARY KEY,
+      guest_name VARCHAR(100) NOT NULL,
+      guest_email VARCHAR(100) NOT NULL,
+      guest_phone VARCHAR(20) DEFAULT '',
+      room_id INT NOT NULL,
+      check_in DATE NOT NULL,
+      check_out DATE NOT NULL,
+      status VARCHAR(20) NOT NULL DEFAULT 'confirmed',
+      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+      FOREIGN KEY (room_id) REFERENCES rooms(id) ON DELETE CASCADE
+    )
+  `);
+  const [rows] = await db.query("SELECT COUNT(*) as c FROM rooms");
+  if (rows[0].c === 0) {
+    await db.query("INSERT INTO rooms (number, type, price, capacity) VALUES ('101', 'standard', 80, 2), ('102', 'standard', 80, 2), ('201', 'deluxe', 150, 3), ('202', 'deluxe', 150, 3), ('301', 'suite', 250, 4)");
+    console.log("Sample rooms created");
+  }
+  console.log("Hotel tables initialized");
+};

package/templates/types/hotel/backend/routes/api.js

@@ -0,0 +1,61 @@
+const router = require("express").Router();
+const db = require("../config/db");
+const authenticate = require("../middleware/auth");
+
+router.get("/rooms", authenticate, async (req, res) => {
+  const [rows] = await db.query("SELECT * FROM rooms ORDER BY number");
+  res.json(rows);
+});
+
+router.post("/rooms", authenticate, async (req, res) => {
+  const { number, type, price, capacity } = req.body;
+  try {
+    const [r] = await db.query("INSERT INTO rooms (number, type, price, capacity) VALUES (?, ?, ?, ?)", [number, type || "standard", price || 0, capacity || 2]);
+    res.status(201).json({ id: r.insertId, number, type: type || "standard", price: price || 0, capacity: capacity || 2, status: "available" });
+  } catch (err) {
+    if (err.code === "ER_DUP_ENTRY") return res.status(409).json({ error: "Room number exists" });
+    res.status(500).json({ error: err.message });
+  }
+});
+
+router.put("/rooms/:id", authenticate, async (req, res) => {
+  const { number, type, price, capacity, status } = req.body;
+  await db.query("UPDATE rooms SET number=?, type=?, price=?, capacity=?, status=? WHERE id=?", [number, type, price, capacity, status, req.params.id]);
+  res.json({ id: parseInt(req.params.id), number, type, price, capacity, status });
+});
+
+router.delete("/rooms/:id", authenticate, async (req, res) => {
+  await db.query("DELETE FROM rooms WHERE id=?", [req.params.id]);
+  res.json({ message: "Room deleted" });
+});
+
+router.get("/reservations", authenticate, async (req, res) => {
+  const [rows] = await db.query("SELECT r.*, rm.number as room_number, rm.type as room_type FROM reservations r JOIN rooms rm ON r.room_id = rm.id ORDER BY r.check_in DESC");
+  res.json(rows);
+});
+
+router.post("/reservations", authenticate, async (req, res) => {
+  const { guest_name, guest_email, guest_phone, room_id, check_in, check_out } = req.body;
+  const [r] = await db.query("INSERT INTO reservations (guest_name, guest_email, guest_phone, room_id, check_in, check_out) VALUES (?, ?, ?, ?, ?, ?)", [guest_name, guest_email, guest_phone || "", room_id, check_in, check_out]);
+  await db.query("UPDATE rooms SET status='occupied' WHERE id=?", [room_id]);
+  res.status(201).json({ id: r.insertId, guest_name, guest_email, room_id, check_in, check_out, status: "confirmed" });
+});
+
+router.put("/reservations/:id", authenticate, async (req, res) => {
+  const { guest_name, guest_email, guest_phone, check_in, check_out, status } = req.body;
+  await db.query("UPDATE reservations SET guest_name=?, guest_email=?, guest_phone=?, check_in=?, check_out=?, status=? WHERE id=?", [guest_name, guest_email, guest_phone, check_in, check_out, status, req.params.id]);
+  if (status === "cancelled" || status === "checked_out") {
+    const [prev] = await db.query("SELECT room_id FROM reservations WHERE id=?", [req.params.id]);
+    if (prev.length) await db.query("UPDATE rooms SET status='available' WHERE id=?", [prev[0].room_id]);
+  }
+  res.json({ id: parseInt(req.params.id), guest_name, guest_email, check_in, check_out, status });
+});
+
+router.delete("/reservations/:id", authenticate, async (req, res) => {
+  const [prev] = await db.query("SELECT room_id FROM reservations WHERE id=?", [req.params.id]);
+  await db.query("DELETE FROM reservations WHERE id=?", [req.params.id]);
+  if (prev.length) await db.query("UPDATE rooms SET status='available' WHERE id=?", [prev[0].room_id]);
+  res.json({ message: "Reservation deleted" });
+});
+
+module.exports = router;

package/templates/types/hotel/frontend/src/pages/Dashboard.jsx

@@ -0,0 +1,147 @@
+import { useState, useEffect } from "react";
+import { useAuth } from "../../context/AuthContext";
+
+const token = () => localStorage.getItem("token");
+const headers = () => ({ "Content-Type": "application/json", Authorization: `Bearer ${token()}` });
+
+export default function Dashboard() {
+  const { user, logout } = useAuth();
+  const [rooms, setRooms] = useState([]);
+  const [reservations, setReservations] = useState([]);
+  const [tab, setTab] = useState("rooms");
+  const [form, setForm] = useState({ number: "", type: "standard", price: "", capacity: "2" });
+  const [resForm, setResForm] = useState({ guest_name: "", guest_email: "", guest_phone: "", room_id: "", check_in: "", check_out: "" });
+  const [editId, setEditId] = useState(null);
+
+  const fetchRooms = () => fetch("/api/rooms", { headers: headers() }).then(r => r.json()).then(setRooms);
+  const fetchReservations = () => fetch("/api/reservations", { headers: headers() }).then(r => r.json()).then(setReservations);
+
+  useEffect(() => { fetchRooms(); fetchReservations(); }, []);
+
+  const handleRoom = async (e) => {
+    e.preventDefault();
+    const method = editId ? "PUT" : "POST";
+    const url = editId ? `/api/rooms/${editId}` : "/api/rooms";
+    await fetch(url, { method, headers: headers(), body: JSON.stringify(form) });
+    setForm({ number: "", type: "standard", price: "", capacity: "2" });
+    setEditId(null);
+    fetchRooms();
+  };
+
+  const deleteRoom = async (id) => {
+    if (!confirm("Delete this room?")) return;
+    await fetch(`/api/rooms/${id}`, { method: "DELETE", headers: headers() });
+    fetchRooms();
+  };
+
+  const editRoom = (r) => { setForm({ number: r.number, type: r.type, price: r.price.toString(), capacity: r.capacity.toString() }); setEditId(r.id); setTab("rooms"); };
+
+  const handleReservation = async (e) => {
+    e.preventDefault();
+    await fetch("/api/reservations", { method: "POST", headers: headers(), body: JSON.stringify(resForm) });
+    setResForm({ guest_name: "", guest_email: "", guest_phone: "", room_id: "", check_in: "", check_out: "" });
+    fetchReservations(); fetchRooms();
+  };
+
+  const cancelReservation = async (id) => {
+    if (!confirm("Cancel this reservation?")) return;
+    await fetch(`/api/reservations/${id}`, { method: "PUT", headers: headers(), body: JSON.stringify({ status: "cancelled" }) });
+    fetchReservations(); fetchRooms();
+  };
+
+  const statusColor = (s) => ({ available: "text-green-600 bg-green-100", occupied: "text-red-600 bg-red-100", maintenance: "text-yellow-600 bg-yellow-100" }[s] || "");
+
+  return (
+    <div className="min-h-screen bg-gray-100">
+      <nav className="bg-white shadow px-6 py-3 flex justify-between items-center">
+        <h1 className="text-xl font-bold text-blue-600">Hotel Reservation</h1>
+        <div className="flex items-center gap-4">
+          <span className="text-gray-600">{user?.name}</span>
+          <button onClick={logout} className="bg-red-500 text-white px-3 py-1 rounded text-sm hover:bg-red-600">Logout</button>
+        </div>
+      </nav>
+
+      <div className="max-w-6xl mx-auto p-6">
+        <div className="flex gap-2 mb-6">
+          <button onClick={() => setTab("rooms")} className={`px-4 py-2 rounded ${tab === "rooms" ? "bg-blue-600 text-white" : "bg-white"}`}>Rooms</button>
+          <button onClick={() => setTab("reservations")} className={`px-4 py-2 rounded ${tab === "reservations" ? "bg-blue-600 text-white" : "bg-white"}`}>Reservations</button>
+          <button onClick={() => setTab("add")} className={`px-4 py-2 rounded ${tab === "add" ? "bg-blue-600 text-white" : "bg-white"}`}>+ New Room</button>
+          <button onClick={() => setTab("book")} className={`px-4 py-2 rounded ${tab === "book" ? "bg-blue-600 text-white" : "bg-white"}`}>+ Book Room</button>
+        </div>
+
+        {tab === "rooms" && (
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            {rooms.map(r => (
+              <div key={r.id} className="bg-white rounded shadow p-4">
+                <div className="flex justify-between items-start">
+                  <h3 className="text-lg font-bold">Room {r.number}</h3>
+                  <span className={`px-2 py-1 rounded text-xs font-semibold ${statusColor(r.status)}`}>{r.status}</span>
+                </div>
+                <p className="text-gray-500 text-sm">{r.type} - {r.capacity} guests</p>
+                <p className="text-xl font-bold text-blue-600 mt-2">${r.price}<span className="text-sm text-gray-500">/night</span></p>
+                <div className="flex gap-2 mt-3">
+                  <button onClick={() => editRoom(r)} className="bg-yellow-500 text-white px-3 py-1 rounded text-xs hover:bg-yellow-600">Edit</button>
+                  <button onClick={() => deleteRoom(r.id)} className="bg-red-500 text-white px-3 py-1 rounded text-xs hover:bg-red-600">Delete</button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {tab === "reservations" && (
+          <div className="bg-white rounded shadow overflow-hidden">
+            <table className="w-full">
+              <thead><tr className="border-b bg-gray-50"><th className="p-3 text-left">Guest</th><th className="p-3 text-left">Room</th><th className="p-3 text-left">Check In</th><th className="p-3 text-left">Check Out</th><th className="p-3 text-left">Status</th><th className="p-3 text-left">Action</th></tr></thead>
+              <tbody>
+                {reservations.map(r => (
+                  <tr key={r.id} className="border-b hover:bg-gray-50">
+                    <td className="p-3">{r.guest_name}<br /><span className="text-xs text-gray-500">{r.guest_email}</span></td>
+                    <td className="p-3">{r.room_number} ({r.room_type})</td>
+                    <td className="p-3">{new Date(r.check_in).toLocaleDateString()}</td>
+                    <td className="p-3">{new Date(r.check_out).toLocaleDateString()}</td>
+                    <td className="p-3"><span className={`px-2 py-1 rounded text-xs font-semibold ${statusColor(r.status) || "text-blue-600 bg-blue-100"}`}>{r.status}</span></td>
+                    <td className="p-3">{r.status === "confirmed" && <button onClick={() => cancelReservation(r.id)} className="bg-red-500 text-white px-2 py-1 rounded text-xs hover:bg-red-600">Cancel</button>}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+
+        {tab === "add" && (
+          <form onSubmit={handleRoom} className="bg-white p-6 rounded shadow max-w-lg">
+            <h2 className="text-lg font-bold mb-4">{editId ? "Edit Room" : "Add Room"}</h2>
+            <div className="grid grid-cols-2 gap-4">
+              <input className="border rounded px-3 py-2" placeholder="Room Number" value={form.number} onChange={e => setForm({ ...form, number: e.target.value })} required />
+              <select className="border rounded px-3 py-2" value={form.type} onChange={e => setForm({ ...form, type: e.target.value })}>
+                <option value="standard">Standard</option><option value="deluxe">Deluxe</option><option value="suite">Suite</option>
+              </select>
+              <input className="border rounded px-3 py-2" type="number" placeholder="Price/night" value={form.price} onChange={e => setForm({ ...form, price: e.target.value })} required />
+              <input className="border rounded px-3 py-2" type="number" placeholder="Capacity" value={form.capacity} onChange={e => setForm({ ...form, capacity: e.target.value })} required />
+            </div>
+            <button className="bg-blue-600 text-white rounded px-4 py-2 mt-4 hover:bg-blue-700">{editId ? "Update" : "Add"} Room</button>
+            {editId && <button type="button" onClick={() => { setEditId(null); setForm({ number: "", type: "standard", price: "", capacity: "2" }); }} className="ml-2 bg-gray-500 text-white rounded px-4 py-2 mt-4 hover:bg-gray-600">Cancel</button>}
+          </form>
+        )}
+
+        {tab === "book" && (
+          <form onSubmit={handleReservation} className="bg-white p-6 rounded shadow max-w-lg">
+            <h2 className="text-lg font-bold mb-4">Book a Room</h2>
+            <div className="grid grid-cols-2 gap-4">
+              <input className="border rounded px-3 py-2 col-span-2" placeholder="Guest Name" value={resForm.guest_name} onChange={e => setResForm({ ...resForm, guest_name: e.target.value })} required />
+              <input className="border rounded px-3 py-2" type="email" placeholder="Guest Email" value={resForm.guest_email} onChange={e => setResForm({ ...resForm, guest_email: e.target.value })} required />
+              <input className="border rounded px-3 py-2" placeholder="Phone" value={resForm.guest_phone} onChange={e => setResForm({ ...resForm, guest_phone: e.target.value })} />
+              <select className="border rounded px-3 py-2" value={resForm.room_id} onChange={e => setResForm({ ...resForm, room_id: e.target.value })} required>
+                <option value="">Select Room</option>
+                {rooms.filter(r => r.status === "available").map(r => <option key={r.id} value={r.id}>Room {r.number} - ${r.price}/night</option>)}
+              </select>
+              <input className="border rounded px-3 py-2" type="date" placeholder="Check In" value={resForm.check_in} onChange={e => setResForm({ ...resForm, check_in: e.target.value })} required />
+              <input className="border rounded px-3 py-2" type="date" placeholder="Check Out" value={resForm.check_out} onChange={e => setResForm({ ...resForm, check_out: e.target.value })} required />
+            </div>
+            <button className="bg-green-600 text-white rounded px-4 py-2 mt-4 hover:bg-green-700">Book Now</button>
+          </form>
+        )}
+      </div>
+    </div>
+  );
+}