Merge pull request #33 from NotMash/latest-frontend

IT frontend done, started with consultant css

frontend/.npmrc

@@ -0,0 +1,2 @@
+@mobiscroll:registry=https://npm.mobiscroll.com
+//npm.mobiscroll.com/:_authToken=Z3wUMGnDn9hmehCR5EjAbfNjHkZ/+EbRmtfQZEG6dnx9yFa+ja9VAdxqHXzLYsn0

frontend/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@mobiscroll/react": "npm:@mobiscroll/react-trial@^5.29.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

frontend/src/Components/Consultant_Home_Page/Calendar.css

@@ -0,0 +1,16 @@
+
+.mbsc-windows-dark.mbsc-selected .mbsc-calendar-cell-inner {
+    background: #bfff0015;
+}
+
+.mbsc-windows-dark.mbsc-calendar-today {
+    color: #bfff00e4;
+}
+
+.mbsc-windows-dark.mbsc-eventcalendar {
+    background: hsla(0, 0%, 6%, 0);
+} 
+
+.mbsc-windows-dark.mbsc-calendar-slide {
+    background: #10101000;
+}

frontend/src/Components/Consultant_Home_Page/Calendar.js

@@ -0,0 +1,68 @@
+import { Eventcalendar, getJson, setOptions, Toast } from '@mobiscroll/react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import '@mobiscroll/react/dist/css/mobiscroll.min.css';
+import "./Calendar.css";
+
+setOptions({
+  theme: 'windows',
+  themeVariant: 'dark'
+});
+
+function Calendar() {
+  const [myEvents, setEvents] = useState([]);
+  const [isToastOpen, setToastOpen] = useState(false);
+  const [toastText, setToastText] = useState();
+
+  const handleToastClose = useCallback(() => {
+    setToastOpen(false);
+  }, []);
+
+  const handleEventClick = useCallback((args) => {
+    setToastText(args.event.title);
+    setToastOpen(true);
+  }, []);
+
+  const myView = useMemo(() => ({ calendar: { labels: true } }), []);
+
+  useEffect(() => {
+    // Define your own events data array
+    const events = [
+      {
+        id: 1,
+        start: new Date(2024, 3, 1, 10), // Year, Month (0-11), Day, Hour (24-hour format)
+        end: new Date(2024, 3, 1, 12),
+        title: 'Approved',
+        color: '#378006' // Optional: specify a color for the event
+      },
+      {
+        id: 2,
+        start: new Date(2024, 3, 5, 14),
+        end: new Date(2024, 3, 5, 15, 30),
+        title: 'Pending',
+        color: '#d4810b'
+      },
+      // Add more events as needed
+    ];
+
+    // Set the events data
+    setEvents(events);
+  }, []);
+
+  return (
+    <>
+      <Eventcalendar
+        clickToCreate={false}
+        dragToCreate={false}
+        dragToMove={false}
+        dragToResize={false}
+        eventDelete={false}
+        data={myEvents}
+        view={myView}
+        onEventClick={handleEventClick}
+      />
+      <Toast message={toastText} isOpen={isToastOpen} onClose={handleToastClose} />
+    </>
+  );
+}
+
+export default Calendar;

frontend/src/Components/Global/LogoutButton.js

@@ -25,7 +25,7 @@ function LogoutButton () {
     };
 
     return(<div className={styles.logoutContainer}>
-        <img className={styles.Logout} src='./Home_Page_Icons/logout.svg' onClick={handleLogout}/>
+        {/* <img className={styles.Logout} src='./Home_Page_Icons/logout.svg' onClick={handleLogout}/> */}
         <p className={styles.logoutText}>Logout</p>
     </div>);
 }

frontend/src/Components/Global/LogoutButton.module.css

@@ -17,4 +17,6 @@
 
 .logoutText{
     margin-left: 0.5rem;
+    color: #1e1e1e;
+    font-size: 12pt;
 }

frontend/src/Components/Global/Navbar.js

@@ -1,31 +1,47 @@
-import { Link } from 'react-router-dom'
-import styles from './Navbar.module.css'
-import Logout from '../Global/LogoutButton'
+import { Link } from 'react-router-dom';
+import { useEffect, useState } from 'react'; // Import useEffect and useState
+import styles from './Navbar.module.css';
+import Logout from '../Global/LogoutButton';
 
 export default function Navbar(props) {
-    let linksArray = props.links
-    console.log(linksArray)
+    const [prevScrollPos, setPrevScrollPos] = useState(0);
 
-    return(<nav className={styles.navbar}>
-        <ul className={styles.navContainer}>
-            <li className={styles.navElement}>
-                <Link className={styles.navLink} to={props.homePageLink}>
-                    <img className={styles.icon} src="./Home_Page_Icons/house-solid.svg"/>
-                    <p className={styles.navText} href="/">{props.homePageTitle}</p>
+    useEffect(() => {
+        const handleScroll = () => {
+            const currentScrollPos = window.pageYOffset;
+            if (prevScrollPos > currentScrollPos) {
+                document.getElementById("navbar").style.top = "0";
+            } else {
+                document.getElementById("navbar").style.top = "-100px"; // Adjust based on your navbar height
+            }
+            setPrevScrollPos(currentScrollPos);
+        };
+
+        window.addEventListener('scroll', handleScroll);
+        return () => window.removeEventListener('scroll', handleScroll);
+    }, [prevScrollPos]);
+
+    let linksArray = props.links;
+
+    return (
+        <nav id="navbar" className={styles.navbar}>
+            <ul className={styles.navContainer}>
+                <Link className={styles.navElement} to={props.homePageLink}>
+                    <Link className={styles.navLink} to={props.homePageLink}>
+                        <p className={styles.navText} href="/">{props.homePageTitle}</p>
+                    </Link>
                 </Link>
-            </li>
-            {linksArray.map( (navElement, index) =>(
-                <li key={index} className={styles.navElement}>
-                    <Link className={styles.navLink} to={navElement.pageLink}>
-                        <img className={styles.icon} src={navElement.iconPath}/>
-                        <p className={styles.navText}>{navElement.pageName}</p>
+                {linksArray.map((navElement, index) => (
+                    <Link key={index} className={styles.navElement} to={navElement.pageLink}>
+                        <Link className={styles.navLink} to={navElement.pageLink}>
+                            <p className={styles.navText}>{navElement.pageName}</p>
+                        </Link>
                     </Link>
+                ))}
+                <li className={styles.navElement}>
+                    <Logout />
                 </li>
-            ))}
-
-        </ul>
-        <div className={styles.logoutButton}>
-                <Logout/>
-            </div>
-    </nav>)
-}
+            </ul>
+        </nav>
+    );
+}

frontend/src/Components/Global/Navbar.module.css

@@ -1,4 +1,6 @@
-.navbar{
+@import url('https://fonts.googleapis.com/css2?family=Inter&family=Poppins:wght@400;700&family=Open+Sans&display=swap');
+
+/* .navbar{
     background: linear-gradient(360deg, rgb(52, 68, 0) 0%, rgb(130, 170, 0) 100%);
     border-right: solid 5pt #1e1e1e;
     width: 4rem;
@@ -10,39 +12,37 @@
     overflow: hidden;
     position: fixed;
     font-family: "Roboto", sans-serif;
-    z-index: 999;
-}
 
-.navbar:hover{
+/* .navbar:hover {
     width: 20rem;
 }
 
-.navbar:hover body{
+.navbar:hover body {
     margin-left: 15rem;
 }
 
-.navbar:hover .navText{
+.navbar:hover .navText {
     display: block;
 }
 
-.navElement a{
+.navElement a {
     color: black;
     text-decoration: none;
 }
 
-.navContainer{
+.navContainer {
     margin-top: 0;
     padding: 0;
     list-style-type: none;
 }
 
-.navLink{
+.navLink {
     display: flex;
     align-items: center;
     height: 4rem;
 }
 
-.navText{
+.navText {
     margin-left: 0rem;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -51,12 +51,82 @@
     font-size: large;
 }
 
-.icon{
+.icon {
     min-width: 1rem;
     margin: 0 1rem;
     width: 2rem;
 }
 
-.logoutButton{
+.logoutButton {
     margin-top: auto;
+} */
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: "Inter", sans-serif;
+}
+
+.navbar {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: sticky;
+}
+
+.navContainer {
+    background: #fff;
+    margin-top: 30px;
+    border-radius: 50px;
+    box-shadow: 0 25px 20px -20px rgb(0, 0, 0);
+}
+
+.navElement {
+    text-decoration: none;
+    display: inline-block;
+    padding: 15px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    margin: 10px;
+    color: #777;
+    cursor: pointer;
+    position: relative;
+    z-index: 2;
+    transition: color 0.5s, top 0.5s;
+}
+
+.activeLink {
+    background: #c5ff00;
+    opacity: 1;
+}
+
+.navElement::after {
+    content: "";
+    background: #c5ff00;
+    width: 100%;
+    height: 100%;
+    border-radius: 30px;
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: -1;
+    opacity: 0;
+    transition: top 0.5s, opacity 0.5s;
+}
+
+.navElement:hover::after {
+    top: 50%;
+    opacity: 1;
+}
+
+.navLink {
+    text-decoration: none;
+}
+
+.navLink p {
+    color: #1e1e1e;
+    font-size: 12pt;
 }

frontend/src/Components/IT_Technician_Page/ITDifficulty.js

@@ -8,6 +8,7 @@ function ITDifficulty(props) {
                 <p className={styles.difficultyTopic}>{props.difficultyTopic}</p>
                 <p className={styles.difficulty}>{props.difficultySolved}</p>
                 <p className={styles.difficulty}>By: {props.technicianName}</p>
+                <p className={styles.deleteButton}>❌</p>
             </div>
         </>
     )