Merge pull request 'statistics' (#57) from statistics into master

Reviewed-on: http://git.plannaplan.pl/y0rune/frontend/pulls/57 Reviewed-by: Maciej <glowackimaciej97@gmail.com>
2021-01-19 21:36:53 +01:00 · 2021-01-19 21:36:53 +01:00 · 69d05b7a78
parent 6db69f95fb 1235484538
commit 69d05b7a78
15 changed files with 748 additions and 107 deletions
--- a/src/assets/logout.svg
+++ b/src/assets/logout.svg
@ -0,0 +1,51 @@
+<?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 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M255.15,468.625H63.787c-11.737,0-21.262-9.526-21.262-21.262V64.638c0-11.737,9.526-21.262,21.262-21.262H255.15
+			c11.758,0,21.262-9.504,21.262-21.262S266.908,0.85,255.15,0.85H63.787C28.619,0.85,0,29.47,0,64.638v382.724
+			c0,35.168,28.619,63.787,63.787,63.787H255.15c11.758,0,21.262-9.504,21.262-21.262
+			C276.412,478.129,266.908,468.625,255.15,468.625z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M505.664,240.861L376.388,113.286c-8.335-8.25-21.815-8.143-30.065,0.213s-8.165,21.815,0.213,30.065l92.385,91.173
+			H191.362c-11.758,0-21.262,9.504-21.262,21.262c0,11.758,9.504,21.263,21.262,21.263h247.559l-92.385,91.173
+			c-8.377,8.25-8.441,21.709-0.213,30.065c4.167,4.21,9.653,6.336,15.139,6.336c5.401,0,10.801-2.041,14.926-6.124l129.276-127.575
+			c4.04-3.997,6.336-9.441,6.336-15.139C512,250.302,509.725,244.88,505.664,240.861z"/>
+	</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>
--- a/src/assets/switch.svg
+++ b/src/assets/switch.svg
@ -0,0 +1 @@
+<svg id="bold" 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="m23.25 15c-.414 0-.75-.336-.75-.75 0-2.895-2.355-5.25-5.25-5.25h-7.25v3.25c0 .66-.794.994-1.268.542l-5.5-5.25c-.148-.141-.232-.337-.232-.542s.084-.401.232-.542l5.5-5.25c.476-.454 1.268-.116 1.268.542v3.25h6.25c4.273 0 7.75 3.477 7.75 7.75v1.5c0 .414-.336.75-.75.75z"/><path d="m14 22.25v-3.25h-6.25c-4.273 0-7.75-3.477-7.75-7.75v-1.5c0-.414.336-.75.75-.75s.75.336.75.75c0 2.895 2.355 5.25 5.25 5.25h7.25v-3.25c0-.657.791-.998 1.268-.542l5.5 5.25c.148.141.232.337.232.542s-.084.401-.232.542l-5.5 5.25c-.477.454-1.268.116-1.268-.542z"/></svg>
--- a/src/assets/transfer.svg
+++ b/src/assets/transfer.svg
@ -0,0 +1 @@
+<svg id="bold" 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="m20.25 11c-.414 0-.75-.336-.75-.75v-4.5c0-.689-.561-1.25-1.25-1.25h-7.5c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h7.5c1.517 0 2.75 1.233 2.75 2.75v4.5c0 .414-.336.75-.75.75z"/><path d="m20.25 11c-.192 0-.384-.073-.53-.22l-1.75-1.75c-.214-.214-.279-.537-.163-.817s.39-.463.693-.463h3.5c.303 0 .577.183.693.463s.052.603-.163.817l-1.75 1.75c-.146.147-.338.22-.53.22z"/><path d="m11.25 21h-5.5c-1.517 0-2.75-1.233-2.75-2.75v-4.5c0-.414.336-.75.75-.75s.75.336.75.75v4.5c0 .689.561 1.25 1.25 1.25h5.5c.414 0 .75.336.75.75s-.336.75-.75.75z"/><path d="m5.5 16.25h-3.5c-.303 0-.577-.183-.693-.463s-.052-.603.163-.817l1.75-1.75c.293-.293.768-.293 1.061 0l1.75 1.75c.214.214.279.537.163.817s-.391.463-.694.463z"/><circle cx="5" cy="2.5" r="2.5"/><path d="m7.25 6h-4.5c-1.517 0-2.75 1.233-2.75 2.75v.5c0 .414.336.75.75.75h8.5c.414 0 .75-.336.75-.75v-.5c0-1.517-1.233-2.75-2.75-2.75z"/><path d="m19 19c-1.378 0-2.5-1.122-2.5-2.5s1.122-2.5 2.5-2.5 2.5 1.122 2.5 2.5-1.122 2.5-2.5 2.5z"/><path d="m23.25 24h-8.5c-.414 0-.75-.336-.75-.75v-.5c0-1.517 1.233-2.75 2.75-2.75h4.5c1.517 0 2.75 1.233 2.75 2.75v.5c0 .414-.336.75-.75.75z"/></svg>
--- a/src/components/Administrator.tsx
+++ b/src/components/Administrator.tsx
@ -1,10 +1,12 @@
 import { format } from 'date-fns';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
 import styled from 'styled-components/macro';
 import { axiosInstance } from '../utils/axiosInstance';
 import { useSnackbar } from 'notistack';
 import CloseIcon from '@material-ui/icons/Close';
 import { SyncLoader } from 'react-spinners';
+import { CASContext } from '../contexts/CASProvider';
+import LogoutIcon from '../assets/logout.svg';

 const StyledCloseIcon = styled(CloseIcon)`
  color: #000000;
@ -14,6 +16,18 @@ const StyledCloseIcon = styled(CloseIcon)`
  }
 `;

+const Icon = styled.img`
+  width: 40px;
+  margin-left: 40px;
+  cursor: pointer;
+  @media only screen and (max-width: 670px) {
+    width: 35px;
+  }
+  position:absolute;
+  top:10px;
+  right:10px;
+`;
+
 const SaveButton = styled.button`
  display: flex;
  justify-content: center;
@ -24,6 +38,7 @@ const SaveButton = styled.button`
  font-weight: bold;
  cursor: pointer;
  height: 40px;
+  margin:10px;
  &:hover {
    color: #ffffff;
    box-shadow: 0px 5px 4px 0px rgba(0, 0, 0, 0.24);
@ -52,6 +67,7 @@ const LogoWrapper = styled.div`
  flex-direction: column;
  justify-content: center;
  align-items: center;
+  margin-top:-50px;
 `;

 const Text = styled.div`
@ -80,7 +96,22 @@ const Form = styled.form`
  }
 `;

+const DownloadSection = styled.div`
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  input {
+    padding: 5px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    width: 210px;
+  }
+`;
 export const Administrator = () => {
+  const { logout } = useContext(CASContext)!;
  const { enqueueSnackbar } = useSnackbar();
  const { closeSnackbar } = useSnackbar();

@ -98,6 +129,27 @@ export const Administrator = () => {
  const [endSecondDate, setEndSecondDate] = useState<Date | null>(null);
  const [loading, setLoading] = useState(false);

+  const downloadFile = async () => {
+
+    const {data} = await axiosInstance.get(`${process.env.REACT_APP_API_URL}/api/v1/commisions/export/csv`,{responseType:"blob"});
+
+    console.log("123",xd);
+
+    const downloadUrl = window.URL.createObjectURL(new Blob([data]));
+
+    const link = document.createElement('a');
+
+    link.href = downloadUrl;
+
+    link.setAttribute('download', 'file.csv');
+
+    document.body.appendChild(link);
+
+    link.click();
+
+    link.remove();
+      
+  };

  const uploadFile = async (event: React.FormEvent<HTMLFormElement>) => {
    const action = (key: any) => (
@ -138,12 +190,12 @@ export const Administrator = () => {
        formData,
        config,
      );
-      enqueueSnackbar('Plan został zapisany', {
+      enqueueSnackbar('Ustawienia zostały zapisane', {
        variant: 'success',
        action,
      });
    } catch (e) {
-      enqueueSnackbar('Zapisywanie planu nie powiodło się', {
+      enqueueSnackbar('Ustawienia nie zostały zapisane', {
        variant: 'error',
        action,
      });
@ -152,51 +204,62 @@ export const Administrator = () => {
    setLoading(false);
  };

+  const xd = true;
+
  return (
    <AdministratorWrapper>
+                  <Icon alt="logout" src={LogoutIcon} onClick={logout}/>
      <Wrap>
        <LogoWrapper>
          <Logo alt="logo" src="https://plannaplan.pl/img/logo.svg" />
          <Text> plan na plan </Text>
        </LogoWrapper>
-        <Form onSubmit={uploadFile}>
+        {xd === true ? (
          <div>
-            <div>Start pierwszej tury:</div>{' '}
+          <Form onSubmit={uploadFile}>
            <div>
-              <input type="date" min={date} onChange={(e) => setStartFirstDate(e.target.valueAsDate)} />
+              <div>Start pierwszej tury:</div>{' '}
+              <div>
+                <input type="date" min={date} onChange={(e) => setStartFirstDate(e.target.valueAsDate)} />
+              </div>
+              <div>Koniec pierwszej tury:</div>{' '}
+              <div>
+                <input type="date" min={date} onChange={(e) => setEndFirstDate(e.target.valueAsDate)} />
+              </div>
            </div>
-            <div>Koniec pierwszej tury:</div>{' '}
            <div>
-              <input type="date" min={date} onChange={(e) => setEndFirstDate(e.target.valueAsDate)} />
+              <div>Start drugiej tury:</div>{' '}
+              <div>
+                <input type="date" min={date} onChange={(e) => setStartSecondDate(e.target.valueAsDate)} />
+              </div>
            </div>
-          </div>
-          <div>
-            <div>Start drugiej tury:</div>{' '}
            <div>
-              <input type="date" min={date} onChange={(e) => setStartSecondDate(e.target.valueAsDate)} />
+              <div>Koniec drugiej tury:</div>{' '}
+              <div>
+                <input type="date" min={date} onChange={(e) => setEndSecondDate(e.target.valueAsDate)} />
+              </div>
            </div>
-          </div>
-          <div>
-            <div>Koniec drugiej tury:</div>{' '}
            <div>
-              <input type="date" min={date} onChange={(e) => setEndSecondDate(e.target.valueAsDate)} />
+              <input
+                type="file"
+                onChange={(e) => {
+                  if (e.target.files && e.target.files[0]) {
+                    const file = e.target.files[0];
+                    setSelectedFile(file);
+                  }
+                }}
+              />
            </div>
-          </div>
-          <div>
-            <input
-              type="file"
-              onChange={(e) => {
-                if (e.target.files && e.target.files[0]) {
-                  const file = e.target.files[0];
-                  setSelectedFile(file);
-                }
-              }}
-            />
-          </div>
-          <div>
-            <SaveButton type="submit">{loading === false ? 'Zapisz' : <SyncLoader />} </SaveButton>
-          </div>
-        </Form>
+            <div>
+              <SaveButton type="submit">{loading === false ? 'Zapisz' : <SyncLoader />} </SaveButton>
+            </div>
+          </Form>
+                      <DownloadSection>
+                      <SaveButton onClick={downloadFile}>Pobierz dane.csv</SaveButton>
+                    </DownloadSection>
+                    </div>
+        ) : (<div></div>
+        )}
      </Wrap>
    </AdministratorWrapper>
  );
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@ -35,23 +35,21 @@ export const App = () => {
    <>
      <LoadingOverlay active={role === undefined} spinner={<SyncLoader />}>
        {userPrivilige !== 'ADMIN' && (
-            <>
-              <Topbar handleTransfer={handleTransfer} />
-              <Transfer isOpen={isOpenTransfer} handleClose={handleTransfer} />
-              <Wrapper>
-                {userPrivilige === 'STUDENT' && (
-                  <>
-                    <Scheduler schedulerEvents={schedulerEvents} />
-                    <Rightbar />
-                  </>
-                )}
-                {userPrivilige === 'DEANERY' && <Deanery schedulerEvents={schedulerEvents} />}
-              </Wrapper>
-            </>
-          )}
-        {userPrivilige === 'ADMIN' && (
-            <Administrator></Administrator>
+          <>
+            <Topbar handleTransfer={handleTransfer} />
+            <Transfer isTransferOpen={isOpenTransfer} handleClose={handleTransfer} />
+            <Wrapper>
+              {userPrivilige === 'STUDENT' && (
+                <>
+                  <Scheduler schedulerEvents={schedulerEvents} />
+                  <Rightbar />
+                </>
+              )}
+              {userPrivilige === 'DEANERY' && <Deanery schedulerEvents={schedulerEvents} />}
+            </Wrapper>
+          </>
        )}
+        {userPrivilige === 'ADMIN' && <Administrator></Administrator>}
      </LoadingOverlay>
    </>
  );
--- a/src/components/CourseCard.tsx
+++ b/src/components/CourseCard.tsx
@ -158,7 +158,7 @@ export const CourseCard = ({ course }: CourseCardProps) => {
  } = useContext(coursesContext)!;
  const [isSelected, setSelected] = useState(true);
  const groups = [...course.lectures!, ...course.classes!];
-  const basketCourseGroups = useMemo(() => selectBasketCourseGroups(course.id), []);
+  const basketCourseGroups = useMemo(() => selectBasketCourseGroups(course.name), []);
  const [previous, setPrevious] = useState(basketCourseGroups);

  const onGroupClick = (group: Group, courseId: number) => {
--- a/src/components/DeaneryPanel.tsx
+++ b/src/components/DeaneryPanel.tsx
@ -2,7 +2,8 @@ import React, { useState, MouseEvent,useContext } 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';
+import StatisticsIcon from '../assets/statistics.svg';
+import { Statistics } from './Statistics';
 import { Scheduler } from './Scheduler';
 import { Rightbar } from './Rightbar';
 import { SchedulerHistory } from './SchedulerHistory';
@ -124,7 +125,7 @@ export const Deanery = ({ schedulerEvents }: Deanery) => {
          Historia Zmian
        </LeftPanelElement>
        <LeftPanelElement id={'3'} isCurrentTab={currentTab === 3} onClick={handleClick}>
-          <Icon alt="statistics" src={Statistics} />
+          <Icon alt="statistics" src={StatisticsIcon} />
          Statystyki
        </LeftPanelElement>
      </LeftSide>
@ -137,7 +138,7 @@ export const Deanery = ({ schedulerEvents }: Deanery) => {
        ) : currentTab === 2 ? (
          <SchedulerHistory schedulerHistoryEvents={schedulerHistoryEvents}/>
        ) : currentTab === 3 ? (
-          <StatsDiv />
+          <StatsDiv><Statistics/></StatsDiv>
        ) : (
          <LogoWrapper>
            <Logo alt="logo" src="https://plannaplan.pl/img/logo.svg" />
--- a/src/components/DropdownModal.tsx
+++ b/src/components/DropdownModal.tsx
@ -0,0 +1,111 @@
+import React, { useState, useContext, useEffect, MouseEvent, useMemo } from 'react';
+import { coursesContext } from '../contexts/CoursesProvider';
+import { studentsContext } from '../contexts/StudentsProvider';
+import { Course, Student } from '../types';
+import styled from 'styled-components';
+
+const DropdownContainer = styled.div`
+  position: relative;
+  z-index: 99999999;
+  max-height: 396px;
+  border-radius: 3px;
+  overflow-y: auto;
+  opacity: 0.97;
+  box-shadow: 0.05em 0.2em 0.6em rgba(0, 0, 0, 0.2);
+  scroll-snap-type: y mandatory;
+  scroll-behavior: smooth;
+  ::-webkit-scrollbar-track {
+    background-color: #f2f4f7;
+    border-radius: 10px;
+  }
+  ::-webkit-scrollbar {
+    background-color: #f2f4f7;
+    width: 5px;
+    border-style: none;
+  }
+  ::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background-color: #4b4b4b;
+  }
+`;
+
+const CourseContainer = styled.div`
+  padding: 5px;
+  padding-left: 20px;
+  background-color: #f2f4f7;
+  font-size: 16px;
+  font-weight: 500;
+  scroll-snap-align: end;
+  :hover {
+    background-color: #eceef4;
+    cursor: pointer;
+  }
+`;
+
+interface DropdownProps {
+  open: boolean;
+  input: string;
+  handleCloseDropdown: () => void;
+  handleSelectedGroupChange: (event: React.ChangeEvent<{ value: unknown }>) => void;
+  selectedOption: string;
+}
+
+export const DropdownModal = ({
+  open,
+  input,
+  handleCloseDropdown,
+  selectedOption,
+  handleSelectedGroupChange,
+}: DropdownProps) => {
+  const { courses, selectBasketNames } = useContext(coursesContext)!;
+  const basketNames = useMemo(() => selectBasketNames(), [selectBasketNames]);
+  const [filteredCourses, setFilteredCourses] = useState<Array<Course>>([]);
+
+  const onCourseClick = (event: MouseEvent) => {
+    const target = event.currentTarget;
+    if (target.id && target.textContent) {
+      const course = filteredCourses.find(({ id }) => id.toString() === target.id)!;
+
+      handleSelectedGroupChange((course as unknown) as any);
+      handleCloseDropdown();
+    }
+  };
+
+  useEffect(() => {
+    const filterCourses = (input: string) => {
+      const filteredCourses = courses.filter(
+        ({ name }) =>
+          name
+            .toLowerCase()
+            .normalize('NFD')
+            .replace(/[\u0300-\u036f]/g, '')
+            .includes(
+              input
+                .toLowerCase()
+                .normalize('NFD')
+                .replace(/[\u0300-\u036f]/g, ''),
+            ) && !basketNames.includes(name),
+      );
+      setFilteredCourses(filteredCourses);
+    };
+    filterCourses(input);
+  }, [basketNames, courses, input]);
+
+  return (
+    <DropdownContainer>
+      {open && (
+        <>
+          {
+            <div>
+              {filteredCourses.map(({ name, id }, index) => (
+                <CourseContainer key={index} id={id.toString()} onClick={onCourseClick}>
+                  <p>{name} </p>
+                </CourseContainer>
+              ))}
+            </div>
+          }
+        </>
+      )}
+    </DropdownContainer>
+  );
+};
--- a/src/components/SelectMenu.tsx
+++ b/src/components/SelectMenu.tsx
@ -84,7 +84,6 @@ export const SelectMenu = ({changeSelectedOption,changeDropdownOpen, selectedOpt
      <Wrapper onClick={() => {changeDropdownOpen(false)}}>
        <Header
          onClick={() => {
-            console.log('clicked');
            setIsOpen(!isOpen);
          }}
        >
--- a/src/components/Statistics.tsx
+++ b/src/components/Statistics.tsx
@ -0,0 +1,94 @@
+import React, { useState, useContext } from 'react';
+import Collapse from '@material-ui/core/Collapse';
+import { ReactComponent as Expand } from '../assets/expand.svg';
+import { Course, Group, GroupType } from '../types/index';
+import { coursesContext } from '../contexts/CoursesProvider';
+import styled, { css } from 'styled-components';
+import { makeStyles } from '@material-ui/core/styles';
+import DeleteIcon from '@material-ui/icons/Delete';
+import { useMemo } from 'react';
+import { dayMapping } from '../constants';
+
+const StatisticsWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+`;
+
+const Row = styled.div`
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+`;
+
+const StatisticBox = styled.div`
+background-color:white;
+  width: 200px;
+  height: 200px;
+  margin: 10px;
+  border: 1px solid #000000;
+  border-radius: 38px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  font-size: 22px;
+  padding:2px;
+  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.75);
+`;
+
+const StatisticNumber = styled.p`
+  font-size: 52px;
+  margin-top: 40px;
+  margin-bottom:0px;
+`;
+
+const StatisticText = styled.p`
+  font-size: 18px;
+  text-align:center;
+  align-items:center;
+  justify-content:center;
+`;
+
+export const Statistics = () => {
+  return (
+    <StatisticsWrapper>
+      <Row>
+        <StatisticBox>
+          <StatisticNumber>65</StatisticNumber>
+          <StatisticText>Utworzonych grup</StatisticText>
+        </StatisticBox>
+        <StatisticBox>
+          {' '}
+          <StatisticNumber>280</StatisticNumber>
+          <StatisticText>Zapisanych studentów do grup</StatisticText>
+        </StatisticBox>
+        <StatisticBox>
+          {' '}
+          <StatisticNumber>24</StatisticNumber>
+          <StatisticText>Studentów niezapisanych do żadnej grupy</StatisticText>
+        </StatisticBox>
+      </Row>
+      <Row>
+        <StatisticBox>
+          {' '}
+          <StatisticNumber>150</StatisticNumber>
+          <StatisticText>Studentów z zaakceptowanym planem</StatisticText>
+        </StatisticBox>
+        <StatisticBox>
+          {' '}
+          <StatisticNumber>130</StatisticNumber>
+          <StatisticText>Studentów bez zaakceptowanego pełengo planu</StatisticText>
+        </StatisticBox>
+        <StatisticBox>
+          {' '}
+          <StatisticNumber>0</StatisticNumber>
+          <StatisticText>Zamkniętych grup</StatisticText>
+        </StatisticBox>
+      </Row>
+    </StatisticsWrapper>
+  );
+};
--- a/src/components/Topbar.tsx
+++ b/src/components/Topbar.tsx
@ -1,6 +1,7 @@
 import React, { useState, MouseEvent, ChangeEvent, useEffect, useCallback, useContext, useRef } from 'react';
 import { ReactComponent as Close } from '../assets/close.svg';
-import ProfileIcon from '../assets/account.svg';
+import LogoutIcon from '../assets/logout.svg';
+import TransferIcon from '../assets/transfer.svg';
 import { Profile } from './Profile';
 import { Dropdown } from './Dropdown';
 import styled from 'styled-components/macro';
@ -113,7 +114,7 @@ const IconWrapper = styled.div`

 const Icon = styled.img`
  width: 40px;
-  margin: 5px;
+  margin-left: 40px;
  cursor: pointer;
  @media only screen and (max-width: 670px) {
    width: 35px;
@ -137,6 +138,7 @@ interface TopbarProps {
 }

 export default function ({ handleTransfer }: TopbarProps) {
+  const { logout } = useContext(CASContext)!;
  const { selectedStudent } = useContext(studentsContext)!;
  const { role } = useContext(CASContext)!;
  const [clearInput, setClearInput] = useState(false);
@ -213,10 +215,10 @@ export default function ({ handleTransfer }: TopbarProps) {
        <SelectedStudent>{selectedStudent?.email.replace(/@st.amu.edu.pl/, '')}</SelectedStudent>

        {/* <Text>Maciej Głowacki</Text> */}
-        {/* <Icon alt="transfer" src={Transfer} onClick={handleTransfer} /> */}
+        <Icon alt="transfer" src={TransferIcon} onClick={handleTransfer} />
        {/* <Icon alt="change_language" src={isPolish ? EnglishIcon : PolishIcon} onClick={onLangChange} /> */}
-        <Icon alt="profile" src={ProfileIcon} onClick={handleProfile} />
-        <Profile anchorEl={anchorEl} handleClose={handleCloseProfile} />
+        <Icon alt="logout" src={LogoutIcon} onClick={logout} />
+        {/* <Profile anchorEl={anchorEl} handleClose={handleCloseProfile} /> */}
      </IconWrapper>
    </Topbar>
  );
--- a/src/components/Transfer.tsx
+++ b/src/components/Transfer.tsx
@ -1,13 +1,21 @@
-import React from 'react';
+import React, { ChangeEvent, useContext, useEffect, MouseEvent, useState } from 'react';
 import Modal from '@material-ui/core/Modal';
 import Fade from '@material-ui/core/Fade';
-import Input from '@material-ui/core/Input';
 import { makeStyles } from '@material-ui/core/styles';
 import styled from 'styled-components';
+import { FormControl, MenuItem, Select, useControlled, useEventCallback } from '@material-ui/core';
+import { axiosInstance } from '../utils/axiosInstance';
+import { Group } from '../types';
+import { coursesContext } from '../contexts/CoursesProvider';
+import { Dropdown } from './Dropdown';
+import { DropdownModal } from './DropdownModal';
+import { dayMapping } from '../constants';
+import TransferIcon from '../assets/switch.svg';
+import DeleteIcon from '@material-ui/icons/Delete';

 interface TransferProps {
  handleClose: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  isOpen: boolean;
+  isTransferOpen: boolean;
 }

 const useStyles = makeStyles({
@ -21,35 +29,49 @@ const useStyles = makeStyles({

 const TransferStyled = styled.div`
  display: flex;
-
-  flex-direction: row;
-
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
  outline: none;
  min-width: 35%;
  height: 70%;
  padding-top: 40px;
-  background: #006b96;
+  background: white;
  box-shadow: 0px 0px 0px 4px #006b96;
-  border: 4px solid #ffc400;
  margin: 0 auto;
-  border-top-left-radius: 5px;
-  border-bottom-right-radius: 5px;
-  text-transform: uppercase;
-  letter-spacing: 0.3ch;
+  border-radius: 5px;
+  letter-spacing: 0.2ch;
+`;
+
+const BinIcon = styled(DeleteIcon)`
+  max-width: 30px;
+  min-width: 30px;
+  cursor: pointer;
+  &:hover {
+    fill: white;
+  }
+`;
+
+const InputWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex: 1;
 `;

 const TransferGiveStyled = styled.div`
-  flex-grow: 1;
+  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
+  text-transform: uppercase;
 `;

 const TransferReceiveStyled = styled.div`
-  flex-grow: 1;
+  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
+  text-transform: uppercase;
 `;

 const TransferTextStyled = styled.div`
@ -68,44 +90,302 @@ const TransferInputStyled = styled.div`
    font-weight: bold;
    text-align: center;
  }
+  text-transform: none;
 `;

-export const Transfer = ({ handleClose, isOpen }: TransferProps) => {
+const SaveWrapper = styled.div`
+  margin-top: 40px;
+`;
+
+const SaveButton = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  user-select: none;
+  background-color: #43a047;
+  border-radius: 10px;
+  cursor: pointer;
+  height: 40px;
+  width: 150px;
+  font-size: 12px;
+  letter-spacing: 0.1ch;
+  line-height: normal;
+  &:hover {
+    color: #ffffff;
+    box-shadow: 0px 5px 4px 0px rgba(0, 0, 0, 0.24);
+  }
+
+  &:active {
+    background-color: #54c457;
+  }
+
+  text-transform: uppercase;
+  box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.75);
+`;
+
+const ExchangesWrapper = styled.div`
+  flex: 4;
+  overflow-y: scroll;
+  width: 100%;
+  ::-webkit-scrollbar-track {
+    border-radius: 10px;
+  }
+  ::-webkit-scrollbar {
+    width: 5px;
+    border-style: none;
+  }
+  ::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background-color: #4b4b4b;
+  }
+  border-top: 1px solid;
+`;
+
+const ExchangesRow = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+`;
+
+const Icon = styled.img`
+  width: 20px;
+  cursor: pointer;
+`;
+
+const Exchange = styled.div`
+  background-color: #b5d2e0;
+  border-radius: 10px;
+  width: 280px;
+  margin: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+
+
+export const Transfer = ({ handleClose, isTransferOpen }: TransferProps) => {
+  const { basket, selectBasketCourses } = useContext(coursesContext)!;
+  // const basketCourseGroups = useMemo(() => selectBasketCourseGroups(course.name), []);
+  const basketCourses = selectBasketCourses();
+
  const classes = useStyles();
+  // const groups = selectGroups();
+  const [input, setInput] = useState('');
+  const [open, setOpen] = useState(false);
+
+  const [assignmentsClasses, setAssignmentsClasses] = useState<Array<any>>([]);
+  const [selectedAssignmentsClasses, setSelectedAssignmentsClasses] = useState<any>('');
+  const [selectedGroup, setSelectedGroup] = useState<any>('');
+  const [groups, setGroups] = useState<any>([]);
+  const [exchanges, setExchanges] = useState<any>(null);
+  const [save, setSave] = useState(false);
+  // const allGroups
+  const handleSelectedAssignmentsGroupChange = (event: React.ChangeEvent<{ value: unknown }>) => {
+    setSelectedAssignmentsClasses(event.target.value as any);
+  };
+
+  const handleGroupsChange = (event: React.ChangeEvent<{ value: unknown }>) => {
+    setSelectedGroup(event.target.value as any);
+  };
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => setInput(event.target.value);
+  const handleShowDropdown = () => setOpen(true);
+
+  const handleCloseDropdown = () => setOpen(false);
+
+  useEffect(() => {
+    if (selectedAssignmentsClasses) {
+      const allGroups = basketCourses.filter((el) => el.name === selectedAssignmentsClasses.name);
+      const allClasses = allGroups[0]?.classes;
+      if (allClasses) {
+        const filteredClasses = allClasses.filter((el: any) => {
+          return el.time !== selectedAssignmentsClasses.time;
+        });
+        setGroups(filteredClasses);
+      }
+    }
+  }, [selectedAssignmentsClasses]);
+
+  const getExchanges = async () => {
+    try {
+      const { data } = await axiosInstance.get(`${process.env.REACT_APP_API_URL}/api/v1/exchanges/exchange/all`);
+      setExchanges(data);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  useEffect(() => {
+    const getAssignmentsGroups = async () => {
+      try {
+        const { data } = await axiosInstance.get(`${process.env.REACT_APP_API_URL}/api/v1/commisions/user/assignments`);
+        const classes = data.filter((el: any) => el.type === 'CLASS');
+        setAssignmentsClasses(classes);
+      } catch (e) {
+        console.log(e);
+      }
+    };
+    getExchanges();
+    getAssignmentsGroups();
+  }, [isTransferOpen, save]);
+
+  const createExchange = async (groupsIds: Array<number>) => {
+    try {
+      const response = await axiosInstance.post(
+        `${process.env.REACT_APP_API_URL}/api/v1/exchanges/exchange`,
+        JSON.stringify({ assignment: groupsIds[0], group: groupsIds[1] }),
+      );
+    } catch (e) {
+      console.log(e);
+    }
+    setSelectedGroup('');
+    setSelectedAssignmentsClasses('');
+    setSave(!save);
+  };
+
+  const getExchange = async (event: MouseEvent) => {
+    const target = event.currentTarget;
+    try {
+      const response = await axiosInstance.post(
+        `${process.env.REACT_APP_API_URL}/api/v1/exchanges/exchange/${target.id}`,
+      );
+    } catch (e) {
+      console.log(e);
+    }
+
+  };
+
+  const deleteExchange = async (id: number) => {
+    try {
+      const response = await axiosInstance.delete(`${process.env.REACT_APP_API_URL}/api/v1/exchanges/exchange/${id}`);
+      getExchanges();
+    } catch (e) {
+      console.log(e);
+    }
+  };

  return (
    <div>
      <Modal
        className={classes.wrapper}
-        open={isOpen}
+        open={isTransferOpen}
        onClose={handleClose}
        aria-labelledby="simple-modal-title"
        aria-describedby="simple-modal-description"
      >
-        <Fade in={isOpen}>
+        <Fade in={isTransferOpen}>
          <TransferStyled>
-            <TransferGiveStyled>
-              <TransferTextStyled>Oddam</TransferTextStyled>
-              <TransferInputStyled>
+            <InputWrapper>
+              <TransferGiveStyled>
+                <TransferTextStyled>Oddam</TransferTextStyled>
+                <TransferInputStyled>
+                  <FormControl>
+                    <Select
+                      labelId="demo-simple-select-label"
+                      id="assignments-groups"
+                      value={selectedAssignmentsClasses}
+                      onChange={handleSelectedAssignmentsGroupChange}
+                      placeholder="Wyszukaj..."
+                      style={{ width: '200px' }}
+                    >
+                      {assignmentsClasses.map((el: any, index: number) => {
+                        return (
+                          <MenuItem
+                            key={index}
+                            value={el}
+                            style={{
+                              display: 'flex',
+                              alignItems: 'center',
+                              justifyContent: 'center',
+                              textAlign: 'center',
+                            }}
+                          >
+                            {`${el.name}  `}
+                            <br></br>
+                            {`(${dayMapping[el.day]} ${el.time} - ${el.endTime})`}
+                          </MenuItem>
+                        );
+                      })}
+                    </Select>
+                  </FormControl>
+                </TransferInputStyled>
+              </TransferGiveStyled>
+              <SaveWrapper>
                {' '}
-                <Input
-                  placeholder="Wyszukaj..."
-                  inputProps={{ 'aria-label': 'description' }}
-                  className="top-bar__input-field"
-                />
-              </TransferInputStyled>
-            </TransferGiveStyled>
-            <TransferReceiveStyled>
-              <TransferTextStyled>Przyjmę</TransferTextStyled>
-              <TransferInputStyled>
-                {' '}
-                <Input
-                  placeholder="Wyszukaj..."
-                  inputProps={{ 'aria-label': 'description' }}
-                  className="top-bar__input-field"
-                />
-              </TransferInputStyled>
-            </TransferReceiveStyled>
+                <SaveButton
+                  onClick={() => {
+                    createExchange([selectedAssignmentsClasses.id, selectedGroup.id]);
+                  }}
+                >
+                  Zaproponuj wymianę
+                </SaveButton>
+              </SaveWrapper>
+              <TransferReceiveStyled>
+                <TransferTextStyled>Przyjmę</TransferTextStyled>
+                <TransferInputStyled>
+                  <FormControl disabled={selectedAssignmentsClasses ? false : true}>
+                    <Select
+                      labelId="demo-simple-select-label"
+                      id="assignments-groups"
+                      value={selectedGroup}
+                      onChange={handleGroupsChange}
+                      placeholder="Wyszukaj..."
+                      style={{ width: '200px' }}
+                    >
+                      {groups.map((el: any, index: number) => {
+                        return (
+                          <MenuItem
+                            key={index}
+                            value={el}
+                            style={{
+                              display: 'flex',
+                              alignItems: 'center',
+                              justifyContent: 'center',
+                              textAlign: 'center',
+                            }}
+                          >
+                            {`${selectedAssignmentsClasses.name}  `}
+                            <br></br>
+                            {`(${dayMapping[el.day]} ${el.time} - ${el.endTime})`}
+                          </MenuItem>
+                        );
+                      })}
+                    </Select>
+                  </FormControl>
+                </TransferInputStyled>
+              </TransferReceiveStyled>
+            </InputWrapper>
+
+            <ExchangesWrapper>
+              {exchanges ? (
+                exchanges.map((name: any, index: number) => (
+                  <ExchangesRow key={index}>
+                    {' '}
+                    <Exchange>
+                      {name.ownedAssignment.lecturer} <br></br> {dayMapping[name.ownedAssignment.day]} <br></br>{' '}
+                      {name.ownedAssignment.time} - {name.ownedAssignment.endTime}
+                    </Exchange>
+                    <Icon alt="transfer" src={TransferIcon} onClick={getExchange} />
+                    <Exchange>
+                      {name.desiredGroup.lecturer} <br></br> {dayMapping[name.desiredGroup.day]} <br></br>{' '}
+                      {name.desiredGroup.time} - {name.desiredGroup.endTime}
+                    </Exchange>{' '}
+                    <BinIcon
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        const id = Number(e.currentTarget.id);
+                        deleteExchange(id);
+                      }}
+                      id={name.id}
+                    ></BinIcon>
+                  </ExchangesRow>
+                ))
+              ) : (
+                <div></div>
+              )}
+            </ExchangesWrapper>
          </TransferStyled>
        </Fade>
      </Modal>
--- a/src/components/tests/Statistics.test.jsx
+++ b/src/components/tests/Statistics.test.jsx
@ -0,0 +1,26 @@
+import React from 'react';
+import { cleanup, fireEvent, waitForElement, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { customRender } from '../../customRender';
+import Topbar from '../Topbar';
+import { Statistics } from '../Statistics';
+
+beforeAll(() => {
+  delete window.location;
+  window.location = { replace: jest.fn() };
+});
+
+afterAll(() => {
+  window.location = location;
+});
+
+test('renders component', async () => {
+    customRender(<Statistics/>);
+    expect(screen.getByText(/Studentów bez zaakceptowanego pełengo planu/i)).toBeInTheDocument();
+  });
+
+  test('renders component', async () => {
+    customRender(<Statistics/>);
+    expect(screen.getByText(/Zapisanych sutdentów do grup/i)).toBeInTheDocument();
+  });
+    
--- a/src/contexts/CoursesProvider.tsx
+++ b/src/contexts/CoursesProvider.tsx
@ -32,7 +32,8 @@ interface CourseContext {
  selectHistorySchedulerEvents: () => Array<SchedulerEvent>;
  selectBasketNames: () => Array<string>;
  selectBasketCourses: () => Array<Course>;
-  selectBasketCourseGroups: (courseId: number) => { lecture: Group | undefined; classes: Group | undefined };
+  selectBasketCourseGroups: (courseName: string) => { lecture: Group | undefined; classes: Group | undefined };
+  selectGroups: () => Array<Group>;
  getNewestStudentTimetable: (studentId: string) => void;
  getStudentTimetablesHistory: (studentId: string) => void;
  changeDataLoading: (isLoading: boolean) => void;
@ -99,9 +100,8 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
    }, [] as Array<SchedulerEvent>);
  };

-
-  const selectBasketCourseGroups = (courseId: number) => {
-    const course = basket.find(({ id }) => id === courseId);
+  const selectBasketCourseGroups = (courseName: string) => {
+    const course = basket.find(({ name }) => name === courseName);
    if (course !== undefined) {
      return { lecture: course.lecture, classes: course.classes };
    } else {
@ -109,6 +109,11 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
    }
  };

+  const selectGroups = () => {
+    const groups = [];
+    return (courses as unknown) as Array<Group>;
+  };
+
  const changeHoveredGroup = (group: Group | null) => setHoveredGroup(group);

  const changeDataLoading = (isLoading: boolean) => setIsDataLoading(isLoading);
@ -150,13 +155,13 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
        `${process.env.REACT_APP_API_URL}/api/v1/commisions/user/${userID}`,
        JSON.stringify(basketIds),
      );
-      enqueueSnackbar('Ustawienia zostały zapisane', {
+      enqueueSnackbar('Plan został zapisany', {
        variant: 'success',
        action,
      });
    } catch (e) {
      console.log('error: ', e);
-      enqueueSnackbar('Ustawienia nie zostały zapisane', {
+      enqueueSnackbar('Zapisywanie planu nie powiodło się', {
        variant: 'error',
        action,
      });
@ -166,14 +171,17 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {

  const changeGroupInBasket = (choosenGroup: any, courseId: number) => {
    const basketCourse = basket.filter((course) => course.id === courseId)[0];
-    if (choosenGroup.lecture && choosenGroup.classes)
-    {
-      const prev = choosenGroup.prev==="lecture"?choosenGroup.lecture : choosenGroup.classes
+    if (choosenGroup.lecture && choosenGroup.classes) {
+      const prev = choosenGroup.prev === 'lecture' ? choosenGroup.lecture : choosenGroup.classes;
      setBasket(
-        basket.map((basket) => (basket.id === basketCourse.id ? { ...basket, lecture: choosenGroup.lecture, classes:choosenGroup.classes } : basket)),
+        basket.map((basket) =>
+          basket.id === basketCourse.id
+            ? { ...basket, lecture: choosenGroup.lecture, classes: choosenGroup.classes }
+            : basket,
+        ),
      );
      changeHoveredGroup(prev);
-    }    
+    }
  };

  const restoreGroupInBasket = (restoreGroup: Group, courseId: number) => {
@ -296,6 +304,7 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
        selectBasketNames,
        selectBasketCourses,
        selectBasketCourseGroups,
+        selectGroups,
        getNewestStudentTimetable,
        changeStudent,
        getStudentTimetablesHistory,
--- a/yarn.lock
+++ b/yarn.lock
@ -4130,6 +4130,11 @@ data-urls@^1.0.0, data-urls@^1.1.0:
    whatwg-mimetype "^2.2.0"
    whatwg-url "^7.0.0"

+date-fns@^2.16.1:
+  version "2.16.1"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.16.1.tgz#05775792c3f3331da812af253e1a935851d3834b"
+  integrity sha512-sAJVKx/FqrLYHAQeN7VpJrPhagZc9R4ImZIWYRFZaaohR3KzmuK88touwsSwSVT8Qcbd4zoDsnGfX4GFB4imyQ==
+
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
  version "2.6.9"
  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
				`@ -0,0 +1 @@`
				<svg id="bold" 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="m23.25 15c-.414 0-.75-.336-.75-.75 0-2.895-2.355-5.25-5.25-5.25h-7.25v3.25c0 .66-.794.994-1.268.542l-5.5-5.25c-.148-.141-.232-.337-.232-.542s.084-.401.232-.542l5.5-5.25c.476-.454 1.268-.116 1.268.542v3.25h6.25c4.273 0 7.75 3.477 7.75 7.75v1.5c0 .414-.336.75-.75.75z"/><path d="m14 22.25v-3.25h-6.25c-4.273 0-7.75-3.477-7.75-7.75v-1.5c0-.414.336-.75.75-.75s.75.336.75.75c0 2.895 2.355 5.25 5.25 5.25h7.25v-3.25c0-.657.791-.998 1.268-.542l5.5 5.25c.148.141.232.337.232.542s-.084.401-.232.542l-5.5 5.25c-.477.454-1.268.116-1.268-.542z"/></svg>