admin panel began

src/assets/history.svg

@@ -0,0 +1 @@
+<svg id="Capa_1" enable-background="new 0 0 551.13 551.13" height="512" viewBox="0 0 551.13 551.13" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m275.531 172.228-.05 120.493c0 4.575 1.816 8.948 5.046 12.177l86.198 86.181 24.354-24.354-81.153-81.136.05-113.361z"/><path d="m310.011 34.445c-121.23 0-221.563 90.033-238.367 206.674h-71.644l86.114 86.114 86.114-86.114h-65.78c16.477-97.589 101.355-172.228 203.563-172.228 113.966 0 206.674 92.707 206.674 206.674s-92.707 206.674-206.674 206.674c-64.064 0-123.469-28.996-162.978-79.555l-27.146 21.192c46.084 58.968 115.379 92.808 190.124 92.808 132.955 0 241.119-108.181 241.119-241.119s-108.164-241.119-241.119-241.12z"/></svg>

src/assets/plan.svg

@@ -0,0 +1 @@
+<svg enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m6 0h-5c-.552 0-1 .448-1 1v5c0 .552.448 1 1 1h5c.552 0 1-.448 1-1v-5c0-.552-.448-1-1-1z"/><path d="m15.5 6v-5c0-.552-.448-1-1-1h-5c-.552 0-1 .448-1 1v5c0 .552.448 1 1 1h5c.552 0 1-.448 1-1z"/><path d="m15.5 9.5c0-.552-.448-1-1-1h-6-1.5-6c-.552 0-1 .448-1 1v5c0 .552.448 1 1 1h13.5c.552 0 1-.448 1-1z"/><path d="m23 0h-5c-.552 0-1 .448-1 1v5c0 .552.448 1 1 1h5c.552 0 1-.448 1-1v-5c0-.552-.448-1-1-1z"/><path d="m0 18v5c0 .552.448 1 1 1h13.5c.552 0 1-.448 1-1v-5c0-.552-.448-1-1-1h-13.5c-.552 0-1 .448-1 1z"/><path d="m18 15.5h5c.552 0 1-.448 1-1v-5c0-.552-.448-1-1-1h-5c-.552 0-1 .448-1 1v5c0 .552.448 1 1 1z"/><path d="m18 24h5c.552 0 1-.448 1-1v-5c0-.552-.448-1-1-1h-5c-.552 0-1 .448-1 1v5c0 .552.448 1 1 1z"/></svg>

src/assets/statistics.svg

@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 478 478" style="enable-background:new 0 0 478 478;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M119.5,187.75H17.1c-9.4,0-17,7.6-17.1,17.1v256c0,9.5,7.7,17.1,17.1,17.1h102.4c9.5,0,17.1-7.7,17.1-17.1v-256
+			C136.6,195.35,128.9,187.75,119.5,187.75z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M290.2,0.05H187.8c-9.4,0-17.1,7.6-17.1,17v443.8c0,9.5,7.7,17.1,17.1,17.1h102.4c9.5,0,17.1-7.7,17.1-17.1V17.15
+			C307.3,7.65,299.6,0.05,290.2,0.05z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M460.9,136.55H358.5c-9.5,0-17.1,7.6-17.1,17.1v307.2c0,9.5,7.7,17.1,17.1,17.1h102.4c9.5,0,17.1-7.7,17.1-17.1v-307.2
+			C478,144.15,470.3,136.55,460.9,136.55z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/components/Admin.tsx

@@ -0,0 +1,58 @@
+import React, { useState} from 'react';
+import styled from 'styled-components/macro';
+import Plan from '../assets/plan.svg';
+import History from '../assets/history.svg';
+import Statistics from '../assets/statistics.svg';
+
+const LeftSide = styled.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+`;
+
+interface LeftPanelElement{
+    choose:boolean;
+}
+
+const LeftPanelElement = styled.div<LeftPanelElement>`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.75);
+  padding: 20px;
+  cursor: pointer;
+  background-color: ${({choose})=>(choose == true ? `blue` : "")};
+`;
+const Icon = styled.img`
+  width: 40px;
+  margin: 5px;
+`;
+
+export const Admin = () => {
+
+    const[choose, setChoose] = useState(false);
+
+    const handleClick = ()=>{
+        setChoose(true);
+    }
+
+  return (
+    <LeftSide>
+      <LeftPanelElement choose={choose} onClick={handleClick}>
+        <Icon alt="profile" src={Plan} />
+        Pokaż plan
+      </LeftPanelElement>
+      <LeftPanelElement choose={choose} onClick={handleClick}>
+        <Icon alt="history" src={History} />
+        Historia Zmian
+      </LeftPanelElement>
+      <LeftPanelElement choose={choose} onClick={handleClick}>
+        <Icon alt="statistics" src={Statistics} />
+        Statystyki
+      </LeftPanelElement>
+    </LeftSide>
+  );
+};

src/components/App.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useContext } from 'react';
 import Topbar from './Topbar';
+import {Admin} from './Admin';
 import { Transfer } from './Transfer';
 import { Scheduler } from './Scheduler';
 import { Rightbar } from './Rightbar';
@@ -9,7 +10,6 @@ const Wrapper = styled.div`
   display: flex;
   height: calc(100vh - 80px);
   background-color: #ECEEF4;
-  padding:  20px;
 `;
 
 export const App = () => {
@@ -24,8 +24,9 @@ export const App = () => {
       <Topbar handleTransfer={handleTransfer} />
       <Transfer isOpen={isOpenTransfer} handleClose={handleTransfer} />
       <Wrapper>
-        <Scheduler />
+        <Admin/>
-        <Rightbar />
+        {/* <Scheduler />
+        <Rightbar /> */}
       </Wrapper>
     </>
   );

src/components/Scheduler.tsx

@@ -11,6 +11,7 @@ const SchedulerWrapper = styled.div`
   padding: 10px 40px 25px 10px;
   border-radius: 5px;
   margin-right: 20px;
+  margin-left:20px;
   flex-direction: column;
   justify-content: center;
   align-items: center;

src/components/Topbar.tsx

@@ -1,6 +1,4 @@
 import React, { useState, MouseEvent, ChangeEvent, useEffect } from 'react';
-import Transfer from '../assets/transfer.png';
-import Search from '../assets/search.svg';
 import { ReactComponent as Close } from '../assets/close.svg';
 import ProfileIcon from '../assets/account.svg';
 import { Profile } from './Profile';
@@ -103,10 +101,6 @@ const Icon = styled.img`
   }
 `;
 
-
-
-
-
 interface TopbarProps {
   handleTransfer: (e: MouseEvent) => void;
 }