create-steve-rogers 1.0.0 → 1.0.2

package/apps/SFMS/frontend/src/pages/StudentsPage.jsx

@@ -0,0 +1,257 @@
+import { useEffect, useState } from 'react';
+import { apiRequest } from '../api/apiClient.js';
+
+const inputClass = 'input-field';
+
+export function StudentsPage() {
+  const [list, setList] = useState([]);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState('');
+  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 = 'Required';
+    if (!className.trim()) err.className = 'Required';
+    if (!parentPhone.trim()) {
+      err.parentPhone = 'Required';
+    } else if (!/^[0-9]{1,10}$/.test(parentPhone)) {
+      err.parentPhone = 'Phone must be digits and no more than 10 characters';
+    }
+    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="app-header">
+        <p className="text-sm uppercase tracking-[0.3em] text-slate-500">Students</p>
+        <h1 className="page-title">Student roster</h1>
+        <p className="page-subtitle">Add, edit, and keep track of each student record from a sleek panel.</p>
+      </div>
+
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between mb-6">
+        <div className="space-y-1">
+          <p className="text-base font-semibold text-slate-900">Manage student details</p>
+          <p className="text-sm text-slate-500">Everything is organized in one clean table.</p>
+        </div>
+        <button type="button" onClick={openNew} className="btn-primary w-full sm:w-auto">
+          + New student
+        </button>
+      </div>
+
+      {error && (
+        <div className="mb-6 rounded-[28px] border border-red-100 bg-red-50 px-4 py-3 text-sm text-red-700">
+          {error}
+        </div>
+      )}
+
+      {formTarget === 'new' && (
+        <form onSubmit={save} className="form-card mb-8 max-w-2xl space-y-5">
+          <div className="flex items-center justify-between gap-4">
+            <h2 className="text-xl font-semibold text-slate-900">New student</h2>
+            <button type="button" onClick={closeForm} className="btn-secondary">
+              Close
+            </button>
+          </div>
+
+          <div className="grid gap-4 md:grid-cols-3">
+            <div className="input-group">
+              <label className="text-sm font-medium text-slate-700">Full name</label>
+              <input className={inputClass} value={fullName} onChange={(e) => setFullName(e.target.value)} />
+              {fieldErrors.fullName && <p className="text-xs text-red-600">{fieldErrors.fullName}</p>}
+            </div>
+            <div className="input-group">
+              <label className="text-sm font-medium text-slate-700">Class</label>
+              <input className={inputClass} value={className} onChange={(e) => setClassName(e.target.value)} />
+              {fieldErrors.className && <p className="text-xs text-red-600">{fieldErrors.className}</p>}
+            </div>
+            <div className="input-group">
+              <label className="text-sm font-medium text-slate-700">Parent phone</label>
+              <input
+                type="tel"
+                inputMode="numeric"
+                maxLength="10"
+                className={inputClass}
+                value={parentPhone}
+                onChange={(e) => setParentPhone(e.target.value.replace(/\D/g, '').slice(0, 10))}
+                placeholder="Digits only"
+              />
+              {fieldErrors.parentPhone && <p className="text-xs text-red-600">{fieldErrors.parentPhone}</p>}
+            </div>
+          </div>
+
+          <div className="form-actions">
+            <button type="submit" disabled={submitting} className="btn-primary">
+              {submitting ? 'Saving…' : 'Save'}
+            </button>
+            <button type="button" onClick={closeForm} className="btn-secondary">
+              Cancel
+            </button>
+          </div>
+        </form>
+      )}
+
+      <div className="table-shell">
+        <table className="min-w-full text-sm">
+          <thead className="table-head text-left">
+            <tr>
+              <th className="table-cell font-medium">Name</th>
+              <th className="table-cell font-medium">Class</th>
+              <th className="table-cell font-medium">Parent phone</th>
+              <th className="table-cell font-medium">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {list.map((u) => (
+              <tr key={u.id} className="table-row">
+                <td className="table-cell font-semibold text-slate-900">{u.full_name}</td>
+                <td className="table-cell">{u.class}</td>
+                <td className="table-cell">{u.parent_phone}</td>
+                <td className="table-cell space-x-2 whitespace-nowrap">
+                  <button type="button" className="btn-secondary" onClick={() => openEdit(u)}>
+                    Edit
+                  </button>
+                  <button type="button" className="btn-destructive" onClick={() => remove(u.id)}>
+                    Delete
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        {list.length === 0 && <p className="placeholder-card">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="form-card max-w-md w-full"
+            onClick={(e) => e.stopPropagation()}
+            role="dialog"
+            aria-modal="true"
+          >
+            <div className="flex items-center justify-between gap-4 mb-4">
+              <h2 className="text-xl font-semibold text-slate-900">Edit student</h2>
+              <button type="button" onClick={closeForm} className="btn-secondary">
+                Close
+              </button>
+            </div>
+            <form onSubmit={save} className="space-y-4">
+              <div className="input-group">
+                <label className="text-sm font-medium text-slate-700">Name</label>
+                <input className={inputClass} value={fullName} onChange={(e) => setFullName(e.target.value)} />
+                {fieldErrors.fullName && <p className="text-xs text-red-600">{fieldErrors.fullName}</p>}
+              </div>
+              <div className="input-group">
+                <label className="text-sm font-medium text-slate-700">Class</label>
+                <input className={inputClass} value={className} onChange={(e) => setClassName(e.target.value)} />
+              </div>
+              <div className="input-group">
+                <label className="text-sm font-medium text-slate-700">Parent phone</label>
+                <input
+                  type="tel"
+                  inputMode="numeric"
+                  maxLength="10"
+                  className={inputClass}
+                  value={parentPhone}
+                  onChange={(e) => setParentPhone(e.target.value.replace(/\D/g, '').slice(0, 10))}
+                  placeholder="Digits only"
+                />
+                {fieldErrors.parentPhone && <p className="text-xs text-red-600">{fieldErrors.parentPhone}</p>}
+              </div>
+              <div className="form-actions">
+                <button type="submit" disabled={submitting} className="btn-primary w-full">
+                  Save
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/apps/SFMS/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/apps/SFMS/frontend/vite.config.js

@@ -0,0 +1,35 @@
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
+
+const DEFAULT_DEV_PORT = 5173;
+const DEFAULT_API_PROXY = 'http://localhost:5000';
+
+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 proxyTarget =
+    rootEnv.VITE_API_PROXY_TARGET ||
+    rootEnv.VITE_BACKEND_URL ||
+    DEFAULT_API_PROXY;
+
+  return {
+    plugins: [react()],
+    server: {
+      port,
+      strictPort: true,
+      proxy: {
+        '/api': {
+          target: proxyTarget,
+          changeOrigin: true,
+        },
+      },
+    },
+  };
+});

package/apps/SIMS/.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/apps/SIMS/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/apps/SIMS/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/apps/SIMS/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