create-ishvexa-app 1.0.0

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

@@ -0,0 +1,42 @@
+import { useEffect, useState } from "react";
+import { fetchStats } from "../api/dashboardApi";
+
+const Card = ({ label, value }) => (
+  <div className="border border-lms-panel bg-lms-panel p-4">
+    <div className="text-xs uppercase tracking-wide text-lms-paper/60">{label}</div>
+    <div className="mt-2 text-3xl font-bold text-lms-accent">{value}</div>
+  </div>
+);
+
+export default function DashboardPage() {
+  const [s, setS] = useState(null);
+  const [err, setErr] = useState("");
+
+  useEffect(() => {
+    fetchStats()
+      .then(({ data }) => setS(data))
+      .catch((e) => setErr(e.response?.data?.message || "Failed to load stats"));
+  }, []);
+
+  if (err) {
+    return <p className="text-lms-accent">{err}</p>;
+  }
+  if (!s) {
+    return <p className="text-lms-paper/70">Loading…</p>;
+  }
+
+  return (
+    <div>
+      <h1 className="mb-4 text-xl font-bold text-lms-paper">Dashboard</h1>
+      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+        <Card label="Book titles (records)" value={s.totalBookTitles} />
+        <Card label="Copies in library" value={s.totalCopiesInLibrary} />
+        <Card label="Students" value={s.totalStudents} />
+        <Card label="Borrowed (active)" value={s.borrowedActive} />
+        <Card label="Returned (all time)" value={s.returnedCount} />
+        <Card label="Late returns (returned after due)" value={s.lateReturned} />
+        <Card label="Overdue (not yet returned)" value={s.overdueActive} />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,112 @@
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import api from "../api/client";
+
+export default function ForgotPassword() {
+  const navigate = useNavigate();
+  const [form, setForm] = useState({ email: "", newPassword: "", confirmPassword: "" });
+  const [fieldErrors, setFieldErrors] = useState({});
+  const [error, setError] = useState("");
+  const [message, setMessage] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const validate = () => {
+    const err = {};
+    const email = form.email.trim();
+    if (!email) err.email = "Email is required.";
+    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) err.email = "Enter a valid email address.";
+    if (!form.newPassword) err.newPassword = "New password is required.";
+    if (!form.confirmPassword) err.confirmPassword = "Confirm password is required.";
+    else if (form.newPassword && form.newPassword !== form.confirmPassword) {
+      err.confirmPassword = "Passwords must match.";
+    }
+    setFieldErrors(err);
+    return Object.keys(err).length === 0;
+  };
+
+  const submit = async (e) => {
+    e.preventDefault();
+    setError("");
+    setMessage("");
+    if (!validate()) return;
+    setLoading(true);
+    try {
+      const { data } = await api.post("/auth/forgot-password", {
+        email: form.email.trim(),
+        newPassword: form.newPassword,
+        confirmPassword: form.confirmPassword,
+      });
+      setMessage(data.message || "Password reset successfully.");
+      setTimeout(() => navigate("/login", { replace: true }), 2000);
+    } catch (err) {
+      setError(err.response?.data?.message || "Request failed.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center p-4">
+      <div className="w-full max-w-md border border-lms-panel bg-lms-panel p-8 shadow-lg">
+        <h1 className="mb-2 text-2xl font-bold text-lms-paper">Forgot Password</h1>
+        <p className="mb-6 text-sm text-lms-paper/70">Enter your email and new password</p>
+        {error && (
+          <div className="mb-4 border border-lms-accent bg-lms-dark px-3 py-2 text-sm text-lms-accent">
+            {error}
+          </div>
+        )}
+        {message && (
+          <div className="mb-4 border border-lms-dark bg-lms-dark px-3 py-2 text-sm text-lms-paper">
+            {message}
+          </div>
+        )}
+        <form onSubmit={submit} className="space-y-4 border border-lms-dark p-4">
+          <label className="block text-sm text-lms-paper/80">
+            Email
+            <input
+              type="email"
+              className="mt-1 w-full border border-lms-dark bg-lms-dark px-3 py-2 text-lms-paper"
+              value={form.email}
+              onChange={(e) => setForm({ ...form, email: e.target.value })}
+            />
+            {fieldErrors.email && <p className="mt-1 text-xs text-lms-accent">{fieldErrors.email}</p>}
+          </label>
+          <label className="block text-sm text-lms-paper/80">
+            New password
+            <input
+              type="password"
+              className="mt-1 w-full border border-lms-dark bg-lms-dark px-3 py-2 text-lms-paper"
+              value={form.newPassword}
+              onChange={(e) => setForm({ ...form, newPassword: e.target.value })}
+            />
+            {fieldErrors.newPassword && (
+              <p className="mt-1 text-xs text-lms-accent">{fieldErrors.newPassword}</p>
+            )}
+          </label>
+          <label className="block text-sm text-lms-paper/80">
+            Confirm password
+            <input
+              type="password"
+              className="mt-1 w-full border border-lms-dark bg-lms-dark px-3 py-2 text-lms-paper"
+              value={form.confirmPassword}
+              onChange={(e) => setForm({ ...form, confirmPassword: e.target.value })}
+            />
+            {fieldErrors.confirmPassword && (
+              <p className="mt-1 text-xs text-lms-accent">{fieldErrors.confirmPassword}</p>
+            )}
+          </label>
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full border border-lms-accent bg-lms-accent py-2 font-semibold text-lms-paper hover:bg-lms-accent-hover disabled:opacity-60"
+          >
+            {loading ? "Please wait…" : "Reset password"}
+          </button>
+        </form>
+        <Link to="/login" className="mt-4 inline-block text-sm text-lms-paper/80 hover:text-lms-paper">
+          Back to login
+        </Link>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,71 @@
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { loginUser } from "../api/authApi";
+
+export default function LoginPage({ onLoginSuccess }) {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const navigate = useNavigate();
+
+  const submit = async (e) => {
+    e.preventDefault();
+    setError("");
+    try {
+      const { data } = await loginUser({
+        username: username.trim().toLowerCase(),
+        password,
+      });
+      onLoginSuccess({ username: data.username, role: data.role });
+      navigate("/");
+    } catch (err) {
+      setError(err.response?.data?.message || "Login failed");
+    }
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center p-4">
+      <div className="w-full max-w-md border border-lms-panel bg-lms-panel p-8 shadow-lg">
+        <h1 className="mb-2 text-2xl font-bold text-lms-paper">Library Login</h1>
+        <p className="mb-6 text-sm text-lms-paper/70">Sign in with the username and password you were given.</p>
+        {error && (
+          <div className="mb-4 border border-lms-accent bg-lms-dark px-3 py-2 text-sm text-lms-accent">
+            {error}
+          </div>
+        )}
+        <form onSubmit={submit} className="space-y-4 border border-lms-dark p-4">
+          <label className="block text-sm text-lms-paper/80">
+            Username
+            <input
+              className="mt-1 w-full border border-lms-dark bg-lms-dark px-3 py-2 text-lms-paper"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              autoComplete="username"
+              required
+            />
+          </label>
+          <label className="block text-sm text-lms-paper/80">
+            Password
+            <input
+              type="password"
+              className="mt-1 w-full border border-lms-dark bg-lms-dark px-3 py-2 text-lms-paper"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              autoComplete="current-password"
+              required
+            />
+          </label>
+          <button
+            type="submit"
+            className="w-full border border-lms-accent bg-lms-accent py-2 font-semibold text-lms-paper hover:bg-lms-accent-hover"
+          >
+            Sign in
+          </button>
+        </form>
+        <Link to="/forgot-password" className="mt-4 inline-block text-sm text-lms-paper/80 hover:text-lms-paper">
+          Forgot password?
+        </Link>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,176 @@
+import { useState } from "react";
+import { reportBooks, reportBorrowed, reportReturned, reportStudents } from "../api/reportsApi";
+
+function formatPrintDate(iso) {
+  try {
+    return new Date(iso).toLocaleString();
+  } catch {
+    return iso;
+  }
+}
+
+export default function ReportsPage() {
+  const [tab, setTab] = useState("students");
+  const [data, setData] = useState(null);
+  const [err, setErr] = useState("");
+
+  const load = async (t) => {
+    setTab(t);
+    setErr("");
+    setData(null);
+    try {
+      let res;
+      if (t === "students") res = await reportStudents();
+      else if (t === "books") res = await reportBooks();
+      else if (t === "borrowed") res = await reportBorrowed();
+      else res = await reportReturned();
+      setData(res.data);
+    } catch (e) {
+      setErr(e.response?.data?.message || "Failed");
+    }
+  };
+
+  const printNow = () => window.print();
+
+  const nowLabel = new Date().toLocaleString();
+
+  return (
+    <div>
+      <div className="no-print mb-4 flex flex-wrap items-center gap-2">
+        <h1 className="mr-4 text-xl font-bold text-lms-paper">Reports</h1>
+        <button
+          type="button"
+          className={`border px-3 py-1 text-sm ${tab === "students" ? "border-lms-accent bg-lms-accent text-lms-paper" : "border-lms-panel text-lms-paper"}`}
+          onClick={() => load("students")}
+        >
+          All students
+        </button>
+        <button
+          type="button"
+          className={`border px-3 py-1 text-sm ${tab === "books" ? "border-lms-accent bg-lms-accent text-lms-paper" : "border-lms-panel text-lms-paper"}`}
+          onClick={() => load("books")}
+        >
+          All books
+        </button>
+        <button
+          type="button"
+          className={`border px-3 py-1 text-sm ${tab === "borrowed" ? "border-lms-accent bg-lms-accent text-lms-paper" : "border-lms-panel text-lms-paper"}`}
+          onClick={() => load("borrowed")}
+        >
+          Borrowed
+        </button>
+        <button
+          type="button"
+          className={`border px-3 py-1 text-sm ${tab === "returned" ? "border-lms-accent bg-lms-accent text-lms-paper" : "border-lms-panel text-lms-paper"}`}
+          onClick={() => load("returned")}
+        >
+          Returned
+        </button>
+        <button
+          type="button"
+          className="ml-auto border border-lms-paper px-4 py-2 text-sm text-lms-paper"
+          onClick={printNow}
+        >
+          Print
+        </button>
+      </div>
+
+      {err && <p className="text-lms-accent">{err}</p>}
+
+      <div id="lms-report-print" className="border border-lms-panel bg-lms-panel p-4 text-lms-paper print:border-black print:bg-white print:text-black">
+        <header className="mb-4 border-b border-lms-dark pb-2 print:border-black">
+          <h2 className="text-lg font-bold text-lms-accent print:text-black">
+            LMS —{" "}
+            {tab === "students" && "All students"}
+            {tab === "books" && "All books"}
+            {tab === "borrowed" && "Borrowed books"}
+            {tab === "returned" && "Returned books"}
+          </h2>
+          <p className="text-sm text-lms-paper/80 print:text-black">Printed: {nowLabel}</p>
+          {data?.generatedAt && (
+            <p className="text-xs text-lms-paper/60 print:text-black">
+              Data snapshot: {formatPrintDate(data.generatedAt)}
+            </p>
+          )}
+        </header>
+
+        {!data && !err && <p className="text-lms-paper/70">Pick a report above.</p>}
+
+        {data?.rows && tab === "students" && (
+          <table className="w-full text-left text-sm print:text-black">
+            <thead>
+              <tr className="border-b border-lms-dark print:border-black">
+                <th className="p-2">Name</th>
+                <th className="p-2">Gender</th>
+                <th className="p-2">Class</th>
+                <th className="p-2">Phone</th>
+                <th className="p-2">Email</th>
+              </tr>
+            </thead>
+            <tbody>
+              {data.rows.map((r) => (
+                <tr key={r._id} className="border-b border-lms-dark/50 print:border-gray-300">
+                  <td className="p-2">{r.fullName}</td>
+                  <td className="p-2">{r.gender}</td>
+                  <td className="p-2">{r.className}</td>
+                  <td className="p-2">{r.phone}</td>
+                  <td className="p-2">{r.email}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+
+        {data?.rows && tab === "books" && (
+          <table className="w-full text-left text-sm print:text-black">
+            <thead>
+              <tr className="border-b border-lms-dark print:border-black">
+                <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>
+              </tr>
+            </thead>
+            <tbody>
+              {data.rows.map((r) => (
+                <tr key={r._id} className="border-b border-lms-dark/50 print:border-gray-300">
+                  <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>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+
+        {data?.rows && (tab === "borrowed" || tab === "returned") && (
+          <table className="w-full text-left text-sm print:text-black">
+            <thead>
+              <tr className="border-b border-lms-dark print:border-black">
+                <th className="p-2">Student</th>
+                <th className="p-2">Book</th>
+                <th className="p-2">Borrowed</th>
+                <th className="p-2">Due</th>
+                <th className="p-2">Returned</th>
+              </tr>
+            </thead>
+            <tbody>
+              {data.rows.map((r) => (
+                <tr key={r._id} className="border-b border-lms-dark/50 print:border-gray-300">
+                  <td className="p-2">{r.student?.fullName}</td>
+                  <td className="p-2">{r.book?.title}</td>
+                  <td className="p-2">{new Date(r.borrowDate).toLocaleDateString()}</td>
+                  <td className="p-2">{new Date(r.returnDueDate).toLocaleDateString()}</td>
+                  <td className="p-2">{r.returnedAt ? new Date(r.returnedAt).toLocaleDateString() : "—"}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,75 @@
+import { useEffect, useState } from "react";
+import { listBorrows, returnBorrow } from "../api/borrowsApi";
+
+export default function ReturnPage() {
+  const [rows, setRows] = useState([]);
+  const [err, setErr] = useState("");
+
+  const load = () =>
+    listBorrows({ status: "active" })
+      .then(({ data }) => setRows(data))
+      .catch((e) => setErr(e.response?.data?.message || "Load failed"));
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  const doReturn = async (id) => {
+    setErr("");
+    try {
+      await returnBorrow(id);
+      await load();
+    } catch (e) {
+      setErr(e.response?.data?.message || "Return failed");
+    }
+  };
+
+  const fmt = (d) => (d ? new Date(d).toLocaleDateString() : "—");
+
+  return (
+    <div>
+      <h1 className="mb-4 text-xl font-bold text-lms-paper">Return books</h1>
+      <p className="mb-3 text-sm text-lms-paper/70">Active borrowings. Returning restores one copy to inventory.</p>
+      {err && <p className="mb-3 border border-lms-accent px-3 py-2 text-sm text-lms-accent">{err}</p>}
+      <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">Student</th>
+              <th className="p-2">Book</th>
+              <th className="p-2">Borrowed</th>
+              <th className="p-2">Due</th>
+              <th className="p-2">Action</th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((r) => (
+              <tr key={r._id} className="border-t border-lms-dark">
+                <td className="p-2">{r.student?.fullName}</td>
+                <td className="p-2">{r.book?.title}</td>
+                <td className="p-2">{fmt(r.borrowDate)}</td>
+                <td className="p-2">{fmt(r.returnDueDate)}</td>
+                <td className="p-2">
+                  <button
+                    type="button"
+                    className="border border-lms-accent bg-lms-dark px-3 py-1 text-lms-accent hover:bg-lms-accent hover:text-lms-paper"
+                    onClick={() => doReturn(r._id)}
+                  >
+                    Return
+                  </button>
+                </td>
+              </tr>
+            ))}
+            {rows.length === 0 && (
+              <tr>
+                <td colSpan={5} className="p-4 text-lms-paper/60">
+                  No active borrowings.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,156 @@
+import { useState } from "react";
+import { listBooks } from "../api/booksApi";
+import { listBorrows } from "../api/borrowsApi";
+import { listStudents } from "../api/studentsApi";
+
+export default function SearchPage() {
+  const [name, setName] = useState("");
+  const [title, setTitle] = useState("");
+  const [from, setFrom] = useState("");
+  const [to, setTo] = useState("");
+  const [students, setStudents] = useState([]);
+  const [books, setBooks] = useState([]);
+  const [borrows, setBorrows] = useState([]);
+  const [err, setErr] = useState("");
+
+  const searchStudents = async () => {
+    setErr("");
+    try {
+      const { data } = await listStudents({ name });
+      setStudents(data);
+    } catch (e) {
+      setErr(e.response?.data?.message || "Search failed");
+    }
+  };
+
+  const searchBooks = async () => {
+    setErr("");
+    try {
+      const { data } = await listBooks({ title });
+      setBooks(data);
+    } catch (e) {
+      setErr(e.response?.data?.message || "Search failed");
+    }
+  };
+
+  const filterBorrows = async () => {
+    setErr("");
+    try {
+      const params = { status: "all" };
+      if (from) params.dateFrom = from;
+      if (to) params.dateTo = to;
+      const { data } = await listBorrows(params);
+      setBorrows(data);
+    } catch (e) {
+      setErr(e.response?.data?.message || "Filter failed");
+    }
+  };
+
+  const fmt = (d) => (d ? new Date(d).toLocaleDateString() : "—");
+
+  return (
+    <div className="space-y-8">
+      <h1 className="text-xl font-bold text-lms-paper">Search and filter</h1>
+      {err && <p className="border border-lms-accent px-3 py-2 text-sm text-lms-accent">{err}</p>}
+
+      <section className="border border-lms-panel bg-lms-panel p-4">
+        <h2 className="mb-2 text-sm font-semibold text-lms-accent">Students by name</h2>
+        <div className="flex flex-wrap gap-2">
+          <input
+            className="border border-lms-dark bg-lms-dark px-3 py-2 text-lms-paper"
+            placeholder="Name contains…"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+          />
+          <button
+            type="button"
+            className="border border-lms-accent bg-lms-accent px-4 py-2 text-lms-paper"
+            onClick={searchStudents}
+          >
+            Search
+          </button>
+        </div>
+        <ul className="mt-3 max-h-48 overflow-auto text-sm text-lms-paper/90">
+          {students.map((s) => (
+            <li key={s._id} className="border-b border-lms-dark py-1">
+              {s.fullName} · {s.className} · {s.email}
+            </li>
+          ))}
+        </ul>
+      </section>
+
+      <section className="border border-lms-panel bg-lms-panel p-4">
+        <h2 className="mb-2 text-sm font-semibold text-lms-accent">Books by title</h2>
+        <div className="flex flex-wrap gap-2">
+          <input
+            className="border border-lms-dark bg-lms-dark px-3 py-2 text-lms-paper"
+            placeholder="Title contains…"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+          />
+          <button
+            type="button"
+            className="border border-lms-accent bg-lms-accent px-4 py-2 text-lms-paper"
+            onClick={searchBooks}
+          >
+            Search
+          </button>
+        </div>
+        <ul className="mt-3 max-h-48 overflow-auto text-sm text-lms-paper/90">
+          {books.map((b) => (
+            <li key={b._id} className="border-b border-lms-dark py-1">
+              {b.title} — {b.author} ({b.quantity} in library)
+            </li>
+          ))}
+        </ul>
+      </section>
+
+      <section className="border border-lms-panel bg-lms-panel p-4">
+        <h2 className="mb-2 text-sm font-semibold text-lms-accent">Borrowings by borrow date</h2>
+        <div className="flex flex-wrap gap-2">
+          <input
+            type="date"
+            className="border border-lms-dark bg-lms-dark px-3 py-2 text-lms-paper"
+            value={from}
+            onChange={(e) => setFrom(e.target.value)}
+          />
+          <input
+            type="date"
+            className="border border-lms-dark bg-lms-dark px-3 py-2 text-lms-paper"
+            value={to}
+            onChange={(e) => setTo(e.target.value)}
+          />
+          <button
+            type="button"
+            className="border border-lms-accent bg-lms-accent px-4 py-2 text-lms-paper"
+            onClick={filterBorrows}
+          >
+            Apply
+          </button>
+        </div>
+        <div className="mt-3 max-h-64 overflow-auto text-sm">
+          <table className="w-full text-left text-lms-paper">
+            <thead className="text-lms-paper/60">
+              <tr>
+                <th className="p-1">Student</th>
+                <th className="p-1">Book</th>
+                <th className="p-1">Borrowed</th>
+                <th className="p-1">Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              {borrows.map((r) => (
+                <tr key={r._id} className="border-t border-lms-dark">
+                  <td className="p-1">{r.student?.fullName}</td>
+                  <td className="p-1">{r.book?.title}</td>
+                  <td className="p-1">{fmt(r.borrowDate)}</td>
+                  <td className="p-1">{r.returnedAt ? "Returned" : "Borrowed"}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </div>
+  );
+}