create-myexam-app 1.0.20 → 1.0.21

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

@@ -0,0 +1,183 @@
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+
+function Delivery() {
+  const [deliveries, setDeliveries] = useState([]);
+  const [shipments, setShipments] = useState([]);
+  const [deliveryCode, setDeliveryCode] = useState('');
+  const [deliveryDate, setDeliveryDate] = useState('');
+  const [quantityDelivered, setQuantityDelivered] = useState('');
+  const [deliveryStatus, setDeliveryStatus] = useState('Pending');
+  const [shipmentId, setShipmentId] = useState('');
+  const [editId, setEditId] = useState(null);
+  const [message, setMessage] = useState('');
+
+  const headers = {
+    Authorization: `Bearer ${localStorage.getItem('token')}`,
+  };
+
+  const clearForm = () => {
+    setDeliveryCode('');
+    setDeliveryDate('');
+    setQuantityDelivered('');
+    setDeliveryStatus('Pending');
+    setShipmentId('');
+    setEditId(null);
+  };
+
+  const loadShipments = async () => {
+    try {
+      const res = await axios.get('http://localhost:5001/api/shipment/getshipments', { headers });
+      setShipments(res.data);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const loadDeliveries = async () => {
+    try {
+      const res = await axios.get('http://localhost:5001/api/delivery/getdeliveries', { headers });
+      setDeliveries(res.data);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  useEffect(() => {
+    loadShipments();
+    loadDeliveries();
+  }, []);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      if (editId) {
+        await axios.put(
+          `http://localhost:5001/api/delivery/updatedelivery/${editId}`,
+          { deliveryCode, deliveryDate, quantityDelivered, deliveryStatus, shipmentId },
+          { headers }
+        );
+        setMessage('Delivery updated successfully');
+      } else {
+        await axios.post(
+          'http://localhost:5001/api/delivery/adddelivery',
+          { deliveryCode, deliveryDate, quantityDelivered, deliveryStatus, shipmentId },
+          { headers }
+        );
+        setMessage('Delivery added successfully');
+      }
+      clearForm();
+      loadDeliveries();
+    } catch (error) {
+      console.error(error);
+      setMessage('Failed to save delivery');
+    }
+  };
+
+  const handleEdit = (delivery) => {
+    setDeliveryCode(delivery.deliveryCode);
+    setDeliveryDate(delivery.deliveryDate?.split('T')[0] || '');
+    setQuantityDelivered(delivery.quantityDelivered);
+    setDeliveryStatus(delivery.deliveryStatus);
+    setShipmentId(delivery.shipment?._id || '');
+    setEditId(delivery._id);
+  };
+
+  const handleDelete = async (id) => {
+    try {
+      await axios.delete(`http://localhost:5001/api/delivery/deletedelivery/${id}`, { headers });
+      loadDeliveries();
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return (
+    <div className="page-content">
+      <h1 className="page-title">Delivery Management</h1>
+      <p className="page-subtitle">Record and track deliveries</p>
+
+      {message && <p className="alert-success">{message}</p>}
+
+      <form onSubmit={handleSubmit} className="form-card">
+        <input
+          type="text"
+          placeholder="Delivery Code"
+          value={deliveryCode}
+          onChange={(e) => setDeliveryCode(e.target.value)}
+          className="input"
+          required
+        />
+        <input
+          type="date"
+          value={deliveryDate}
+          onChange={(e) => setDeliveryDate(e.target.value)}
+          className="input"
+          required
+        />
+        <input
+          type="number"
+          placeholder="Quantity Delivered"
+          value={quantityDelivered}
+          onChange={(e) => setQuantityDelivered(e.target.value)}
+          className="input"
+          required
+        />
+        <select
+          value={deliveryStatus}
+          onChange={(e) => setDeliveryStatus(e.target.value)}
+          className="input"
+          required
+        >
+          <option value="Pending">Pending</option>
+          <option value="Delivered">Delivered</option>
+          <option value="Returned">Returned</option>
+        </select>
+        <select
+          value={shipmentId}
+          onChange={(e) => setShipmentId(e.target.value)}
+          className="input"
+          required
+        >
+          <option value="">Select shipment</option>
+          {shipments.map((shipment) => (
+            <option key={shipment._id} value={shipment._id}>
+              {shipment.shipmentNumber} - {shipment.destination}
+            </option>
+          ))}
+        </select>
+        <button type="submit" className="btn-primary">
+          {editId ? 'Update Delivery' : 'Add Delivery'}
+        </button>
+      </form>
+
+      <div className="space-y-3">
+        {deliveries.length === 0 ? (
+          <p className="text-sm text-muted">No delivery records yet.</p>
+        ) : (
+          deliveries.map((delivery) => (
+            <div key={delivery._id} className="list-card">
+              <p className="text-sm font-medium text-brand-800">{delivery.deliveryCode}</p>
+              <p className="text-sm text-muted">Date: {delivery.deliveryDate?.split('T')[0]}</p>
+              <p className="text-sm text-muted">Quantity: {delivery.quantityDelivered}</p>
+              <p className="text-sm text-muted">Status: {delivery.deliveryStatus}</p>
+              <p className="text-sm text-muted">
+                Shipment: {delivery.shipment ? delivery.shipment.shipmentNumber : 'Unassigned'}
+              </p>
+              <div className="flex gap-4 pt-2">
+                <button type="button" onClick={() => handleEdit(delivery)} className="btn-ghost">
+                  Edit
+                </button>
+                <button type="button" onClick={() => handleDelete(delivery._id)} className="btn-danger">
+                  Delete
+                </button>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Delivery;

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

@@ -0,0 +1,81 @@
+import { useState } from 'react';
+import axios from 'axios';
+import { Link, useNavigate } from 'react-router-dom';
+
+function Login() {
+  const navigate = useNavigate();
+  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/login', { email, password });
+      localStorage.setItem('token', response.data.token);
+      localStorage.setItem('user', JSON.stringify(response.data.user));
+      setMessage('Login successful');
+      navigate('/dashboard');
+    } catch (err) {
+      setError(err.response?.data?.message || 'Login 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">Sign in</h1>
+
+        {message && <p className="alert-success">{message}</p>}
+        {error && <p className="alert-error">{error}</p>}
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Email</label>
+            <input
+              type="text"
+              required
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="input"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Password</label>
+            <input
+              type="password"
+              required
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="input"
+            />
+          </div>
+
+          <button type="submit" disabled={loading} className="btn-primary-full">
+            {loading ? 'Signing in...' : 'Sign in'}
+          </button>
+        </form>
+
+        <p className="mt-5 text-sm text-muted text-center">
+          No account?{' '}
+          <Link to="/register" className="text-brand-700 font-medium hover:text-brand-800">
+            Register
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default Login;

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;