tss-stack 1.1.2 → 1.2.1

package/README.md

@@ -115,13 +115,32 @@ SmartPark/
 - **`routes/auth.js`** — Register, login, logout endpoints (if auth selected)
 - **`.env.example`** — Template for your database credentials
 
-### Frontend (`frontend-project/`)
-
-- **`src/api/axios.js`** — Pre-configured Axios instance pointed at your backend, `withCredentials` enabled
-- **`src/pages/*.jsx`** — One page per table with form, table display, and only the action buttons matching your selected operations
-- **`src/pages/Login.jsx`** — Login form wired to `/auth/login` (if auth selected)
+## Frontend (`frontend-project/`)
+
+- **`vite.config.js`** — Vite configuration with React plugin
+- **`tailwind.config.js`** — Tailwind CSS configuration
+- **`postcss.config.js`** — PostCSS plugins (Tailwind + Autoprefixer)
+- **`index.html`** — Entry HTML file (required by Vite)
+- **`.env.local.example`** — Environment template for API URL
+- **`.gitignore`** — Git ignore rules for frontend
+- **`src/api/axios.js`** — Pre-configured Axios instance with environment-based URL
+- **`src/pages/*.jsx`** — One page per table with:
+  - Error handling and error messages
+  - Loading states on form submission
+  - Success notifications
+  - Automatic data fetching on page load
+  - Complete CRUD operations (only those selected)
+- **`src/pages/Home.jsx`** — Landing page
+- **`src/pages/Login.jsx`** — Login/Register page with toggle (if auth selected)
 - **`src/pages/Reports.jsx`** — Reports page scaffold (if selected)
-- **`src/App.jsx`** — React Router setup with Navbar and all routes configured
+- **`src/components/PrivateRoute.jsx`** — Route protection component (if auth selected)
+- **`src/context/AuthContext.jsx`** — Auth provider with session checking (if auth selected)
+- **`src/App.jsx`** — React Router setup with:
+  - Protected routes (if auth selected)
+  - Navbar with conditional logout button
+  - Auth context provider wrapping app
+- **`src/main.jsx`** — React entry point
+- **`src/index.css`** — Tailwind CSS imports
 
 ---
 
@@ -133,7 +152,7 @@ SmartPark/
 mysql -u root -p < my-app/backend-project/config/database.sql
 ```
 
-### 2. Configure environment
+### 2. Configure backend environment
 
 ```bash
 cd my-app/backend-project
@@ -148,31 +167,101 @@ DB_USER=root
 DB_PASSWORD=your_password
 DB_NAME=smartpark_db
 PORT=5000
-SESSION_SECRET=any_random_string_here
+SESSION_SECRET=your_random_secret_string_here
+CLIENT_URL=http://localhost:5173
+NODE_ENV=development
 ```
 
-### 3. Start the backend
+### 3. Configure frontend environment (optional)
 
 ```bash
+cd ../frontend-project
+cp .env.local.example .env.local
+```
+
+By default, the frontend connects to `http://localhost:5000`. Override in `.env.local` if needed:
+
+```env
+VITE_API_URL=http://your-api-url:5000
+```
+
+### 4. Start the backend
+
+```bash
+cd my-app/backend-project
+npm install
 npm run dev
 ```
 
-### 4. Start the frontend
+Server runs on `http://localhost:5000`
+
+### 5. Start the frontend
 
 ```bash
 cd ../frontend-project
+npm install
 npm run dev
 ```
 
-### 5. Open the app
+Frontend runs on `http://localhost:5173`
 
-```
-http://localhost:5173
-```
+### 6. Open in browser
+
+Visit `http://localhost:5173`
+
+If auth is enabled, register or login first. Then access your data tables.
 
 ---
 
-## Requirements
+## Features
+
+✅ **Authentication** (optional)
+- Login/Register with bcrypt hashing
+- Session management
+- Route protection
+- Auto session check on load
+- Logout functionality
+
+✅ **Full CRUD Interface**
+- Form validation
+- Error handling with messages
+- Success notifications
+- Loading states
+- Auto data refresh
+
+✅ **Frontend Stack**
+- React 18 + Vite
+- React Router v6
+- Tailwind CSS
+- Axios with credentials
+
+✅ **Backend Stack**
+- Express.js
+- MySQL connection pooling
+- CORS & security headers
+- Rate limiting
+- Session management
+
+✅ **Database**
+- Auto table creation
+- Timestamps (created_at, updated_at)
+- Proper SQL types
+- Auto-increment IDs
+
+---
+
+## Stack Summary
+
+| Layer | Technology |
+|---|---|
+| Runtime | Node.js |
+| Backend | Express.js |
+| Database | MySQL (mysql2) |
+| Auth | express-session + bcryptjs |
+| Frontend | React 18 + Vite |
+| CSS | Tailwind CSS |
+| HTTP | Axios |
+| Routing | React Router v6 |
 
 - Node.js 16 or higher
 - npm 7 or higher
@@ -194,44 +283,6 @@ tss-stack/
 │       └── utils.js        ← shared helpers (toPascal, toRoute, toCamel)
 └── package.json
 ```
-
----
-
-## Local Development
-
-Clone the repo and link it globally to test before publishing:
-
-```bash
-git clone https://github.com/your-username/tss-stack.git
-cd tss-stack
-npm install
-npm link
-```
-
-Now test it like a real user:
-
-```bash
-tss-stack test-project
-```
-
-When done testing:
-
-```bash
-npm unlink -g tss-stack
-```
-
----
-
-## Publishing a New Version
-
-```bash
-npm version patch   # bug fix:    1.0.0 → 1.0.1
-npm version minor   # new feature: 1.0.0 → 1.1.0
-npm version major   # breaking:   1.0.0 → 2.0.0
-
-npm publish
-```
-
 ---
 
 ## Roadmap

package/bin/cli.js

@@ -310,14 +310,26 @@ process.stdout.write("\x1Bc");
 
 async function showProjectTree(config) {
     const backendRouteFiles = [
-        config.needsAuth ? "│   ├── auth.js" : null,
-        ...config.tables.map((t) => `│   ├── ${t.name}.js`),
+        config.needsAuth ? "│   │   ├── auth.js" : null,
+        ...config.tables.map((t, i) => {
+            const isLast = i === config.tables.length - 1;
+            return `│   │   ${isLast && !config.tables.slice(i + 1).length ? "└──" : "├──"} ${t.name}.js`;
+        }),
     ].filter(Boolean);
 
+    const frontendContextFiles = config.needsAuth ? [
+        "│   │   ├── AuthContext.jsx",
+    ] : [];
+
+    const frontendComponentFiles = config.needsAuth ? [
+        "│   │   └── PrivateRoute.jsx",
+    ] : [];
+
     const frontendPageFiles = [
-        config.needsAuth ? "│   ├── Login.jsx" : null,
-        ...config.tables.map((t) => `│   ├── ${toPascal(t.name)}.jsx`),
-        config.needsReports ? "│   └── Reports.jsx" : null,
+        "│   │   ├── Home.jsx",
+        config.needsAuth ? "│   │   ├── Login.jsx" : null,
+        ...config.tables.map((t) => `│   │   ├── ${toPascal(t.name)}.jsx`),
+        config.needsReports ? "│   │   └── Reports.jsx" : null,
     ].filter(Boolean);
 
     const tree = [
@@ -328,9 +340,9 @@ async function showProjectTree(config) {
         "│   │   ├── db.js",
         "│   │   └── database.sql",
         "│   ├── middleware/",
-        config.needsAuth ? "│   │   └── auth.js" : null,
+        config.needsAuth ? "│   │   └── auth.js" : "│   │   (none)",
         "│   ├── routes/",
-        ...formatTree(backendRouteFiles).map((line) => `│   ${line}`),
+        ...backendRouteFiles,
         "│   ├── server.js",
         "│   ├── .env.example",
         "│   └── package.json",
@@ -339,10 +351,21 @@ async function showProjectTree(config) {
         "    ├── src/",
         "    │   ├── api/",
         "    │   │   └── axios.js",
+        config.needsAuth ? "    │   ├── context/" : null,
+        ...frontendContextFiles,
+        config.needsAuth ? "    │   ├── components/" : null,
+        ...frontendComponentFiles,
         "    │   ├── pages/",
-        ...formatTree(frontendPageFiles).map((line) => `    │   ${line}`),
+        ...frontendPageFiles,
         "    │   ├── App.jsx",
-        "    │   └── main.jsx",
+        "    │   ├── main.jsx",
+        "    │   └── index.css",
+        "    ├── vite.config.js",
+        "    ├── tailwind.config.js",
+        "    ├── postcss.config.js",
+        "    ├── index.html",
+        "    ├── .env.local.example",
+        "    ├── .gitignore",
         "    └── package.json",
     ].filter(Boolean);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tss-stack",
-  "version": "1.1.2",
+  "version": "1.2.1",
   "description": "Interactive full-stack Node.js + React + MySQL project generator",
   "bin": {
     "tss-stack": "bin/cli.js"

package/src/generators/backend.js

@@ -53,12 +53,25 @@ DB_USER=root
 DB_PASSWORD=your_password_here
 DB_NAME=${dbName}
 PORT=${port}
-SESSION_SECRET=change_me
+SESSION_SECRET=change_me_to_random_string
 CLIENT_URL=http://localhost:5173
 NODE_ENV=development
 `
     );
 
+    await fs.outputFile(
+        path.join(root, ".gitignore"),
+        `node_modules/
+.env
+.env.local
+*.log
+npm-debug.log*
+.DS_Store
+.idea/
+.vscode/
+`
+    );
+
     await fs.outputFile(
         path.join(root, "config", "db.js"),
         `const mysql = require("mysql2");
@@ -104,15 +117,14 @@ const bcrypt = require("bcryptjs");
 const rateLimit = require("express-rate-limit");
 const router = express.Router();
 const db = require("../config/db");
+const isAuthenticated = require("../middleware/auth");
 
 const authLimiter = rateLimit({
   windowMs: 15 * 60 * 1000,
   max: 50,
 });
 
-router.use(authLimiter);
-
-router.post("/register", async (req, res) => {
+router.post("/register", authLimiter, async (req, res) => {
   try {
     const { username, password } = req.body;
 
@@ -126,29 +138,40 @@ router.post("/register", async (req, res) => {
 
     const hash = await bcrypt.hash(password, 10);
 
-    await db.query("INSERT INTO users (username, password) VALUES (?, ?)", [username, hash]);
-
-    res.json({ message: "User registered successfully" });
+    try {
+      await db.query("INSERT INTO users (username, password) VALUES (?, ?)", [username, hash]);
+      res.json({ message: "User registered successfully" });
+    } catch (err) {
+      if (err.code === "ER_DUP_ENTRY") {
+        return res.status(400).json({ message: "Username already exists" });
+      }
+      throw err;
+    }
   } catch (err) {
     res.status(500).json({ error: err.message });
   }
 });
 
-router.post("/login", async (req, res) => {
+router.post("/login", authLimiter, async (req, res) => {
   try {
     const { username, password } = req.body;
 
-    const [results] = await db.query("SELECT * FROM users WHERE username = ?", [username]);
+    if (!username || !password) {
+      return res.status(400).json({ message: "Username and password required" });
+    }
+
+    const [results] = await db.query("SELECT id, username FROM users WHERE username = ? LIMIT 1", [username]);
 
     if (results.length === 0) {
-      return res.status(401).json({ message: "User not found" });
+      return res.status(401).json({ message: "Invalid credentials" });
     }
 
     const user = results[0];
-    const passwordMatch = await bcrypt.compare(password, user.password);
+    const [userWithPassword] = await db.query("SELECT password FROM users WHERE id = ?", [user.id]);
+    const passwordMatch = await bcrypt.compare(password, userWithPassword[0].password);
 
     if (!passwordMatch) {
-      return res.status(401).json({ message: "Wrong password" });
+      return res.status(401).json({ message: "Invalid credentials" });
     }
 
     req.session.user = {
@@ -165,8 +188,13 @@ router.post("/login", async (req, res) => {
   }
 });
 
+router.get("/me", isAuthenticated, (req, res) => {
+  res.json(req.session.user);
+});
+
 router.post("/logout", (req, res) => {
-  req.session.destroy(() => {
+  req.session.destroy((err) => {
+    if (err) return res.status(500).json({ error: "Logout failed" });
     res.json({ message: "Logged out" });
   });
 });

package/src/generators/database.js

@@ -38,7 +38,8 @@ CREATE TABLE IF NOT EXISTS ${escapeSqlIdentifier(table.name)} (
 `;
         }
 
-        sql += `  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+        sql += `  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
 );
 
 `;

package/src/generators/frontend.js

@@ -3,51 +3,128 @@ const path = require("path");
 const { toPascal, toRoute } = require("./utils");
 
 function generateFrontend(config) {
-    const { projectName, tables, needsAuth, needsReports, targetDir } = config;
-    const root = path.join(targetDir, "frontend-project");
+  const { projectName, tables, needsAuth, needsReports, targetDir } = config;
+  const root = path.join(targetDir, "frontend-project");
+
+  fs.outputFileSync(
+    path.join(root, "package.json"),
+    JSON.stringify(
+      {
+        name: "frontend-project",
+        version: "1.0.0",
+        scripts: { dev: "vite", build: "vite build" },
+        dependencies: {
+          react: "^18.2.0",
+          "react-dom": "^18.2.0",
+          "react-router-dom": "^6.18.0",
+          axios: "^1.6.0",
+        },
+        devDependencies: {
+          vite: "^5.0.0",
+          "@vitejs/plugin-react": "^4.2.0",
+          tailwindcss: "^3.3.0",
+          autoprefixer: "^10.4.16",
+          postcss: "^8.4.31",
+        },
+      },
+      null,
+      2
+    )
+  );
 
-    fs.outputFileSync(
-        path.join(root, "package.json"),
-        JSON.stringify(
-            {
-                name: "frontend-project",
-                version: "1.0.0",
-                scripts: { dev: "vite", build: "vite build" },
-                dependencies: {
-                    react: "^18.2.0",
-                    "react-dom": "^18.2.0",
-                    "react-router-dom": "^6.18.0",
-                    axios: "^1.6.0",
-                },
-                devDependencies: {
-                    vite: "^5.0.0",
-                    "@vitejs/plugin-react": "^4.2.0",
-                    tailwindcss: "^3.3.0",
-                    autoprefixer: "^10.4.16",
-                    postcss: "^8.4.31",
-                },
-            },
-            null,
-            2
-        )
-    );
+  fs.outputFileSync(
+    path.join(root, "vite.config.js"),
+    `import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 5173,
+    strictPort: false,
+  },
+});
+`
+  );
 
-    fs.outputFileSync(
-        path.join(root, "src", "api", "axios.js"),
-        `import axios from "axios";
+  fs.outputFileSync(
+    path.join(root, "tailwind.config.js"),
+    `export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,jsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+`
+  );
+
+  fs.outputFileSync(
+    path.join(root, "postcss.config.js"),
+    `export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+`
+  );
+
+  fs.outputFileSync(
+    path.join(root, "index.html"),
+    `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${projectName}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"><\/script>
+  </body>
+</html>
+`
+  );
+
+  fs.outputFileSync(
+    path.join(root, ".env.local.example"),
+    `VITE_API_URL=http://localhost:5000
+`
+  );
+
+  fs.outputFileSync(
+    path.join(root, ".gitignore"),
+    `node_modules/
+dist/
+.env
+.env.local
+*.log
+.DS_Store
+.idea/
+.vscode/
+`
+  );
+
+  fs.outputFileSync(
+    path.join(root, "src", "api", "axios.js"),
+    `import axios from "axios";
 
 const API = axios.create({
-  baseURL: "http://localhost:5000",
+  baseURL: import.meta.env.VITE_API_URL || "http://localhost:5000",
   withCredentials: true,
 });
 
 export default API;
 `
-    );
+  );
 
-    fs.outputFileSync(
-        path.join(root, "src", "main.jsx"),
-        `import React from "react";
+  fs.outputFileSync(
+    path.join(root, "src", "main.jsx"),
+    `import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
 import "./index.css";
@@ -58,46 +135,115 @@ ReactDOM.createRoot(document.getElementById("root")).render(
   </React.StrictMode>
 );
 `
-    );
+  );
 
-    fs.outputFileSync(
-        path.join(root, "src", "index.css"),
-        `@tailwind base;
+  fs.outputFileSync(
+    path.join(root, "src", "index.css"),
+    `@tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+body {
+  font-family: system-ui, -apple-system, sans-serif;
+}
+`
+  );
+
+  if (needsAuth) {
+    fs.outputFileSync(
+      path.join(root, "src", "context", "AuthContext.jsx"),
+      `import React, { createContext, useState, useEffect } from "react";
+import API from "../api/axios";
+
+export const AuthContext = createContext();
+
+export function AuthProvider({ children }) {
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const checkAuth = async () => {
+      try {
+        const res = await API.get("/auth/me");
+        setUser(res.data);
+      } catch {
+        setUser(null);
+      } finally {
+        setLoading(false);
+      }
+    };
+    checkAuth();
+  }, []);
+
+  return (
+    <AuthContext.Provider value={{ user, setUser, loading }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+`
+    );
+
+    fs.outputFileSync(
+      path.join(root, "src", "components", "PrivateRoute.jsx"),
+      `import { Navigate } from "react-router-dom";
+import { useContext } from "react";
+import { AuthContext } from "../context/AuthContext";
+
+export default function PrivateRoute({ children }) {
+  const { user, loading } = useContext(AuthContext);
+
+  if (loading) return <div className="p-6">Loading...</div>;
+  return user ? children : <Navigate to="/login" />;
+}
 `
     );
+  }
 
-    for (const table of tables) {
-        const name = toPascal(table.name);
-        const route = toRoute(table.name);
-        const fields = table.fields;
-        const ops = table.operations;
-
-        const stateFields = fields.map((f) => `    ${f}: ""`).join(",\n");
-        const formReset = fields.map((f) => `${f}: ""`).join(", ");
-        const editSet = fields.map((f) => `${f}: item.${f}`).join(", ");
-        const inputs = fields
-            .map(
-                (f) => `        <input
+  fs.outputFileSync(
+    path.join(root, "src", "pages", "Home.jsx"),
+    `export default function Home() {
+  return (
+    <div className="p-6 max-w-2xl">
+      <h1 className="text-3xl font-bold mb-4">Welcome</h1>
+      <p className="text-gray-600">Select an option from the navigation above to get started.</p>
+    </div>
+  );
+}
+`
+  );
+
+  for (const table of tables) {
+    const name = toPascal(table.name);
+    const route = toRoute(table.name);
+    const fields = table.fields;
+    const ops = table.operations;
+
+    const stateFields = fields.map((f) => `    ${f}: ""`).join(",\n");
+    const formReset = fields.map((f) => `${f}: ""`).join(", ");
+    const editSet = fields.map((f) => `${f}: item.${f}`).join(", ");
+    const inputs = fields
+      .map(
+        (f) => `        <input
           type="text"
           placeholder="${f}"
           value={form.${f}}
           onChange={(e) => setForm({ ...form, ${f}: e.target.value })}
           className="border p-2 rounded w-full"
+          required
         />`
-            )
-            .join("\n");
+      )
+      .join("\n");
 
-        const tableHeaders = ["id", ...fields, "created_at"]
-            .map((f) => `          <th className="border px-4 py-2">${f}</th>`)
-            .join("\n");
+    const tableHeaders = ["id", ...fields, "created_at"]
+      .map((f) => `          <th className="border px-4 py-2">${f}</th>`)
+      .join("\n");
 
-        const tableRow = ["id", ...fields, "created_at"]
-            .map((f) => `          <td className="border px-4 py-2">{item.${f}}</td>`)
-            .join("\n");
+    const tableRow = ["id", ...fields, "created_at"]
+      .map((f) => `          <td className="border px-4 py-2">{item.${f}}</td>`)
+      .join("\n");
 
-        let page = `import { useState, useEffect } from "react";
+    let page = `import { useState, useEffect } from "react";
 import API from "../api/axios";
 
 export default function ${name}() {
@@ -106,10 +252,18 @@ export default function ${name}() {
 ${stateFields}
   });
 ${ops.includes("update") ? "  const [editId, setEditId] = useState(null);" : ""}
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState("");
 
   const fetchAll = async () => {
-    const res = await API.get("/${route}");
-    setItems(res.data);
+    try {
+      setError("");
+      const res = await API.get("/${route}");
+      setItems(res.data);
+    } catch (err) {
+      setError(err.response?.data?.error || "Failed to load data");
+    }
   };
 
   useEffect(() => {
@@ -118,66 +272,98 @@ ${ops.includes("update") ? "  const [editId, setEditId] = useState(null);" : ""}
 
 `;
 
-        if (ops.includes("insert")) {
-            page += `  const handleSubmit = async (e) => {
+    if (ops.includes("insert")) {
+      page += `  const handleSubmit = async (e) => {
     e.preventDefault();
-${ops.includes("update") ? `    if (editId) {
-      await API.put(\`/${route}/\${editId}\`, form);
-      setEditId(null);
-    } else {
-      await API.post("/${route}", form);
-    }` : `    await API.post("/${route}", form);`}
-    setForm({ ${formReset} });
-    fetchAll();
+    setLoading(true);
+    setError("");
+    setSuccess("");
+    try {
+${ops.includes("update") ? `      if (editId) {
+        await API.put(\`/${route}/\${editId}\`, form);
+        setSuccess("Updated successfully");
+        setEditId(null);
+      } else {
+        await API.post("/${route}", form);
+        setSuccess("Created successfully");
+      }` : `      await API.post("/${route}", form);
+      setSuccess("Created successfully");`}
+      setForm({ ${formReset} });
+      fetchAll();
+    } catch (err) {
+      setError(err.response?.data?.error || "Operation failed");
+    } finally {
+      setLoading(false);
+    }
   };
 
 `;
-        }
+    }
 
-        if (ops.includes("delete")) {
-            page += `  const handleDelete = async (id) => {
-    if (!window.confirm("Are you sure you want to delete this?")) return;
-    await API.delete(\`/${route}/\${id}\`);
-    fetchAll();
+    if (ops.includes("delete")) {
+      page += `  const handleDelete = async (id) => {
+    if (!window.confirm("Are you sure?")) return;
+    setLoading(true);
+    setError("");
+    try {
+      await API.delete(\`/${route}/\${id}\`);
+      setSuccess("Deleted successfully");
+      fetchAll();
+    } catch (err) {
+      setError(err.response?.data?.error || "Delete failed");
+    } finally {
+      setLoading(false);
+    }
   };
 
 `;
-        }
+    }
 
-        if (ops.includes("update")) {
-            page += `  const handleEdit = (item) => {
+    if (ops.includes("update")) {
+      page += `  const handleEdit = (item) => {
     setEditId(item.id);
     setForm({ ${editSet} });
   };
 
+  const handleCancel = () => {
+    setEditId(null);
+    setForm({ ${formReset} });
+  };
+
 `;
-        }
+    }
 
-        page += `  return (
+    page += `  return (
     <div className="p-6">
       <h1 className="text-2xl font-bold mb-4">${name}</h1>
 
-      <form onSubmit={handleSubmit} className="flex flex-col gap-3 mb-6 max-w-md">
+      {error && <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-2 rounded mb-4">{error}</div>}
+      {success && <div className="bg-green-100 border border-green-400 text-green-700 px-4 py-2 rounded mb-4">{success}</div>}
+
+${ops.includes("insert") ? `      <form onSubmit={handleSubmit} className="flex flex-col gap-3 mb-6 max-w-md">
 ${inputs}
-        <button type="submit" className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
-          ${ops.includes("update") ? 'editId ? "Update" : "Add"' : '"Add"'}
-        </button>
-      </form>
+        <div className="flex gap-2">
+          <button type="submit" disabled={loading} className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 disabled:opacity-50">
+            {loading ? "Processing..." : (${ops.includes("update") ? 'editId ? "Update" : "Add"' : '"Add"'})}
+          </button>
+${ops.includes("update") ? '          {editId && <button type="button" onClick={handleCancel} className="bg-gray-400 text-white px-4 py-2 rounded hover:bg-gray-500">Cancel</button>}' : ""}
+        </div>
+      </form>` : ""}
 
       <table className="w-full border-collapse text-sm">
         <thead className="bg-gray-100">
           <tr>
 ${tableHeaders}
-${ops.includes("update") || ops.includes("delete") ? '          <th className="border px-4 py-2">Actions</th>' : ""}
+${(ops.includes("update") || ops.includes("delete")) ? '          <th className="border px-4 py-2">Actions</th>' : ""}
           </tr>
         </thead>
         <tbody>
           {items.map((item) => (
             <tr key={item.id} className="hover:bg-gray-50">
 ${tableRow}
-${ops.includes("update") || ops.includes("delete") ? `          <td className="border px-4 py-2 space-x-2">
+${(ops.includes("update") || ops.includes("delete")) ? `          <td className="border px-4 py-2 space-x-2">
 ${ops.includes("update") ? '            <button onClick={() => handleEdit(item)} className="text-blue-600 hover:underline">Edit</button>' : ""}
-${ops.includes("delete") ? '            <button onClick={() => handleDelete(item.id)} className="text-red-600 hover:underline">Delete</button>' : ""}
+${ops.includes("delete") ? '            <button onClick={() => handleDelete(item.id)} disabled={loading} className="text-red-600 hover:underline disabled:opacity-50">Delete</button>' : ""}
           </td>` : ""}
             </tr>
           ))}
@@ -188,127 +374,168 @@ ${ops.includes("delete") ? '            <button onClick={() => handleDelete(item
 }
 `;
 
-        fs.outputFileSync(path.join(root, "src", "pages", `${name}.jsx`), page);
-        console.log(`  [✓] pages/${name}.jsx`);
-    }
+    fs.outputFileSync(path.join(root, "src", "pages", `${name}.jsx`), page);
+    console.log(`  [✓] pages/${name}.jsx`);
+  }
 
-    if (needsAuth) {
-        fs.outputFileSync(
-            path.join(root, "src", "pages", "Login.jsx"),
-            `import { useState } from "react";
+  if (needsAuth) {
+    fs.outputFileSync(
+      path.join(root, "src", "pages", "Login.jsx"),
+      `import { useState, useContext } from "react";
 import { useNavigate } from "react-router-dom";
+import { AuthContext } from "../context/AuthContext";
 import API from "../api/axios";
 
 export default function Login() {
   const navigate = useNavigate();
+  const { setUser } = useContext(AuthContext);
   const [form, setForm] = useState({ username: "", password: "" });
   const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [isRegistering, setIsRegistering] = useState(false);
 
-  const handleLogin = async (e) => {
+  const handleSubmit = async (e) => {
     e.preventDefault();
     setError("");
+    setLoading(true);
     try {
-      await API.post("/auth/login", form);
+      const endpoint = isRegistering ? "/auth/register" : "/auth/login";
+      const res = await API.post(endpoint, form);
+      setUser(res.data.user);
       navigate("/");
     } catch (err) {
-      setError(err.response?.data?.message || "Login failed");
+      setError(err.response?.data?.message || (isRegistering ? "Registration failed" : "Login failed"));
+    } finally {
+      setLoading(false);
     }
   };
 
   return (
-    <div className="p-6 max-w-md">
-      <h1 className="text-2xl font-bold mb-4">Login</h1>
-      <form onSubmit={handleLogin} className="flex flex-col gap-3">
-        <input
-          className="border p-2 rounded"
-          placeholder="Username"
-          value={form.username}
-          onChange={(e) => setForm({ ...form, username: e.target.value })}
-        />
-        <input
-          className="border p-2 rounded"
-          type="password"
-          placeholder="Password"
-          value={form.password}
-          onChange={(e) => setForm({ ...form, password: e.target.value })}
-        />
-        {error ? <p className="text-red-600">{error}</p> : null}
-        <button className="bg-blue-600 text-white px-4 py-2 rounded">Login</button>
-      </form>
+    <div className="flex items-center justify-center min-h-screen bg-gray-100">
+      <div className="bg-white p-8 rounded shadow-md max-w-md w-full">
+        <h1 className="text-2xl font-bold mb-4">{isRegistering ? "Register" : "Login"}</h1>
+        {error && <p className="text-red-600 mb-3">{error}</p>}
+        <form onSubmit={handleSubmit} className="flex flex-col gap-3">
+          <input
+            className="border p-2 rounded"
+            placeholder="Username"
+            value={form.username}
+            onChange={(e) => setForm({ ...form, username: e.target.value })}
+            required
+          />
+          <input
+            className="border p-2 rounded"
+            type="password"
+            placeholder="Password"
+            value={form.password}
+            onChange={(e) => setForm({ ...form, password: e.target.value })}
+            required
+          />
+          <button type="submit" disabled={loading} className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 disabled:opacity-50">
+            {loading ? "Processing..." : isRegistering ? "Register" : "Login"}
+          </button>
+        </form>
+        <button
+          type="button"
+          onClick={() => setIsRegistering(!isRegistering)}
+          className="text-blue-600 hover:underline mt-3 w-full text-sm"
+        >
+          {isRegistering ? "Have an account? Login" : "Need an account? Register"}
+        </button>
+      </div>
     </div>
   );
 }
 `
-        );
-    }
+    );
+  }
 
-    if (needsReports) {
-        fs.outputFileSync(
-            path.join(root, "src", "pages", "Reports.jsx"),
-            `export default function Reports() {
+  if (needsReports) {
+    fs.outputFileSync(
+      path.join(root, "src", "pages", "Reports.jsx"),
+      `export default function Reports() {
   return (
     <div className="p-6">
       <h1 className="text-2xl font-bold mb-4">Reports</h1>
-      <p>Build your reports dashboard here.</p>
+      <p className="text-gray-600">Build your reports dashboard here. Add charts, analytics, and visualizations.</p>
     </div>
   );
 }
 `
-        );
-    }
-
-    const imports = tables
-        .map((t) => `import ${toPascal(t.name)} from "./pages/${toPascal(t.name)}";`)
-        .join("\n");
-
-    const routes = tables
-        .map((t) => `          <Route path="/${toRoute(t.name)}" element={<${toPascal(t.name)} />} />`)
-        .join("\n");
-
-    const navLinks = tables
-        .map((t) => `          <Link to="/${toRoute(t.name)}" className="hover:underline">${toPascal(t.name)}</Link>`)
-        .join("\n");
-
-    const app = `import { BrowserRouter, Routes, Route, Link, useNavigate } from "react-router-dom";
+    );
+  }
+
+  const imports = tables
+    .map((t) => `import ${toPascal(t.name)} from "./pages/${toPascal(t.name)}";`)
+    .join("\n");
+
+  const routes = tables
+    .map((t) => {
+      const route = `<Route path="/${toRoute(t.name)}" element={<${toPascal(t.name)} />} />`;
+      return needsAuth
+        ? `          <Route path="/${toRoute(t.name)}" element={<PrivateRoute><${toPascal(t.name)} /></PrivateRoute>} />`
+        : `          ${route}`;
+    })
+    .join("\n");
+
+  const navLinks = tables
+    .map((t) => `          <Link to="/${toRoute(t.name)}" className="hover:underline">${toPascal(t.name)}</Link>`)
+    .join("\n");
+
+  let app = `import { BrowserRouter, Routes, Route, Link, useNavigate } from "react-router-dom";
 ${imports}
-${needsAuth ? 'import Login from "./pages/Login";' : ""}
+${needsAuth ? 'import Login from "./pages/Login";\nimport PrivateRoute from "./components/PrivateRoute";\nimport { AuthContext, AuthProvider } from "./context/AuthContext";\nimport { useContext } from "react";' : ""}
 ${needsReports ? 'import Reports from "./pages/Reports";' : ""}
+import Home from "./pages/Home";
 import API from "./api/axios";
 
 function Navbar() {
   const navigate = useNavigate();
+${needsAuth ? '  const { user } = useContext(AuthContext);' : ""}
 
   const logout = async () => {
-    await API.post("/auth/logout");
-    navigate("/login");
+    try {
+      await API.post("/auth/logout");
+      navigate("/login");
+      window.location.reload();
+    } catch (err) {
+      console.error("Logout failed:", err);
+    }
   };
 
   return (
     <nav className="bg-blue-700 text-white px-6 py-3 flex gap-6 items-center">
-      <span className="font-bold text-lg">${projectName}</span>
+      <span className="font-bold text-lg"><Link to="/" className="hover:opacity-80">${projectName}</Link></span>
 ${navLinks}
 ${needsReports ? '      <Link to="/reports" className="hover:underline">Reports</Link>' : ""}
-${needsAuth ? '      <button onClick={logout} className="ml-auto hover:underline">Logout</button>' : ""}
+${needsAuth ? '      {user && <button onClick={logout} className="ml-auto hover:underline">Logout ({user.username})</button>}' : ""}
     </nav>
   );
 }
 
-export default function App() {
+function AppRoutes() {
   return (
-    <BrowserRouter>
+    <>
       <Navbar />
       <Routes>
 ${needsAuth ? '        <Route path="/login" element={<Login />} />' : ""}
+        <Route path="/" element={<Home />} />
 ${routes}
-${needsReports ? '        <Route path="/reports" element={<Reports />} />' : ""}
+${needsReports ? (needsAuth ? '        <Route path="/reports" element={<PrivateRoute><Reports /></PrivateRoute>} />' : '        <Route path="/reports" element={<Reports />} />') : ""}
       </Routes>
-    </BrowserRouter>
+    </>
+  );
+}
+
+export default function App() {
+  return (
+${needsAuth ? '    <AuthProvider>\n      <BrowserRouter>\n        <AppRoutes />\n      </BrowserRouter>\n    </AuthProvider>' : '    <BrowserRouter>\n      <AppRoutes />\n    </BrowserRouter>'}
   );
 }
 `;
 
-    fs.outputFileSync(path.join(root, "src", "App.jsx"), app);
-    console.log("  [✓] App.jsx");
+  fs.outputFileSync(path.join(root, "src", "App.jsx"), app);
+  console.log("  [✓] App.jsx");
 }
 
 module.exports = { generateFrontend };