create-myexam-app 1.0.19 → 1.0.21

package/projects/SCMS/frontend/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.3.0",
+    "axios": "^1.16.1",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "react-router-dom": "^7.15.1",
+    "tailwindcss": "^4.3.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^10.3.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.6.0",
+    "vite": "^8.0.12"
+  }
+}

package/projects/SCMS/frontend/public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="46" fill="none" viewBox="0 0 48 46"><path fill="#863bff" d="M25.946 44.938c-.664.845-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.287c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.497 0-3.578-1.842-3.578H1.237c-.92 0-1.456-1.04-.92-1.788L10.013.474c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.579 1.842 3.579h11.377c.943 0 1.473 1.088.89 1.83L25.947 44.94z" style="fill:#863bff;fill:color(display-p3 .5252 .23 1);fill-opacity:1"/><mask id="a" width="48" height="46" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M25.842 44.938c-.664.844-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.183c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.498 0-3.579-1.842-3.579H1.133c-.92 0-1.456-1.04-.92-1.787L9.91.473c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.578 1.842 3.578h11.377c.943 0 1.473 1.088.89 1.832L25.843 44.94z" style="fill:#000;fill-opacity:1"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#ede6ff" rx="5.508" ry="14.704" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -4.47 31.516)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#ede6ff" rx="10.399" ry="29.851" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -39.328 7.883)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#7e14ff" rx="5.508" ry="30.487" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -25.913 -14.639)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -32.644 -3.334)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -34.34 30.47)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#ede6ff" rx="14.072" ry="22.078" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="rotate(93.35 24.506 48.493)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx=".387" cy="8.972" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(39.51 .387 8.972)"/></g><g filter="url(#k)"><ellipse cx="47.523" cy="-6.092" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 47.523 -6.092)"/></g><g filter="url(#l)"><ellipse cx="41.412" cy="6.333" fill="#47bfff" rx="5.971" ry="9.665" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 41.412 6.333)"/></g><g filter="url(#m)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#n)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#o)"><ellipse cx="35.651" cy="29.907" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 35.651 29.907)"/></g><g filter="url(#p)"><ellipse cx="38.418" cy="32.4" fill="#47bfff" rx="5.971" ry="15.297" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 38.418 32.4)"/></g></g><defs><filter id="b" width="60.045" height="41.654" x="-19.77" y="16.149" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-54.613" y="-7.533" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-49.64" y="2.03" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-45.045" y="20.029" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-43.513" y="21.178" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="15.756" y="-17.901" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-27.636" y="-22.853" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="20.116" y="-38.415" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="24.641" y="-11.323" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="8.244" y="-2.416" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="18.713" y="10.588" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter></defs></svg>

package/projects/SCMS/frontend/src/App.jsx

@@ -0,0 +1,35 @@
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import DashboardLayout from './components/DashboardLayout';
+import DashboardHome from './pages/DashboardHome';
+import Register from './pages/Register';
+import Login from './pages/Login';
+import Profile from './pages/Profile';
+import Supplier from './pages/Supplier';
+import Shipment from './pages/Shipment';
+import Delivery from './pages/Delivery';
+import Reports from './pages/Reports';
+import ProtectedRoute from './components/ProtectedRoute';
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/login" element={<Login />} />
+        <Route path="/register" element={<Register />} />
+
+        <Route path="/dashboard" element={<ProtectedRoute><DashboardLayout /></ProtectedRoute>}>
+          <Route index element={<DashboardHome />} />
+          <Route path="supplier" element={<Supplier />} />
+          <Route path="shipment" element={<Shipment />} />
+          <Route path="delivery" element={<Delivery />} />
+          <Route path="reports" element={<Reports />} />
+          <Route path="profile" element={<Profile />} />
+        </Route>
+
+        <Route path="/" element={<Navigate to="/dashboard" replace />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+export default App;

package/projects/SCMS/frontend/src/components/DashboardLayout.jsx

@@ -0,0 +1,103 @@
+import { useEffect, useState } from 'react';
+import { NavLink, Outlet, useNavigate } from 'react-router-dom';
+import axios from 'axios';
+
+const navItems = [
+  { to: '/dashboard', label: 'Overview', end: true },
+  { to: '/dashboard/supplier', label: 'Supplier' },
+  { to: '/dashboard/shipment', label: 'Shipment' },
+  { to: '/dashboard/delivery', label: 'Delivery' },
+  { to: '/dashboard/reports', label: 'Reports' },
+  { to: '/dashboard/profile', label: 'Profile' },
+];
+
+function DashboardLayout() {
+  const [user, setUser] = useState(null);
+  const [error, setError] = useState('');
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const storedUser = localStorage.getItem('user');
+    if (storedUser) {
+      setUser(JSON.parse(storedUser));
+    }
+
+    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) => {
+        if (!storedUser) {
+          setError(err.response?.data?.message || 'Could not load user');
+        }
+      });
+  }, []);
+
+  const handleLogout = () => {
+    localStorage.removeItem('token');
+    localStorage.removeItem('user');
+    navigate('/login');
+  };
+
+  return (
+    <div className="min-h-screen bg-brand-50">
+      <aside className="fixed inset-y-0 left-0 w-60 bg-brand-950 text-slate-100 flex flex-col border-r border-brand-800">
+        <div className="px-5 py-5 border-b border-brand-800">
+          <p className="text-xs font-semibold uppercase tracking-wider text-brand-400">SCMS</p>
+          <h1 className="text-base font-semibold text-white mt-0.5">Supply Chain</h1>
+        </div>
+
+        <nav className="flex-1 px-3 py-4 space-y-0.5">
+          {navItems.map(({ to, label, end }) => (
+            <NavLink
+              key={to}
+              to={to}
+              end={end}
+              className={({ isActive }) =>
+                isActive ? `nav-link ${'nav-link-active'}` : 'nav-link'
+              }
+            >
+              {label}
+            </NavLink>
+          ))}
+        </nav>
+
+        <div className="px-4 py-4 border-t border-brand-800">
+          {error && <p className="text-xs text-red-400 mb-2">{error}</p>}
+          {user && (
+            <>
+              <p className="text-sm font-medium text-white truncate">{user.name}</p>
+              <p className="text-xs text-slate-400 truncate mt-0.5">{user.email}</p>
+            </>
+          )}
+          <button
+            type="button"
+            onClick={handleLogout}
+            className="mt-3 w-full text-sm font-medium text-slate-300 hover:text-white border border-brand-700 rounded-lg px-3 py-2 hover:bg-brand-800 transition-colors"
+          >
+            Log out
+          </button>
+        </div>
+      </aside>
+
+      <div className="ml-60 flex min-h-screen flex-col">
+        <header className="bg-white border-b border-slate-200/80 px-6 py-4">
+          <p className="text-xs text-muted">Welcome back</p>
+          <h2 className="text-lg font-semibold text-brand-900">
+            {user ? `Hello, ${user.name}` : 'Dashboard'}
+          </h2>
+        </header>
+
+        <main className="flex-1 p-6 overflow-auto">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+}
+
+export default DashboardLayout;

package/projects/SCMS/frontend/src/components/ProtectedRoute.jsx

@@ -0,0 +1,30 @@
+import React, { useEffect, useState } from 'react';
+import { Navigate } from 'react-router-dom';
+
+export default function ProtectedRoute({ children }) {
+  const [loading, setLoading] = useState(true);
+  const [authorized, setAuthorized] = useState(false);
+
+  useEffect(() => {
+    const token = localStorage.getItem('token');
+    if (!token) {
+      setLoading(false);
+      setAuthorized(false);
+      return;
+    }
+
+    fetch('http://localhost:5001/api/protected', {
+      headers: { Authorization: `Bearer ${token}` },
+    })
+      .then((res) => {
+        if (res.ok) setAuthorized(true);
+        else setAuthorized(false);
+      })
+      .catch(() => setAuthorized(false))
+      .finally(() => setLoading(false));
+  }, []);
+
+  if (loading) return <div>Loading...</div>;
+  if (!authorized) return <Navigate to="/login" replace />;
+  return children;
+}

package/projects/SCMS/frontend/src/index.css

@@ -0,0 +1,114 @@
+@import 'tailwindcss';
+
+@theme {
+  --color-brand-950: #0a1628;
+  --color-brand-900: #0f2035;
+  --color-brand-800: #152d45;
+  --color-brand-700: #1a4558;
+  --color-brand-600: #1f6b6b;
+  --color-brand-500: #2a8585;
+  --color-brand-400: #4a9e9e;
+  --color-brand-100: #e8f2f2;
+  --color-brand-50: #f4f9f9;
+  --color-surface: #fafbfc;
+  --color-muted: #64748b;
+  --font-sans: 'Segoe UI', system-ui, -apple-system, sans-serif;
+}
+
+body {
+  @apply bg-surface text-brand-900 antialiased;
+  font-family: var(--font-sans);
+}
+
+/* Auth pages */
+.auth-page {
+  @apply min-h-screen flex items-center justify-center px-4 bg-brand-50;
+}
+
+.auth-card {
+  @apply w-full max-w-md bg-white rounded-xl border border-brand-100 shadow-sm p-8;
+}
+
+/* Forms */
+.input {
+  @apply w-full border border-slate-200 rounded-lg px-3 py-2 text-sm
+         text-brand-900 placeholder:text-slate-400
+         focus:outline-none focus:ring-2 focus:ring-brand-600/30 focus:border-brand-600
+         transition-colors;
+}
+
+.btn-primary {
+  @apply bg-brand-700 text-white text-sm font-medium px-4 py-2 rounded-lg
+         hover:bg-brand-800 disabled:opacity-50 transition-colors;
+}
+
+.btn-primary-full {
+  @apply bg-brand-700 text-white text-sm font-medium w-full py-2.5 rounded-lg
+         hover:bg-brand-800 disabled:opacity-50 transition-colors;
+}
+
+.btn-ghost {
+  @apply text-sm font-medium text-brand-600 hover:text-brand-800 transition-colors;
+}
+
+.btn-danger {
+  @apply text-sm font-medium text-red-600 hover:text-red-700 transition-colors;
+}
+
+/* Layout */
+.page-content {
+  @apply max-w-4xl mx-auto;
+}
+
+.page-title {
+  @apply text-xl font-semibold text-brand-900 mb-1;
+}
+
+.page-subtitle {
+  @apply text-sm text-muted mb-6;
+}
+
+.card {
+  @apply bg-white rounded-xl border border-slate-200/80 shadow-sm;
+}
+
+.card-body {
+  @apply p-5;
+}
+
+.form-card {
+  @apply bg-white rounded-xl border border-slate-200/80 shadow-sm p-5 space-y-3 mb-6;
+}
+
+.list-card {
+  @apply bg-white rounded-xl border border-slate-200/80 shadow-sm p-5 space-y-1;
+}
+
+.stat-card {
+  @apply bg-white rounded-xl border border-slate-200/80 shadow-sm p-5;
+}
+
+.stat-card h2 {
+  @apply text-sm font-semibold text-brand-700 mb-3;
+}
+
+.stat-card p {
+  @apply text-sm text-slate-600;
+}
+
+.alert-success {
+  @apply mb-4 text-sm text-brand-700 bg-brand-50 border border-brand-100 rounded-lg px-3 py-2;
+}
+
+.alert-error {
+  @apply mb-4 text-sm text-red-600 bg-red-50 border border-red-100 rounded-lg px-3 py-2;
+}
+
+.nav-link {
+  @apply block rounded-lg px-3 py-2 text-sm font-medium text-slate-400
+         hover:bg-brand-800/60 hover:text-white transition-colors;
+}
+
+.nav-link-active {
+  @apply bg-brand-700 text-white;
+}

package/projects/SCMS/frontend/src/main.jsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

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

@@ -0,0 +1,34 @@
+import { Link } from 'react-router-dom';
+
+const quickLinks = [
+  { to: '/dashboard/supplier', label: 'Suppliers', desc: 'Manage supplier records' },
+  { to: '/dashboard/shipment', label: 'Shipments', desc: 'Track shipment status' },
+  { to: '/dashboard/delivery', label: 'Deliveries', desc: 'Record deliveries' },
+  { to: '/dashboard/reports', label: 'Reports', desc: 'View summary reports' },
+];
+
+function DashboardHome() {
+  return (
+    <div className="page-content">
+      <h1 className="page-title">Overview</h1>
+      <p className="page-subtitle">Manage your supply chain from one place.</p>
+
+      <div className="grid gap-4 sm:grid-cols-2">
+        {quickLinks.map(({ to, label, desc }) => (
+          <Link
+            key={to}
+            to={to}
+            className="card card-body hover:border-brand-600/40 transition-colors group"
+          >
+            <h3 className="text-sm font-semibold text-brand-800 group-hover:text-brand-700">
+              {label}
+            </h3>
+            <p className="text-sm text-muted mt-1">{desc}</p>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default DashboardHome;

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;