create-ishvexa-app 1.0.0

package/templates/lms-app/frontend/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "lms-frontend",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.2.4",
+    "axios": "^1.15.2",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "react-router-dom": "^7.14.2",
+    "tailwindcss": "^4.2.4"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^6.0.1",
+    "vite": "^8.0.10"
+  }
+}

package/templates/lms-app/frontend/public/favicon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="#c94c2d">
+  <rect width="32" height="32" fill="#142428"/>
+  <path d="M6 8h20v2H6V8zm0 6h12v2H6v-2zm0 6h16v2H6v-2z"/>
+</svg>

package/templates/lms-app/frontend/src/App.jsx

@@ -0,0 +1,107 @@
+import { useEffect, useState } from "react";
+import { Navigate, Route, Routes } from "react-router-dom";
+import AppLayout from "./components/AppLayout";
+import BooksPage from "./pages/BooksPage";
+import BorrowPage from "./pages/BorrowPage";
+import DashboardPage from "./pages/DashboardPage";
+import LoginPage from "./pages/LoginPage";
+import ForgotPassword from "./pages/ForgotPassword";
+import ReportsPage from "./pages/ReportsPage";
+import ReturnPage from "./pages/ReturnPage";
+import SearchPage from "./pages/SearchPage";
+import StudentsPage from "./pages/StudentsPage";
+import { fetchMe, logoutUser } from "./api/authApi";
+
+function ProtectedLayout({ authed, username, role, onLogout }) {
+  if (!authed) return <Navigate to="/login" replace />;
+  return <AppLayout onLogout={onLogout} username={username} role={role} />;
+}
+
+function AdminRoute({ role, children }) {
+  if (role !== "admin") return <Navigate to="/" replace />;
+  return children;
+}
+
+export default function App() {
+  const [authed, setAuthed] = useState(false);
+  const [username, setUsername] = useState("");
+  const [role, setRole] = useState("");
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchMe()
+      .then(({ data }) => {
+        setAuthed(true);
+        setUsername(data.username);
+        setRole(data.role);
+      })
+      .catch(() => {
+        setAuthed(false);
+      })
+      .finally(() => setLoading(false));
+  }, []);
+
+  const onLogout = async () => {
+    try {
+      await logoutUser();
+    } catch {}
+    setAuthed(false);
+    setUsername("");
+    setRole("");
+  };
+
+  if (loading) {
+    return <div className="flex min-h-screen items-center justify-center bg-lms-dark text-lms-paper">Loading…</div>;
+  }
+
+  return (
+    <Routes>
+      <Route
+        path="/login"
+        element={
+          authed ? (
+            <Navigate to="/" replace />
+          ) : (
+            <LoginPage
+              onLoginSuccess={({ username: u, role: r }) => {
+                setAuthed(true);
+                setUsername(u);
+                setRole(r);
+              }}
+            />
+          )
+        }
+      />
+      <Route
+        path="/forgot-password"
+        element={authed ? <Navigate to="/" replace /> : <ForgotPassword />}
+      />
+      <Route
+        element={<ProtectedLayout authed={authed} username={username} role={role} onLogout={onLogout} />}
+      >
+        <Route index element={<DashboardPage />} />
+        <Route
+          path="students"
+          element={
+            <AdminRoute role={role}>
+              <StudentsPage />
+            </AdminRoute>
+          }
+        />
+        <Route
+          path="books"
+          element={
+            <AdminRoute role={role}>
+              <BooksPage />
+            </AdminRoute>
+          }
+        />
+        <Route path="borrow" element={<BorrowPage />} />
+        <Route path="return" element={<ReturnPage />} />
+        <Route path="search" element={<SearchPage />} />
+        <Route path="reports" element={<ReportsPage />} />
+      </Route>
+      <Route path="*" element={<Navigate to={authed ? "/" : "/login"} replace />} />
+    </Routes>
+  );
+}

package/templates/lms-app/frontend/src/api/authApi.js

@@ -0,0 +1,5 @@
+import api from "./client";
+
+export const loginUser = (body) => api.post("/auth/login", body);
+export const fetchMe = () => api.get("/auth/me");
+export const logoutUser = () => api.post("/auth/logout");

package/templates/lms-app/frontend/src/api/booksApi.js

@@ -0,0 +1,6 @@
+import api from "./client";
+
+export const listBooks = (params) => api.get("/books", { params });
+export const createBook = (body) => api.post("/books", body);
+export const updateBook = (id, body) => api.put(`/books/${id}`, body);
+export const deleteBook = (id) => api.delete(`/books/${id}`);

package/templates/lms-app/frontend/src/api/borrowsApi.js

@@ -0,0 +1,5 @@
+import api from "./client";
+
+export const listBorrows = (params) => api.get("/borrows", { params });
+export const createBorrow = (body) => api.post("/borrows", body);
+export const returnBorrow = (id) => api.patch(`/borrows/${id}/return`);

package/templates/lms-app/frontend/src/api/client.js

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

package/templates/lms-app/frontend/src/api/dashboardApi.js

@@ -0,0 +1,3 @@
+import api from "./client";
+
+export const fetchStats = () => api.get("/dashboard/stats");

package/templates/lms-app/frontend/src/api/reportsApi.js

@@ -0,0 +1,6 @@
+import api from "./client";
+
+export const reportStudents = () => api.get("/reports/students");
+export const reportBooks = () => api.get("/reports/books");
+export const reportBorrowed = () => api.get("/reports/borrowed");
+export const reportReturned = () => api.get("/reports/returned");

package/templates/lms-app/frontend/src/api/studentsApi.js

@@ -0,0 +1,6 @@
+import api from "./client";
+
+export const listStudents = (params) => api.get("/students", { params });
+export const createStudent = (body) => api.post("/students", body);
+export const updateStudent = (id, body) => api.put(`/students/${id}`, body);
+export const deleteStudent = (id) => api.delete(`/students/${id}`);

package/templates/lms-app/frontend/src/components/AppLayout.jsx

@@ -0,0 +1,63 @@
+import { Link, NavLink, Outlet } from "react-router-dom";
+
+const navCls = ({ isActive }) =>
+  `px-3 py-2 text-sm font-medium border border-transparent ${
+    isActive ? "bg-lms-accent text-lms-paper border-lms-accent" : "text-lms-paper/90 hover:bg-lms-panel"
+  }`;
+
+export default function AppLayout({ onLogout, username, role }) {
+  const isAdmin = role === "admin";
+
+  return (
+    <div className="min-h-screen bg-lms-dark">
+      <header className="border-b border-lms-panel bg-lms-panel">
+        <div className="mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-3 px-4 py-3">
+          <Link to="/" className="text-lg font-bold tracking-tight text-lms-paper">
+            Library Management System
+          </Link>
+          <div className="text-sm text-lms-paper/80">
+            {username} · <span className="text-lms-accent">{role}</span>
+          </div>
+        </div>
+        <nav className="mx-auto flex max-w-6xl flex-wrap gap-1 border-t border-lms-dark px-4 py-2 no-print">
+          <NavLink to="/" end className={navCls}>
+            Dashboard
+          </NavLink>
+          {isAdmin && (
+            <NavLink to="/students" className={navCls}>
+              Students
+            </NavLink>
+          )}
+          {isAdmin && (
+            <NavLink to="/books" className={navCls}>
+              Books
+            </NavLink>
+          )}
+          <NavLink to="/borrow" className={navCls}>
+            Borrow
+          </NavLink>
+          <NavLink to="/return" className={navCls}>
+            Return
+          </NavLink>
+          <NavLink to="/search" className={navCls}>
+            Search
+          </NavLink>
+          <NavLink to="/reports" className={navCls}>
+            Reports
+          </NavLink>
+          <button
+            type="button"
+            onClick={onLogout}
+            className="ml-auto border border-lms-accent bg-lms-dark px-3 py-2 text-sm font-medium text-lms-accent hover:bg-lms-accent hover:text-lms-paper"
+          >
+            Logout
+          </button>
+        </nav>
+      </header>
+
+      <main className="mx-auto max-w-6xl p-4">
+        <Outlet />
+      </main>
+    </div>
+  );
+}

package/templates/lms-app/frontend/src/index.css

@@ -0,0 +1,34 @@
+@import "tailwindcss";
+
+@theme {
+  --color-lms-dark: #142428;
+  --color-lms-panel: #1f363b;
+  --color-lms-paper: #ebe3d6;
+  --color-lms-accent: #c94c2d;
+  --color-lms-accent-hover: #a63d24;
+}
+
+/* Two-tone layout; no rounded corners (per LMS spec) */
+*,
+*::before,
+*::after {
+  border-radius: 0 !important;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--color-lms-dark);
+  color: var(--color-lms-paper);
+  font-family: system-ui, sans-serif;
+}
+
+@media print {
+  body {
+    background: #fff;
+    color: #000;
+  }
+  .no-print {
+    display: none !important;
+  }
+}

package/templates/lms-app/frontend/src/main.jsx

@@ -0,0 +1,13 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import "./index.css";
+import App from "./App.jsx";
+
+createRoot(document.getElementById("root")).render(
+  <StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </StrictMode>
+);

package/templates/lms-app/frontend/src/pages/BooksPage.jsx

@@ -0,0 +1,206 @@
+import { useEffect, useState } from "react";
+import { createBook, deleteBook, listBooks, updateBook } from "../api/booksApi";
+
+const empty = { title: "", author: "", category: "", quantity: 0, publishedYear: new Date().getFullYear() };
+
+const validateBook = (form) => {
+  const errors = {};
+  if (!form.title.trim()) errors.title = "Title is required.";
+  if (!form.author.trim()) errors.author = "Author is required.";
+  if (!form.category.trim()) errors.category = "Category is required.";
+  if (form.quantity === "" || Number.isNaN(Number(form.quantity)) || Number(form.quantity) < 0) {
+    errors.quantity = "Quantity must be 0 or greater.";
+  }
+  if (!form.publishedYear || Number.isNaN(Number(form.publishedYear))) {
+    errors.publishedYear = "Published year is required.";
+  }
+  return errors;
+};
+
+export default function BooksPage() {
+  const [rows, setRows] = useState([]);
+  const [form, setForm] = useState(empty);
+  const [editId, setEditId] = useState(null);
+  const [fieldErrors, setFieldErrors] = useState({});
+  const [err, setErr] = useState("");
+
+  const load = () =>
+    listBooks()
+      .then(({ data }) => setRows(data))
+      .catch((e) => setErr(e.response?.data?.message || "Load failed"));
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  const setField = (key, value) => {
+    setForm((prev) => ({ ...prev, [key]: value }));
+    setFieldErrors((prev) => ({ ...prev, [key]: "" }));
+  };
+
+  const inputClass = (key) =>
+    `border bg-lms-dark px-3 py-2 text-lms-paper ${fieldErrors[key] ? "border-red-500" : "border-lms-dark"}`;
+
+  const save = async (e) => {
+    e.preventDefault();
+    setErr("");
+    const errors = validateBook(form);
+    if (Object.keys(errors).length) {
+      setFieldErrors(errors);
+      return;
+    }
+    try {
+      const payload = {
+        ...form,
+        quantity: Number(form.quantity),
+        publishedYear: Number(form.publishedYear),
+      };
+      if (editId) await updateBook(editId, payload);
+      else await createBook(payload);
+      setForm(empty);
+      setEditId(null);
+      setFieldErrors({});
+      await load();
+    } catch (e2) {
+      setErr(e2.response?.data?.message || "Save failed");
+    }
+  };
+
+  const edit = (r) => {
+    setEditId(r._id);
+    setForm({
+      title: r.title,
+      author: r.author,
+      category: r.category,
+      quantity: r.quantity,
+      publishedYear: r.publishedYear,
+    });
+    setFieldErrors({});
+  };
+
+  const remove = async (id) => {
+    if (!confirm("Delete this book?")) return;
+    setErr("");
+    try {
+      await deleteBook(id);
+      await load();
+    } catch (e2) {
+      setErr(e2.response?.data?.message || "Delete failed");
+    }
+  };
+
+  return (
+    <div>
+      <h1 className="mb-4 text-xl font-bold text-lms-paper">Books</h1>
+      {err && <p className="mb-3 border border-lms-accent px-3 py-2 text-sm text-lms-accent">{err}</p>}
+      <form onSubmit={save} className="mb-6 border border-lms-panel bg-lms-panel p-4">
+        <h2 className="mb-3 text-sm font-semibold text-lms-accent">{editId ? "Edit" : "Add"} book</h2>
+        <div className="grid gap-3 sm:grid-cols-2">
+          <div className="sm:col-span-2">
+            <input
+              className={inputClass("title")}
+              placeholder="Title"
+              value={form.title}
+              onChange={(e) => setField("title", e.target.value)}
+            />
+            {fieldErrors.title && <p className="mt-1 text-xs text-red-400">{fieldErrors.title}</p>}
+          </div>
+          <div>
+            <input
+              className={inputClass("author")}
+              placeholder="Author"
+              value={form.author}
+              onChange={(e) => setField("author", e.target.value)}
+            />
+            {fieldErrors.author && <p className="mt-1 text-xs text-red-400">{fieldErrors.author}</p>}
+          </div>
+          <div>
+            <input
+              className={inputClass("category")}
+              placeholder="Category"
+              value={form.category}
+              onChange={(e) => setField("category", e.target.value)}
+            />
+            {fieldErrors.category && <p className="mt-1 text-xs text-red-400">{fieldErrors.category}</p>}
+          </div>
+          <div>
+            <input
+              className={inputClass("quantity")}
+              type="number"
+              min={0}
+              placeholder="Quantity (copies in library)"
+              value={form.quantity}
+              onChange={(e) => setField("quantity", e.target.value)}
+            />
+            {fieldErrors.quantity && <p className="mt-1 text-xs text-red-400">{fieldErrors.quantity}</p>}
+          </div>
+          <div>
+            <input
+              className={inputClass("publishedYear")}
+              type="number"
+              placeholder="Published year"
+              value={form.publishedYear}
+              onChange={(e) => setField("publishedYear", e.target.value)}
+            />
+            {fieldErrors.publishedYear && (
+              <p className="mt-1 text-xs text-red-400">{fieldErrors.publishedYear}</p>
+            )}
+          </div>
+        </div>
+        <div className="mt-3 flex gap-2">
+          <button type="submit" className="border border-lms-accent bg-lms-accent px-4 py-2 text-lms-paper">
+            Save
+          </button>
+          {editId && (
+            <button
+              type="button"
+              className="border border-lms-paper/40 px-4 py-2 text-lms-paper"
+              onClick={() => {
+                setEditId(null);
+                setForm(empty);
+                setFieldErrors({});
+              }}
+            >
+              Cancel
+            </button>
+          )}
+        </div>
+      </form>
+
+      <div className="overflow-x-auto border border-lms-panel">
+        <table className="w-full text-left text-sm text-lms-paper">
+          <thead className="bg-lms-panel text-lms-paper/70">
+            <tr>
+              <th className="p-2">Title</th>
+              <th className="p-2">Author</th>
+              <th className="p-2">Category</th>
+              <th className="p-2">Qty</th>
+              <th className="p-2">Year</th>
+              <th className="p-2">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((r) => (
+              <tr key={r._id} className="border-t border-lms-dark">
+                <td className="p-2">{r.title}</td>
+                <td className="p-2">{r.author}</td>
+                <td className="p-2">{r.category}</td>
+                <td className="p-2">{r.quantity}</td>
+                <td className="p-2">{r.publishedYear}</td>
+                <td className="p-2">
+                  <button type="button" className="text-lms-accent hover:underline" onClick={() => edit(r)}>
+                    Edit
+                  </button>
+                  {" · "}
+                  <button type="button" className="text-lms-accent hover:underline" onClick={() => remove(r._id)}>
+                    Delete
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

package/templates/lms-app/frontend/src/pages/BorrowPage.jsx

@@ -0,0 +1,134 @@
+import { useEffect, useState } from "react";
+import { listBooks } from "../api/booksApi";
+import { createBorrow } from "../api/borrowsApi";
+import { listStudents } from "../api/studentsApi";
+
+const validateBorrow = (form) => {
+  const errors = {};
+  if (!form.studentId) errors.studentId = "Select a student.";
+  if (!form.bookId) errors.bookId = "Select a book.";
+  if (!form.borrowDate) errors.borrowDate = "Borrow date is required.";
+  if (!form.returnDueDate) errors.returnDueDate = "Return due date is required.";
+  else if (form.borrowDate && form.returnDueDate < form.borrowDate) {
+    errors.returnDueDate = "Return due date cannot be before borrow date.";
+  }
+  return errors;
+};
+
+export default function BorrowPage() {
+  const [students, setStudents] = useState([]);
+  const [books, setBooks] = useState([]);
+  const [form, setForm] = useState({
+    studentId: "",
+    bookId: "",
+    borrowDate: new Date().toISOString().slice(0, 10),
+    returnDueDate: new Date().toISOString().slice(0, 10),
+  });
+  const [fieldErrors, setFieldErrors] = useState({});
+  const [msg, setMsg] = useState("");
+  const [err, setErr] = useState("");
+
+  useEffect(() => {
+    Promise.all([listStudents(), listBooks()])
+      .then(([s, b]) => {
+        setStudents(s.data);
+        setBooks(b.data.filter((x) => x.quantity > 0));
+      })
+      .catch((e) => setErr(e.response?.data?.message || "Failed to load lists"));
+  }, []);
+
+  const setField = (key, value) => {
+    setForm((prev) => ({ ...prev, [key]: value }));
+    setFieldErrors((prev) => ({ ...prev, [key]: "" }));
+  };
+
+  const inputClass = (key) =>
+    `mt-1 w-full border bg-lms-dark px-3 py-2 text-lms-paper ${fieldErrors[key] ? "border-red-500" : "border-lms-dark"}`;
+
+  const submit = async (e) => {
+    e.preventDefault();
+    setErr("");
+    setMsg("");
+    const errors = validateBorrow(form);
+    if (Object.keys(errors).length) {
+      setFieldErrors(errors);
+      return;
+    }
+    try {
+      await createBorrow(form);
+      setMsg("Borrowing saved.");
+      setFieldErrors({});
+      const b = await listBooks();
+      setBooks(b.data.filter((x) => x.quantity > 0));
+    } catch (e2) {
+      setErr(e2.response?.data?.message || "Borrow failed");
+    }
+  };
+
+  return (
+    <div>
+      <h1 className="mb-4 text-xl font-bold text-lms-paper">Borrow book</h1>
+      {err && <p className="mb-3 border border-lms-accent px-3 py-2 text-sm text-lms-accent">{err}</p>}
+      {msg && <p className="mb-3 border border-lms-paper/30 px-3 py-2 text-sm text-lms-paper">{msg}</p>}
+      <form onSubmit={submit} className="max-w-xl border border-lms-panel bg-lms-panel p-4 space-y-4">
+        <label className="block text-sm text-lms-paper/80">
+          Student
+          <select
+            className={inputClass("studentId")}
+            value={form.studentId}
+            onChange={(e) => setField("studentId", e.target.value)}
+          >
+            <option value="">— Select —</option>
+            {students.map((s) => (
+              <option key={s._id} value={s._id}>
+                {s.fullName} · {s.className}
+              </option>
+            ))}
+          </select>
+          {fieldErrors.studentId && <p className="mt-1 text-xs text-red-400">{fieldErrors.studentId}</p>}
+        </label>
+        <label className="block text-sm text-lms-paper/80">
+          Book (only titles with copies available)
+          <select
+            className={inputClass("bookId")}
+            value={form.bookId}
+            onChange={(e) => setField("bookId", e.target.value)}
+          >
+            <option value="">— Select —</option>
+            {books.map((b) => (
+              <option key={b._id} value={b._id}>
+                {b.title} — {b.quantity} left
+              </option>
+            ))}
+          </select>
+          {fieldErrors.bookId && <p className="mt-1 text-xs text-red-400">{fieldErrors.bookId}</p>}
+        </label>
+        <label className="block text-sm text-lms-paper/80">
+          Borrow date
+          <input
+            type="date"
+            className={inputClass("borrowDate")}
+            value={form.borrowDate}
+            onChange={(e) => setField("borrowDate", e.target.value)}
+          />
+          {fieldErrors.borrowDate && <p className="mt-1 text-xs text-red-400">{fieldErrors.borrowDate}</p>}
+        </label>
+        <label className="block text-sm text-lms-paper/80">
+          Return due date
+          <input
+            type="date"
+            className={inputClass("returnDueDate")}
+            value={form.returnDueDate}
+            onChange={(e) => setField("returnDueDate", e.target.value)}
+          />
+          {fieldErrors.returnDueDate && (
+            <p className="mt-1 text-xs text-red-400">{fieldErrors.returnDueDate}</p>
+          )}
+        </label>
+        <button type="submit" className="border border-lms-accent bg-lms-accent px-4 py-2 font-semibold text-lms-paper">
+          Save borrowing
+        </button>
+      </form>
+    </div>
+  );
+}