Merge pull request #36 from feliciahmq/SellerDashboard

Seller dashboard

package.json

@@ -10,23 +10,25 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@sendgrid/mail": "^8.1.3",
+    "@sgratzl/chartjs-chart-boxplot": "^4.4.0",
+    "@tensorflow/tfjs": "^4.20.0",
+    "chart.js": "^4.4.3",
     "date-fns": "^3.6.0",
     "emoji-picker-react": "^4.9.4",
     "firebase": "^10.12.2",
-    "firebase-admin": "^12.1.1",
+    "firebase-admin": "^12.2.0",
     "jest": "^29.7.0",
-    "node-mailjet": "^6.0.5",
     "react": "^18.3.1",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.3.1",
-    "react-easy-crop": "^5.0.7",
     "react-hot-toast": "^2.4.1",
     "react-icon": "^1.0.0",
     "react-icons": "^5.2.1",
     "react-image-crop": "^11.0.5",
     "react-router-dom": "^6.23.1",
     "react-slick": "^0.30.2",
     "react-slider": "^2.0.6",
+    "recharts": "^2.12.7",
     "s": "^1.0.0",
     "slick-carousel": "^1.8.1",
     "styled-components": "^6.1.11",

src/components/format/Format.css

@@ -8,4 +8,10 @@
     flex: 1;
     padding: 20px;
     width: calc(100vw - 220px);
+}
+@media screen and (max-width: 768px) {
+    .main-content{
+        width: 100%;
+        padding-bottom: 200px;
+    }
 }

src/components/format/Format.jsx

@@ -1,18 +1,33 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
+import MobileNavbar from "../mobileNavbar/MobileNavbar";
 import Header from "../header/Header";
 import Navbar from "../navbar/Navbar";
 
 import './Format.css';
 
 function Format({content}) {
+    const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
+
+    useEffect(() => {
+        const handleResize = () => {
+            setIsMobile(window.innerWidth <= 768);
+        };
+
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+
     return (
-        <div className="header-navbar">
+        <div className="app-container">
             <Header />
-            <div className="main-page">
-                <Navbar />
+            <div className="content-container">
+                {!isMobile && <Navbar />}
                 <div className="main-content">
                     {content}
                 </div>
+                {isMobile && <MobileNavbar />}
             </div>
         </div>
     );

src/components/forumcards/ForumCards.css

@@ -51,7 +51,8 @@
 
     .forum-media {
         padding: 12px 0 0;
-        img {max-height: 400px;}
+        img {max-height: 400px;
+            max-width: 400px;}
     }
 
     .forum-poll {
@@ -183,4 +184,8 @@
 .forum-card:hover {
     transform: translateY(-5px);
     box-shadow: 5px 5px 10px #ddd;
+}
+
+@media screen and (max-width: 996px) {
+
 }

src/components/forumcards/ForumCards.jsx

@@ -33,7 +33,7 @@ function timeSincePost(postDate) {
     }
 }
 
-function ForumCards({ forumDetail, descriptionLength = 200 }) {
+function ForumCards({ forumDetail, descriptionLength = 100 }) {
     const navigate = useNavigate();
     const [user, setUser] = useState(null);
     const { currentUser } = useAuth();
@@ -403,4 +403,4 @@ function ForumCards({ forumDetail, descriptionLength = 200 }) {
     );
 }
 
-export default ForumCards;
+export default ForumCards;

src/components/header/Header.css

@@ -142,6 +142,55 @@
     }
 
     @media screen and (max-width: 768px) {
+        .dropdown-content {
+            position: absolute;
+            top: 52px;
+            left: 0;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            box-shadow: 0 2px 4px rgba(100, 100, 100, 0.1);
+            z-index: 100;
+            display: flex;
+            flex-direction: column;
+        }    
 
+        .dropdown-content .navbar-icon {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: flex-start;
+            gap: 8px;
+            width: 180px;
+            padding: 8px;        
+            font-size: 14px;
+            font-weight: 200;
+            background-color: white;
+            border: 1px solid rgb(240, 240, 240);
+            cursor: pointer;
+        }
+
+        .likes {
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            position: relative;
+            margin-right: 10px;
+        }
+
+        .likes .notification-count {
+            color: white;
+            border-radius: 50%;
+            width: 10px;
+            height: 10px;
+            align-items: center;
+            justify-content: center;
+            background-color: #FD634C;
+            display: flex;
+            font-size: 8px;
+            font-weight: 500;
+            position: absolute;
+            top: -4px;
+            right: -8px;
+        }
     }
 }

src/components/header/Header.jsx

@@ -1,7 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate, Link } from 'react-router-dom';
 import { useAuth } from '../../Auth';
-import { FaUserAlt, FaPlus } from 'react-icons/fa';
+import {  FaBars, FaUserAlt, FaPlus, FaQuestionCircle, FaHeart } from 'react-icons/fa';
+import { FaKeyboard } from 'react-icons/fa6';
+import { useLikes } from '../header/likecounter/LikeCounter';
 
 import SearchBar from '../searchbar/Searchbar';
 import MechHub_Logo from "../../assets/Logo/MechHub_logo.png";
@@ -13,6 +15,8 @@ function Header() {
     const [query, setQuery] = useState('');
     const { currentUser } = useAuth();
     const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
+    const [dropdown, setDropdown] = useState(false);
+    const { likeCount } = useLikes();
 
     useEffect(() => {
         const handleResize = () => {
@@ -46,6 +50,18 @@ function Header() {
         setQuery(value);
     };
 
+    const handleMobileBars = () => {
+        setDropdown(!dropdown);
+    }
+
+    const handleKeyboardGuide = () => {
+        navigate(`/keyboardguide`);
+    };
+
+    const handleLikes = () => {
+        navigate(`/likes/${currentUser.uid}`);
+    };
+
     const trackSearchHistory = async (query) => {
         if (currentUser && query) {
             try {
@@ -74,11 +90,30 @@ function Header() {
                     onClick={handleLogoClick} 
                 />
             ) : (
-                <img 
-                    src={Mechhub_Logo_Mobile} 
-                    className="MechHub_Logo_Mobile"
-                    onClick={handleLogoClick} 
-                />
+                <>
+                    <div onClick={handleMobileBars} style={{ cursor: 'pointer', marginRight: '8px' }}>
+                        <FaBars />
+                    </div>
+                    {dropdown && (
+                        <>
+                            <div className="dropdown-content">
+                                <div className='navbar-icon' onClick={handleKeyboardGuide}>
+                                    <FaKeyboard />
+                                    <p>Keyboard Guide</p>
+                                </div>
+                                <div className='navbar-icon'>
+                                    <FaQuestionCircle />
+                                    <p>Help</p>
+                                </div>
+                            </div>
+                        </>
+                    )}
+                    <img 
+                        src={Mechhub_Logo_Mobile} 
+                        className="MechHub_Logo_Mobile"
+                        onClick={handleLogoClick} 
+                    />
+                </>
             )}
             <div className='header-searchbar'>
                 <SearchBar 
@@ -91,17 +126,26 @@ function Header() {
             </div>
             {currentUser ? (
                 <>
-                    <div className='add-button'>
-                        <span><FaPlus fontWeight={100}/> Create</span>
-                        <div className='header-dropdown'>
-                            <div className='dropdown-option'>
-                                <p onClick={handleListing}>New Listing</p>
-                            </div>
-                            <div className='dropdown-option'>
-                                <p onClick={handleForumPost}>New Forum Post</p>
+                    {!isMobile ? (
+                        <>
+                            <div className='add-button'>
+                                <span><FaPlus fontWeight={100}/> Create</span>
+                                <div className='header-dropdown'>
+                                    <div className='dropdown-option'>
+                                        <p onClick={handleListing}>New Listing</p>
+                                    </div>
+                                    <div className='dropdown-option'>
+                                        <p onClick={handleForumPost}>New Forum Post</p>
+                                    </div>
+                                </div>
                             </div>
+                        </>
+                    ) : (
+                        <div className='likes navbar-icon' onClick={handleLikes}>
+                            <FaHeart />
+                            {likeCount > 0 && <span className="notification-count">{likeCount}</span>}
                         </div>
-                    </div>
+                    )}
                     <div className='header-icon'>
                         <FaUserAlt onClick={handleProfile} cursor="pointer" />
                         <span className='tooltip'>profile</span>

src/components/mobileNavbar/MobileNavbar.css

@@ -0,0 +1,81 @@
+.mobile-navbar {
+    z-index: 99;
+    bottom: 0;
+    position: fixed;
+    left: 0;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-items: center;
+    justify-content: center;
+    padding: 0 24px;
+    background-color: white;
+    height: 100px;
+    width: 100vw;
+    border-top: 1px solid rgb(240, 240, 240);
+
+    ul {
+        list-style: none;
+        display: inline-flex;
+        column-gap: 30px;
+        margin: 0;
+        padding: 20px 0;
+    }
+
+    a {
+        font-size: 12px;
+        text-decoration: none;
+        color: #000;
+    }
+
+    a:hover {
+        color: red;
+    }
+
+    .closed {
+        width: fit-content;
+        display: flex;
+        border-bottom: 1px solid rgb(240, 240, 240);
+    }
+
+    .mobile-navbar-icon {
+        cursor: pointer;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        position: relative;
+        /* gap: 10px; */
+    }
+
+    .header-dropdown {
+        top: -100px;
+        display: none;
+        position: absolute;
+        background-color: #f9f9f9;
+        min-width: 160px;
+        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+        /* padding: 12px 16px; */
+        z-index: 1;
+        .dropdown-option {
+            display: flex;
+            padding: 12px 8px;
+            font-size: 16px;
+            width: 100%;
+            p {
+                margin: 0;
+            }
+        }
+    }
+
+    .header-dropdown .dropdown-option:hover {
+        background-color: rgb(240, 240, 240);
+    }
+    .mobile-navbar-icon:hover {
+        background-color: rgb(240, 240, 240);
+        border-radius: 4px;
+    }
+
+    .add-button:hover .header-dropdown {
+        display: block;
+    }
+}