Resolving Comments and Observations

12 files changed, 275 insertions, 104 deletions

diff --git a/modern/public/logo.svg b/modern/public/logo.svg
index 008b46d..c2ed83b 100644
--- a/modern/public/logo.svg
+++ b/modern/public/logo.svg
@@ -1,33 +1,145 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
-<svg id="svg2985" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="64" viewBox="0 0 240 64" width="240" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
- <metadata id="metadata2990">
-  <rdf:RDF>
-   <cc:Work rdf:about="">
-    <dc:format>image/svg+xml</dc:format>
-    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
-    <dc:title/>
-   </cc:Work>
-  </rdf:RDF>
- </metadata>
- <g id="layer1">
-  <rect id="rect3778" height="64" width="236.1" y="0" x="0" fill="none"/>
-  <ellipse id="path3038" rx="28.995" ry="28.995" transform="rotate(-30)" cy="43.713" cx="11.713" stroke-width="10.699" fill="#fff"/>
-  <g fill="#336">
-   <circle id="path2993" stroke-width="1.3262" transform="rotate(-30)" cy="43.713" cx="9.4364" r="2.2765"/>
-   <path id="path3004" d="m37.012 24.177-2.8428 3.6128c0.66345 0.52205 1.3255 1.1576 1.7734 1.9333 0.4479 0.77578 0.66726 1.6669 0.78764 2.5025l4.5502-0.65558c-0.193-1.42-0.633-2.804-1.394-4.123s-1.74-2.391-2.874-3.27z" stroke-width="1.0095"/>
-   <path id="path3014" d="m42.504 16.9-2.8428 3.6128c1.607 1.2355 3.0914 2.7935 4.1679 4.6581s1.6835 3.9291 1.95 5.9386l4.5502-0.65558c-0.33967-2.5954-1.1669-5.1513-2.5573-7.5594-1.3903-2.4081-3.1901-4.4025-5.268-5.9944z" stroke-width="1.0095"/>
-   <path id="path3036" d="m2.607 52.819a9.1058 9.1058 0 0 1 -7.8859 -4.5529 9.1058 9.1058 0 0 1 0 -9.1058 9.1058 9.1058 0 0 1 7.8859 -4.5529l-2e-7 9.1058z" transform="rotate(-30)" stroke-width="3.6204"/>
-   <path id="path3038-8" d="m17.502 6.8895c-13.868 8.0065-18.619 25.74-10.612 39.608 8.006 13.868 25.739 18.619 39.608 10.613 13.868-8.007 18.619-25.74 10.613-39.609-8.007-13.868-25.74-18.619-39.609-10.612zm1.706 2.9541c12.237-7.0648 27.884-2.8722 34.948 9.3644 7.065 12.237 2.873 27.884-9.364 34.948-12.237 7.065-27.884 2.873-34.948-9.364-7.0652-12.237-2.8726-27.884 9.364-34.948z" stroke-width="1.0095"/>
-   <g id="text3003" aria-label="Traccar">
-    <path id="path4172" d="m89.719 48.671h-3.915v-30.192h-10.663v-3.4775h25.241v3.4775h-10.663v30.192z"/>
-    <path id="path4174" d="m116.36 22.969q1.6812 0 3.0169 0.27636l-0.52968 3.5466q-1.566-0.34544-2.7636-0.34544-3.063 0-5.2508 2.4872-2.1648 2.4872-2.1648 6.195v13.541h-3.8229v-25.241h3.1551l0.43756 4.675h0.18424q1.4048-2.4642 3.3854-3.7999t4.3526-1.3357z"/>
-    <path id="path4176" d="m139.62 48.671-0.75998-3.5926h-0.18424q-1.8884 2.3721-3.7769 3.2242-1.8654 0.82907-4.675 0.82907-3.7538 0-5.8956-1.9345-2.1187-1.9345-2.1187-5.5041 0-7.6459 12.229-8.0143l4.2835-0.13818v-1.566q0-2.9708-1.2897-4.3756-1.2666-1.4278-4.0763-1.4278-3.1551 0-7.1392 1.9345l-1.1745-2.9248q1.8654-1.0133 4.0762-1.589 2.2339-0.57574 4.4678-0.57574 4.5138 0 6.6786 2.0036 2.1878 2.0036 2.1878 6.4253v17.226h-2.8326zm-8.6361-2.6945q3.5696 0 5.5962-1.9575 2.0496-1.9575 2.0496-5.4811v-2.2799l-3.8229 0.16121q-4.5599 0.16121-6.5865 1.4278-2.0036 1.2436-2.0036 3.892 0 2.0727 1.2436 3.1551 1.2666 1.0824 3.5236 1.0824z"/>
-    <path id="path4178" d="m160.44 49.131q-5.4811 0-8.498-3.3623-2.9939-3.3854-2.9939-9.5573 0-6.3332 3.0399-9.7876 3.063-3.4545 8.7052-3.4545 1.8194 0 3.6387 0.3915t2.8557 0.92119l-1.1745 3.2472q-1.2666-0.50665-2.7636-0.82907-1.4969-0.34544-2.6484-0.34544-7.6919 0-7.6919 9.8106 0 4.652 1.8654 7.1392 1.8884 2.4872 5.5732 2.4872 3.1551 0 6.4713-1.3588v3.3854q-2.5333 1.3127-6.3792 1.3127z"/>
-    <path id="path4180" d="m182.92 49.131q-5.4811 0-8.498-3.3623-2.9939-3.3854-2.9939-9.5573 0-6.3332 3.0399-9.7876 3.063-3.4545 8.7052-3.4545 1.8193 0 3.6387 0.3915t2.8557 0.92119l-1.1745 3.2472q-1.2666-0.50665-2.7636-0.82907-1.4969-0.34544-2.6484-0.34544-7.6919 0-7.6919 9.8106 0 4.652 1.8654 7.1392 1.8884 2.4872 5.5732 2.4872 3.1551 0 6.4714-1.3588v3.3854q-2.5333 1.3127-6.3792 1.3127z"/>
-    <path id="path4182" d="m210.83 48.671-0.75998-3.5926h-0.18424q-1.8884 2.3721-3.7769 3.2242-1.8654 0.82907-4.675 0.82907-3.7538 0-5.8956-1.9345-2.1187-1.9345-2.1187-5.5041 0-7.6459 12.229-8.0143l4.2835-0.13818v-1.566q0-2.9708-1.2897-4.3756-1.2666-1.4278-4.0762-1.4278-3.1551 0-7.1392 1.9345l-1.1745-2.9248q1.8654-1.0133 4.0762-1.589 2.2339-0.57574 4.4678-0.57574 4.5138 0 6.6786 2.0036 2.1878 2.0036 2.1878 6.4253v17.226h-2.8326zm-8.6361-2.6945q3.5696 0 5.5962-1.9575 2.0496-1.9575 2.0496-5.4811v-2.2799l-3.8229 0.16121q-4.5599 0.16121-6.5865 1.4278-2.0036 1.2436-2.0036 3.892 0 2.0727 1.2436 3.1551 1.2666 1.0824 3.5235 1.0824z"/>
-    <path id="path4184" d="m233.08 22.969q1.6812 0 3.0169 0.27636l-0.52968 3.5466q-1.566-0.34544-2.7636-0.34544-3.0629 0-5.2508 2.4872-2.1648 2.4872-2.1648 6.195v13.541h-3.8229v-25.241h3.1551l0.43757 4.675h0.18423q1.4048-2.4642 3.3854-3.7999t4.3526-1.3357z"/>
-   </g>
+
+<svg
+   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="240"
+   height="64"
+   viewBox="0 0 63.499999 16.933334"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+   sodipodi:docname="logo.svg">
+  <defs
+     id="defs2">
+    <linearGradient
+       id="linearGradient2390"
+       osb:paint="solid">
+      <stop
+         style="stop-color:#333366;stop-opacity:1;"
+         offset="0"
+         id="stop2388" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient2384"
+       osb:paint="solid">
+      <stop
+         style="stop-color:#333366;stop-opacity:1;"
+         offset="0"
+         id="stop2382" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient918">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop914" />
+      <stop
+         style="stop-color:#000000;stop-opacity:0;"
+         offset="1"
+         id="stop916" />
+    </linearGradient>
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient918"
+       id="radialGradient922"
+       cx="43.49408"
+       cy="270.17709"
+       fx="43.49408"
+       fy="270.17709"
+       r="21.214052"
+       gradientTransform="matrix(0.99999999,0,0,0.19295707,-1.1295587,218.0445)"
+       gradientUnits="userSpaceOnUse" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="3"
+     inkscape:cx="116.94054"
+     inkscape:cy="22.536867"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:window-width="1366"
+     inkscape:window-height="705"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-280.06665)">
+    <g
+       style="fill:none;stroke:#333366;stroke-width:0.97500001;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="g836"
+       transform="matrix(0.70555556,0,0,0.70555556,0,280.06665)">
+      <circle
+         id="circle825"
+         r="10"
+         cy="12"
+         cx="12"
+         style="stroke-width:0.97500001;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke:#333366;stroke-opacity:1" />
+    </g>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:11.23277092px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#333366;fill-opacity:1;stroke:url(#radialGradient922);stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0"
+       x="20.57909"
+       y="274.1069"
+       id="text910"
+       transform="scale(0.93694412,1.0672995)"><tspan
+         sodipodi:role="line"
+         id="tspan908"
+         x="20.57909"
+         y="274.1069"
+         style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;line-height:1.25;font-family:'Segoe UI';-inkscape-font-specification:'Segoe UI Semi-Bold';fill:#333366;fill-opacity:1;stroke:url(#radialGradient922);stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1">GPSLABS</tspan></text>
+    <g
+       style="fill:none;stroke:#333366;stroke-width:1;stroke-linecap:round;stroke-linejoin:round"
+       id="g2425"
+       transform="matrix(0.36473567,0,0,0.40335671,3.8780119,283.52041)">
+      <polygon
+         id="polygon2408"
+         points="16,6 8,2 1,6 1,22 8,18 16,22 23,18 23,2 " />
+      <line
+         id="line2410"
+         y2="18"
+         x2="8"
+         y1="2"
+         x1="8" />
+      <line
+         id="line2412"
+         y2="22"
+         x2="16"
+         y1="6"
+         x1="16" />
+    </g>
   </g>
- </g>
 </svg>
diff --git a/modern/public/logo_back.svg b/modern/public/logo_back.svg
new file mode 100644
index 0000000..008b46d
--- /dev/null
+++ b/modern/public/logo_back.svg
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg id="svg2985" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="64" viewBox="0 0 240 64" width="240" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
+ <metadata id="metadata2990">
+  <rdf:RDF>
+   <cc:Work rdf:about="">
+    <dc:format>image/svg+xml</dc:format>
+    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+    <dc:title/>
+   </cc:Work>
+  </rdf:RDF>
+ </metadata>
+ <g id="layer1">
+  <rect id="rect3778" height="64" width="236.1" y="0" x="0" fill="none"/>
+  <ellipse id="path3038" rx="28.995" ry="28.995" transform="rotate(-30)" cy="43.713" cx="11.713" stroke-width="10.699" fill="#fff"/>
+  <g fill="#336">
+   <circle id="path2993" stroke-width="1.3262" transform="rotate(-30)" cy="43.713" cx="9.4364" r="2.2765"/>
+   <path id="path3004" d="m37.012 24.177-2.8428 3.6128c0.66345 0.52205 1.3255 1.1576 1.7734 1.9333 0.4479 0.77578 0.66726 1.6669 0.78764 2.5025l4.5502-0.65558c-0.193-1.42-0.633-2.804-1.394-4.123s-1.74-2.391-2.874-3.27z" stroke-width="1.0095"/>
+   <path id="path3014" d="m42.504 16.9-2.8428 3.6128c1.607 1.2355 3.0914 2.7935 4.1679 4.6581s1.6835 3.9291 1.95 5.9386l4.5502-0.65558c-0.33967-2.5954-1.1669-5.1513-2.5573-7.5594-1.3903-2.4081-3.1901-4.4025-5.268-5.9944z" stroke-width="1.0095"/>
+   <path id="path3036" d="m2.607 52.819a9.1058 9.1058 0 0 1 -7.8859 -4.5529 9.1058 9.1058 0 0 1 0 -9.1058 9.1058 9.1058 0 0 1 7.8859 -4.5529l-2e-7 9.1058z" transform="rotate(-30)" stroke-width="3.6204"/>
+   <path id="path3038-8" d="m17.502 6.8895c-13.868 8.0065-18.619 25.74-10.612 39.608 8.006 13.868 25.739 18.619 39.608 10.613 13.868-8.007 18.619-25.74 10.613-39.609-8.007-13.868-25.74-18.619-39.609-10.612zm1.706 2.9541c12.237-7.0648 27.884-2.8722 34.948 9.3644 7.065 12.237 2.873 27.884-9.364 34.948-12.237 7.065-27.884 2.873-34.948-9.364-7.0652-12.237-2.8726-27.884 9.364-34.948z" stroke-width="1.0095"/>
+   <g id="text3003" aria-label="Traccar">
+    <path id="path4172" d="m89.719 48.671h-3.915v-30.192h-10.663v-3.4775h25.241v3.4775h-10.663v30.192z"/>
+    <path id="path4174" d="m116.36 22.969q1.6812 0 3.0169 0.27636l-0.52968 3.5466q-1.566-0.34544-2.7636-0.34544-3.063 0-5.2508 2.4872-2.1648 2.4872-2.1648 6.195v13.541h-3.8229v-25.241h3.1551l0.43756 4.675h0.18424q1.4048-2.4642 3.3854-3.7999t4.3526-1.3357z"/>
+    <path id="path4176" d="m139.62 48.671-0.75998-3.5926h-0.18424q-1.8884 2.3721-3.7769 3.2242-1.8654 0.82907-4.675 0.82907-3.7538 0-5.8956-1.9345-2.1187-1.9345-2.1187-5.5041 0-7.6459 12.229-8.0143l4.2835-0.13818v-1.566q0-2.9708-1.2897-4.3756-1.2666-1.4278-4.0763-1.4278-3.1551 0-7.1392 1.9345l-1.1745-2.9248q1.8654-1.0133 4.0762-1.589 2.2339-0.57574 4.4678-0.57574 4.5138 0 6.6786 2.0036 2.1878 2.0036 2.1878 6.4253v17.226h-2.8326zm-8.6361-2.6945q3.5696 0 5.5962-1.9575 2.0496-1.9575 2.0496-5.4811v-2.2799l-3.8229 0.16121q-4.5599 0.16121-6.5865 1.4278-2.0036 1.2436-2.0036 3.892 0 2.0727 1.2436 3.1551 1.2666 1.0824 3.5236 1.0824z"/>
+    <path id="path4178" d="m160.44 49.131q-5.4811 0-8.498-3.3623-2.9939-3.3854-2.9939-9.5573 0-6.3332 3.0399-9.7876 3.063-3.4545 8.7052-3.4545 1.8194 0 3.6387 0.3915t2.8557 0.92119l-1.1745 3.2472q-1.2666-0.50665-2.7636-0.82907-1.4969-0.34544-2.6484-0.34544-7.6919 0-7.6919 9.8106 0 4.652 1.8654 7.1392 1.8884 2.4872 5.5732 2.4872 3.1551 0 6.4713-1.3588v3.3854q-2.5333 1.3127-6.3792 1.3127z"/>
+    <path id="path4180" d="m182.92 49.131q-5.4811 0-8.498-3.3623-2.9939-3.3854-2.9939-9.5573 0-6.3332 3.0399-9.7876 3.063-3.4545 8.7052-3.4545 1.8193 0 3.6387 0.3915t2.8557 0.92119l-1.1745 3.2472q-1.2666-0.50665-2.7636-0.82907-1.4969-0.34544-2.6484-0.34544-7.6919 0-7.6919 9.8106 0 4.652 1.8654 7.1392 1.8884 2.4872 5.5732 2.4872 3.1551 0 6.4714-1.3588v3.3854q-2.5333 1.3127-6.3792 1.3127z"/>
+    <path id="path4182" d="m210.83 48.671-0.75998-3.5926h-0.18424q-1.8884 2.3721-3.7769 3.2242-1.8654 0.82907-4.675 0.82907-3.7538 0-5.8956-1.9345-2.1187-1.9345-2.1187-5.5041 0-7.6459 12.229-8.0143l4.2835-0.13818v-1.566q0-2.9708-1.2897-4.3756-1.2666-1.4278-4.0762-1.4278-3.1551 0-7.1392 1.9345l-1.1745-2.9248q1.8654-1.0133 4.0762-1.589 2.2339-0.57574 4.4678-0.57574 4.5138 0 6.6786 2.0036 2.1878 2.0036 2.1878 6.4253v17.226h-2.8326zm-8.6361-2.6945q3.5696 0 5.5962-1.9575 2.0496-1.9575 2.0496-5.4811v-2.2799l-3.8229 0.16121q-4.5599 0.16121-6.5865 1.4278-2.0036 1.2436-2.0036 3.892 0 2.0727 1.2436 3.1551 1.2666 1.0824 3.5235 1.0824z"/>
+    <path id="path4184" d="m233.08 22.969q1.6812 0 3.0169 0.27636l-0.52968 3.5466q-1.566-0.34544-2.7636-0.34544-3.0629 0-5.2508 2.4872-2.1648 2.4872-2.1648 6.195v13.541h-3.8229v-25.241h3.1551l0.43757 4.675h0.18423q1.4048-2.4642 3.3854-3.7999t4.3526-1.3357z"/>
+   </g>
+  </g>
+ </g>
+</svg>
diff --git a/modern/src/LoginPage.js b/modern/src/LoginPage.js
index 3d4b17f..c16fd19 100644
--- a/modern/src/LoginPage.js
+++ b/modern/src/LoginPage.js
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { useMediaQuery, makeStyles, Paper } from '@material-ui/core';
 import { useTheme } from '@material-ui/core/styles';
 
-import LoginForm from './components/LoginForm';
+import LoginForm from './components/registration/LoginForm';
 
 const useStyles = makeStyles(theme => ({
   root: {
diff --git a/modern/src/SocketController.js b/modern/src/SocketController.js
index cda693a..9ce4ab2 100644
--- a/modern/src/SocketController.js
+++ b/modern/src/SocketController.js
@@ -27,15 +27,18 @@ const SocketController = () => {
   const authenticated = useSelector(state => !!state.session.user);
 
   const connectSocket = () => {
+    console.log('connect socket method invoked');
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
     const socket = new WebSocket(protocol + '//' + window.location.host + '/api/socket');
 
     socket.onclose = () => {
-      setTimeout(() => connectSocket(), 60 * 1000);
+      console.log('socket closed');
+      setTimeout(() => {console.log('socket reconnection try');connectSocket()}, 60 * 1000);
     };
 
     socket.onmessage = (event) => {
       const data = JSON.parse(event.data);
+      console.log('socket message received ', data);
       if (data.devices) {
         dispatch(devicesActions.update(data.devices));
       }
diff --git a/modern/src/components/LoginForm.js b/modern/src/components/registration/LoginForm.js
index d52a51d..6469b31 100644
--- a/modern/src/components/LoginForm.js
+++ b/modern/src/components/registration/LoginForm.js
@@ -3,8 +3,8 @@ import { Grid, useMediaQuery, makeStyles, InputLabel, Select, MenuItem, FormCont
 import { useTheme } from '@material-ui/core/styles';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
-import { sessionActions } from './../store';
-import t from './../common/localization';
+import { sessionActions } from '../../store';
+import t from '../../common/localization';
 import RegisterForm from './RegisterForm';
 import ResetPasswordForm from './ResetPasswordForm';
 
diff --git a/modern/src/components/RegisterForm.js b/modern/src/components/registration/RegisterForm.js
index 6d013f7..c2af04b 100644
--- a/modern/src/components/RegisterForm.js
+++ b/modern/src/components/registration/RegisterForm.js
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { Grid, Button, TextField, Typography, Link, makeStyles, Snackbar } from '@material-ui/core';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 import LoginForm from './LoginForm';
-import t from './../common/localization';
+import t from './../../common/localization';
 
 const useStyles = makeStyles(theme => ({
   register: {
diff --git a/modern/src/components/ResetPasswordForm.js b/modern/src/components/registration/ResetPasswordForm.js
index c268f80..c268f80 100644
--- a/modern/src/components/ResetPasswordForm.js
+++ b/modern/src/components/registration/ResetPasswordForm.js
diff --git a/modern/src/components/reports/ReportNavbar.js b/modern/src/components/reports/ReportNavbar.js
new file mode 100644
index 0000000..93c01a0
--- /dev/null
+++ b/modern/src/components/reports/ReportNavbar.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { AppBar, Toolbar, Typography, List, ListItem, ListItemText, ListItemIcon, Divider, Drawer, makeStyles, IconButton, Hidden } from '@material-ui/core';
+
+import MenuIcon from '@material-ui/icons/Menu';
+import t from '../../common/localization';
+
+const useStyles = makeStyles(theme => ({
+  menuButton: {
+  }
+}));
+const ReportNavbar = ({ openDrawer, setOpenDrawer, reportName }) => {
+  
+  const classes = useStyles();
+
+  return (
+    <AppBar position="fixed" color="inherit">
+      <Toolbar>
+        <IconButton
+          color="inherit"
+          aria-label="open drawer"
+          edge="start"
+          onClick={() => setOpenDrawer(!openDrawer)}
+          className={classes.menuButton}>
+          <MenuIcon />
+        </IconButton>
+        <Typography variant="h6" noWrap>
+          {t('reportTitle')} / {reportName}
+        </Typography>        
+      </Toolbar>
+    </AppBar> 
+  )
+}
+
+export default ReportNavbar;
diff --git a/modern/src/components/reports/ReportSidebar.js b/modern/src/components/reports/ReportSidebar.js
new file mode 100644
index 0000000..e42c36e
--- /dev/null
+++ b/modern/src/components/reports/ReportSidebar.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import { AppBar, Toolbar, Typography, List, ListItem, ListItemText, ListItemIcon, Divider, Drawer, makeStyles, IconButton, Hidden } from '@material-ui/core';
+import { Link, useHistory, useLocation } from 'react-router-dom';
+
+const ReportNavbar = ({ routes, setReportName }) => {
+
+  const location = useLocation();
+
+  return (
+    <List disablePadding>
+      {routes.map((route, index) => (
+        <ListItem
+          disableRipple
+          component={Link}
+          key={`${route}${index}`}
+          button
+          to={route.href}
+          selected={route.href === location.pathname}
+          onClick={() =>  setReportName(route.name)}>
+          <ListItemIcon>
+            {route.icon}
+          </ListItemIcon>
+          <ListItemText primary={route.name} />
+        </ListItem>
+      ))}
+    </List>
+  )
+}
+
+export default ReportNavbar;
diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js
index 1d67691..0e5ab69 100644
--- a/modern/src/reports/ReportFilter.js
+++ b/modern/src/reports/ReportFilter.js
@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
-import { FormControl, InputLabel, Select, MenuItem, Button, TextField, Grid } from '@material-ui/core';
-import t from '../common/localization';
+import { FormControl, InputLabel, Select, MenuItem, Button, TextField, Grid, Typography } from '@material-ui/core';
 import { useSelector } from 'react-redux';
 import moment from 'moment';
+import t from '../common/localization';
 
 const ReportFilter = ({ children, handleSubmit, showOnly }) => {
 
@@ -101,7 +101,7 @@ const ReportFilter = ({ children, handleSubmit, showOnly }) => {
           fullWidth />
       </Grid>}
       {children}
-      <Grid item xs={4} sm={!showOnly ? 2 : 4}>
+      <Grid item xs={!showOnly ? 4 : 12} sm={!showOnly ? 2 : 6}>
         <Button 
           onClick={() => handleClick(false, true)}
           variant='outlined'
@@ -127,7 +127,7 @@ const ReportFilter = ({ children, handleSubmit, showOnly }) => {
             variant='outlined'
             color='secondary'
             fullWidth>
-            {t('reportEmail')}
+            <Typography variant="button" noWrap>{t('reportEmail')}</Typography>
           </Button>}
       </Grid>
     </Grid>
diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayoutPage.js
index 4ffc881..fbb8a30 100644
--- a/modern/src/reports/ReportLayoutPage.js
+++ b/modern/src/reports/ReportLayoutPage.js
@@ -10,6 +10,9 @@ import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted';
 import TrendingUpIcon from '@material-ui/icons/TrendingUp';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 
+import ReportSidebar from '../components/reports/ReportSidebar'
+import ReportNavbar from '../components/reports/ReportNavbar'
+
 import { Link, useHistory, useLocation } from 'react-router-dom';
 
 import t from '../common/localization';
@@ -20,10 +23,10 @@ const useStyles = makeStyles(theme => ({
     height: '100%',
   },
   drawerContainer: {
-    width: theme.dimensions.drawerWidth,
+    width: theme.dimensions.desktopDrawerWidth,
   },
   drawer: {
-    width: theme.dimensions.drawerWidth,
+    width: theme.dimensions.desktopDrawerWidth,
     [theme.breakpoints.down("md")]: {
       width: theme.dimensions.tabletDrawerWidth,
     }
@@ -62,89 +65,45 @@ const routes = [
 const ReportLayoutPage = ({ children, filter }) => {
   const classes = useStyles();
   const history = useHistory();
-  const theme = useTheme();
   const [openDrawer, setOpenDrawer] = useState(false);
-  const location = useLocation();
-
-  const navigationList = (
-    <List disablePadding>
-      {routes.map((route, index) => (
-        <ListItem
-          disableRipple
-          component={Link}
-          key={`${route}${index}`}
-          button
-          to={route.href}
-          selected={route.href === location.pathname}>
-          <ListItemIcon>
-            {route.icon}
-          </ListItemIcon>
-          <ListItemText primary={route.name} />
-        </ListItem>
-      ))}
-    </List>
-  );
-
-  const drawerHeader = (
-    <> 
-      <div className={classes.drawerHeader}>
-        <IconButton 
-          className={classes.backArrowIconContainer} 
-          disableRipple>
-          <ArrowBackIcon />
-        </IconButton>
-        <Typography variant="h6" color="inherit" noWrap>
-          {t('reportTitle')}
-        </Typography> 
-      </div>
-      <Divider />
-    </>
-  );
-
-  const appBar = (
-    <AppBar position="fixed" color="inherit">
-      <Toolbar>
-        <IconButton
-          color="inherit"
-          aria-label="open drawer"
-          edge="start"
-          onClick={() => setOpenDrawer(!openDrawer)}
-          className={classes.menuButton}>
-          <MenuIcon />
-        </IconButton>
-        <Typography variant="h6" noWrap>
-          {t('reportTitle')}
-        </Typography>        
-      </Toolbar>
-    </AppBar>   
-  );
 
   return (
     <div className={classes.root}>
-      <Hidden mdUp>
-        {appBar}
+      <Hidden only={['lg', 'xl']}>
+        <ReportNavbar openDrawer={openDrawer} setOpenDrawer={setOpenDrawer} />
         <Drawer
           variant="temporary"
           open={openDrawer}
           onClose={() => setOpenDrawer(!openDrawer)}
           classes={{paper: classes.drawer}}>
-          {drawerHeader}
-          {navigationList}
+          <ReportSidebar routes={routes} />
         </Drawer>
       </Hidden>
-      <Hidden mdDown>
+      <Hidden only={['xs', 'sm', 'md']}>
         <div className={classes.drawerContainer}>
           <Drawer
             variant="permanent"
             classes={{paper: classes.drawer}}>
-            {drawerHeader}
-            {navigationList}
+            <div className={classes.drawerHeader}>
+              <IconButton
+                onClick={() => history.push('/')}
+                className={classes.backArrowIconContainer} 
+                disableRipple>
+                <ArrowBackIcon />
+              </IconButton>
+              <Typography variant="h6" color="inherit" noWrap>
+                {t('reportTitle')}
+              </Typography> 
+            </div>
+            <Divider />
+            <ReportSidebar routes={routes} />
           </Drawer>
         </div>
       </Hidden>
       <div className={classes.content}>
         <div className={classes.toolbar} />
         {filter}
+        {children}
       </div>      
     </div>
   );
diff --git a/modern/src/theme/dimensions.js b/modern/src/theme/dimensions.js
index 59959d7..16e6aad 100644
--- a/modern/src/theme/dimensions.js
+++ b/modern/src/theme/dimensions.js
@@ -3,6 +3,6 @@ export default {
   borderRadius: '4px',
   sidebarWidth: '28%',
   tabletSidebarWidth: '52px',
-  drawerWidth: 360,
-  tabletDrawerWidth: 320,
+  desktopDrawerWidth: '360px',
+  tabletDrawerWidth: '320px',
 };