Herman/dropdown

.gitignore

@@ -122,4 +122,6 @@ dist
 # Stores VSCode versions used for testing VSCode extensions
 .vscode-test
 
-.DS_Store
+.DS_Store
+client/go-links-397501-bda619408b03.json
+/Users/jambay/Documents/codesmith/week5/tangerine/client/go-links-397501-bda619408b03.json

client/App.jsx

@@ -2,18 +2,39 @@ import React from "react";
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 
 import Header from './components/Header.jsx';
-import Card from './components/Card.jsx';
+import Onboarding from './pages/Onboarding.jsx'
+import Home from "./pages/Home.jsx";
+import Signup from "./components/Signup.jsx";
+import Login from "./components/Login.jsx"
 
 const App = () => {
+
     return (
         <>
-            <Header />
-            <Card title='test' />
-            <div>
-                hi is this from react
-            </div>
+        <Header />
         </>
+
     )
 }
 
-export default App;
+export default App;
+
+
+// const App = () => {
+//     return (
+//         // <Router>
+//         <>
+
+//         <Header />
+//         <div className="container">
+//             {/* <Home /> */}
+
+//             {/* <Routes>
+//                 <Route path="/" element={<Home />} />
+//                 <Route path="/onboard" element={<Onboarding />} />
+//             </Routes> */}
+
+//         </div>
+//         {/* </Router> */}
+
+// </>

client/components/Card.jsx

@@ -1,18 +1,20 @@
 import React from "react";
 
+import '../style.css';
 
 
-
-export default function Card(props) { 
+const Card = (props) => {
     return (
         <div className="card">
             <div className="card-header">
                 <h3 className="card-title">{props.title}</h3>
             </div>
             <div className="card-body">
-                {props.children}
+                {props.amount}
             </div>
         </div>
     )
 
-}
+}
+
+export default Card;

client/components/Dashboard.jsx

@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from "react";
+
+import Card from "./Card.jsx";
+
+const Dashboard = () => {
+
+    const [totalEmployees, setTotalEmployees] = useState(0);
+    const [totalFulltime, setTotalFulltime] = useState(0);
+    const [totalContractors, setTotalContractors] = useState(0);
+
+    useEffect(() => {
+        fetch("/api/table")
+            .then(response => response.json())
+            .then(data => {
+
+                setTotalEmployees(data.length);
+
+                setTotalFulltime(
+                    data.filter(employee =>
+                        employee.type === "full-time"
+                    ).length);
+
+                setTotalContractors(
+                    data.filter(employee =>
+                        employee.type === "contractor"
+                    ).length);
+            });
+    }, []);
+
+    return (
+        <>
+            <div className="card-container">
+                <Card title='Total Employee Count' amount={totalEmployees} />
+                <Card title='Full Time Employees' amount={totalFulltime} />
+                <Card title='Contractors' amount={totalContractors} />
+            </div>
+        </>
+    )
+}
+
+export default Dashboard;

client/components/Dropdown.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { useState } from "react";
+import "../dropdown.css";
+import icon from "../assets/icon.jpg";
+import editProfile from "../assets/editProfile.png";
+import logOut from "../assets/logOut.png";
+import myProfile from "../assets/myProfile.png";
+import settings from "../assets/settings.jpg";
+import DropdownItem from "./DropdownItem.jsx";
+
+
+const Dropdown = () => {
+    const [open, setOpen] = useState(false);
+    return (
+        <div className='menu-container'>
+            <div className='menu-trigger' onClick={()=> {setOpen(!open)}}>
+                <img src={icon}></img>
+            </div>
+
+            <div className={`dropdown-menu ${open? 'active' : 'inactive'}`}>
+                <h3>Profile</h3>
+                    <ul className="box">
+                        <DropdownItem img = {myProfile} text= {"My Profile"}/>
+                        <DropdownItem img = {editProfile} text= {"Edit Profile"}/>
+                        <DropdownItem img = {settings} text= {"Settings"}/>
+                        <DropdownItem img = {logOut} text= {"Logout"}/>
+                    </ul>
+                </div>
+            </div>
+)
+}
+
+export default Dropdown;

client/components/DropdownItem.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import "../dropdown.css";
+
+const DropdownItem = (props) => {
+    return (
+        <li className='dropdownItem'>
+            <img src={props.img}></img>
+            <a>{props.text}</a>
+        </li>
+    )
+}
+
+
+export default DropdownItem;

client/components/Header.jsx

@@ -1,28 +1,27 @@
 import React from "react";
 import { Link } from "react-router-dom";
+import { GiOrange } from "react-icons/gi";
+import Dropdown from "./Dropdown.jsx";
+
 import '../style.css';
 
 const Header = () => {
-
     return (
         <header className='header'>
-            <div className="logo">
-                Tangerine
+            <Link to="/" className="logo">
+                <div >
+                    <GiOrange /> Tangerine
+                </div>
+            </Link>
+            <div className="flex-center">
+            <Link to="/onboard" className="btn">
+                Create Onboard
+            </Link>
+            <Dropdown/>
             </div>
-            <ul>
-                <li>
-                    <button className="btn">
-                        Create Onboarding
-                    </button>
-                </li>
-                <li className='btn-circle profile-icon'>
-                    Icon
-                </li>
-            </ul>
-        </header>
+        </header >
     )
 }
 
 
-
 export default Header;

client/components/Info.jsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { useState } from "react";
+import "../dropdown.css";
+import dropdown from "../assets/dropdown.png";
+import InfoItem from "./InfoItem.jsx";
+import { useNavigate } from "react-router-dom";
+
+const formatDate = (databaseDate) => {
+    const date = new Date(databaseDate);
+    return date.toISOString().split('T')[0];
+}
+
+const Info = (props) => {
+    const [open, setOpen] = useState(false);
+
+    const clickHandle = async () => {
+        try{
+            const res = await fetch(`/api/delete/${props.employee_id}`, {
+                method: 'DELETE'
+            })
+            props.getTableFunc()
+        }
+        catch (err) {
+            console.log('error deleting employee')
+        }
+    }
+
+    return (
+        <div className='info-container'>
+            <div className='info-trigger' onClick={()=> {setOpen(!open)}}>
+                <img src={dropdown}></img>
+            </div>
+
+            <div className={`info-menu ${open? 'active' : 'inactive'}`}>
+                    <ul className="box">
+                        <InfoItem desc= 'Salary:'text= {props.salary}/>
+                        <InfoItem desc= 'Birthday:'text= {formatDate(props.birthday)}/>
+                        <InfoItem desc= 'Email:'text= {props.email}/>
+                        <InfoItem desc= 'Phone Number:'text= {props.phone_number}/>
+                        <div className="flex-center">
+                        <button className="button-style"
+                    onClick={clickHandle}>
+                    Offboard
+                </button>
+                <button className="button-style">
+                    {/* onClick={() => console.log('hello')}> */}
+                    Edit
+                </button>
+                </div>
+                    </ul>
+                </div>
+            </div>
+)
+}
+
+export default Info;

client/components/InfoItem.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import "../dropdown.css";
+
+const InfoItem = (props) => {
+    return (
+        <li className='InfoItem'>
+            <a>{props.desc}</a>
+            <a>{props.text}</a>
+        </li>
+    )
+}
+
+
+export default InfoItem;

client/components/Login.jsx

@@ -0,0 +1,57 @@
+import React, { useEffect, useState } from "react";
+import { useNavigate } from 'react-router-dom';
+
+
+const Login = () => {
+    const [input, setInput] = useState(['', '']);
+    const navigate = useNavigate();
+
+    const onChangeHandler2 = (e) => {
+        console.log(e)
+        input[e.target.id] = e.target.value
+        setInput([...input])
+    }
+
+    const onClickHandler2 = async (e) => {
+
+        try {
+            e.preventDefault();
+            const res = await fetch('/api/login', {
+            method: 'POST',
+            headers: {
+                "content-type": "application/json"
+            },  
+            body: JSON.stringify({
+                username: input[0],
+                password: input[1]
+            })
+          })
+            setInput(['', '']);
+
+            // navigate('/');
+
+        } catch (err) {
+           console.log('some error', err)
+        }
+    }
+
+  return (
+     <div className="signup">
+        <div className="quote">
+            <div className="innerquote">Log in for Speedy Employee Service</div>   
+        </div>
+        <form className="signupform">
+            <label htmlFor='username'>username</label>
+            <input type='text'id= {0} className="signuptext" name='username' onChange={onChangeHandler2} value={input[0]}></input>
+            <label htmlFor='password'>password</label>
+            <input type='text'id= {1} className="signuptext" name='password' onChange={onChangeHandler2} value={input[1]}></input>
+            <div className="thebuttons">
+            <button onClick={onClickHandler2}>Login</button>
+            <button>Sign Up</button>
+            </div>
+        </form>
+     </div>
+    );
+}
+
+export default Login;