Refactoring changed merged successfully with current development stage of...

Refactoring changed merged successfully with current development stage of frontend. DASHBOARD: Newly added middle column in between map and visualiser which support functionality for region search and two options windows with menuitems selections

frontend/src/Components/Navbar/Navbar.js

@@ -5,8 +5,8 @@ function TopNavBar() {
   return (
     <div className="top-nav">
     
-       
-      
+       <button className='sign_out_button'>Sign Out</button>
+      <h1 className='h1'>DASHBOARD</h1>
     </div>
   );
 }

frontend/src/Components/Search/MultiSelectText.jsx

+import { styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import React from 'react';
+
+const Wrapper = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  gap: theme.spacing(1),
+  cursor: 'pointer', // Make the entire area clickable
+}));
+
+const SelectedText = styled(Typography)(({ theme, selected }) => ({
+  color: selected ? theme.palette.primary.main : theme.palette.text.primary,
+  fontWeight: selected ? 'bold' : 'normal',
+}));
+
+const options = ['Antal nominerade', 'Andel nominerade', 'Antal valda', 'Andel valda', 'Antal ej valda'];
+
+function MultiSelectText() {
+  const [selectedValues, setSelectedValues] = React.useState([]);
+
+  const handleClick = (option) => {
+    const currentIndex = selectedValues.indexOf(option);
+    const newSelectedValues = [...selectedValues];
+
+    if (currentIndex === -1) {
+      newSelectedValues.push(option);
+    } else {
+      newSelectedValues.splice(currentIndex, 1);
+    }
+
+    setSelectedValues(newSelectedValues);
+  };
+
+  return (
+    <Wrapper>
+      {options.map((option) => (
+        <SelectedText
+          key={option}
+          onClick={() => handleClick(option)}
+          selected={selectedValues.includes(option)}
+        >
+          {option}
+        </SelectedText>
+      ))}
+    </Wrapper>
+  );
+}
+export default MultiSelectText;
\ No newline at end of file

frontend/src/Components/Search/MultiSelectText2.jsx

+import { styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import React from 'react';
+
+const Wrapper = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  gap: theme.spacing(1),
+  cursor: 'pointer', // Make the entire area clickable
+}));
+
+const SelectedText = styled(Typography)(({ theme, selected }) => ({
+  color: selected ? theme.palette.primary.main : theme.palette.text.primary,
+  fontWeight: selected ? 'bold' : 'normal',
+}));
+
+const options = ['män', 'kvinnor', 'totalt'];
+
+function MultiSelectText2() {
+  const [selectedValues, setSelectedValues] = React.useState([]);
+
+  const handleClick = (option) => {
+    const currentIndex = selectedValues.indexOf(option);
+    const newSelectedValues = [...selectedValues];
+
+    if (currentIndex === -1) {
+      newSelectedValues.push(option);
+    } else {
+      newSelectedValues.splice(currentIndex, 1);
+    }
+
+    setSelectedValues(newSelectedValues);
+  };
+
+  return (
+    <Wrapper>
+      {options.map((option) => (
+        <SelectedText
+          key={option}
+          onClick={() => handleClick(option)}
+          selected={selectedValues.includes(option)}
+        >
+          {option}
+        </SelectedText>
+      ))}
+    </Wrapper>
+  );
+}
+export default MultiSelectText2;
\ No newline at end of file

frontend/src/Components/Search/Search.css

+.search_container{
+    display: flex;
+    flex-direction: column;
+}
+.multi_select{
+    margin: 5px;
+    margin-top: 20px;
+    border-style: solid;
+    padding: 2px;
+
+}
\ No newline at end of file

frontend/src/Components/Search/Searchbar.jsx

+import React from 'react'
+import * as MUI from '@mui/material';
+import MultiSelectText from './MultiSelectText'
+import MultiSelectText2 from './MultiSelectText2';
+import "./Search.css"
+export const Searchbar = () => {
+
+
+    const provinceOptions = [
+        { label: 'Stockholm', id: 1 },
+        { label: 'Uppsala', id: 3 },
+        { label: 'Södermanland', id: 4 },
+        { label: 'Östergötland', id: 5 },
+        { label: 'Jönköping', id: 6 },
+        { label: 'Kronobergs', id: 7 },
+        { label: 'Kalmar', id: 8 },
+        { label: 'Gotland', id: 9 },
+        { label: 'Blekinge', id: 10 },
+        { label: 'Skåne', id: 12 },
+        { label: 'Halland', id: 13 },
+        { label: 'Västra Götaland', id: 14 },
+        { label: 'Värmland', id: 17 },
+        { label: 'Örebro', id: 18 },
+        { label: 'Västmanland', id: 19 },
+        { label: 'Dalarna', id: 20 },
+        { label: 'Gävleborg', id: 21 },
+        { label: 'Västernorrland', id: 22 },
+        { label: 'Jämtland', id: 23 },
+        { label: 'Västerbotten', id: 24 },
+        { label: 'Norrbotten', id: 25 }
+      ];
+    const optionsAntal = ['Antal nominerade', 'Andel nominerade', 'Antal valda', 'Andel valda', 'Antal ej valda'];
+      const optionsKön = ['män', 'kvinnor', 'totalt'];
+  return (
+    <div>
+    <MUI.Autocomplete  
+        disablePortal
+        id="combo-box-demo"
+        options={provinceOptions}
+        sx={{ width: 300 }}
+        renderInput={(params) => <MUI.TextField {...params} label="Län" />}>
+        
+    </MUI.Autocomplete>
+    <MUI.Typography variant='h6' fontWeight={'bold'}>
+        Tabellinnehål
+    </MUI.Typography>
+    <div className='multi_select'><MultiSelectText/></div>
+    <MUI.Typography variant='h6' fontWeight={'bold'}>
+        Kön
+    </MUI.Typography>
+    <div className='multi_select'><MultiSelectText2 /></div>
+    
+
+    </div>  
+
+  )
+}

frontend/src/Css/Dashboard.css

@@ -10,7 +10,7 @@
     border-style: solid;
     padding: 5px;
     margin: 10px;
-    width: 600px;
+    width: 515px;
 }
 .table_container{
     display: flex;
@@ -19,8 +19,20 @@
     margin: 10px;
 
 }   
+.search_container{
+    padding: 5px;    
+    border-style: solid;
+    margin: 10px;
+}
 
 .plot{
     width: 600px;
 justify-content: center;
+}
+
+.dashboard{
+    display: flex;
+    flex-direction: column;
+    margin: 10px;
+    padding: 10px;
 }
\ No newline at end of file

frontend/src/Css/Map.css

 svg {
-    background: white;   
-  }
+  background: white;   
+}
 
-  path {
-    stroke: rgb(0, 0, 0);
-    stroke-width: 1px;
-    fill: white;
-  }
-  
-  path:hover {
-    stroke-width: 2px;
-    fill: rgb(214, 214, 214);
-  }
+path {
+  stroke: rgb(0, 0, 0);
+  stroke-width: 1px;
+  fill: white;
+}
+
+path:hover {
+  stroke-width: 2px;
+  fill: rgb(214, 214, 214);
+}
\ No newline at end of file

frontend/src/Css/Navbar.css

-.top-nav{
-    position: absolute;
-    top: 0px;
-    left: 150px;
- 
-    background-color: rgba(180, 26, 26, 0.5);
-    
-    width: 86.5vw;
-    height: 10vh;;
-
-    border: 2px solid rgba(255, 255, 255, .2);
-    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
-   
-    color: white;
-    border-radius: 10px;
+.top-nav{    
+    display: flex;
+    flex-direction: row;
+    height: 70px;;
+    border: 2px;
+    border-style: solid;
+    box-shadow: 0 0 10px rgba(0, 0, 0, .2);   
+}
+.h1{
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: auto;
+    margin-bottom: auto;
+}
\ No newline at end of file
-
-    }
\ No newline at end of file

frontend/src/Pages/Dashboard/Dashboard.jsx

 import '../../Css/Dashboard.css'
 import React, {useState} from 'react'
-
+import TopNavBar from '../../Components/Navbar/Navbar';
 import Map from './Map';
 import Visualiser from './Visualiser';
+import { Searchbar } from '../../Components/Search/Searchbar';
 export const Dashboard = () => {
   const [data, setData] = useState({province: "", id: ""});
 
@@ -10,12 +11,21 @@ export const Dashboard = () => {
     setData(Region_data)
 }
   return (
-    <div className='container'>
-      <div className='map_container' id="d3_map"></div>
-      <Map handlerFunction={handlerFunction}/>
+    <div className='dashboard'>
+      <TopNavBar/>
+      <div className='container'>
+
+        <div className='map_container' id="d3_map">
+          <Map handlerFunction={handlerFunction}/>
+        </div>
 
-      <div className='table_container'>
-        <Visualiser Regiondata = {data}/>
+        <div className='search_container'>
+          <Searchbar/>
+          
+        </div>
+        <div className='table_container'>
+          <Visualiser Regiondata = {data}/>
+        </div>
       </div>
     </div>
   )

frontend/src/index.js

 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { BrowserRouter } from "react-router-dom";
 import './Css/index.css';
-
-import Form from './Pages/SignupSigninForms/Form';
 import { Dashboard } from './Pages/Dashboard/Dashboard';
-import TopNavBar from './Components/Navbar/Navbar';
 
-import Map from './Pages/Dashboard/Map';
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>