create-ishvexa-app 1.0.0

package/templates/sfms-app/frontend/src/pages/StudentsPage.jsx

@@ -0,0 +1,281 @@
+import { useEffect, useState } from 'react';
+import { apiRequest } from '../api/apiClient.js';
+
+const inputClass =
+  'border border-slate-200 rounded-lg px-3 py-2 w-full focus:ring-2 focus:ring-teal-500 outline-none';
+
+export function StudentsPage() {
+  const [list, setList] = useState([]);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState('');
+  /** null | 'new' | student row — drives add form vs edit modal */
+  const [formTarget, setFormTarget] = useState(null);
+
+  const [fullName, setFullName] = useState('');
+  const [className, setClassName] = useState('');
+  const [parentPhone, setParentPhone] = useState('');
+  const [fieldErrors, setFieldErrors] = useState({});
+
+  async function load() {
+    setError('');
+    try {
+      const data = await apiRequest('/api/students');
+      setList(data);
+    } catch (e) {
+      setError(e.message);
+    }
+  }
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  function validate() {
+    const err = {};
+    if (!fullName.trim()) err.fullName = 'Full name is required.';
+    if (!className.trim()) err.className = 'Class is required.';
+    if (!parentPhone.trim()) err.parentPhone = 'Parent phone is required.';
+    else if (!/^[0-9+\-\s]{7,15}$/.test(parentPhone.trim())) {
+      err.parentPhone = 'Enter a valid phone number (7–15 digits).';
+    }
+    setFieldErrors(err);
+    return Object.keys(err).length === 0;
+  }
+
+  function openNew() {
+    setFormTarget('new');
+    setFullName('');
+    setClassName('');
+    setParentPhone('');
+    setFieldErrors({});
+  }
+
+  function openEdit(row) {
+    setFormTarget(row);
+    setFullName(row.full_name || '');
+    setClassName(row.class || '');
+    setParentPhone(row.parent_phone || '');
+    setFieldErrors({});
+  }
+
+  function closeForm() {
+    setFormTarget(null);
+    setFieldErrors({});
+  }
+
+  async function save(e) {
+    e.preventDefault();
+    if (!validate()) return;
+    setSubmitting(true);
+    setError('');
+    try {
+      const payload = {
+        full_name: fullName.trim(),
+        class: className.trim(),
+        parent_phone: parentPhone.trim(),
+      };
+      if (formTarget !== 'new' && formTarget?.id) {
+        await apiRequest(`/api/students/${formTarget.id}`, {
+          method: 'PUT',
+          body: JSON.stringify(payload),
+        });
+      } else {
+        await apiRequest('/api/students', { method: 'POST', body: JSON.stringify(payload) });
+      }
+      closeForm();
+      await load();
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  async function remove(id) {
+    if (!window.confirm('Delete this student?')) return;
+    setError('');
+    try {
+      await apiRequest(`/api/students/${id}`, { method: 'DELETE' });
+      await load();
+    } catch (e) {
+      setError(e.message);
+    }
+  }
+
+  return (
+    <div>
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
+        <div>
+          <h1 className="font-display text-2xl font-bold text-sfms-ink">Students</h1>
+          <p className="text-slate-600 text-sm mt-0.5">Create, update and remove student records.</p>
+        </div>
+        <button
+          type="button"
+          onClick={openNew}
+          className="text-sm font-medium text-teal-700 border border-teal-200 rounded-lg px-4 py-2 hover:bg-teal-50 w-fit"
+        >
+          + New student
+        </button>
+      </div>
+
+      {error && (
+        <div className="mb-4 text-sm text-red-600 bg-red-50 border border-red-100 rounded-lg px-3 py-2">
+          {error}
+        </div>
+      )}
+
+      {formTarget === 'new' && (
+        <form
+          onSubmit={save}
+          className="mb-8 p-5 bg-white rounded-xl border border-slate-100 shadow-sm space-y-3 max-w-xl"
+        >
+          <h2 className="font-semibold text-sfms-ink">New student</h2>
+          <div>
+            <label className="text-sm text-slate-600">Full name</label>
+            <input
+              className={inputClass + ' mt-1'}
+              value={fullName}
+              onChange={(e) => setFullName(e.target.value)}
+            />
+            {fieldErrors.fullName && (
+              <p className="text-xs text-red-600 mt-1">{fieldErrors.fullName}</p>
+            )}
+          </div>
+          <div>
+            <label className="text-sm text-slate-600">Class</label>
+            <input
+              className={inputClass + ' mt-1'}
+              value={className}
+              onChange={(e) => setClassName(e.target.value)}
+            />
+            {fieldErrors.className && (
+              <p className="text-xs text-red-600 mt-1">{fieldErrors.className}</p>
+            )}
+          </div>
+          <div>
+            <label className="text-sm text-slate-600">Parent phone</label>
+            <input
+              className={inputClass + ' mt-1'}
+              value={parentPhone}
+              onChange={(e) => setParentPhone(e.target.value)}
+            />
+            {fieldErrors.parentPhone && (
+              <p className="text-xs text-red-600 mt-1">{fieldErrors.parentPhone}</p>
+            )}
+          </div>
+          <div className="flex gap-2 pt-2">
+            <button
+              type="submit"
+              disabled={submitting}
+              className="px-4 py-2 rounded-lg bg-teal-600 text-white text-sm font-medium disabled:opacity-60"
+            >
+              {submitting ? 'Saving…' : 'Save'}
+            </button>
+            <button type="button" onClick={closeForm} className="px-4 py-2 rounded-lg border text-sm">
+              Cancel
+            </button>
+          </div>
+        </form>
+      )}
+
+      <div className="overflow-x-auto rounded-xl border border-slate-200 bg-white shadow-sm">
+        <table className="min-w-full text-sm">
+          <thead className="bg-slate-50 text-slate-600 text-left">
+            <tr>
+              <th className="px-4 py-3 font-medium">Name</th>
+              <th className="px-4 py-3 font-medium">Class</th>
+              <th className="px-4 py-3 font-medium">Parent phone</th>
+              <th className="px-4 py-3 font-medium w-36">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {list.map((u) => (
+              <tr key={u.id} className="border-t border-slate-100 hover:bg-slate-50/80">
+                <td className="px-4 py-3 font-medium text-sfms-ink">{u.full_name}</td>
+                <td className="px-4 py-3">{u.class}</td>
+                <td className="px-4 py-3">{u.parent_phone}</td>
+                <td className="px-4 py-3 space-x-2 whitespace-nowrap">
+                  <button
+                    type="button"
+                    className="text-teal-700 font-medium"
+                    onClick={() => openEdit(u)}
+                  >
+                    Edit
+                  </button>
+                  <button type="button" className="text-red-600 font-medium" onClick={() => remove(u.id)}>
+                    Delete
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        {list.length === 0 && <p className="p-6 text-center text-slate-500">No students yet.</p>}
+      </div>
+
+      {formTarget && formTarget !== 'new' && (
+        <div
+          className="fixed inset-0 bg-black/40 flex items-center justify-center p-4 z-50"
+          onClick={(e) => e.target === e.currentTarget && closeForm()}
+          role="presentation"
+        >
+          <div
+            className="bg-white rounded-xl p-6 max-w-md w-full shadow-xl space-y-3"
+            onClick={(e) => e.stopPropagation()}
+            role="dialog"
+            aria-modal="true"
+          >
+            <h2 className="font-semibold text-lg">Edit student</h2>
+            <form onSubmit={save} className="space-y-3">
+              <div>
+                <label className="text-sm text-slate-600">Name</label>
+                <input
+                  className={inputClass + ' mt-1'}
+                  value={fullName}
+                  onChange={(e) => setFullName(e.target.value)}
+                />
+                {fieldErrors.fullName && (
+                  <p className="text-xs text-red-600 mt-1">{fieldErrors.fullName}</p>
+                )}
+              </div>
+              <div>
+                <label className="text-sm text-slate-600">Class</label>
+                <input
+                  className={inputClass + ' mt-1'}
+                  value={className}
+                  onChange={(e) => setClassName(e.target.value)}
+                />
+                {fieldErrors.className && (
+                  <p className="text-xs text-red-600 mt-1">{fieldErrors.className}</p>
+                )}
+              </div>
+              <div>
+                <label className="text-sm text-slate-600">Parent phone</label>
+                <input
+                  className={inputClass + ' mt-1'}
+                  value={parentPhone}
+                  onChange={(e) => setParentPhone(e.target.value)}
+                />
+                {fieldErrors.parentPhone && (
+                  <p className="text-xs text-red-600 mt-1">{fieldErrors.parentPhone}</p>
+                )}
+              </div>
+              <div className="flex gap-2 pt-2">
+                <button
+                  type="submit"
+                  disabled={submitting}
+                  className="flex-1 py-2 rounded-lg bg-teal-600 text-white text-sm font-medium disabled:opacity-60"
+                >
+                  Save
+                </button>
+                <button type="button" onClick={closeForm} className="px-4 py-2 rounded-lg border text-sm">
+                  Close
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/sfms-app/frontend/tailwind.config.js

@@ -0,0 +1,21 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,jsx}'],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['DM Sans', 'system-ui', 'sans-serif'],
+        display: ['Outfit', 'system-ui', 'sans-serif'],
+      },
+      colors: {
+        sfms: {
+          ink: '#0f172a',
+          mist: '#f1f5f9',
+          accent: '#0d9488',
+          accentDark: '#0f766e',
+        },
+      },
+    },
+  },
+  plugins: [],
+};

package/templates/sfms-app/frontend/vite.config.js

@@ -0,0 +1,61 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const DEFAULT_DEV_PORT = 5173;
+const DEFAULT_API_PORT = 5000;
+
+/** Read PORT from backend-mysql or backend-mongodb .env */
+function backendPortFromEnvFile() {
+  for (const dir of ['backend-mysql', 'backend-mongodb']) {
+    const envPath = path.join(__dirname, `../${dir}/.env`);
+    if (!fs.existsSync(envPath)) continue;
+    try {
+      const text = fs.readFileSync(envPath, 'utf8');
+      const portLine = text
+        .split('\n')
+        .map((line) => line.trim())
+        .find((line) => line.startsWith('PORT=') || line.startsWith('SFMS_BACKEND_PORT='));
+      if (!portLine) continue;
+      const n = Number(portLine.split('=')[1]?.trim());
+      if (Number.isFinite(n) && n > 0) return n;
+    } catch {
+      /* try next */
+    }
+  }
+  return null;
+}
+
+export default defineConfig(({ mode }) => {
+  const rootEnv = loadEnv(mode, process.cwd(), '');
+
+  const port =
+    Number(
+      rootEnv.VITE_DEV_SERVER_PORT ||
+        rootEnv.SFMS_FRONTEND_PORT ||
+        `${DEFAULT_DEV_PORT}`
+    ) || DEFAULT_DEV_PORT;
+
+  const fromBackendEnv = backendPortFromEnvFile();
+  const proxyTarget =
+    rootEnv.VITE_API_PROXY_TARGET ||
+    rootEnv.VITE_BACKEND_URL ||
+    (fromBackendEnv ? `http://localhost:${fromBackendEnv}` : `http://localhost:${DEFAULT_API_PORT}`);
+
+  return {
+    plugins: [react()],
+    server: {
+      port,
+      strictPort: true,
+      proxy: {
+        '/api': {
+          target: proxyTarget,
+          changeOrigin: true,
+        },
+      },
+    },
+  };
+});

package/templates/sims-app/README.md

@@ -0,0 +1,138 @@
+# SIMS — Stock Inventory Management System
+
+[How this maps to the generic EPMS marking rubric (and what differs) → `EXAM_CHECKLIST_MARKING.md`](EXAM_CHECKLIST_MARKING.md)
+
+## ERD (Entity Relationship Diagram) — for your paper
+
+Draw this on **plain paper** with standard symbols: **entities (rectangles)**, **relationships (diamonds or simple lines)**, **primary keys (PK)**, **foreign keys (FK)**, and **cardinalities (1, N)**.
+
+### 1) Entity: `User` (login / session)
+
+| Field          | Type    | Key |
+|----------------|---------|-----|
+| `userId`       | (PK)    | PK  |
+| `username`     | String  |     |
+| `passwordHash` | String  |     |
+
+- **No foreign keys.** Use this only for authentication (session). You can draw it **separate** from the stock model (no line to Spare part / stock tables), unless your assessor wants a line—usually **not required**.
+
+---
+
+### 2) Entity: `Spare_Part` (catalog + current stock)
+
+| Field        | Type    | Key |
+|-------------|---------|-----|
+| `sparePartId` / `_id` | (id) | **PK** |
+| `name`      | String  |     |
+| `category`  | String  |     |
+| `quantity`  | Number  |     |
+| `unitPrice` | Number  |     |
+| `totalPrice`| Number  |     |
+
+- One row = one part type (e.g. oil filter) with **current** quantity in stock and price fields as in the exam.
+
+---
+
+### 3) Entity: `Stock_In` (parts received into store)
+
+| Field            | Type   | Key |
+|------------------|--------|-----|
+| `stockInId` / `_id` | (id) | **PK** |
+| `sparePartId`    | ref    | **FK → `Spare_Part.sparePartId`** |
+| `stockInQuantity`| Number |     |
+| `stockInDate`    | Date   |     |
+
+---
+
+### 4) Entity: `Stock_Out` (parts taken from store)
+
+| Field                 | Type   | Key |
+|------------------------|--------|-----|
+| `stockOutId` / `_id`  | (id)   | **PK** |
+| `sparePartId`         | ref    | **FK → `Spare_Part.sparePartId`** |
+| `stockOutQuantity`    | Number |     |
+| `stockOutUnitPrice`  | Number |     |
+| `stockOutTotalPrice` | Number |     |
+| `stockOutDate`        | Date   |     |
+
+---
+
+### Relationships and cardinality
+
+| Relationship | From | To | Cardinality (typical) |
+|--------------|------|-----|------------------------|
+| **Supplies to stock in** | `Spare_Part` | `Stock_In` | **1 : N** (one part type, many stock-in rows over time) |
+| **Supplies to stock out** | `Spare_Part` | `Stock_Out` | **1 : N** (one part type, many stock-out rows over time) |
+| | `Stock_In` | `Spare_Part` | each row **N : 1** (many stock-in rows point to one part) |
+| | `Stock_Out` | `Spare_Part` | each row **N : 1** (many stock-out rows point to one part) |
+
+- **There is no direct relationship** between `Stock_In` and `Stock_Out` (no FK between them); they both only link to **`Spare_Part`**.
+
+### Small diagram (ASCII — for copy on paper)
+
+```
+  ┌──────────┐       1          N  ┌───────────┐
+  │  User    │  (no FK to stock)  │ Spare     │
+  │  PK: id  │                    │  _Part     │
+  └──────────┘                    │  PK: id  │
+                                  └─────┬─────┘
+                    ┌──────────────────┼──────────────────┐
+                1   │  N            1  │  N
+          ┌─────────▼──────┐   ┌───────▼──────────┐
+          │  Stock_In      │   │  Stock_Out     │
+          │  PK, FK→Spare  │   │  PK, FK→Spare  │
+          └────────────────┘   └────────────────┘
+```
+
+**Summary sentence:** *One spare part can have many stock-in records and many stock-out records; each stock-in and stock-out row references exactly one spare part.*
+
+---
+
+Practical exam project  : full-stack app with **MongoDB**, **Express**, **React**, **Tailwind**, **session login**, **Axios**.
+
+## Exam rules implemented
+
+| Requirement | How |
+|-------------|-----|
+| ERD: Spare_Part, Stock_In, Stock_Out (PK/FK) | On paper; backend uses `SparePart` with refs from `StockIn` / `StockOut` |
+| DB name **SIMS** | `MONGO_URI` → database `sims` |
+| Insert on Spare Part, Stock In, Stock Out | `POST` only (no update/delete) on spare parts and stock in |
+| Update / delete / list only on **Stock Out** | `GET`, `PUT`, `DELETE` on `/api/stock-out/:id` |
+| Menu: Spare Part, Stock In, Stock Out, **Reports**, **Logout** | `AppLayout.jsx` |
+| Session login, **strong encrypted password** | Bcrypt; register requires 8+ chars, upper, lower, number |
+| Tailwind, responsive, Axios | Vite + `@tailwindcss/vite` |
+| Reports: **daily stock status** + **daily stock out** | `GET /api/reports/daily-stock-status?date=`, `GET /api/reports/daily-stockout?date=` |
+
+## Ports (avoids clash with EPMS on same machine)
+
+- Backend: **5001** (configurable in `.env`)
+- Frontend: **5174** (Vite)
+- `FRONTEND_URL` in backend `.env` should match the Vite URL
+
+## Run
+
+```bash
+cd sims/backend
+cp .env.example .env
+npm install
+npm run dev
+```
+
+```bash
+cd sims/frontend
+npm install
+npm run dev
+```
+
+- API: [http://localhost:5001/api/health](http://localhost:5001/api/health)  
+- App: [http://localhost:5174](http://localhost:5174)
+
+## Project layout
+
+```
+sims/
+  backend/    Node + Express + Mongoose
+  frontend/   React + Vite + Tailwind
+  README.md
+```
+

package/templates/sims-app/backend/.env

@@ -0,0 +1,4 @@
+PORT=5001
+MONGO_URI=mongodb://127.0.0.1:27017/sims
+SESSION_SECRET=change-sims-secret
+FRONTEND_URL=http://localhost:5174

package/templates/sims-app/backend/.env.example

@@ -0,0 +1,4 @@
+PORT=5001
+MONGO_URI=mongodb://127.0.0.1:27017/sims
+SESSION_SECRET=change-sims-secret
+FRONTEND_URL=http://localhost:5174

package/templates/sims-app/backend/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "sims-backend",
+  "version": "1.0.0",
+  "main": "src/server.js",
+  "scripts": {
+    "dev": "nodemon src/server.js",
+    "start": "node src/server.js"
+  },
+  "license": "ISC",
+  "dependencies": {
+    "bcryptjs": "^3.0.3",
+    "connect-mongo": "^6.0.0",
+    "cors": "^2.8.6",
+    "dotenv": "^17.4.2",
+    "express": "^5.2.1",
+    "express-session": "^1.19.0",
+    "mongoose": "^9.5.0"
+  },
+  "devDependencies": {
+    "nodemon": "^3.1.14"
+  }
+}

package/templates/sims-app/backend/src/config/db.js

@@ -0,0 +1,9 @@
+const mongoose = require("mongoose");
+
+const connectDatabase = async () => {
+  const mongoUri = process.env.MONGO_URI || "mongodb://127.0.0.1:27017/sims";
+  await mongoose.connect(mongoUri);
+  console.log("MongoDB connected (SIMS database)");
+};
+
+module.exports = connectDatabase;

package/templates/sims-app/backend/src/controllers/authController.js

@@ -0,0 +1,115 @@
+const bcrypt = require("bcryptjs");
+const User = require("../models/User");
+const { strongPasswordError } = require("../utils/passwordPolicy");
+
+const normalize = (value) => String(value || "").trim();
+const normalizeEmail = (email) => String(email || "").trim().toLowerCase();
+
+const register = async (req, res) => {
+  try {
+    const username = normalize(req.body.username);
+    const email = normalizeEmail(req.body.email);
+    const password = String(req.body.password || "");
+    if (!username || !email || !password) {
+      return res.status(400).json({ message: "Username, email and password are required" });
+    }
+    if (username.length < 3) {
+      return res.status(400).json({ message: "Username must be at least 3 characters" });
+    }
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      return res.status(400).json({ message: "Enter a valid email address." });
+    }
+    const pwdErr = strongPasswordError(password);
+    if (pwdErr) {
+      return res.status(400).json({ message: pwdErr });
+    }
+    const existingUser = await User.findOne({ username });
+    if (existingUser) {
+      return res.status(409).json({ message: "Username already exists" });
+    }
+    const existingEmail = await User.findOne({ email });
+    if (existingEmail) {
+      return res.status(409).json({ message: "Email already registered" });
+    }
+    const passwordHash = await bcrypt.hash(password, 10);
+    await User.create({ username, email, passwordHash });
+    return res.status(201).json({ message: "User created successfully" });
+  } catch (error) {
+    return res.status(500).json({ message: error.message });
+  }
+};
+
+const login = async (req, res) => {
+  try {
+    const username = normalize(req.body.username);
+    const password = String(req.body.password || "");
+    if (!username || !password) {
+      return res.status(400).json({ message: "Username and password are required" });
+    }
+    const user = await User.findOne({ username });
+    if (!user) {
+      return res.status(401).json({ message: "Invalid credentials" });
+    }
+    const isValid = await bcrypt.compare(password, user.passwordHash);
+    if (!isValid) {
+      return res.status(401).json({ message: "Invalid credentials" });
+    }
+    req.session.userId = user._id;
+    req.session.username = user.username;
+    return res.json({ message: "Login successful", username: user.username });
+  } catch (error) {
+    return res.status(500).json({ message: error.message });
+  }
+};
+
+const currentUser = (req, res) => {
+  if (!req.session.userId) {
+    return res.status(401).json({ message: "Unauthorized" });
+  }
+  return res.json({ username: req.session.username });
+};
+
+const logout = (req, res) => {
+  req.session.destroy(() => {
+    res.clearCookie("connect.sid");
+    res.json({ message: "Logged out" });
+  });
+};
+
+const forgotPassword = async (req, res) => {
+  try {
+    const email = normalizeEmail(req.body.email);
+    const newPassword = String(req.body.newPassword || "");
+    const confirmPassword = String(req.body.confirmPassword || "");
+    if (!email) {
+      return res.status(400).json({ success: false, message: "Email is required." });
+    }
+    if (!newPassword) {
+      return res.status(400).json({ success: false, message: "New password is required." });
+    }
+    if (!confirmPassword) {
+      return res.status(400).json({ success: false, message: "Confirm password is required." });
+    }
+    if (newPassword !== confirmPassword) {
+      return res.status(400).json({
+        success: false,
+        message: "New password and confirm password must match.",
+      });
+    }
+    const pwdErr = strongPasswordError(newPassword);
+    if (pwdErr) {
+      return res.status(400).json({ success: false, message: pwdErr });
+    }
+    const user = await User.findOne({ email });
+    if (!user) {
+      return res.status(404).json({ success: false, message: "User not found" });
+    }
+    user.passwordHash = await bcrypt.hash(newPassword, 10);
+    await user.save();
+    return res.json({ success: true, message: "Password reset successfully" });
+  } catch (error) {
+    return res.status(500).json({ success: false, message: error.message });
+  }
+};
+
+module.exports = { register, login, currentUser, logout, forgotPassword };