npm - create-batman - Versions diffs - 1.0.2 - Mend

create-batman 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (55) hide show

package/README.md +27 -0
package/bin/index.js +485 -0
package/package.json +30 -0
package/templates/mysql/client/index.html +12 -0
package/templates/mysql/client/package.json +21 -0
package/templates/mysql/client/postcss.config.js +6 -0
package/templates/mysql/client/src/App.jsx +5 -0
package/templates/mysql/client/src/api/client.js +6 -0
package/templates/mysql/client/src/components/Navbar.jsx +75 -0
package/templates/mysql/client/src/components/ProtectedRoute.jsx +10 -0
package/templates/mysql/client/src/index.css +24 -0
package/templates/mysql/client/src/layouts/DashboardLayout.jsx +12 -0
package/templates/mysql/client/src/main.jsx +10 -0
package/templates/mysql/client/src/pages/Dashboard.jsx +44 -0
package/templates/mysql/client/src/pages/Login.jsx +121 -0
package/templates/mysql/client/src/pages/Page1.jsx +101 -0
package/templates/mysql/client/src/pages/Page2.jsx +82 -0
package/templates/mysql/client/src/pages/Page3.jsx +49 -0
package/templates/mysql/client/src/router/index.jsx +43 -0
package/templates/mysql/client/src/utils/auth.js +16 -0
package/templates/mysql/client/tailwind.config.js +15 -0
package/templates/mysql/client/vite.config.js +6 -0
package/templates/mysql/server/config/db.js +13 -0
package/templates/mysql/server/controllers/authController.js +66 -0
package/templates/mysql/server/index.js +39 -0
package/templates/mysql/server/middleware/authMiddleware.js +7 -0
package/templates/mysql/server/package.json +18 -0
package/templates/mysql/server/routes/authRoutes.js +14 -0
package/templates/sequelize/client/index.html +12 -0
package/templates/sequelize/client/package.json +21 -0
package/templates/sequelize/client/postcss.config.js +6 -0
package/templates/sequelize/client/src/App.jsx +5 -0
package/templates/sequelize/client/src/api/client.js +6 -0
package/templates/sequelize/client/src/components/Navbar.jsx +75 -0
package/templates/sequelize/client/src/components/ProtectedRoute.jsx +10 -0
package/templates/sequelize/client/src/index.css +24 -0
package/templates/sequelize/client/src/layouts/DashboardLayout.jsx +12 -0
package/templates/sequelize/client/src/main.jsx +10 -0
package/templates/sequelize/client/src/pages/Dashboard.jsx +44 -0
package/templates/sequelize/client/src/pages/Login.jsx +121 -0
package/templates/sequelize/client/src/pages/Page1.jsx +101 -0
package/templates/sequelize/client/src/pages/Page2.jsx +82 -0
package/templates/sequelize/client/src/pages/Page3.jsx +49 -0
package/templates/sequelize/client/src/router/index.jsx +43 -0
package/templates/sequelize/client/src/utils/auth.js +16 -0
package/templates/sequelize/client/tailwind.config.js +15 -0
package/templates/sequelize/client/vite.config.js +6 -0
package/templates/sequelize/server/config/db.js +13 -0
package/templates/sequelize/server/config/sequelize.js +17 -0
package/templates/sequelize/server/controllers/authController.js +62 -0
package/templates/sequelize/server/index.js +42 -0
package/templates/sequelize/server/middleware/authMiddleware.js +7 -0
package/templates/sequelize/server/models/User.js +24 -0
package/templates/sequelize/server/package.json +19 -0
package/templates/sequelize/server/routes/authRoutes.js +14 -0

package/templates/mysql/server/routes/authRoutes.js ADDED Viewed

@@ -0,0 +1,14 @@
+import express from "express";
+import {
+  register,
+  login,
+  logout
+} from "../controllers/authController.js";
+const router = express.Router();
+router.post("/register", register);
+router.post("/login", login);
+router.post("/logout", logout);
+export default router;

package/templates/sequelize/client/index.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Parachute</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package/templates/sequelize/client/package.json ADDED Viewed

@@ -0,0 +1,21 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.7.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.30.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.41",
+    "tailwindcss": "^3.4.10",
+    "vite": "^5.3.4"
+  }
+}

package/templates/sequelize/client/postcss.config.js ADDED Viewed

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};

package/templates/sequelize/client/src/App.jsx ADDED Viewed

@@ -0,0 +1,5 @@
+import Router from "./router";
+export default function App() {
+  return <Router />;
+}

package/templates/sequelize/client/src/api/client.js ADDED Viewed

@@ -0,0 +1,6 @@
+import axios from "axios";
+export const api = axios.create({
+  baseURL: "http://localhost:__PORT__",
+  withCredentials: true
+});

package/templates/sequelize/client/src/components/Navbar.jsx ADDED Viewed

@@ -0,0 +1,75 @@
+import { NavLink, useNavigate } from "react-router-dom";
+import { api } from "../api/client";
+import { clearUser, getUser } from "../utils/auth";
+const links = [
+  { to: "/", label: "Dashboard" },
+  { to: "/page1", label: "Form" },
+  { to: "/page2", label: "Table" },
+  { to: "/page3", label: "Cards" }
+];
+export default function Navbar() {
+  const navigate = useNavigate();
+  const user = getUser();
+  const logout = async () => {
+    try {
+      await api.post("/auth/logout");
+    } catch {}
+    clearUser();
+    navigate("/login");
+  };
+  return (
+    <header className="sticky top-0 z-50 border-b border-slate-200 bg-white/95 backdrop-blur">
+      <div className="mx-auto flex max-w-6xl flex-col gap-4 px-4 py-4 sm:px-6 lg:flex-row lg:items-center lg:justify-between lg:px-8">
+        <div className="flex items-center justify-between gap-4">
+          <div>
+            <p className="text-lg font-black tracking-tight text-slate-950">Parachute</p>
+            <p className="text-xs text-slate-500">Full-stack starter</p>
+          </div>
+          <button
+            onClick={logout}
+            className="rounded-xl bg-slate-950 px-4 py-2 text-sm font-bold text-white lg:hidden"
+          >
+            Logout
+          </button>
+        </div>
+        <nav className="flex gap-2 overflow-x-auto rounded-2xl border border-slate-200 bg-slate-50 p-1">
+          {links.map((link) => (
+            <NavLink
+              key={link.to}
+              to={link.to}
+              end={link.to === "/"}
+              className={({ isActive }) =>
+                `whitespace-nowrap rounded-xl px-4 py-2 text-sm font-bold transition ${
+                  isActive
+                    ? "bg-white text-slate-950 shadow-sm"
+                    : "text-slate-500 hover:bg-white hover:text-slate-900"
+                }`
+              }
+            >
+              {link.label}
+            </NavLink>
+          ))}
+        </nav>
+        <div className="hidden items-center gap-3 lg:flex">
+          <span className="max-w-[180px] truncate text-sm font-semibold text-slate-500">
+            {user?.Username || "User"}
+          </span>
+          <button
+            onClick={logout}
+            className="rounded-xl bg-slate-950 px-4 py-2 text-sm font-bold text-white transition hover:bg-slate-800"
+          >
+            Logout
+          </button>
+        </div>
+      </div>
+    </header>
+  );
+}

package/templates/sequelize/client/src/components/ProtectedRoute.jsx ADDED Viewed

@@ -0,0 +1,10 @@
+import { Navigate } from "react-router-dom";
+import { isAuthenticated } from "../utils/auth";
+export default function ProtectedRoute({ children }) {
+  if (!isAuthenticated()) {
+    return <Navigate to="/login" />;
+  }
+  return children;
+}

package/templates/sequelize/client/src/index.css ADDED Viewed

@@ -0,0 +1,24 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+* {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+  min-width: 320px;
+  background: #f8fafc;
+  color: #111827;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+a {
+  color: inherit;
+  text-decoration: none;
+}
+input, select, textarea, button {
+  font: inherit;
+}

package/templates/sequelize/client/src/layouts/DashboardLayout.jsx ADDED Viewed

@@ -0,0 +1,12 @@
+import Navbar from "../components/Navbar";
+export default function DashboardLayout({ children }) {
+  return (
+    <div className="min-h-screen bg-slate-50">
+      <Navbar />
+      <main className="mx-auto w-full max-w-6xl px-4 py-6 sm:px-6 sm:py-8 lg:px-8">
+        {children}
+      </main>
+    </div>
+  );
+}

package/templates/sequelize/client/src/main.jsx ADDED Viewed

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.css";
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/templates/sequelize/client/src/pages/Dashboard.jsx ADDED Viewed

@@ -0,0 +1,44 @@
+import DashboardLayout from "../layouts/DashboardLayout";
+const stats = [
+  { label: "Users", value: "24", note: "Auth ready" },
+  { label: "Pages", value: "3", note: "Templates included" },
+  { label: "API", value: "OK", note: "Axios configured" }
+];
+export default function Dashboard() {
+  return (
+    <DashboardLayout>
+      <section className="grid gap-6">
+        <div className="rounded-[28px] border border-slate-200 bg-white p-6 shadow-sm sm:p-8">
+          <p className="text-sm font-black uppercase tracking-[0.18em]" style={{ color: "__THEME__" }}>
+            Ready to customize
+          </p>
+          <div className="mt-3 grid gap-3 lg:grid-cols-[1fr_auto] lg:items-end">
+            <div>
+              <h1 className="text-3xl font-black tracking-tight text-slate-950 sm:text-4xl">
+                Welcome Dashboard
+              </h1>
+              <p className="mt-3 max-w-2xl text-sm leading-6 text-slate-500 sm:text-base">
+                This is your protected homepage. Use Page 1 for forms, Page 2 for tables, and Page 3 for cards/layout sections.
+              </p>
+            </div>
+            <button className="w-full rounded-2xl bg-slate-950 px-5 py-3 text-sm font-black text-white sm:w-auto">
+              Start Building
+            </button>
+          </div>
+        </div>
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {stats.map((stat) => (
+            <article key={stat.label} className="rounded-[24px] border border-slate-200 bg-white p-5 shadow-sm">
+              <p className="text-sm font-bold text-slate-500">{stat.label}</p>
+              <h2 className="mt-2 text-3xl font-black text-slate-950">{stat.value}</h2>
+              <p className="mt-2 text-sm text-slate-500">{stat.note}</p>
+            </article>
+          ))}
+        </div>
+      </section>
+    </DashboardLayout>
+  );
+}

package/templates/sequelize/client/src/pages/Login.jsx ADDED Viewed

@@ -0,0 +1,121 @@
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { api } from "../api/client";
+import { saveUser } from "../utils/auth";
+export default function Login() {
+  const navigate = useNavigate();
+  const [message, setMessage] = useState("");
+  const [form, setForm] = useState({
+    Username: "",
+    Password: ""
+  });
+  useEffect(() => {
+    if (localStorage.getItem("user")) {
+      navigate("/");
+    }
+  }, [navigate]);
+  const handleChange = (e) => {
+    setForm({ ...form, [e.target.name]: e.target.value });
+  };
+  const register = async () => {
+    try {
+      await api.post("/auth/register", form);
+      setMessage("Registered successfully. Now login.");
+    } catch (err) {
+      setMessage(err.response?.data?.message || "Registration failed");
+    }
+  };
+  const login = async () => {
+    try {
+      const res = await api.post("/auth/login", form);
+      saveUser(res.data);
+      navigate("/");
+    } catch (err) {
+      setMessage(err.response?.data?.message || "Login failed");
+    }
+  };
+  return (
+    <main className="flex min-h-screen items-center justify-center bg-slate-50 px-4 py-8">
+      <section className="grid w-full max-w-5xl overflow-hidden rounded-[28px] border border-slate-200 bg-white shadow-sm lg:grid-cols-[1fr_420px]">
+        <div className="hidden bg-slate-950 p-10 text-white lg:flex lg:flex-col lg:justify-between">
+          <div>
+            <p className="text-sm font-black uppercase tracking-[0.2em] text-white/50">Parachute</p>
+            <h1 className="mt-5 max-w-md text-4xl font-black tracking-tight">
+              Simple exam starter with auth already wired.
+            </h1>
+            <p className="mt-4 max-w-md text-sm leading-6 text-white/65">
+              Login, protected pages, layouts, forms, tables, and responsive Tailwind structure ready to customize.
+            </p>
+          </div>
+          <div className="rounded-2xl border border-white/10 bg-white/5 p-4 text-sm text-white/70">
+            Built for speed. Clean enough for real projects.
+          </div>
+        </div>
+        <div className="p-6 sm:p-8 lg:p-10">
+          <p className="text-sm font-black uppercase tracking-[0.18em]" style={{ color: "__THEME__" }}>
+            Welcome
+          </p>
+          <h2 className="mt-3 text-3xl font-black tracking-tight text-slate-950">Login or Register</h2>
+          <p className="mt-2 text-sm leading-6 text-slate-500">
+            Use a username and password. Passwords are handled in the backend.
+          </p>
+          <div className="mt-6 grid gap-4">
+            <label className="grid gap-2 text-sm font-bold text-slate-700">
+              Username
+              <input
+                name="Username"
+                placeholder="example: aime"
+                value={form.Username}
+                onChange={handleChange}
+                className="rounded-2xl border border-slate-200 bg-white px-4 py-3 outline-none transition focus:border-slate-400"
+              />
+            </label>
+            <label className="grid gap-2 text-sm font-bold text-slate-700">
+              Password
+              <input
+                name="Password"
+                type="password"
+                placeholder="••••••••"
+                value={form.Password}
+                onChange={handleChange}
+                className="rounded-2xl border border-slate-200 bg-white px-4 py-3 outline-none transition focus:border-slate-400"
+              />
+            </label>
+            {message && (
+              <p className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm font-semibold text-slate-700">
+                {message}
+              </p>
+            )}
+            <div className="grid gap-3 sm:grid-cols-2">
+              <button
+                onClick={register}
+                className="rounded-2xl px-4 py-3 text-sm font-black text-white transition hover:opacity-90"
+                style={{ background: "__THEME__" }}
+              >
+                Register
+              </button>
+              <button
+                onClick={login}
+                className="rounded-2xl bg-slate-950 px-4 py-3 text-sm font-black text-white transition hover:bg-slate-800"
+              >
+                Login
+              </button>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+}

package/templates/sequelize/client/src/pages/Page1.jsx ADDED Viewed

@@ -0,0 +1,101 @@
+import { useState } from "react";
+import DashboardLayout from "../layouts/DashboardLayout";
+export default function Page1() {
+  const [form, setForm] = useState({
+    fullName: "",
+    email: "",
+    role: "student",
+    level: "",
+    date: "",
+    amount: "",
+    description: "",
+    active: true
+  });
+  const handleChange = (e) => {
+    const { name, value, type, checked } = e.target;
+    setForm({ ...form, [name]: type === "checkbox" ? checked : value });
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    alert("Form submitted. Connect this to your API.");
+  };
+  return (
+    <DashboardLayout>
+      <section className="grid gap-6">
+        <div className="rounded-[28px] border border-slate-200 bg-white p-6 shadow-sm sm:p-8">
+          <p className="text-sm font-black uppercase tracking-[0.18em]" style={{ color: "__THEME__" }}>
+            Page 1
+          </p>
+          <h1 className="mt-3 text-3xl font-black tracking-tight text-slate-950">Form Template</h1>
+          <p className="mt-2 max-w-2xl text-sm leading-6 text-slate-500">
+            Copy this page for create/update screens. It includes text, email, select, number, date, textarea, and checkbox inputs.
+          </p>
+        </div>
+        <form onSubmit={handleSubmit} className="rounded-[28px] border border-slate-200 bg-white p-5 shadow-sm sm:p-6 lg:p-8">
+          <div className="grid gap-5 md:grid-cols-2">
+            <label className="grid gap-2 text-sm font-bold text-slate-700">
+              Full name
+              <input name="fullName" value={form.fullName} onChange={handleChange} placeholder="Enter full name" className="rounded-2xl border border-slate-200 px-4 py-3 outline-none focus:border-slate-400" />
+            </label>
+            <label className="grid gap-2 text-sm font-bold text-slate-700">
+              Email
+              <input name="email" type="email" value={form.email} onChange={handleChange} placeholder="name@example.com" className="rounded-2xl border border-slate-200 px-4 py-3 outline-none focus:border-slate-400" />
+            </label>
+            <label className="grid gap-2 text-sm font-bold text-slate-700">
+              Role
+              <select name="role" value={form.role} onChange={handleChange} className="rounded-2xl border border-slate-200 px-4 py-3 outline-none focus:border-slate-400">
+                <option value="student">Student</option>
+                <option value="admin">Admin</option>
+                <option value="manager">Manager</option>
+                <option value="staff">Staff</option>
+              </select>
+            </label>
+            <label className="grid gap-2 text-sm font-bold text-slate-700">
+              Level
+              <select name="level" value={form.level} onChange={handleChange} className="rounded-2xl border border-slate-200 px-4 py-3 outline-none focus:border-slate-400">
+                <option value="">Select level</option>
+                <option value="low">Low</option>
+                <option value="medium">Medium</option>
+                <option value="high">High</option>
+              </select>
+            </label>
+            <label className="grid gap-2 text-sm font-bold text-slate-700">
+              Date
+              <input name="date" type="date" value={form.date} onChange={handleChange} className="rounded-2xl border border-slate-200 px-4 py-3 outline-none focus:border-slate-400" />
+            </label>
+            <label className="grid gap-2 text-sm font-bold text-slate-700">
+              Amount
+              <input name="amount" type="number" value={form.amount} onChange={handleChange} placeholder="0" className="rounded-2xl border border-slate-200 px-4 py-3 outline-none focus:border-slate-400" />
+            </label>
+            <label className="grid gap-2 text-sm font-bold text-slate-700 md:col-span-2">
+              Description
+              <textarea name="description" value={form.description} onChange={handleChange} rows="4" placeholder="Write extra details here..." className="resize-none rounded-2xl border border-slate-200 px-4 py-3 outline-none focus:border-slate-400" />
+            </label>
+          </div>
+          <div className="mt-6 flex flex-col gap-4 border-t border-slate-100 pt-6 sm:flex-row sm:items-center sm:justify-between">
+            <label className="flex items-center gap-3 text-sm font-bold text-slate-700">
+              <input name="active" type="checkbox" checked={form.active} onChange={handleChange} className="h-4 w-4 rounded" />
+              Mark record as active
+            </label>
+            <button type="submit" className="rounded-2xl px-6 py-3 text-sm font-black text-white" style={{ background: "__THEME__" }}>
+              Save Record
+            </button>
+          </div>
+        </form>
+      </section>
+    </DashboardLayout>
+  );
+}

package/templates/sequelize/client/src/pages/Page2.jsx ADDED Viewed

@@ -0,0 +1,82 @@
+import DashboardLayout from "../layouts/DashboardLayout";
+const records = [
+  { id: 1, name: "Amoxicillin", category: "Antibiotic", status: "Available", amount: "12,000 RWF" },
+  { id: 2, name: "Paracetamol", category: "Pain relief", status: "Low stock", amount: "4,500 RWF" },
+  { id: 3, name: "Cetirizine", category: "Allergy", status: "Available", amount: "6,800 RWF" },
+  { id: 4, name: "Ibuprofen", category: "Pain relief", status: "Unavailable", amount: "7,200 RWF" }
+];
+const badgeClass = {
+  Available: "bg-emerald-50 text-emerald-700 ring-emerald-200",
+  "Low stock": "bg-amber-50 text-amber-700 ring-amber-200",
+  Unavailable: "bg-rose-50 text-rose-700 ring-rose-200"
+};
+export default function Page2() {
+  return (
+    <DashboardLayout>
+      <section className="grid gap-6">
+        <div className="rounded-[28px] border border-slate-200 bg-white p-6 shadow-sm sm:p-8">
+          <p className="text-sm font-black uppercase tracking-[0.18em]" style={{ color: "__THEME__" }}>
+            Page 2
+          </p>
+          <div className="mt-3 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+            <div>
+              <h1 className="text-3xl font-black tracking-tight text-slate-950">Table Template</h1>
+              <p className="mt-2 max-w-2xl text-sm leading-6 text-slate-500">
+                Use this for list/read screens. It stays clean on phones and tablets with horizontal overflow.
+              </p>
+            </div>
+            <button className="rounded-2xl bg-slate-950 px-5 py-3 text-sm font-black text-white">Add New</button>
+          </div>
+        </div>
+        <div className="overflow-hidden rounded-[28px] border border-slate-200 bg-white shadow-sm">
+          <div className="border-b border-slate-100 p-4 sm:p-5">
+            <input
+              placeholder="Search records..."
+              className="w-full rounded-2xl border border-slate-200 px-4 py-3 text-sm outline-none focus:border-slate-400"
+            />
+          </div>
+          <div className="overflow-x-auto">
+            <table className="min-w-[760px] w-full text-left text-sm">
+              <thead className="bg-slate-50 text-xs uppercase tracking-wide text-slate-500">
+                <tr>
+                  <th className="px-5 py-4 font-black">ID</th>
+                  <th className="px-5 py-4 font-black">Name</th>
+                  <th className="px-5 py-4 font-black">Category</th>
+                  <th className="px-5 py-4 font-black">Status</th>
+                  <th className="px-5 py-4 font-black">Amount</th>
+                  <th className="px-5 py-4 text-right font-black">Actions</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-slate-100">
+                {records.map((record) => (
+                  <tr key={record.id} className="hover:bg-slate-50/70">
+                    <td className="px-5 py-4 font-bold text-slate-500">#{record.id}</td>
+                    <td className="px-5 py-4 font-black text-slate-950">{record.name}</td>
+                    <td className="px-5 py-4 text-slate-600">{record.category}</td>
+                    <td className="px-5 py-4">
+                      <span className={`inline-flex rounded-full px-3 py-1 text-xs font-black ring-1 ${badgeClass[record.status]}`}>
+                        {record.status}
+                      </span>
+                    </td>
+                    <td className="px-5 py-4 font-bold text-slate-700">{record.amount}</td>
+                    <td className="px-5 py-4">
+                      <div className="flex justify-end gap-2">
+                        <button className="rounded-xl border border-slate-200 px-3 py-2 text-xs font-black text-slate-700 hover:bg-slate-50">Edit</button>
+                        <button className="rounded-xl border border-rose-200 px-3 py-2 text-xs font-black text-rose-600 hover:bg-rose-50">Delete</button>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </section>
+    </DashboardLayout>
+  );
+}

package/templates/sequelize/client/src/pages/Page3.jsx ADDED Viewed

@@ -0,0 +1,49 @@
+import DashboardLayout from "../layouts/DashboardLayout";
+const cards = [
+  { title: "Simple card", body: "Use this for summaries, quick actions, or small modules." },
+  { title: "Responsive grid", body: "On mobile it stacks. On tablets and laptops it becomes a clean grid." },
+  { title: "Action section", body: "Good for dashboard shortcuts and small system features." }
+];
+export default function Page3() {
+  return (
+    <DashboardLayout>
+      <section className="grid gap-6">
+        <div className="rounded-[28px] border border-slate-200 bg-white p-6 shadow-sm sm:p-8">
+          <p className="text-sm font-black uppercase tracking-[0.18em]" style={{ color: "__THEME__" }}>
+            Page 3
+          </p>
+          <h1 className="mt-3 text-3xl font-black tracking-tight text-slate-950">Cards Template</h1>
+          <p className="mt-2 max-w-2xl text-sm leading-6 text-slate-500">
+            Use this for dashboard sections, action panels, feature cards, or simple report blocks.
+          </p>
+        </div>
+        <div className="grid gap-4 md:grid-cols-3">
+          {cards.map((card, index) => (
+            <article key={card.title} className="rounded-[24px] border border-slate-200 bg-white p-5 shadow-sm">
+              <div className="flex h-11 w-11 items-center justify-center rounded-2xl text-sm font-black text-white" style={{ background: index === 0 ? "__THEME__" : "#0f172a" }}>
+                {index + 1}
+              </div>
+              <h2 className="mt-5 text-xl font-black text-slate-950">{card.title}</h2>
+              <p className="mt-2 text-sm leading-6 text-slate-500">{card.body}</p>
+            </article>
+          ))}
+        </div>
+        <div className="rounded-[28px] border border-slate-200 bg-slate-950 p-6 text-white shadow-sm sm:p-8">
+          <div className="grid gap-5 lg:grid-cols-[1fr_auto] lg:items-center">
+            <div>
+              <h2 className="text-2xl font-black tracking-tight">Ready for your real feature</h2>
+              <p className="mt-2 max-w-2xl text-sm leading-6 text-white/60">
+                Replace this with reports, profile settings, sales summaries, admin tools, or any exam requirement.
+              </p>
+            </div>
+            <button className="rounded-2xl bg-white px-5 py-3 text-sm font-black text-slate-950">Customize</button>
+          </div>
+        </div>
+      </section>
+    </DashboardLayout>
+  );
+}

package/templates/sequelize/client/src/router/index.jsx ADDED Viewed

@@ -0,0 +1,43 @@
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import ProtectedRoute from "../components/ProtectedRoute";
+import Login from "../pages/Login";
+import Dashboard from "../pages/Dashboard";
+import Page1 from "../pages/Page1";
+import Page2 from "../pages/Page2";
+import Page3 from "../pages/Page3";
+export default function Router() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/login" element={<Login />} />
+        <Route path="/" element={
+          <ProtectedRoute>
+            <Dashboard />
+          </ProtectedRoute>
+        } />
+        <Route path="/page1" element={
+          <ProtectedRoute>
+            <Page1 />
+          </ProtectedRoute>
+        } />
+        <Route path="/page2" element={
+          <ProtectedRoute>
+            <Page2 />
+          </ProtectedRoute>
+        } />
+        <Route path="/page3" element={
+          <ProtectedRoute>
+            <Page3 />
+          </ProtectedRoute>
+        } />
+      </Routes>
+    </BrowserRouter>
+  );
+}