create-myexam-app 1.0.19 → 1.0.21

package/projects/SCMS/frontend/src/pages/Profile.jsx

@@ -0,0 +1,62 @@
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+
+function Profile() {
+  const [user, setUser] = useState(null);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    axios
+      .get('http://localhost:5001/api/auth/me', {
+        headers: { Authorization: `Bearer ${localStorage.getItem('token')}` },
+      })
+      .then((response) => {
+        setUser(response.data.user);
+        localStorage.setItem('user', JSON.stringify(response.data.user));
+      })
+      .catch((err) => {
+        const storedUser = localStorage.getItem('user');
+        if (storedUser) {
+          setUser(JSON.parse(storedUser));
+        } else {
+          setError(err.response?.data?.message || 'Failed to load profile');
+        }
+      });
+  }, []);
+
+  if (!user) {
+    return (
+      <div className="page-content">
+        <p className="text-muted">{error || 'No profile data found. Try signing in again.'}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="page-content max-w-lg">
+      <h1 className="page-title">Profile</h1>
+      <p className="page-subtitle">Your account details</p>
+
+      {error && <p className="alert-error">{error}</p>}
+
+      <div className="card divide-y divide-slate-100">
+        <div className="px-5 py-3.5 flex justify-between gap-4">
+          <span className="text-sm text-muted">Name</span>
+          <span className="text-sm text-brand-900">{user.name}</span>
+        </div>
+        <div className="px-5 py-3.5 flex justify-between gap-4">
+          <span className="text-sm text-muted">Email</span>
+          <span className="text-sm text-brand-900">{user.email}</span>
+        </div>
+        {user.id && (
+          <div className="px-5 py-3.5 flex justify-between gap-4">
+            <span className="text-sm text-muted">User ID</span>
+            <span className="text-sm text-brand-900 font-mono truncate">{user.id}</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Profile;

package/projects/SCMS/frontend/src/pages/Register.jsx

@@ -0,0 +1,110 @@
+import { useState } from 'react';
+import axios from 'axios';
+import { Link, useNavigate } from 'react-router-dom';
+
+function Register() {
+  const navigate = useNavigate();
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [message, setMessage] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    setMessage('');
+    setLoading(true);
+
+    try {
+      const response = await axios.post('http://localhost:5001/api/auth/register', {
+        name,
+        email,
+        password,
+      });
+      localStorage.setItem('token', response.data.token);
+      localStorage.setItem('user', JSON.stringify(response.data.user));
+      setMessage('Account created successfully');
+      navigate('/dashboard');
+    } catch (err) {
+      setError(err.response?.data?.message || 'Registration failed');
+      console.error('Server Error:', err.response?.data || err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="auth-page">
+      <div className="auth-card">
+        <p className="text-xs font-semibold uppercase tracking-wider text-brand-600 mb-1">SCMS</p>
+        <h1 className="text-xl font-semibold text-brand-900 mb-6">Create account</h1>
+
+        {message && <p className="alert-success">{message}</p>}
+        {error && <p className="alert-error">{error}</p>}
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label htmlFor="name" className="block text-sm font-medium text-slate-700 mb-1">
+              Name
+            </label>
+            <input
+              id="name"
+              name="name"
+              type="text"
+              required
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="input"
+            />
+          </div>
+
+          <div>
+            <label htmlFor="email" className="block text-sm font-medium text-slate-700 mb-1">
+              Email
+            </label>
+            <input
+              id="email"
+              name="email"
+              type="email"
+              required
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="input"
+            />
+          </div>
+
+          <div>
+            <label htmlFor="password" className="block text-sm font-medium text-slate-700 mb-1">
+              Password
+            </label>
+            <input
+              id="password"
+              name="password"
+              type="password"
+              required
+              minLength={6}
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="input"
+            />
+          </div>
+
+          <button type="submit" disabled={loading} className="btn-primary-full">
+            {loading ? 'Creating account...' : 'Register'}
+          </button>
+        </form>
+
+        <p className="mt-5 text-sm text-muted text-center">
+          Already have an account?{' '}
+          <Link to="/login" className="text-brand-700 font-medium hover:text-brand-800">
+            Sign in
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default Register;

package/projects/SCMS/frontend/src/pages/Reports.jsx

@@ -0,0 +1,94 @@
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+
+function Reports() {
+  const [report, setReport] = useState(null);
+  const [error, setError] = useState('');
+
+  const headers = {
+    Authorization: `Bearer ${localStorage.getItem('token')}`,
+  };
+
+  useEffect(() => {
+    axios
+      .get('http://localhost:5001/api/reports/summary', { headers })
+      .then((res) => setReport(res.data))
+      .catch((err) => {
+        console.error(err);
+        setError('Failed to load reports');
+      });
+  }, []);
+
+  return (
+    <div className="page-content">
+      <h1 className="page-title">Reports</h1>
+      <p className="page-subtitle">Summary of your supply chain activity</p>
+
+      {error && <p className="alert-error">{error}</p>}
+
+      {!report ? (
+        <p className="text-sm text-muted">Loading report summary...</p>
+      ) : (
+        <>
+          <div className="grid gap-4 md:grid-cols-3 mb-6">
+            <div className="stat-card">
+              <h2>Suppliers</h2>
+              <p>Total: {report.suppliers.total}</p>
+              <p>Daily: {report.suppliers.daily}</p>
+              <p>Weekly: {report.suppliers.weekly}</p>
+              <p>Monthly: {report.suppliers.monthly}</p>
+            </div>
+            <div className="stat-card">
+              <h2>Shipments</h2>
+              <p>Total: {report.shipments.total}</p>
+              <p>Daily: {report.shipments.daily}</p>
+              <p>Weekly: {report.shipments.weekly}</p>
+              <p>Monthly: {report.shipments.monthly}</p>
+            </div>
+            <div className="stat-card">
+              <h2>Deliveries</h2>
+              <p>Total: {report.deliveries.total}</p>
+              <p>Daily: {report.deliveries.daily}</p>
+              <p>Weekly: {report.deliveries.weekly}</p>
+              <p>Monthly: {report.deliveries.monthly}</p>
+            </div>
+          </div>
+
+          <div className="grid gap-4 md:grid-cols-2">
+            <div className="stat-card">
+              <h2>Recent Shipments</h2>
+              {report.recentShipments.length === 0 ? (
+                <p className="text-sm text-muted">No recent shipments.</p>
+              ) : (
+                report.recentShipments.map((shipment) => (
+                  <div key={shipment._id} className="mb-3 pb-3 border-b border-slate-100 last:border-0 last:mb-0 last:pb-0">
+                    <p className="text-sm font-medium text-brand-800">{shipment.shipmentNumber}</p>
+                    <p className="text-sm text-muted">Destination: {shipment.destination}</p>
+                    <p className="text-sm text-muted">Status: {shipment.shipmentStatus}</p>
+                  </div>
+                ))
+              )}
+            </div>
+
+            <div className="stat-card">
+              <h2>Recent Deliveries</h2>
+              {report.recentDeliveries.length === 0 ? (
+                <p className="text-sm text-muted">No recent deliveries.</p>
+              ) : (
+                report.recentDeliveries.map((delivery) => (
+                  <div key={delivery._id} className="mb-3 pb-3 border-b border-slate-100 last:border-0 last:mb-0 last:pb-0">
+                    <p className="text-sm font-medium text-brand-800">{delivery.deliveryCode}</p>
+                    <p className="text-sm text-muted">Quantity: {delivery.quantityDelivered}</p>
+                    <p className="text-sm text-muted">Status: {delivery.deliveryStatus}</p>
+                  </div>
+                ))
+              )}
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+export default Reports;

package/projects/SCMS/frontend/src/pages/Shipment.jsx

@@ -0,0 +1,182 @@
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+
+function Shipment() {
+  const [shipments, setShipments] = useState([]);
+  const [suppliers, setSuppliers] = useState([]);
+  const [shipmentNumber, setShipmentNumber] = useState('');
+  const [shipmentDate, setShipmentDate] = useState('');
+  const [shipmentStatus, setShipmentStatus] = useState('Pending');
+  const [destination, setDestination] = useState('');
+  const [supplierId, setSupplierId] = useState('');
+  const [editId, setEditId] = useState(null);
+  const [message, setMessage] = useState('');
+
+  const headers = {
+    Authorization: `Bearer ${localStorage.getItem('token')}`,
+  };
+
+  const clearForm = () => {
+    setShipmentNumber('');
+    setShipmentDate('');
+    setShipmentStatus('Pending');
+    setDestination('');
+    setSupplierId('');
+    setEditId(null);
+  };
+
+  const loadSuppliers = async () => {
+    try {
+      const res = await axios.get('http://localhost:5001/api/supplier/getsupplier', { headers });
+      setSuppliers(res.data);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const loadShipments = async () => {
+    try {
+      const res = await axios.get('http://localhost:5001/api/shipment/getshipments', { headers });
+      setShipments(res.data);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  useEffect(() => {
+    loadSuppliers();
+    loadShipments();
+  }, []);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      if (editId) {
+        await axios.put(
+          `http://localhost:5001/api/shipment/updateshipment/${editId}`,
+          { shipmentNumber, shipmentDate, shipmentStatus, destination, supplierId },
+          { headers }
+        );
+        setMessage('Shipment updated successfully');
+      } else {
+        await axios.post(
+          'http://localhost:5001/api/shipment/addshipment',
+          { shipmentNumber, shipmentDate, shipmentStatus, destination, supplierId },
+          { headers }
+        );
+        setMessage('Shipment added successfully');
+      }
+      clearForm();
+      loadShipments();
+    } catch (error) {
+      console.error(error);
+      setMessage('Failed to save shipment');
+    }
+  };
+
+  const handleEdit = (shipment) => {
+    setShipmentNumber(shipment.shipmentNumber);
+    setShipmentDate(shipment.shipmentDate?.split('T')[0] || '');
+    setShipmentStatus(shipment.shipmentStatus);
+    setDestination(shipment.destination);
+    setSupplierId(shipment.supplier?._id || '');
+    setEditId(shipment._id);
+  };
+
+  const handleDelete = async (id) => {
+    try {
+      await axios.delete(`http://localhost:5001/api/shipment/deleteshipment/${id}`, { headers });
+      loadShipments();
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return (
+    <div className="page-content">
+      <h1 className="page-title">Shipment Management</h1>
+      <p className="page-subtitle">Track and manage shipments</p>
+
+      {message && <p className="alert-success">{message}</p>}
+
+      <form onSubmit={handleSubmit} className="form-card">
+        <input
+          type="text"
+          placeholder="Shipment Number"
+          value={shipmentNumber}
+          onChange={(e) => setShipmentNumber(e.target.value)}
+          className="input"
+          required
+        />
+        <input
+          type="date"
+          value={shipmentDate}
+          onChange={(e) => setShipmentDate(e.target.value)}
+          className="input"
+          required
+        />
+        <input
+          type="text"
+          placeholder="Destination"
+          value={destination}
+          onChange={(e) => setDestination(e.target.value)}
+          className="input"
+          required
+        />
+        <select
+          value={shipmentStatus}
+          onChange={(e) => setShipmentStatus(e.target.value)}
+          className="input"
+          required
+        >
+          <option value="Pending">Pending</option>
+          <option value="In Transit">In Transit</option>
+          <option value="Delivered">Delivered</option>
+        </select>
+        <select
+          value={supplierId}
+          onChange={(e) => setSupplierId(e.target.value)}
+          className="input"
+        >
+          <option value="">Select supplier (optional)</option>
+          {suppliers.map((supplier) => (
+            <option key={supplier._id} value={supplier._id}>
+              {supplier.supplierCode} - {supplier.supplierName}
+            </option>
+          ))}
+        </select>
+        <button type="submit" className="btn-primary">
+          {editId ? 'Update Shipment' : 'Add Shipment'}
+        </button>
+      </form>
+
+      <div className="space-y-3">
+        {shipments.length === 0 ? (
+          <p className="text-sm text-muted">No shipment records available.</p>
+        ) : (
+          shipments.map((shipment) => (
+            <div key={shipment._id} className="list-card">
+              <p className="text-sm font-medium text-brand-800">{shipment.shipmentNumber}</p>
+              <p className="text-sm text-muted">Date: {shipment.shipmentDate?.split('T')[0]}</p>
+              <p className="text-sm text-muted">Destination: {shipment.destination}</p>
+              <p className="text-sm text-muted">Status: {shipment.shipmentStatus}</p>
+              <p className="text-sm text-muted">
+                Supplier: {shipment.supplier ? shipment.supplier.supplierName : 'Not assigned'}
+              </p>
+              <div className="flex gap-4 pt-2">
+                <button type="button" onClick={() => handleEdit(shipment)} className="btn-ghost">
+                  Edit
+                </button>
+                <button type="button" onClick={() => handleDelete(shipment._id)} className="btn-danger">
+                  Delete
+                </button>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Shipment;

package/projects/SCMS/frontend/src/pages/Supplier.jsx

@@ -0,0 +1,165 @@
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+
+function Supplier() {
+  const [suppliers, setSuppliers] = useState([]);
+  const [supplierCode, setSupplierCode] = useState('');
+  const [supplierName, setSupplierName] = useState('');
+  const [address, setAddress] = useState('');
+  const [telephone, setTelephone] = useState('');
+  const [email, setEmail] = useState('');
+  const [editId, setEditId] = useState(null);
+  const [message, setMessage] = useState('');
+
+  const headers = {
+    Authorization: `Bearer ${localStorage.getItem('token')}`,
+  };
+
+  const clearForm = () => {
+    setSupplierCode('');
+    setSupplierName('');
+    setAddress('');
+    setTelephone('');
+    setEmail('');
+    setEditId(null);
+  };
+
+  const handleGet = async () => {
+    try {
+      const res = await axios.get('http://localhost:5001/api/supplier/getsupplier', { headers });
+      setSuppliers(res.data);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  useEffect(() => {
+    handleGet();
+  }, []);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    try {
+      if (editId) {
+        await axios.put(
+          `http://localhost:5001/api/supplier/updatesupplier/${editId}`,
+          { supplierCode, supplierName, address, telephone, email },
+          { headers }
+        );
+        setMessage('Updated successfully');
+      } else {
+        await axios.post(
+          'http://localhost:5001/api/supplier/addsupplier',
+          { supplierCode, supplierName, address, telephone, email },
+          { headers }
+        );
+        setMessage('Added successfully');
+      }
+
+      clearForm();
+      handleGet();
+    } catch (error) {
+      console.log(error);
+      setMessage('Something went wrong');
+    }
+  };
+
+  const handleDelete = async (id) => {
+    try {
+      await axios.delete(`http://localhost:5001/api/supplier/deletesupplier/${id}`, { headers });
+      handleGet();
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const handleEdit = (supplier) => {
+    setSupplierCode(supplier.supplierCode);
+    setSupplierName(supplier.supplierName);
+    setAddress(supplier.address);
+    setTelephone(supplier.telephone);
+    setEmail(supplier.email);
+    setEditId(supplier._id);
+  };
+
+  return (
+    <div className="page-content">
+      <h1 className="page-title">Supplier Management</h1>
+      <p className="page-subtitle">Add and manage supplier records</p>
+
+      {message && <p className="alert-success">{message}</p>}
+
+      <form onSubmit={handleSubmit} className="form-card">
+        <input
+          type="text"
+          placeholder="Supplier Code"
+          value={supplierCode}
+          onChange={(e) => setSupplierCode(e.target.value)}
+          className="input"
+          required
+        />
+        <input
+          type="text"
+          placeholder="Supplier Name"
+          value={supplierName}
+          onChange={(e) => setSupplierName(e.target.value)}
+          className="input"
+          required
+        />
+        <input
+          type="text"
+          placeholder="Address"
+          value={address}
+          onChange={(e) => setAddress(e.target.value)}
+          className="input"
+          required
+        />
+        <input
+          type="text"
+          placeholder="Telephone"
+          value={telephone}
+          onChange={(e) => setTelephone(e.target.value)}
+          className="input"
+          required
+        />
+        <input
+          type="email"
+          placeholder="Email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          className="input"
+          required
+        />
+        <button type="submit" className="btn-primary">
+          {editId ? 'Update' : 'Add Supplier'}
+        </button>
+      </form>
+
+      <div className="space-y-3">
+        {suppliers.length === 0 ? (
+          <p className="text-sm text-muted">No suppliers yet.</p>
+        ) : (
+          suppliers.map((supplier) => (
+            <div key={supplier._id} className="list-card">
+              <p className="text-sm font-medium text-brand-800">{supplier.supplierName}</p>
+              <p className="text-sm text-muted">Code: {supplier.supplierCode}</p>
+              <p className="text-sm text-muted">{supplier.address}</p>
+              <p className="text-sm text-muted">{supplier.telephone} · {supplier.email}</p>
+              <div className="flex gap-4 pt-2">
+                <button type="button" onClick={() => handleEdit(supplier)} className="btn-ghost">
+                  Edit
+                </button>
+                <button type="button" onClick={() => handleDelete(supplier._id)} className="btn-danger">
+                  Delete
+                </button>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Supplier;

package/projects/SCMS/frontend/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(),tailwindcss()],
+})