Graphs

package.json

@@ -10,10 +10,32 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@canvasjs/charts": "^3.7.32",
+    "@canvasjs/react-charts": "^1.0.0",
+    "@emotion/cache": "^11.9.3",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/lab": "^5.0.0-alpha.88",
+    "@mui/material": "^5.8.6",
+    "@mui/system": "^5.8.6",
+    "@mui/utils": "^5.8.6",
     "@react-oauth/google": "^0.12.1",
+    "apexcharts": "^3.45.0",
+    "axios": "^1.6.2",
+    "config": "^3.3.9",
+    "material-ui-popup-state": "^4.0.1",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
+    "react-apexcharts": "^1.4.1",
+    "react-chartjs-2": "^5.2.0",
+    "react-datamaps-india": "^0.6.0",
+    "react-datepicker": "^4.25.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.21.0"
+    "react-redux": "^9.0.4",
+    "react-router-dom": "^6.21.0",
+    "sass-loader": "^13.3.2",
+    "socket.io-client": "^4.7.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.43",
@@ -23,6 +45,8 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "react-device-detect": "^2.2.2",
+    "react-perfect-scrollbar": "^1.5.8",
     "sass": "^1.69.5",
     "vite": "^5.0.8"
   }

src/App.jsx

@@ -1,15 +1,26 @@
 import { BrowserRouter, Route, Routes } from 'react-router-dom'
 import './App.css'
-import { DashBoard, Landing } from './pages'
+import Landing from './pages/Landing'
+import Searchbar from './pages/searchbar/Searchbar'
+import { ThemeProvider, createTheme, CssBaseline } from '@mui/material';
+import ComponentsMount from './ComponentsMount';
+import Maps from './pages/Maps'
+import Dash2 from './pages/Dash/DashBoard';
+import Trending from './pages/trendings/Trending';
+import UserActivity from './pages/UserActivity/UserActivity';
 
 function App() {
   return(<>
   <BrowserRouter>
   <Routes>
-     <Route path='/' element={<Landing />} />
-
-    <Route path='/dashboard' element={<DashBoard />} />
 
+    <Route path='/dashboard1' element={<><ComponentsMount/></>} />
+    <Route path='/dashboard2' element={<><ComponentsMount dash2={true} /></>} />
+    <Route path='/dash2' element ={<Dash2 />} />
+    <Route path='/trendings' element ={<Trending />} />
+
+    <Route path='/' element={<Landing />} />
+    <Route path='/map' element={<Maps />} />
   </Routes>
   </BrowserRouter>
     </>

src/Components/PopUp/Popup.jsx

@@ -0,0 +1,33 @@
+import React, {useState} from 'react'
+import styles from './Popup.module.scss'
+import popup from '../../assets/popupSVG.svg'
+import close from '../../assets/close.svg'
+const Popup = ({setPopupVisible}) => {
+  const closePopup = () => {
+    setPopupVisible(false);
+  };
+  return (
+    <div className={styles.pop}>
+      <div className={styles.left} >
+        <img src={popup} alt='/'/>
+      </div>
+      <div className={styles.right}>
+        <div onClick={closePopup} className={styles.close}>
+        <img src={close} alt='/'  />
+        </div>
+        <div className = {styles.head1}>Where did you hear about </div>
+        <div className = {styles.head2}>PGRKAM? </div>
+        <select className={styles.dropdown} >
+          <option value="option1" >Newspaper</option>
+          <option value="option2">Youtube</option>
+          <option value="option3">LinkedIn</option>
+          <option value="option3">Programs</option>
+          <option value="option3">Others</option>
+        </select>
+      </div>
+
+    </div>
+  )
+}
+
+export default Popup

src/Components/PopUp/Popup.module.scss

@@ -0,0 +1,62 @@
+.pop {
+    display: flex;
+    position: absolute;
+    z-index: 100;
+    background-color: white;
+    border: 1px solid #EBEBEB;
+    border-radius: 2rem;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%); 
+    width: 100%; 
+    max-width: fit-content;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+    height: fit-content;
+    min-width: 20rem;
+    .left {
+      display: flex;
+      width: fit-content;
+      background-color: #3A235C;
+      border-radius: 2rem 0rem 0rem 2rem;
+      padding: 1rem 0rem;
+      img{
+        width: 100%;
+      }
+    }
+
+    .right {
+      display: flex;
+      flex-direction: column;
+      font-family: 'Open Sans';
+
+      .close {
+        align-self: flex-end;
+        padding: 1rem;
+        &:hover {
+          cursor: pointer;
+        }
+      }
+
+      .head1 {
+        font-size: 1.5rem;
+        font-weight: 700;
+        padding: 2rem 2rem 0rem 2rem;
+      }
+
+      .head2 {
+        font-size: 2rem;
+        font-weight: 700;
+        padding: 0rem 2rem;
+      }
+
+      .dropdown {
+        width: 80%;
+        margin: 2rem 0rem 2rem 2rem;
+        padding: 0.8rem 1rem;
+        border-radius: 0.75rem;
+        background-color: #EEF2F6;
+        transition: padding 0.3s ease;
+      }
+    }
+  }
+

src/Components/Sidebar/Sidebar.jsx

@@ -0,0 +1,178 @@
+import React, { useState,useEffect } from 'react';
+import styles from './Sidebar.module.scss';
+import logo from '../../assets/LogoGovt.png';
+import back from '../../assets/SidebarBack.svg';
+import dashboard from '../../assets/Sidebardashboard.svg';
+import user from '../../assets/SidebarUsers.svg';
+import jobs from '../../assets/SidebarJobs.svg';
+import activity from '../../assets/SidebarActivity.svg';
+import page from '../../assets/SidebarPage.svg';
+import feedback from '../../assets/SidebarFeedback.svg';
+import down from '../../assets/SidebarDown.svg';
+import up from '../../assets/SidebarUp.svg';
+import jobSeeker from '../../assets/SidebarJobSeeker.svg';
+import employer from '../../assets/SidebarEmployer.svg';
+import local from '../../assets/SidebarLocal.svg';
+import counsel from '../../assets/SidebarCounsel.svg';
+import skills from '../../assets/SidebarSkills.svg';
+import trending from '../../assets/SidebarTrending.svg';
+
+import { useNavigate } from 'react-router-dom';
+const Sidebar = ({setSidebarOpen,sidebarOpen,isMobile,setIsMobile}) => {
+  // Initialize state for options with default valu
+
+
+const history = useNavigate();
+  const [optionsState, setOptionsState] = useState({
+    Users: false,
+    Jobs: false,
+    'User Activity': false,
+    'Page Visited': false,
+    Feedback: false,
+  });
+const [open, setOpen] = useState(true);
+  const toggleOption = (optionName) => {
+    setOptionsState((prevState) => ({
+      ...prevState,
+      [optionName]: !prevState[optionName],
+    }));
+  };
+
+  const optionsData = [
+    {
+      heading: 'Website',
+      options: [
+        {
+          img: user,
+          name: 'Users',
+          subOptions: [
+              {
+                icon : jobSeeker,
+                label : 'Job Seeker'
+              },
+              {
+                icon : employer,
+                label : 'Indian Employer'
+              },
+              {
+                icon : local,
+                label : 'Local Service Provider'
+              },
+              {
+                icon : counsel,
+                label : 'Counsel Provider'
+              },
+              ],
+        },
+        {
+          img: jobs,
+          name: 'Jobs',
+          // subOptions: [
+          //   { label : 'Amritsar'},
+          //   { label : 'Barnala'},
+          //   { label : 'Bathinda'},
+          //   { label : 'Faridkot'},
+          //   { label : 'Fatehgarh Sahib	'},
+          //   { label : 'Firozpur'},
+          //   { label : 'Fazilka'},
+          //   { label : 'Gurdaspur'},
+          //   { label : 'Hoshiarpur'},
+          //   { label : 'Gurdaspur'},
+          //   { label : 'Jalandhar'},
+          //   { label : 'Kapurthala'},
+          //   { label : 'Ludhiana'},
+          //   { label : 'Mansa	'},
+          //   { label : 'Moga'},
+          //   { label : 'Sri Muktsar Sahib	'},
+          //   { label : 'Pathankot'},
+          //   { label : 'Patiala'},
+          //   { label : 'Rupnagar'},
+          //   { label : 'Sahibzada Ajit Singh Nagar'},
+          //   { label : 'Sangrur'},
+          //   { label : 'Shahid Bhagat Singh Nagar'},
+          //   { label : 'Taran Taran'},
+          // ],
+        },
+      ],
+    },
+    {
+      heading: 'Activity',
+      options: [
+        {
+          img: activity,
+          name: 'User Activity',
+        },
+        {
+          img: page,
+          name: 'Page Visited',
+        },
+        {
+          img: trending,
+          name: 'Trending',
+        },
+      ],
+    },
+  ];
+
+  return (
+    <>
+    {(!sidebarOpen) && <img src={back} className={styles.back} alt="back" onClick={()=>{setOpen(!open) 
+    // setIsMobile(false)
+      setSidebarOpen(!sidebarOpen)}} style={{rotate:"180deg"}}/>}
+      {true ? (
+    <div className={styles.sidebar} style={{display: sidebarOpen ?"block":"none"}}>
+      <div className={styles.head}>
+        <div className={styles.logo}>
+          <img src={logo} alt="logo" />
+          <div> PGRKAM </div>
+        </div>
+        <img src={back} className={styles.back} alt="back" onClick={()=>{setOpen(!open)
+        setSidebarOpen(!sidebarOpen)
+        }}/>
+      </div>
+      <div className={styles.dash}  onClick={()=>history('/dashboard2')}>
+        <img src={dashboard} alt='/' />
+        <span>Dashboard</span>
+      </div>
+      <div className={styles.line}></div>
+
+      <div className={styles.list}>
+        {optionsData.map((section, index) => (
+          <div key={index} className={styles.section}>
+            <div className={styles.heading}>{section.heading}</div>
+            <ul className={styles.options}>
+              {section.options.map((option, optionIndex) => (
+                <li key={optionIndex} className={styles.item}>
+                  <div styles={{ display: "flex" }}>
+                    <div className={styles.card}>
+                      <img src={option.img} alt={option.name} />
+                      <div className={styles.name} onClick={() => toggleOption(option.name)}>
+                        {option.name}
+                        {option.subOptions && (
+                          <img className={styles.arrow} src={optionsState[option.name] ? up : down} alt="arrow" />
+                        )}
+                      </div>
+                    </div>
+                    {option.subOptions && optionsState[option.name] && (
+                      <div className={styles.dropdown}>
+                      {option.subOptions.map((subOption, subOptionIndex) => (
+                        <div key={subOptionIndex} className={styles.subOption} onClick={()=>history('/dashboard1')}>
+                          {subOption.icon && <img className={styles.icon} src={subOption.icon} alt={subOption.label} />}
+                        <p>{subOption.label}</p>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+    </div>
+     ) : null}
+    </>
+  );
+                      };
+  export default Sidebar;