[Sprint 2 - Task 4] Coordinator Approval & Rejection with Email Notifications + Logging

.github/workflows/main.yml

@@ -29,11 +29,17 @@ jobs:
             server/package.json
             client/package.json
 
-      # Backend build
+      # Backend build and test
       - name: Install backend dependencies
         working-directory: ./server
         run: npm install
 
+      - name: Run backend tests
+        working-directory: ./server
+        run: npm test
+        env:
+          CI: true
+
       # Frontend build
       - name: Install frontend dependencies
         working-directory: ./client
@@ -46,6 +52,7 @@ jobs:
       - name: Verify build succeeded
         run: |
           echo "✅ Backend dependencies installed successfully"
+          echo "✅ Backend tests passed successfully"
           echo "✅ Frontend built successfully"
 
   ## CD

.gitignore

@@ -135,4 +135,9 @@ dist
 .yarn/install-state.gz
 .pnp.*
 
-package-lock.json
+# Ignore package-lock.json in all folders
+**/package-lock.json
+/package-lock.json
+/client/package-lock.json
+/server/package-lock.json
+

client/package.json

@@ -2,6 +2,7 @@
   "name": "client",
   "version": "0.1.0",
   "private": true,
+  "proxy": "http://localhost:5001",
   "dependencies": {
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
@@ -12,13 +13,14 @@
     "react": "^19.0.0",
     "react-bootstrap": "^2.10.9",
     "react-dom": "^19.0.0",
+    "react-icons": "^5.5.0",
     "react-router-dom": "^7.4.1",
     "react-scripts": "5.0.1",
     "react-signature-canvas": "^1.1.0-alpha.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "set NODE_OPTIONS=--openssl-legacy-provider && react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

client/src/App.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { RouterProvider } from "react-router-dom";
+
 import router from "./router";
 import "./styles/App.css";
 

client/src/Icons/CoordinatorIcon.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+const styles = {
+  Icon: {
+    color: '#9d2235',
+    fill: '#9d2235',
+    fontSize: '16px',
+    top: '322px',
+    left: '929px',
+    width: '16px',
+    height: '28px',
+  },
+};
+
+const IconComponent = () => (
+  <svg style={styles.Icon}  viewBox="0 0 448 512">
+    <path d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm95.8 32.6L272 480l-32-136 32-56h-96l32 56-32 136-47.8-191.4C56.9 292 0 350.3 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-72.1-56.9-130.4-128.2-133.8z">
+    </path>
+  </svg>
+);
+
+const defaultProps = {
+  IconComponent,
+};
+
+const CoordinatorIcon = (props) => {
+  return (
+    props.IconComponent 
+      ? <props.IconComponent style={styles.Icon} /> 
+      : <defaultProps.IconComponent />
+  );
+};
+
+export default CoordinatorIcon;

client/src/Icons/StudentIcon.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+const styles = {
+  Icon: {
+    color: '#9d2235',
+    fill: '#9d2235',
+    fontSize: '16px',
+    top: '322px',
+    left: '494px',
+    width: '16px',
+    height: '28px',
+  },
+};
+
+const IconComponent = () => (
+  <svg style={styles.Icon}  viewBox="0 0 448 512">
+    <path d="M319.4 320.6L224 416l-95.4-95.4C57.1 323.7 0 382.2 0 454.4v9.6c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-9.6c0-72.2-57.1-130.7-128.6-133.8zM13.6 79.8l6.4 1.5v58.4c-7 4.2-12 11.5-12 20.3 0 8.4 4.6 15.4 11.1 19.7L3.5 242c-1.7 6.9 2.1 14 7.6 14h41.8c5.5 0 9.3-7.1 7.6-14l-15.6-62.3C51.4 175.4 56 168.4 56 160c0-8.8-5-16.1-12-20.3V87.1l66 15.9c-8.6 17.2-14 36.4-14 57 0 70.7 57.3 128 128 128s128-57.3 128-128c0-20.6-5.3-39.8-14-57l96.3-23.2c18.2-4.4 18.2-27.1 0-31.5l-190.4-46c-13-3.1-26.7-3.1-39.7 0L13.6 48.2c-18.1 4.4-18.1 27.2 0 31.6z">
+    </path>
+  </svg>
+);
+
+const defaultProps = {
+  IconComponent,
+};
+
+const StudentIcon = (props) => {
+  return (
+    props.IconComponent 
+      ? <props.IconComponent style={styles.Icon} /> 
+      : <defaultProps.IconComponent />
+  );
+};
+
+export default StudentIcon;

client/src/Icons/SupervisorIcon.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+const styles = {
+  Icon: {
+    color: '#9d2235',
+    fill: '#9d2235',
+    fontSize: '23px',
+    top: '322px',
+    left: '708px',
+    width: '23px',
+    height: '28px',
+  },
+};
+
+const IconComponent = () => (
+  <svg style={styles.Icon}  viewBox="0 0 640 512">
+    <path d="M208 352c-2.39 0-4.78.35-7.06 1.09C187.98 357.3 174.35 360 160 360c-14.35 0-27.98-2.7-40.95-6.91-2.28-.74-4.66-1.09-7.05-1.09C49.94 352-.33 402.48 0 464.62.14 490.88 21.73 512 48 512h224c26.27 0 47.86-21.12 48-47.38.33-62.14-49.94-112.62-112-112.62zm-48-32c53.02 0 96-42.98 96-96s-42.98-96-96-96-96 42.98-96 96 42.98 96 96 96zM592 0H208c-26.47 0-48 22.25-48 49.59V96c23.42 0 45.1 6.78 64 17.8V64h352v288h-64v-64H384v64h-76.24c19.1 16.69 33.12 38.73 39.69 64H592c26.47 0 48-22.25 48-49.59V49.59C640 22.25 618.47 0 592 0z">
+    </path>
+  </svg>
+);
+
+const defaultProps = {
+  IconComponent,
+};
+
+const SupervisorIcon = (props) => {
+  return (
+    props.IconComponent 
+      ? <props.IconComponent style={styles.Icon} /> 
+      : <defaultProps.IconComponent />
+  );
+};
+
+export default SupervisorIcon;

client/src/components/Layout.js

@@ -20,6 +20,9 @@ function Layout() {
             <li>
               <Link to="/contact">Contact</Link>
             </li>
+            <li>
+              <Link to="/weekly-report">Weekly Report</Link>
+            </li>
           </ul>
         </nav>
       </header>