From 5d81e6dfe6f7e6fd9579f2527f83b27c5494b887 Mon Sep 17 00:00:00 2001
From: Ashutosh Bishnoi <mail2bishnoi@gmail.com>
Date: Fri, 14 May 2021 18:02:48 +0530
Subject: Initial Report Sidebar Draft

---
 modern/src/reports/ReportLayoutPage.js | 107 +++++++++++++++++++++++++++------
 1 file changed, 88 insertions(+), 19 deletions(-)

diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayoutPage.js
index e5eda05..c5e13fd 100644
--- a/modern/src/reports/ReportLayoutPage.js
+++ b/modern/src/reports/ReportLayoutPage.js
@@ -1,18 +1,41 @@
-import React from 'react';
-import { Grid, Paper, makeStyles } from '@material-ui/core';
-import MainToolbar from '../MainToolbar';
+import React, { useState } from 'react';
+import { AppBar, Toolbar, Typography, List, ListItem, ListItemText, ListItemIcon, Divider, Grid, Paper, Drawer, makeStyles, useMediaQuery, IconButton } from '@material-ui/core';
+import { useTheme } from "@material-ui/core/styles";
+import MenuIcon from '@material-ui/icons/Menu';
+import TimelineIcon from '@material-ui/icons/Timeline';
+import PauseCircleFilledIcon from '@material-ui/icons/PauseCircleFilled';
+import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled';
+import NotificationsActiveIcon from '@material-ui/icons/NotificationsActive';
+import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted';
+import TrendingUpIcon from '@material-ui/icons/TrendingUp';
+import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
+
+import { Link } from "react-router-dom";
+
+import t from '../common/localization';
 
 const useStyles = makeStyles(theme => ({
   root: {
     height: '100%',
     display: 'flex',
-    flexDirection: 'column',
   },
   content: {
     flex: 1,
     overflow: 'auto',
     padding: theme.spacing(2),
   },
+  drawer: {
+    width: 360,
+    [theme.breakpoints.down("md")]: {
+      width: 320,
+    }
+  },
+  drawerHeader: {
+    ...theme.mixins.toolbar,
+    display: 'flex',
+    alignItems: 'center',
+    padding: theme.spacing(0, 1),
+  },
   form: {
     padding: theme.spacing(1, 2, 2),
   },
@@ -20,23 +43,69 @@ const useStyles = makeStyles(theme => ({
 
 const ReportLayoutPage = ({ children, filter }) => {
   const classes = useStyles();
+  const theme = useTheme();
+  const matchesMD = useMediaQuery(theme.breakpoints.down("md"));
+  const [openDrawer, setOpenDrawer] = useState(false);
+
+  const routes = [
+    { name: t('reportRoute'), link: '/reports/route', icon: <TimelineIcon />, activeIndex: 0 },
+    { name: t('reportEvents'), link: '/reports/event', icon: <NotificationsActiveIcon />, activeIndex: 1 },
+    { name: t('reportTrips'), link: '/reports/trip', icon: <PlayCircleFilledIcon />, activeIndex: 2 },
+    { name: t('reportStops'), link: '/reports/stop', icon: <PauseCircleFilledIcon />, activeIndex: 3 },
+    { name: t('reportSummary'), link: '/reports/summary', icon: <FormatListBulletedIcon />, activeIndex: 4 },
+    { name: t('reportChart'), link: '/reports/chart', icon: <TrendingUpIcon />, activeIndex: 5 },
+  ];
+
   return (
     <div className={classes.root}>
-      <MainToolbar />
-      <div className={classes.content}>
-        <Grid container spacing={2}>
-          <Grid item xs={12} md={3} lg={2}>
-            <Paper className={classes.form}>
-              {filter}
-            </Paper>
-          </Grid>
-          <Grid item xs={12} md={9} lg={10}>
-            <Paper>
-              {children}
-            </Paper>
-          </Grid>
-        </Grid>
-      </div>
+      {matchesMD && <AppBar position="fixed">
+          <Toolbar>
+            <IconButton
+              color="inherit"
+              aria-label="open drawer"
+              edge="start"
+              onClick={() => setOpenDrawer(!openDrawer)}
+              className={classes.menuButton}
+            >
+              <MenuIcon />
+            </IconButton>
+            <Typography variant="h6" noWrap>
+              Reports
+            </Typography>          
+          </Toolbar>
+        </AppBar>
+      }
+      <Drawer
+        variant={matchesMD ? "temporary": "permanent"}
+        open={openDrawer}
+        onClose={() => setOpenDrawer(!openDrawer)}
+        classes={{ paper: classes.drawer }}
+      >
+        <div className={classes.drawerHeader}>
+          <IconButton>
+            <ChevronLeftIcon />
+          </IconButton>
+        </div>
+        <Divider />
+        <List disablePadding>
+          {routes.map(route => (
+            <ListItem
+              key={`${route}${route.activeIndex}`}
+              button
+              component={Link}
+              to={route.link}
+              onClick={() => setOpenDrawer(false)}
+            >
+              <ListItemIcon>
+                {route.icon}
+              </ListItemIcon>
+              <ListItemText className={classes.drawerItem} disableTypography>
+                {route.name}
+              </ListItemText>
+            </ListItem>
+          ))}
+        </List>
+      </Drawer>
     </div>
   );
 }
-- 
cgit v1.2.3


From 15db54a9e1ade16758eb0f716e7eb72c9847109a Mon Sep 17 00:00:00 2001
From: Ashutosh Bishnoi <mail2bishnoi@gmail.com>
Date: Sat, 15 May 2021 15:51:09 +0530
Subject: Adding ReportHeader

---
 modern/src/reports/ReportHeader.js     |  0
 modern/src/reports/ReportLayoutPage.js | 38 +++++++++++++++++++++-------------
 2 files changed, 24 insertions(+), 14 deletions(-)
 create mode 100644 modern/src/reports/ReportHeader.js

diff --git a/modern/src/reports/ReportHeader.js b/modern/src/reports/ReportHeader.js
new file mode 100644
index 0000000..e69de29
diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayoutPage.js
index c5e13fd..cdce2b3 100644
--- a/modern/src/reports/ReportLayoutPage.js
+++ b/modern/src/reports/ReportLayoutPage.js
@@ -8,9 +8,9 @@ import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled';
 import NotificationsActiveIcon from '@material-ui/icons/NotificationsActive';
 import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted';
 import TrendingUpIcon from '@material-ui/icons/TrendingUp';
-import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
+import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 
-import { Link } from "react-router-dom";
+import { useHistory } from 'react-router-dom';
 
 import t from '../common/localization';
 
@@ -43,9 +43,11 @@ const useStyles = makeStyles(theme => ({
 
 const ReportLayoutPage = ({ children, filter }) => {
   const classes = useStyles();
+  const history = useHistory();
   const theme = useTheme();
   const matchesMD = useMediaQuery(theme.breakpoints.down("md"));
   const [openDrawer, setOpenDrawer] = useState(false);
+  const [value, setValue] = useState(0);
 
   const routes = [
     { name: t('reportRoute'), link: '/reports/route', icon: <TimelineIcon />, activeIndex: 0 },
@@ -56,6 +58,10 @@ const ReportLayoutPage = ({ children, filter }) => {
     { name: t('reportChart'), link: '/reports/chart', icon: <TrendingUpIcon />, activeIndex: 5 },
   ];
 
+  const handleClick = (route) => {
+    history.push(route.link);
+  }
+  console.log('rendering Layout, ', value);
   return (
     <div className={classes.root}>
       {matchesMD && <AppBar position="fixed">
@@ -81,27 +87,31 @@ const ReportLayoutPage = ({ children, filter }) => {
         onClose={() => setOpenDrawer(!openDrawer)}
         classes={{ paper: classes.drawer }}
       >
-        <div className={classes.drawerHeader}>
-          <IconButton>
-            <ChevronLeftIcon />
-          </IconButton>
-        </div>
-        <Divider />
+        { !matchesMD && 
+          <> 
+            <div className={classes.drawerHeader}>
+              <IconButton>
+                <ArrowBackIcon />
+              </IconButton>
+              <Typography variant="h6" color='primary' noWrap>
+                  Reports
+                </Typography> 
+            </div>
+            <Divider />
+          </> 
+        }
         <List disablePadding>
           {routes.map(route => (
             <ListItem
               key={`${route}${route.activeIndex}`}
               button
-              component={Link}
-              to={route.link}
-              onClick={() => setOpenDrawer(false)}
+              selected={value === route.activeIndex}
+              onClick={() => { setValue(route.activeIndex); handleClick(route)}}
             >
               <ListItemIcon>
                 {route.icon}
               </ListItemIcon>
-              <ListItemText className={classes.drawerItem} disableTypography>
-                {route.name}
-              </ListItemText>
+              <ListItemText primary={route.name} />
             </ListItem>
           ))}
         </List>
-- 
cgit v1.2.3


From 219019a3bd8a744a2cbf9dd16285a9ebfa5709cd Mon Sep 17 00:00:00 2001
From: Ashutosh Bishnoi <mail2bishnoi@gmail.com>
Date: Sat, 15 May 2021 18:47:16 +0530
Subject: Report Filter Design

---
 modern/src/reports/EventReportPage.js  |   2 +-
 modern/src/reports/ReportFilter.js     | 130 ++++++++++++++++++------------
 modern/src/reports/ReportHeader.js     |   0
 modern/src/reports/ReportLayoutPage.js | 139 +++++++++++++++++++--------------
 4 files changed, 163 insertions(+), 108 deletions(-)
 delete mode 100644 modern/src/reports/ReportHeader.js

diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js
index a14fc93..daa4ab8 100644
--- a/modern/src/reports/EventReportPage.js
+++ b/modern/src/reports/EventReportPage.js
@@ -30,7 +30,7 @@ const Filter = ({ setItems }) => {
 
   return (
     <ReportFilter handleSubmit={handleSubmit}>
-      <FormControl variant="filled" margin="normal" fullWidth>
+      <FormControl variant="filled" fullWidth>
         <InputLabel>{t('reportEventTypes')}</InputLabel>
         <Select value={eventTypes} onChange={e => setEventTypes(e.target.value)} multiple>
           <MenuItem value="allEvents">{t('eventAll')}</MenuItem>
diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js
index 164dbf9..e6164e2 100644
--- a/modern/src/reports/ReportFilter.js
+++ b/modern/src/reports/ReportFilter.js
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { FormControl, InputLabel, Select, MenuItem, Button, TextField, ButtonGroup } from '@material-ui/core';
+import { FormControl, InputLabel, Select, MenuItem, Button, TextField, ButtonGroup, Grid } from '@material-ui/core';
 import t from '../common/localization';
 import { useSelector } from 'react-redux';
 import moment from 'moment';
@@ -57,54 +57,86 @@ const ReportFilter = ({ children, handleSubmit, showOnly }) => {
 
   return (
     <>
-      <FormControl variant="filled" margin="normal" fullWidth>
-        <InputLabel>{t('reportDevice')}</InputLabel>
-        <Select value={deviceId} onChange={(e) => setDeviceId(e.target.value)}>
-          {devices.map((device) => (
-            <MenuItem value={device.id}>{device.name}</MenuItem>
-          ))}
-        </Select>
-      </FormControl>
-      <FormControl variant="filled" margin="normal" fullWidth>
-        <InputLabel>{t('reportPeriod')}</InputLabel>
-        <Select value={period} onChange={(e) => setPeriod(e.target.value)}>
-          <MenuItem value="today">{t('reportToday')}</MenuItem>
-          <MenuItem value="yesterday">{t('reportYesterday')}</MenuItem>
-          <MenuItem value="thisWeek">{t('reportThisWeek')}</MenuItem>
-          <MenuItem value="previousWeek">{t('reportPreviousWeek')}</MenuItem>
-          <MenuItem value="thisMonth">{t('reportThisMonth')}</MenuItem>
-          <MenuItem value="previousMonth">{t('reportPreviousMonth')}</MenuItem>
-          <MenuItem value="custom">{t('reportCustom')}</MenuItem>
-        </Select>
-      </FormControl>
-      {period === 'custom' && (
-        <TextField
-          margin="normal"
-          variant="filled"
-          label={t('reportFrom')}
-          type="datetime-local"
-          value={from.format(moment.HTML5_FMT.DATETIME_LOCAL)}
-          onChange={e => setFrom(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
-          fullWidth />
-      )}
-      {period === 'custom' && (
-        <TextField
-          margin="normal"
-          variant="filled"
-          label={t('reportTo')}
-          type="datetime-local"
-          value={to.format(moment.HTML5_FMT.DATETIME_LOCAL)}
-          onChange={e => setTo(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
-          fullWidth />
-      )}
-      {children}
-      <FormControl margin="normal" fullWidth>
-        <ButtonGroup color="primary" orientation="vertical" disabled={!deviceId}>
-          <Button onClick={() => handleClick(false, true)}>{t('reportShow')}</Button>
-          {!showOnly && <Button onClick={() => handleClick(false, false)}>{t('reportExport')}</Button>}
-          {!showOnly && <Button onClick={() => handleClick(true, false)}>{t('reportEmail')}</Button>}
-        </ButtonGroup>
-      </FormControl>
+      <Grid container spacing={3} direction='column'>
+        <Grid item container spacing={2}>
+          <Grid item xs={12} sm={period === 'custom' ? 3 : 6}>
+            <FormControl variant="filled" fullWidth>
+              <InputLabel>{t('reportDevice')}</InputLabel>
+              <Select value={deviceId} onChange={(e) => setDeviceId(e.target.value)}>
+                {devices.map((device) => (
+                  <MenuItem value={device.id}>{device.name}</MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </Grid>
+          <Grid item xs={12} sm={period === 'custom' ? 3 : 6}>
+            <FormControl variant="filled" fullWidth>
+              <InputLabel>{t('reportPeriod')}</InputLabel>
+              <Select value={period} onChange={(e) => setPeriod(e.target.value)}>
+                <MenuItem value="today">{t('reportToday')}</MenuItem>
+                <MenuItem value="yesterday">{t('reportYesterday')}</MenuItem>
+                <MenuItem value="thisWeek">{t('reportThisWeek')}</MenuItem>
+                <MenuItem value="previousWeek">{t('reportPreviousWeek')}</MenuItem>
+                <MenuItem value="thisMonth">{t('reportThisMonth')}</MenuItem>
+                <MenuItem value="previousMonth">{t('reportPreviousMonth')}</MenuItem>
+                <MenuItem value="custom">{t('reportCustom')}</MenuItem>
+              </Select>
+            </FormControl>
+          </Grid>
+          {period === 'custom' && <Grid item xs={12} sm={3}>
+            <TextField
+              variant="filled"
+              label={t('reportFrom')}
+              type="datetime-local"
+              value={from.format(moment.HTML5_FMT.DATETIME_LOCAL)}
+              onChange={e => setFrom(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
+              fullWidth />
+          </Grid>}
+          {period === 'custom' && <Grid item xs={12} sm={3}>
+            <TextField
+              variant="filled"
+              label={t('reportTo')}
+              type="datetime-local"
+              value={to.format(moment.HTML5_FMT.DATETIME_LOCAL)}
+              onChange={e => setTo(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
+              fullWidth />
+          </Grid>}
+        </Grid>
+        <Grid item container spacing={2}>
+          {children && <Grid item xs={12} sm={6}>
+            {children}
+          </Grid>}
+          <Grid item xs={4} sm={!showOnly ? 2 : 4}>
+            <Button 
+              onClick={() => handleClick(false, true)}
+              variant='outlined'
+              color='secondary'
+              fullWidth>
+                {t('reportShow')}
+            </Button>
+          </Grid>
+          <Grid item xs={4} sm={2}>
+            {!showOnly && 
+              <Button 
+                onClick={() => handleClick(false, false)}
+                variant='outlined'
+                color='secondary'
+                fullWidth>
+                  {t('reportExport')}
+              </Button>}
+          </Grid>
+          <Grid item xs={4} sm={2}>
+            {!showOnly && 
+              <Button 
+                onClick={() => handleClick(true, false)}
+                variant='outlined'
+                color='secondary'
+                fullWidth>
+                  {t('reportEmail')}
+              </Button>}
+          </Grid>
+        </Grid>
+      </Grid>
     </>
   );
 }
diff --git a/modern/src/reports/ReportHeader.js b/modern/src/reports/ReportHeader.js
deleted file mode 100644
index e69de29..0000000
diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayoutPage.js
index cdce2b3..ae7b3da 100644
--- a/modern/src/reports/ReportLayoutPage.js
+++ b/modern/src/reports/ReportLayoutPage.js
@@ -19,12 +19,17 @@ const useStyles = makeStyles(theme => ({
     height: '100%',
     display: 'flex',
   },
+  drawer: {
+    width: 360,
+    [theme.breakpoints.down("md")]: {
+      width: 0,
+    }
+  },  
   content: {
     flex: 1,
-    overflow: 'auto',
-    padding: theme.spacing(2),
+    padding: theme.spacing(3),
   },
-  drawer: {
+  drawerPaper: {
     width: 360,
     [theme.breakpoints.down("md")]: {
       width: 320,
@@ -36,6 +41,11 @@ const useStyles = makeStyles(theme => ({
     alignItems: 'center',
     padding: theme.spacing(0, 1),
   },
+  toolbar: {
+    [theme.breakpoints.down("md")]: {
+      ...theme.mixins.toolbar,
+    }
+  },
   form: {
     padding: theme.spacing(1, 2, 2),
   },
@@ -47,7 +57,6 @@ const ReportLayoutPage = ({ children, filter }) => {
   const theme = useTheme();
   const matchesMD = useMediaQuery(theme.breakpoints.down("md"));
   const [openDrawer, setOpenDrawer] = useState(false);
-  const [value, setValue] = useState(0);
 
   const routes = [
     { name: t('reportRoute'), link: '/reports/route', icon: <TimelineIcon />, activeIndex: 0 },
@@ -58,64 +67,78 @@ const ReportLayoutPage = ({ children, filter }) => {
     { name: t('reportChart'), link: '/reports/chart', icon: <TrendingUpIcon />, activeIndex: 5 },
   ];
 
-  const handleClick = (route) => {
+  const navigationList = (
+    <List disablePadding>
+      {routes.map(route => (
+        <ListItem
+          key={`${route}${route.activeIndex}`}
+          button
+          onClick={() => handleListItemClick(route)}
+        >
+          <ListItemIcon>
+            {route.icon}
+          </ListItemIcon>
+          <ListItemText primary={route.name} />
+        </ListItem>
+      ))}
+    </List>
+  );
+
+  const drawerHeader = (
+    <> 
+      <div className={classes.drawerHeader}>
+        <IconButton>
+          <ArrowBackIcon />
+        </IconButton>
+        <Typography variant="h6" color='primary' noWrap>
+          Reports
+        </Typography> 
+      </div>
+      <Divider />
+    </>
+  );
+
+  const appBar = (
+    <AppBar position="fixed">
+      <Toolbar>
+        <IconButton
+          color="inherit"
+          aria-label="open drawer"
+          edge="start"
+          onClick={() => setOpenDrawer(!openDrawer)}
+          className={classes.menuButton}
+        >
+          <MenuIcon />
+        </IconButton>
+        <Typography variant="h6" noWrap>
+          Reports
+        </Typography>        
+      </Toolbar>
+    </AppBar>   
+  );
+
+  const handleListItemClick = (route) => {
     history.push(route.link);
   }
-  console.log('rendering Layout, ', value);
+
   return (
     <div className={classes.root}>
-      {matchesMD && <AppBar position="fixed">
-          <Toolbar>
-            <IconButton
-              color="inherit"
-              aria-label="open drawer"
-              edge="start"
-              onClick={() => setOpenDrawer(!openDrawer)}
-              className={classes.menuButton}
-            >
-              <MenuIcon />
-            </IconButton>
-            <Typography variant="h6" noWrap>
-              Reports
-            </Typography>          
-          </Toolbar>
-        </AppBar>
-      }
-      <Drawer
-        variant={matchesMD ? "temporary": "permanent"}
-        open={openDrawer}
-        onClose={() => setOpenDrawer(!openDrawer)}
-        classes={{ paper: classes.drawer }}
-      >
-        { !matchesMD && 
-          <> 
-            <div className={classes.drawerHeader}>
-              <IconButton>
-                <ArrowBackIcon />
-              </IconButton>
-              <Typography variant="h6" color='primary' noWrap>
-                  Reports
-                </Typography> 
-            </div>
-            <Divider />
-          </> 
-        }
-        <List disablePadding>
-          {routes.map(route => (
-            <ListItem
-              key={`${route}${route.activeIndex}`}
-              button
-              selected={value === route.activeIndex}
-              onClick={() => { setValue(route.activeIndex); handleClick(route)}}
-            >
-              <ListItemIcon>
-                {route.icon}
-              </ListItemIcon>
-              <ListItemText primary={route.name} />
-            </ListItem>
-          ))}
-        </List>
-      </Drawer>
+      { matchesMD && appBar }
+      <nav className={classes.drawer}>
+        <Drawer
+          variant={matchesMD ? "temporary": "permanent"}
+          open={openDrawer}
+          onClose={() => setOpenDrawer(!openDrawer)}
+          classes={{ paper: classes.drawerPaper }}
+        >
+          { !matchesMD && drawerHeader }
+          { navigationList }
+        </Drawer>
+      </nav>
+      <div className={classes.content}>
+        <div className={classes.toolbar} />
+        {filter}
+      </div>      
     </div>
   );
 }
-- 
cgit v1.2.3


From 589244b4a65813271440d11c09fa63dfb4d8ad78 Mon Sep 17 00:00:00 2001
From: Ashutosh Bishnoi <mail2bishnoi@gmail.com>
Date: Mon, 17 May 2021 13:09:25 +0530
Subject: Sidebar and Report Filter completed

---
 modern/src/reports/ChartReportPage.js   |  22 +++--
 modern/src/reports/EventReportPage.js   |  50 +++++-----
 modern/src/reports/ReportFilter.js      | 157 +++++++++++++++-----------------
 modern/src/reports/ReportLayoutPage.js  |  61 +++++++------
 modern/src/reports/SummaryReportPage.js |  10 +-
 modern/src/theme/dimensions.js          |   4 +-
 6 files changed, 154 insertions(+), 150 deletions(-)

diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js
index 80424cc..c75c9b7 100644
--- a/modern/src/reports/ChartReportPage.js
+++ b/modern/src/reports/ChartReportPage.js
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
+import { Grid, FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
 import ReportLayoutPage from './ReportLayoutPage';
 import ReportFilter from './ReportFilter';
 import Graph from './Graph';
@@ -39,14 +39,18 @@ const Filter = ({ children, setItems }) => {
 const ChartType = ({ type, setType }) => {
 
   return (
-    <FormControl variant="filled" margin="normal" fullWidth>
-      <InputLabel>{t('reportChartType')}</InputLabel>
-      <Select value={type} onChange={e => setType(e.target.value)}>
-        <MenuItem value="speed">{t('positionSpeed')}</MenuItem>
-        <MenuItem value="accuracy">{t('positionAccuracy')}</MenuItem>
-        <MenuItem value="altitude">{t('positionAltitude')}</MenuItem>
-      </Select>
-    </FormControl>
+    <Grid container spacing={3}>
+      <Grid item xs={12} sm={6}>
+        <FormControl variant="filled" margin="normal" fullWidth>
+          <InputLabel>{t('reportChartType')}</InputLabel>
+          <Select value={type} onChange={e => setType(e.target.value)}>
+            <MenuItem value="speed">{t('positionSpeed')}</MenuItem>
+            <MenuItem value="accuracy">{t('positionAccuracy')}</MenuItem>
+            <MenuItem value="altitude">{t('positionAltitude')}</MenuItem>
+          </Select>
+        </FormControl>
+      </Grid>
+    </Grid>
   )
 }
 
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js
index daa4ab8..b20984f 100644
--- a/modern/src/reports/EventReportPage.js
+++ b/modern/src/reports/EventReportPage.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { DataGrid } from '@material-ui/data-grid';
-import { FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
+import { Grid, FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
 import t from '../common/localization';
 import { formatDate } from '../common/formatter';
 import ReportFilter from './ReportFilter';
@@ -30,29 +30,31 @@ const Filter = ({ setItems }) => {
 
   return (
     <ReportFilter handleSubmit={handleSubmit}>
-      <FormControl variant="filled" fullWidth>
-        <InputLabel>{t('reportEventTypes')}</InputLabel>
-        <Select value={eventTypes} onChange={e => setEventTypes(e.target.value)} multiple>
-          <MenuItem value="allEvents">{t('eventAll')}</MenuItem>
-          <MenuItem value="deviceOnline">{t('eventDeviceOnline')}</MenuItem>
-          <MenuItem value="deviceUnknown">{t('eventDeviceUnknown')}</MenuItem>
-          <MenuItem value="deviceOffline">{t('eventDeviceOffline')}</MenuItem>
-          <MenuItem value="deviceInactive">{t('eventDeviceInactive')}</MenuItem>
-          <MenuItem value="deviceMoving">{t('eventDeviceMoving')}</MenuItem>
-          <MenuItem value="deviceStopped">{t('eventDeviceStopped')}</MenuItem>
-          <MenuItem value="deviceOverspeed">{t('eventDeviceOverspeed')}</MenuItem>
-          <MenuItem value="deviceFuelDrop">{t('eventDeviceFuelDrop')}</MenuItem>
-          <MenuItem value="commandResult">{t('eventCommandResult')}</MenuItem>
-          <MenuItem value="geofenceEnter">{t('eventGeofenceEnter')}</MenuItem>
-          <MenuItem value="geofenceExit">{t('eventGeofenceExit')}</MenuItem>
-          <MenuItem value="alarm">{t('eventAlarm')}</MenuItem>
-          <MenuItem value="ignitionOn">{t('eventIgnitionOn')}</MenuItem>
-          <MenuItem value="ignitionOff">{t('eventIgnitionOff')}</MenuItem>
-          <MenuItem value="maintenance">{t('eventMaintenance')}</MenuItem>
-          <MenuItem value="textMessage">{t('eventTextMessage')}</MenuItem>
-          <MenuItem value="driverChanged">{t('eventDriverChanged')}</MenuItem>
-        </Select>
-      </FormControl>
+      <Grid item xs={12} sm={6}>
+        <FormControl variant="filled" fullWidth>
+          <InputLabel>{t('reportEventTypes')}</InputLabel>
+          <Select value={eventTypes} onChange={e => setEventTypes(e.target.value)} multiple>
+            <MenuItem value="allEvents">{t('eventAll')}</MenuItem>
+            <MenuItem value="deviceOnline">{t('eventDeviceOnline')}</MenuItem>
+            <MenuItem value="deviceUnknown">{t('eventDeviceUnknown')}</MenuItem>
+            <MenuItem value="deviceOffline">{t('eventDeviceOffline')}</MenuItem>
+            <MenuItem value="deviceInactive">{t('eventDeviceInactive')}</MenuItem>
+            <MenuItem value="deviceMoving">{t('eventDeviceMoving')}</MenuItem>
+            <MenuItem value="deviceStopped">{t('eventDeviceStopped')}</MenuItem>
+            <MenuItem value="deviceOverspeed">{t('eventDeviceOverspeed')}</MenuItem>
+            <MenuItem value="deviceFuelDrop">{t('eventDeviceFuelDrop')}</MenuItem>
+            <MenuItem value="commandResult">{t('eventCommandResult')}</MenuItem>
+            <MenuItem value="geofenceEnter">{t('eventGeofenceEnter')}</MenuItem>
+            <MenuItem value="geofenceExit">{t('eventGeofenceExit')}</MenuItem>
+            <MenuItem value="alarm">{t('eventAlarm')}</MenuItem>
+            <MenuItem value="ignitionOn">{t('eventIgnitionOn')}</MenuItem>
+            <MenuItem value="ignitionOff">{t('eventIgnitionOff')}</MenuItem>
+            <MenuItem value="maintenance">{t('eventMaintenance')}</MenuItem>
+            <MenuItem value="textMessage">{t('eventTextMessage')}</MenuItem>
+            <MenuItem value="driverChanged">{t('eventDriverChanged')}</MenuItem>
+          </Select>
+        </FormControl>
+      </Grid>
     </ReportFilter>
   );
 }
diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js
index e6164e2..1d67691 100644
--- a/modern/src/reports/ReportFilter.js
+++ b/modern/src/reports/ReportFilter.js
@@ -1,10 +1,11 @@
 import React, { useState } from 'react';
-import { FormControl, InputLabel, Select, MenuItem, Button, TextField, ButtonGroup, Grid } from '@material-ui/core';
+import { FormControl, InputLabel, Select, MenuItem, Button, TextField, Grid } from '@material-ui/core';
 import t from '../common/localization';
 import { useSelector } from 'react-redux';
 import moment from 'moment';
 
 const ReportFilter = ({ children, handleSubmit, showOnly }) => {
+
   const devices = useSelector(state => Object.values(state.devices.items));
   const [deviceId, setDeviceId] = useState();
   const [period, setPeriod] = useState('today');
@@ -56,88 +57,80 @@ const ReportFilter = ({ children, handleSubmit, showOnly }) => {
   }
 
   return (
-    <>
-      <Grid container spacing={3} direction='column'>
-        <Grid item container spacing={2}>
-          <Grid item xs={12} sm={period === 'custom' ? 3 : 6}>
-            <FormControl variant="filled" fullWidth>
-              <InputLabel>{t('reportDevice')}</InputLabel>
-              <Select value={deviceId} onChange={(e) => setDeviceId(e.target.value)}>
-                {devices.map((device) => (
-                  <MenuItem value={device.id}>{device.name}</MenuItem>
-                ))}
-              </Select>
-            </FormControl>
-          </Grid>
-          <Grid item xs={12} sm={period === 'custom' ? 3 : 6}>
-            <FormControl variant="filled" fullWidth>
-              <InputLabel>{t('reportPeriod')}</InputLabel>
-              <Select value={period} onChange={(e) => setPeriod(e.target.value)}>
-                <MenuItem value="today">{t('reportToday')}</MenuItem>
-                <MenuItem value="yesterday">{t('reportYesterday')}</MenuItem>
-                <MenuItem value="thisWeek">{t('reportThisWeek')}</MenuItem>
-                <MenuItem value="previousWeek">{t('reportPreviousWeek')}</MenuItem>
-                <MenuItem value="thisMonth">{t('reportThisMonth')}</MenuItem>
-                <MenuItem value="previousMonth">{t('reportPreviousMonth')}</MenuItem>
-                <MenuItem value="custom">{t('reportCustom')}</MenuItem>
-              </Select>
-            </FormControl>
-          </Grid>
-          {period === 'custom' && <Grid item xs={12} sm={3}>
-            <TextField
-              variant="filled"
-              label={t('reportFrom')}
-              type="datetime-local"
-              value={from.format(moment.HTML5_FMT.DATETIME_LOCAL)}
-              onChange={e => setFrom(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
-              fullWidth />
-          </Grid>}
-          {period === 'custom' && <Grid item xs={12} sm={3}>
-            <TextField
-              variant="filled"
-              label={t('reportTo')}
-              type="datetime-local"
-              value={to.format(moment.HTML5_FMT.DATETIME_LOCAL)}
-              onChange={e => setTo(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
-              fullWidth />
-          </Grid>}
-        </Grid>
-        <Grid item container spacing={2}>
-          {children && <Grid item xs={12} sm={6}>
-            {children}
-          </Grid>}
-          <Grid item xs={4} sm={!showOnly ? 2 : 4}>
-            <Button 
-              onClick={() => handleClick(false, true)}
-              variant='outlined'
-              color='secondary'
-              fullWidth>
-                {t('reportShow')}
-            </Button>
-          </Grid>
-          <Grid item xs={4} sm={2}>
-            {!showOnly && 
-              <Button 
-                onClick={() => handleClick(false, false)}
-                variant='outlined'
-                color='secondary'
-                fullWidth>
-                  {t('reportExport')}
-              </Button>}
-          </Grid>
-          <Grid item xs={4} sm={2}>
-            {!showOnly && 
-              <Button 
-                onClick={() => handleClick(true, false)}
-                variant='outlined'
-                color='secondary'
-                fullWidth>
-                  {t('reportEmail')}
-              </Button>}
-          </Grid>
-        </Grid>
+    <Grid container spacing={3}>
+      <Grid item xs={12} sm={period === 'custom' ? 3 : 6}>
+        <FormControl variant="filled" fullWidth>
+          <InputLabel>{t('reportDevice')}</InputLabel>
+          <Select value={deviceId} onChange={(e) => setDeviceId(e.target.value)}>
+            {devices.map((device) => (
+              <MenuItem value={device.id}>{device.name}</MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+      </Grid>
+      <Grid item xs={12} sm={period === 'custom' ? 3 : 6}>
+        <FormControl variant="filled" fullWidth>
+          <InputLabel>{t('reportPeriod')}</InputLabel>
+          <Select value={period} onChange={(e) => setPeriod(e.target.value)}>
+            <MenuItem value="today">{t('reportToday')}</MenuItem>
+            <MenuItem value="yesterday">{t('reportYesterday')}</MenuItem>
+            <MenuItem value="thisWeek">{t('reportThisWeek')}</MenuItem>
+            <MenuItem value="previousWeek">{t('reportPreviousWeek')}</MenuItem>
+            <MenuItem value="thisMonth">{t('reportThisMonth')}</MenuItem>
+            <MenuItem value="previousMonth">{t('reportPreviousMonth')}</MenuItem>
+            <MenuItem value="custom">{t('reportCustom')}</MenuItem>
+          </Select>
+        </FormControl>
+      </Grid>
+      {period === 'custom' && <Grid item xs={12} sm={3}>
+        <TextField
+          variant="filled"
+          label={t('reportFrom')}
+          type="datetime-local"
+          value={from.format(moment.HTML5_FMT.DATETIME_LOCAL)}
+          onChange={e => setFrom(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
+          fullWidth />
+      </Grid>}
+      {period === 'custom' && <Grid item xs={12} sm={3}>
+        <TextField
+          variant="filled"
+          label={t('reportTo')}
+          type="datetime-local"
+          value={to.format(moment.HTML5_FMT.DATETIME_LOCAL)}
+          onChange={e => setTo(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
+          fullWidth />
+      </Grid>}
+      {children}
+      <Grid item xs={4} sm={!showOnly ? 2 : 4}>
+        <Button 
+          onClick={() => handleClick(false, true)}
+          variant='outlined'
+          color='secondary'
+          fullWidth>
+          {t('reportShow')}
+        </Button>
+      </Grid>
+      <Grid item xs={4} sm={2}>
+        {!showOnly && 
+          <Button 
+            onClick={() => handleClick(false, false)}
+            variant='outlined'
+            color='secondary'
+            fullWidth>
+            {t('reportExport')}
+          </Button>}
+      </Grid>
+      <Grid item xs={4} sm={2}>
+        {!showOnly && 
+          <Button 
+            onClick={() => handleClick(true, false)}
+            variant='outlined'
+            color='secondary'
+            fullWidth>
+            {t('reportEmail')}
+          </Button>}
       </Grid>
-    </>
+    </Grid>
   );
 }
 
diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayoutPage.js
index ae7b3da..e203b5a 100644
--- a/modern/src/reports/ReportLayoutPage.js
+++ b/modern/src/reports/ReportLayoutPage.js
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { AppBar, Toolbar, Typography, List, ListItem, ListItemText, ListItemIcon, Divider, Grid, Paper, Drawer, makeStyles, useMediaQuery, IconButton } from '@material-ui/core';
+import { AppBar, Toolbar, Typography, List, ListItem, ListItemText, ListItemIcon, Divider, Drawer, makeStyles, useMediaQuery, IconButton } from '@material-ui/core';
 import { useTheme } from "@material-ui/core/styles";
 import MenuIcon from '@material-ui/icons/Menu';
 import TimelineIcon from '@material-ui/icons/Timeline';
@@ -16,24 +16,24 @@ import t from '../common/localization';
 
 const useStyles = makeStyles(theme => ({
   root: {
-    height: '100%',
     display: 'flex',
+    height: '100%',
   },
-  drawer: {
-    width: 360,
+  drawerContainer: {
+    width: theme.dimensions.drawerWidth,
     [theme.breakpoints.down("md")]: {
       width: 0,
     }
-  },  
-  content: {
-    flex: 1,
-    padding: theme.spacing(3),
   },
-  drawerPaper: {
-    width: 360,
+  drawer: {
+    width: theme.dimensions.drawerWidth,
     [theme.breakpoints.down("md")]: {
-      width: 320,
+      width: theme.dimensions.tabletDrawerWidth,
     }
+  }, 
+  content: {
+    flex: 1,
+    padding: theme.spacing(5, 3, 3, 3),
   },
   drawerHeader: {
     ...theme.mixins.toolbar,
@@ -41,14 +41,16 @@ const useStyles = makeStyles(theme => ({
     alignItems: 'center',
     padding: theme.spacing(0, 1),
   },
+  backArrowIconContainer: {
+    '&:hover': {
+      backgroundColor:"transparent"
+    }  
+  },
   toolbar: {
     [theme.breakpoints.down("md")]: {
       ...theme.mixins.toolbar,
     }
   },
-  form: {
-    padding: theme.spacing(1, 2, 2),
-  },
 }));
 
 const ReportLayoutPage = ({ children, filter }) => {
@@ -73,8 +75,7 @@ const ReportLayoutPage = ({ children, filter }) => {
         <ListItem
           key={`${route}${route.activeIndex}`}
           button
-          onClick={() => handleListItemClick(route)}
-        >
+          onClick={() => handleListItemClick(route)}>
           <ListItemIcon>
             {route.icon}
           </ListItemIcon>
@@ -87,11 +88,13 @@ const ReportLayoutPage = ({ children, filter }) => {
   const drawerHeader = (
     <> 
       <div className={classes.drawerHeader}>
-        <IconButton>
+        <IconButton 
+          className={classes.backArrowIconContainer} 
+          disableRipple>
           <ArrowBackIcon />
         </IconButton>
-        <Typography variant="h6" color='primary' noWrap>
-          Reports
+        <Typography variant="h6" color="inherit" noWrap>
+          {t('reportTitle')}
         </Typography> 
       </div>
       <Divider />
@@ -99,19 +102,18 @@ const ReportLayoutPage = ({ children, filter }) => {
   );
 
   const appBar = (
-    <AppBar position="fixed">
+    <AppBar position="fixed" color="inherit">
       <Toolbar>
         <IconButton
           color="inherit"
           aria-label="open drawer"
           edge="start"
           onClick={() => setOpenDrawer(!openDrawer)}
-          className={classes.menuButton}
-        >
+          className={classes.menuButton}>
           <MenuIcon />
         </IconButton>
         <Typography variant="h6" noWrap>
-          Reports
+          {t('reportTitle')}
         </Typography>        
       </Toolbar>
     </AppBar>   
@@ -123,18 +125,17 @@ const ReportLayoutPage = ({ children, filter }) => {
 
   return (
     <div className={classes.root}>
-      { matchesMD && appBar }
-      <nav className={classes.drawer}>
+      {matchesMD && appBar}
+      <div className={classes.drawerContainer}>
         <Drawer
           variant={matchesMD ? "temporary": "permanent"}
           open={openDrawer}
           onClose={() => setOpenDrawer(!openDrawer)}
-          classes={{ paper: classes.drawerPaper }}
-        >
-          { !matchesMD && drawerHeader }
-          { navigationList }
+          classes={{paper: classes.drawer}}>
+          {!matchesMD && drawerHeader}
+          {navigationList}
         </Drawer>
-      </nav>
+      </div>
       <div className={classes.content}>
         <div className={classes.toolbar} />
         {filter}
diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js
index 2af7d3b..f63f50b 100644
--- a/modern/src/reports/SummaryReportPage.js
+++ b/modern/src/reports/SummaryReportPage.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { DataGrid } from '@material-ui/data-grid';
-import { FormControlLabel, Checkbox } from '@material-ui/core';
+import { Grid, FormControlLabel, Checkbox } from '@material-ui/core';
 import t from '../common/localization';
 import { formatDistance, formatHours, formatDate, formatSpeed, formatVolume } from '../common/formatter';
 import ReportFilter from './ReportFilter';
@@ -28,9 +28,11 @@ const Filter = ({ setItems }) => {
 
   return (
     <ReportFilter handleSubmit={handleSubmit}>
-      <FormControlLabel
-        control={<Checkbox checked={daily} onChange={e => setDaily(e.target.checked)} />}
-        label={t('reportDaily')} />
+      <Grid item xs={12} sm={6}>
+        <FormControlLabel
+          control={<Checkbox checked={daily} onChange={e => setDaily(e.target.checked)} />}
+          label={t('reportDaily')} />
+      </Grid>
     </ReportFilter>
   );
 }
diff --git a/modern/src/theme/dimensions.js b/modern/src/theme/dimensions.js
index e36fc23..59959d7 100644
--- a/modern/src/theme/dimensions.js
+++ b/modern/src/theme/dimensions.js
@@ -2,5 +2,7 @@ export default {
   inputHeight: '42px',
   borderRadius: '4px',
   sidebarWidth: '28%',
-  tabletSidebarWidth: '52px' 
+  tabletSidebarWidth: '52px',
+  drawerWidth: 360,
+  tabletDrawerWidth: 320,
 };
-- 
cgit v1.2.3


From 0ab07c40f48889727b1503eaedb5daa8f344dd19 Mon Sep 17 00:00:00 2001
From: Ashutosh Bishnoi <mail2bishnoi@gmail.com>
Date: Mon, 17 May 2021 15:10:29 +0530
Subject: Initial draft of Reports Development

---
 modern/src/reports/ReportLayoutPage.js | 60 +++++++++++++++++++---------------
 1 file changed, 33 insertions(+), 27 deletions(-)

diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayoutPage.js
index e203b5a..4ffc881 100644
--- a/modern/src/reports/ReportLayoutPage.js
+++ b/modern/src/reports/ReportLayoutPage.js
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { AppBar, Toolbar, Typography, List, ListItem, ListItemText, ListItemIcon, Divider, Drawer, makeStyles, useMediaQuery, IconButton } from '@material-ui/core';
+import { AppBar, Toolbar, Typography, List, ListItem, ListItemText, ListItemIcon, Divider, Drawer, makeStyles, IconButton, Hidden } from '@material-ui/core';
 import { useTheme } from "@material-ui/core/styles";
 import MenuIcon from '@material-ui/icons/Menu';
 import TimelineIcon from '@material-ui/icons/Timeline';
@@ -10,7 +10,7 @@ import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted';
 import TrendingUpIcon from '@material-ui/icons/TrendingUp';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 
-import { useHistory } from 'react-router-dom';
+import { Link, useHistory, useLocation } from 'react-router-dom';
 
 import t from '../common/localization';
 
@@ -21,9 +21,6 @@ const useStyles = makeStyles(theme => ({
   },
   drawerContainer: {
     width: theme.dimensions.drawerWidth,
-    [theme.breakpoints.down("md")]: {
-      width: 0,
-    }
   },
   drawer: {
     width: theme.dimensions.drawerWidth,
@@ -53,29 +50,32 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
+const routes = [
+  { name: t('reportRoute'), href: '/reports/route', icon: <TimelineIcon /> },
+  { name: t('reportEvents'), href: '/reports/event', icon: <NotificationsActiveIcon /> },
+  { name: t('reportTrips'), href: '/reports/trip', icon: <PlayCircleFilledIcon /> },
+  { name: t('reportStops'), href: '/reports/stop', icon: <PauseCircleFilledIcon /> },
+  { name: t('reportSummary'), href: '/reports/summary', icon: <FormatListBulletedIcon /> },
+  { name: t('reportChart'), href: '/reports/chart', icon: <TrendingUpIcon /> },
+];
+
 const ReportLayoutPage = ({ children, filter }) => {
   const classes = useStyles();
   const history = useHistory();
   const theme = useTheme();
-  const matchesMD = useMediaQuery(theme.breakpoints.down("md"));
   const [openDrawer, setOpenDrawer] = useState(false);
-
-  const routes = [
-    { name: t('reportRoute'), link: '/reports/route', icon: <TimelineIcon />, activeIndex: 0 },
-    { name: t('reportEvents'), link: '/reports/event', icon: <NotificationsActiveIcon />, activeIndex: 1 },
-    { name: t('reportTrips'), link: '/reports/trip', icon: <PlayCircleFilledIcon />, activeIndex: 2 },
-    { name: t('reportStops'), link: '/reports/stop', icon: <PauseCircleFilledIcon />, activeIndex: 3 },
-    { name: t('reportSummary'), link: '/reports/summary', icon: <FormatListBulletedIcon />, activeIndex: 4 },
-    { name: t('reportChart'), link: '/reports/chart', icon: <TrendingUpIcon />, activeIndex: 5 },
-  ];
+  const location = useLocation();
 
   const navigationList = (
     <List disablePadding>
-      {routes.map(route => (
+      {routes.map((route, index) => (
         <ListItem
-          key={`${route}${route.activeIndex}`}
+          disableRipple
+          component={Link}
+          key={`${route}${index}`}
           button
-          onClick={() => handleListItemClick(route)}>
+          to={route.href}
+          selected={route.href === location.pathname}>
           <ListItemIcon>
             {route.icon}
           </ListItemIcon>
@@ -119,23 +119,29 @@ const ReportLayoutPage = ({ children, filter }) => {
     </AppBar>   
   );
 
-  const handleListItemClick = (route) => {
-    history.push(route.link);
-  }
-
   return (
     <div className={classes.root}>
-      {matchesMD && appBar}
-      <div className={classes.drawerContainer}>
+      <Hidden mdUp>
+        {appBar}
         <Drawer
-          variant={matchesMD ? "temporary": "permanent"}
+          variant="temporary"
           open={openDrawer}
           onClose={() => setOpenDrawer(!openDrawer)}
           classes={{paper: classes.drawer}}>
-          {!matchesMD && drawerHeader}
+          {drawerHeader}
           {navigationList}
         </Drawer>
-      </div>
+      </Hidden>
+      <Hidden mdDown>
+        <div className={classes.drawerContainer}>
+          <Drawer
+            variant="permanent"
+            classes={{paper: classes.drawer}}>
+            {drawerHeader}
+            {navigationList}
+          </Drawer>
+        </div>
+      </Hidden>
       <div className={classes.content}>
         <div className={classes.toolbar} />
         {filter}
-- 
cgit v1.2.3


From f15034e5fe4e5c702975b8a0f583a9917c4b1b3b Mon Sep 17 00:00:00 2001
From: Ashutosh Bishnoi <mail2bishnoi@gmail.com>
Date: Sat, 22 May 2021 12:49:22 +0530
Subject: Resolving Comments and Observations

---
 modern/public/logo.svg                             | 170 +++++++++++++++++----
 modern/public/logo_back.svg                        |  33 ++++
 modern/src/LoginPage.js                            |   2 +-
 modern/src/SocketController.js                     |   5 +-
 modern/src/components/LoginForm.js                 | 125 ---------------
 modern/src/components/RegisterForm.js              | 122 ---------------
 modern/src/components/ResetPasswordForm.js         |  12 --
 modern/src/components/registration/LoginForm.js    | 125 +++++++++++++++
 modern/src/components/registration/RegisterForm.js | 122 +++++++++++++++
 .../components/registration/ResetPasswordForm.js   |  12 ++
 modern/src/components/reports/ReportNavbar.js      |  34 +++++
 modern/src/components/reports/ReportSidebar.js     |  30 ++++
 modern/src/reports/ReportFilter.js                 |   8 +-
 modern/src/reports/ReportLayoutPage.js             |  87 +++--------
 modern/src/theme/dimensions.js                     |   4 +-
 15 files changed, 531 insertions(+), 360 deletions(-)
 create mode 100644 modern/public/logo_back.svg
 delete mode 100644 modern/src/components/LoginForm.js
 delete mode 100644 modern/src/components/RegisterForm.js
 delete mode 100644 modern/src/components/ResetPasswordForm.js
 create mode 100644 modern/src/components/registration/LoginForm.js
 create mode 100644 modern/src/components/registration/RegisterForm.js
 create mode 100644 modern/src/components/registration/ResetPasswordForm.js
 create mode 100644 modern/src/components/reports/ReportNavbar.js
 create mode 100644 modern/src/components/reports/ReportSidebar.js

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/LoginForm.js
deleted file mode 100644
index d52a51d..0000000
--- a/modern/src/components/LoginForm.js
+++ /dev/null
@@ -1,125 +0,0 @@
-import React, { useState } from 'react';
-import { Grid, useMediaQuery, makeStyles, InputLabel, Select, MenuItem, FormControl, Button, TextField, Link } from '@material-ui/core';
-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 RegisterForm from './RegisterForm';
-import ResetPasswordForm from './ResetPasswordForm';
-
-const useStyles = makeStyles(theme => ({
-  logoContainer: {
-    textAlign: 'center',
-  },
-  resetPassword: {
-    cursor: 'pointer',
-  }
-}));
-
-const forms = {
-  register: () => RegisterForm,
-  resetPassword: () => ResetPasswordForm,
-};
-
-const LoginForm = ({ setCurrentForm }) => {
-
-  const classes = useStyles();
-  const dispatch = useDispatch();
-  const history = useHistory();
-  const theme = useTheme();
-  const matches = useMediaQuery(theme.breakpoints.down('md'));
-
-  const [failed, setFailed] = useState(false);
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const registrationEnabled =  useSelector(state => state.session.server ? state.session.server['registration'] : false);
-
-  const handleEmailChange = (event) => {
-    setEmail(event.target.value);
-  }
-
-  const handlePasswordChange = (event) => {
-    setPassword(event.target.value);
-  }
-
-  const handleLogin = async (event) => {
-    event.preventDefault();
-    const response = await fetch('/api/session', { method: 'POST', body: new URLSearchParams(`email=${email}&password=${password}`) });
-    if (response.ok) {
-      const user = await response.json();
-      dispatch(sessionActions.updateUser(user));
-      history.push('/');
-    } else {
-      setFailed(true);
-      setPassword('');
-    }
-  }
-
-  return (
-    <Grid container direction='column' spacing={3}>
-      <Grid item className={classes.logoContainer}>
-        {matches && <img src='/logo.svg' alt='Traccar' />}
-      </Grid>    
-      <Grid item>
-        <TextField
-          required
-          fullWidth
-          error={failed}
-          label={t('userEmail')}
-          name='email'
-          value={email}
-          autoComplete='email'
-          autoFocus
-          onChange={handleEmailChange}
-          helperText={failed && 'Invalid username or password'}
-          variant='filled' />
-      </Grid>
-      <Grid item>
-        <TextField
-          required
-          fullWidth
-          error={failed}
-          label={t('userPassword')}
-          name='password'
-          value={password}
-          type='password'
-          autoComplete='current-password'
-          onChange={handlePasswordChange}
-          variant='filled' />
-      </Grid>
-      <Grid item>
-        <Button 
-          onClick={handleLogin}
-          variant='contained' 
-          color='secondary'
-          disabled={!email || !password}
-          fullWidth>
-          {t('loginLogin')}
-        </Button>
-      </Grid>
-      <Grid item container>
-        <Grid item>
-          <Button onClick={() => setCurrentForm(forms.register)} disabled={!registrationEnabled} color="secondary">
-            {t('loginRegister')}
-          </Button>
-        </Grid>
-        <Grid item xs>
-          <FormControl variant="filled" fullWidth>
-            <InputLabel>{t('loginLanguage')}</InputLabel>
-            <Select>
-              <MenuItem value="en">English</MenuItem>
-            </Select>
-          </FormControl>
-        </Grid>
-      </Grid>
-      <Grid item container justify="flex-end">
-        <Grid item>
-          <Link onClick={() => setCurrentForm(forms.resetPassword)} className={classes.resetPassword} underline="none">{t('loginReset')}</Link>              
-        </Grid>
-      </Grid>            
-    </Grid>
-  )
-}
-
-export default LoginForm;
diff --git a/modern/src/components/RegisterForm.js b/modern/src/components/RegisterForm.js
deleted file mode 100644
index 6d013f7..0000000
--- a/modern/src/components/RegisterForm.js
+++ /dev/null
@@ -1,122 +0,0 @@
-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';
-
-const useStyles = makeStyles(theme => ({
-  register: {
-    fontSize: theme.spacing(3),
-    fontWeight: 500
-  },
-  link: {
-    fontSize: theme.spacing(3),
-    fontWeight: 500,
-    marginTop: theme.spacing(0.5),
-    cursor: 'pointer' 
-  }
-}));
-
-const forms = {
-  login: () => LoginForm,
-};
-
-const RegisterForm = ({ setCurrentForm }) => {
-
-  const classes = useStyles();
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [snackbarOpen, setSnackbarOpen] = useState(false);
-
-  const submitDisabled = () => {
-    return !name || !/(.+)@(.+)\.(.{2,})/.test(email) || !password;
-  }
-
-  const handleRegister = async () => {
-    const response = await fetch('/api/users', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({name, email, password})
-    });
-
-    if (response.ok) {
-      setSnackbarOpen(true);
-    } 
-  }
-
-  return (
-    <>
-      <Snackbar
-        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
-        open={snackbarOpen}
-        onClose={() => setCurrentForm(forms.login)}
-        autoHideDuration={6000}
-        message={t('loginCreated')} />    
-      <Grid container direction='column' spacing={3}>
-        <Grid container item>
-          <Grid item>
-            <Typography className={classes.link} color='primary'>
-              <Link onClick={() => setCurrentForm(forms.login)}>
-                <ArrowBackIcon />
-              </Link>
-            </Typography>
-          </Grid>
-          <Grid item xs>
-            <Typography className={classes.register} color='primary'>
-              {t('loginRegister')}
-            </Typography>
-          </Grid>
-        </Grid>
-        <Grid item>
-          <TextField
-            required
-            fullWidth
-            label={t('sharedName')}
-            name='name'
-            value={name || ''}
-            autoComplete='name'
-            autoFocus
-            onChange={event => setName(event.target.value)}
-            variant='filled' />        
-        </Grid>
-        <Grid item>
-          <TextField
-            required
-            fullWidth
-            type='email' 
-            label={t('userEmail')}
-            name='email'
-            value={email || ''}
-            autoComplete='email'
-            onChange={event => setEmail(event.target.value)}
-            variant='filled' />
-        </Grid>
-        <Grid item>
-          <TextField
-            required
-            fullWidth
-            label={t('userPassword')}
-            name='password'
-            value={password || ''}
-            type='password'
-            autoComplete='current-password'
-            onChange={event => setPassword(event.target.value)}
-            variant='filled' />
-        </Grid>
-        <Grid item>
-          <Button
-            variant='contained' 
-            color="secondary" 
-            onClick={handleRegister} 
-            disabled={submitDisabled()}
-            fullWidth>
-              {t('loginRegister')}
-          </Button>
-        </Grid>
-      </Grid>
-    </>
-  )
-}
-
-export default RegisterForm;
diff --git a/modern/src/components/ResetPasswordForm.js b/modern/src/components/ResetPasswordForm.js
deleted file mode 100644
index c268f80..0000000
--- a/modern/src/components/ResetPasswordForm.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-
-const ResetPasswordForm = () => {
-
-  return (
-    <>
-      <div>Reset Password Comming Soon!!!</div>
-    </>
-  )
-}
-
-export default ResetPasswordForm;
diff --git a/modern/src/components/registration/LoginForm.js b/modern/src/components/registration/LoginForm.js
new file mode 100644
index 0000000..6469b31
--- /dev/null
+++ b/modern/src/components/registration/LoginForm.js
@@ -0,0 +1,125 @@
+import React, { useState } from 'react';
+import { Grid, useMediaQuery, makeStyles, InputLabel, Select, MenuItem, FormControl, Button, TextField, Link } from '@material-ui/core';
+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 RegisterForm from './RegisterForm';
+import ResetPasswordForm from './ResetPasswordForm';
+
+const useStyles = makeStyles(theme => ({
+  logoContainer: {
+    textAlign: 'center',
+  },
+  resetPassword: {
+    cursor: 'pointer',
+  }
+}));
+
+const forms = {
+  register: () => RegisterForm,
+  resetPassword: () => ResetPasswordForm,
+};
+
+const LoginForm = ({ setCurrentForm }) => {
+
+  const classes = useStyles();
+  const dispatch = useDispatch();
+  const history = useHistory();
+  const theme = useTheme();
+  const matches = useMediaQuery(theme.breakpoints.down('md'));
+
+  const [failed, setFailed] = useState(false);
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const registrationEnabled =  useSelector(state => state.session.server ? state.session.server['registration'] : false);
+
+  const handleEmailChange = (event) => {
+    setEmail(event.target.value);
+  }
+
+  const handlePasswordChange = (event) => {
+    setPassword(event.target.value);
+  }
+
+  const handleLogin = async (event) => {
+    event.preventDefault();
+    const response = await fetch('/api/session', { method: 'POST', body: new URLSearchParams(`email=${email}&password=${password}`) });
+    if (response.ok) {
+      const user = await response.json();
+      dispatch(sessionActions.updateUser(user));
+      history.push('/');
+    } else {
+      setFailed(true);
+      setPassword('');
+    }
+  }
+
+  return (
+    <Grid container direction='column' spacing={3}>
+      <Grid item className={classes.logoContainer}>
+        {matches && <img src='/logo.svg' alt='Traccar' />}
+      </Grid>    
+      <Grid item>
+        <TextField
+          required
+          fullWidth
+          error={failed}
+          label={t('userEmail')}
+          name='email'
+          value={email}
+          autoComplete='email'
+          autoFocus
+          onChange={handleEmailChange}
+          helperText={failed && 'Invalid username or password'}
+          variant='filled' />
+      </Grid>
+      <Grid item>
+        <TextField
+          required
+          fullWidth
+          error={failed}
+          label={t('userPassword')}
+          name='password'
+          value={password}
+          type='password'
+          autoComplete='current-password'
+          onChange={handlePasswordChange}
+          variant='filled' />
+      </Grid>
+      <Grid item>
+        <Button 
+          onClick={handleLogin}
+          variant='contained' 
+          color='secondary'
+          disabled={!email || !password}
+          fullWidth>
+          {t('loginLogin')}
+        </Button>
+      </Grid>
+      <Grid item container>
+        <Grid item>
+          <Button onClick={() => setCurrentForm(forms.register)} disabled={!registrationEnabled} color="secondary">
+            {t('loginRegister')}
+          </Button>
+        </Grid>
+        <Grid item xs>
+          <FormControl variant="filled" fullWidth>
+            <InputLabel>{t('loginLanguage')}</InputLabel>
+            <Select>
+              <MenuItem value="en">English</MenuItem>
+            </Select>
+          </FormControl>
+        </Grid>
+      </Grid>
+      <Grid item container justify="flex-end">
+        <Grid item>
+          <Link onClick={() => setCurrentForm(forms.resetPassword)} className={classes.resetPassword} underline="none">{t('loginReset')}</Link>              
+        </Grid>
+      </Grid>            
+    </Grid>
+  )
+}
+
+export default LoginForm;
diff --git a/modern/src/components/registration/RegisterForm.js b/modern/src/components/registration/RegisterForm.js
new file mode 100644
index 0000000..c2af04b
--- /dev/null
+++ b/modern/src/components/registration/RegisterForm.js
@@ -0,0 +1,122 @@
+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';
+
+const useStyles = makeStyles(theme => ({
+  register: {
+    fontSize: theme.spacing(3),
+    fontWeight: 500
+  },
+  link: {
+    fontSize: theme.spacing(3),
+    fontWeight: 500,
+    marginTop: theme.spacing(0.5),
+    cursor: 'pointer' 
+  }
+}));
+
+const forms = {
+  login: () => LoginForm,
+};
+
+const RegisterForm = ({ setCurrentForm }) => {
+
+  const classes = useStyles();
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [snackbarOpen, setSnackbarOpen] = useState(false);
+
+  const submitDisabled = () => {
+    return !name || !/(.+)@(.+)\.(.{2,})/.test(email) || !password;
+  }
+
+  const handleRegister = async () => {
+    const response = await fetch('/api/users', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({name, email, password})
+    });
+
+    if (response.ok) {
+      setSnackbarOpen(true);
+    } 
+  }
+
+  return (
+    <>
+      <Snackbar
+        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+        open={snackbarOpen}
+        onClose={() => setCurrentForm(forms.login)}
+        autoHideDuration={6000}
+        message={t('loginCreated')} />    
+      <Grid container direction='column' spacing={3}>
+        <Grid container item>
+          <Grid item>
+            <Typography className={classes.link} color='primary'>
+              <Link onClick={() => setCurrentForm(forms.login)}>
+                <ArrowBackIcon />
+              </Link>
+            </Typography>
+          </Grid>
+          <Grid item xs>
+            <Typography className={classes.register} color='primary'>
+              {t('loginRegister')}
+            </Typography>
+          </Grid>
+        </Grid>
+        <Grid item>
+          <TextField
+            required
+            fullWidth
+            label={t('sharedName')}
+            name='name'
+            value={name || ''}
+            autoComplete='name'
+            autoFocus
+            onChange={event => setName(event.target.value)}
+            variant='filled' />        
+        </Grid>
+        <Grid item>
+          <TextField
+            required
+            fullWidth
+            type='email' 
+            label={t('userEmail')}
+            name='email'
+            value={email || ''}
+            autoComplete='email'
+            onChange={event => setEmail(event.target.value)}
+            variant='filled' />
+        </Grid>
+        <Grid item>
+          <TextField
+            required
+            fullWidth
+            label={t('userPassword')}
+            name='password'
+            value={password || ''}
+            type='password'
+            autoComplete='current-password'
+            onChange={event => setPassword(event.target.value)}
+            variant='filled' />
+        </Grid>
+        <Grid item>
+          <Button
+            variant='contained' 
+            color="secondary" 
+            onClick={handleRegister} 
+            disabled={submitDisabled()}
+            fullWidth>
+              {t('loginRegister')}
+          </Button>
+        </Grid>
+      </Grid>
+    </>
+  )
+}
+
+export default RegisterForm;
diff --git a/modern/src/components/registration/ResetPasswordForm.js b/modern/src/components/registration/ResetPasswordForm.js
new file mode 100644
index 0000000..c268f80
--- /dev/null
+++ b/modern/src/components/registration/ResetPasswordForm.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const ResetPasswordForm = () => {
+
+  return (
+    <>
+      <div>Reset Password Comming Soon!!!</div>
+    </>
+  )
+}
+
+export default ResetPasswordForm;
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',
 };
-- 
cgit v1.2.3


From 10b8e1d6f4ed63c43da2cd71bf21f34b31071cd1 Mon Sep 17 00:00:00 2001
From: Ashutosh Bishnoi <mail2bishnoi@gmail.com>
Date: Mon, 24 May 2021 11:25:48 +0530
Subject: Revert to last commit

---
 modern/package.json                    |  1 +
 modern/src/reports/ReportLayoutPage.js | 14 +++++++++-----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/modern/package.json b/modern/package.json
index b796e17..8e5edc6 100644
--- a/modern/package.json
+++ b/modern/package.json
@@ -18,6 +18,7 @@
     "react": "^16.13.1",
     "react-container-dimensions": "^1.4.1",
     "react-dom": "^16.13.1",
+    "react-perfect-scrollbar": "^1.5.8",
     "react-redux": "^7.2.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^3.4.3",
diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayoutPage.js
index fbb8a30..23ac6d7 100644
--- a/modern/src/reports/ReportLayoutPage.js
+++ b/modern/src/reports/ReportLayoutPage.js
@@ -1,7 +1,5 @@
 import React, { useState } from 'react';
-import { AppBar, Toolbar, Typography, List, ListItem, ListItemText, ListItemIcon, Divider, Drawer, makeStyles, IconButton, Hidden } from '@material-ui/core';
-import { useTheme } from "@material-ui/core/styles";
-import MenuIcon from '@material-ui/icons/Menu';
+import { Grid, Box, Typography, Divider, Drawer, makeStyles, IconButton, Hidden } from '@material-ui/core';
 import TimelineIcon from '@material-ui/icons/Timeline';
 import PauseCircleFilledIcon from '@material-ui/icons/PauseCircleFilled';
 import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled';
@@ -102,8 +100,14 @@ const ReportLayoutPage = ({ children, filter }) => {
       </Hidden>
       <div className={classes.content}>
         <div className={classes.toolbar} />
-        {filter}
-        {children}
+        <Grid container direction="column" spacing={2}>
+          <Grid item>{filter}</Grid>
+          <Grid item>
+              <Box sx={{ minWidth: 1050 }}>
+                {children}
+              </Box>
+          </Grid>
+        </Grid>
       </div>      
     </div>
   );
-- 
cgit v1.2.3


From 81ad6a0e5c8ed4f35ccac0cd271b8923e686c060 Mon Sep 17 00:00:00 2001
From: Ashutosh Bishnoi <mail2bishnoi@gmail.com>
Date: Mon, 24 May 2021 14:47:57 +0530
Subject: Resolved some comments on the reports

---
 modern/package.json                            |   3 +-
 modern/public/logo.svg                         | 170 +++++--------------------
 modern/public/logo_back.svg                    |  33 -----
 modern/src/MainToolbar.js                      |  51 +-------
 modern/src/components/reports/ReportNavbar.js  |  16 +--
 modern/src/components/reports/ReportSidebar.js |   9 +-
 modern/src/reports/ChartReportPage.js          |  16 +--
 modern/src/reports/Graph.js                    |  28 ++--
 modern/src/reports/ReportLayoutPage.js         |  14 +-
 9 files changed, 67 insertions(+), 273 deletions(-)
 delete mode 100644 modern/public/logo_back.svg

diff --git a/modern/package.json b/modern/package.json
index 8e5edc6..6902d37 100644
--- a/modern/package.json
+++ b/modern/package.json
@@ -18,11 +18,10 @@
     "react": "^16.13.1",
     "react-container-dimensions": "^1.4.1",
     "react-dom": "^16.13.1",
-    "react-perfect-scrollbar": "^1.5.8",
     "react-redux": "^7.2.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^3.4.3",
-    "recharts": "^1.8.5",
+    "recharts": "^2.0.9",
     "redux": "^4.0.5",
     "typeface-roboto": "0.0.75",
     "wellknown": "^0.5.0"
diff --git a/modern/public/logo.svg b/modern/public/logo.svg
index c2ed83b..008b46d 100644
--- a/modern/public/logo.svg
+++ b/modern/public/logo.svg
@@ -1,145 +1,33 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<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>
+<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/public/logo_back.svg b/modern/public/logo_back.svg
deleted file mode 100644
index 008b46d..0000000
--- a/modern/public/logo_back.svg
+++ /dev/null
@@ -1,33 +0,0 @@
-<?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/MainToolbar.js b/modern/src/MainToolbar.js
index 702a7e5..63d8efe 100644
--- a/modern/src/MainToolbar.js
+++ b/modern/src/MainToolbar.js
@@ -22,12 +22,7 @@ import PeopleIcon from '@material-ui/icons/People';
 import StorageIcon from '@material-ui/icons/Storage';
 import PersonIcon from '@material-ui/icons/Person';
 import NotificationsIcon from '@material-ui/icons/Notifications';
-import TimelineIcon from '@material-ui/icons/Timeline';
-import PauseCircleFilledIcon from '@material-ui/icons/PauseCircleFilled';
-import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled';
-import NotificationsActiveIcon from '@material-ui/icons/NotificationsActive';
-import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted';
-import TrendingUpIcon from '@material-ui/icons/TrendingUp';
+import DescriptionIcon from '@material-ui/icons/Description';
 import FolderIcon from '@material-ui/icons/Folder';
 import ReplayIcon from '@material-ui/icons/Replay';
 import BuildIcon from '@material-ui/icons/Build';
@@ -104,50 +99,12 @@ const MainToolbar = () => {
               </ListItemIcon>
               <ListItemText primary={t('reportReplay')} />
             </ListItem>
-          </List>
-          <Divider />
-          <List
-            subheader={
-              <ListSubheader>
-                {t('reportTitle')}
-              </ListSubheader>
-            }>
             <ListItem button onClick={() => history.push('/reports/route')}>
               <ListItemIcon>
-                <TimelineIcon />
-              </ListItemIcon>
-              <ListItemText primary={t('reportRoute')} />
-            </ListItem>
-            <ListItem button onClick={() => history.push('/reports/event')}>
-              <ListItemIcon>
-                <NotificationsActiveIcon />
+                <DescriptionIcon />
               </ListItemIcon>
-              <ListItemText primary={t('reportEvents')} />
-            </ListItem>
-            <ListItem button onClick={() => history.push('/reports/trip')}>
-              <ListItemIcon>
-                <PlayCircleFilledIcon />
-              </ListItemIcon>
-              <ListItemText primary={t('reportTrips')} />
-            </ListItem>
-            <ListItem button onClick={() => history.push('/reports/stop')}>
-              <ListItemIcon>
-                <PauseCircleFilledIcon />
-              </ListItemIcon>
-              <ListItemText primary={t('reportStops')} />
-            </ListItem>
-            <ListItem button onClick={() => history.push('/reports/summary')}>
-              <ListItemIcon>
-                <FormatListBulletedIcon />
-              </ListItemIcon>
-              <ListItemText primary={t('reportSummary')} />
-            </ListItem>
-            <ListItem button onClick={() => history.push('/reports/chart')}>
-              <ListItemIcon>
-                <TrendingUpIcon />
-              </ListItemIcon>
-              <ListItemText primary={t('reportChart')} />
-            </ListItem>
+              <ListItemText primary={t('reportTitle')} />
+            </ListItem>            
           </List>
           <Divider />
           <List
diff --git a/modern/src/components/reports/ReportNavbar.js b/modern/src/components/reports/ReportNavbar.js
index 93c01a0..674db3a 100644
--- a/modern/src/components/reports/ReportNavbar.js
+++ b/modern/src/components/reports/ReportNavbar.js
@@ -1,16 +1,9 @@
 import React from 'react';
-import { AppBar, Toolbar, Typography, List, ListItem, ListItemText, ListItemIcon, Divider, Drawer, makeStyles, IconButton, Hidden } from '@material-ui/core';
-
+import { AppBar, Toolbar, Typography, IconButton } 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();
+const ReportNavbar = ({ openDrawer, setOpenDrawer }) => {
 
   return (
     <AppBar position="fixed" color="inherit">
@@ -19,12 +12,11 @@ const ReportNavbar = ({ openDrawer, setOpenDrawer, reportName }) => {
           color="inherit"
           aria-label="open drawer"
           edge="start"
-          onClick={() => setOpenDrawer(!openDrawer)}
-          className={classes.menuButton}>
+          onClick={() => setOpenDrawer(!openDrawer)}>
           <MenuIcon />
         </IconButton>
         <Typography variant="h6" noWrap>
-          {t('reportTitle')} / {reportName}
+          {t('reportTitle')}
         </Typography>        
       </Toolbar>
     </AppBar> 
diff --git a/modern/src/components/reports/ReportSidebar.js b/modern/src/components/reports/ReportSidebar.js
index e42c36e..a71ac4b 100644
--- a/modern/src/components/reports/ReportSidebar.js
+++ b/modern/src/components/reports/ReportSidebar.js
@@ -1,8 +1,8 @@
 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';
+import { List, ListItem, ListItemText, ListItemIcon } from '@material-ui/core';
+import { Link, useLocation } from 'react-router-dom';
 
-const ReportNavbar = ({ routes, setReportName }) => {
+const ReportNavbar = ({ routes }) => {
 
   const location = useLocation();
 
@@ -15,8 +15,7 @@ const ReportNavbar = ({ routes, setReportName }) => {
           key={`${route}${index}`}
           button
           to={route.href}
-          selected={route.href === location.pathname}
-          onClick={() =>  setReportName(route.name)}>
+          selected={route.href === location.pathname}>
           <ListItemIcon>
             {route.icon}
           </ListItemIcon>
diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js
index c75c9b7..0a5c8e1 100644
--- a/modern/src/reports/ChartReportPage.js
+++ b/modern/src/reports/ChartReportPage.js
@@ -61,15 +61,13 @@ const ChartReportPage = () => {
   const [type, setType] = useState('speed');
 
   return (
-    <>
-      <ReportLayoutPage filter={ 
-        <Filter setItems={setItems}>
-          <ChartType type={type} setType={setType} />
-        </Filter>
-      }>
-        <Graph items={items} type={type} />
-      </ReportLayoutPage>
-    </>
+    <ReportLayoutPage filter={ 
+      <Filter setItems={setItems}>
+        <ChartType type={type} setType={setType} />
+      </Filter>
+    }>
+      <Graph items={items} type={type} />
+    </ReportLayoutPage>
   )
 }
 
diff --git a/modern/src/reports/Graph.js b/modern/src/reports/Graph.js
index af54e10..b785e06 100644
--- a/modern/src/reports/Graph.js
+++ b/modern/src/reports/Graph.js
@@ -3,6 +3,10 @@ import { Box, Paper } from '@material-ui/core';
 import {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
 
 const CustomizedAxisTick = ({ x, y, payload }) =>{
+  console.log('inside customized tick ', payload.value)
+  if(!payload.value) {
+    return payload.value;
+  }
   const parts = payload.value.split(' ');
   return (
     <g transform={`translate(${x},${y})`}>
@@ -15,20 +19,16 @@ const CustomizedAxisTick = ({ x, y, payload }) =>{
 const Graph = ({ type, items }) => {
 
   return (
-    <Paper>
-      <Box height={400}>
-        <ResponsiveContainer>
-          <LineChart data={items}>
-            <XAxis dataKey="fixTime" tick={<CustomizedAxisTick/>} height={60} />
-            <YAxis />
-            <CartesianGrid strokeDasharray="3 3" />
-            <Tooltip />
-            <Legend />
-            <Line type="natural" dataKey={type} />
-          </LineChart>
-        </ResponsiveContainer>
-      </Box>
-    </Paper>
+    <ResponsiveContainer height={400} width={500}>
+      <LineChart data={items}>
+        <XAxis dataKey="fixTime" tick={<CustomizedAxisTick/>} height={60} />
+        <YAxis />
+        <CartesianGrid strokeDasharray="3 3" />
+        <Tooltip />
+        <Legend />
+        <Line type="natural" dataKey={type} />
+      </LineChart>
+    </ResponsiveContainer>
   );
 }
 
diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayoutPage.js
index 23ac6d7..ed7fe54 100644
--- a/modern/src/reports/ReportLayoutPage.js
+++ b/modern/src/reports/ReportLayoutPage.js
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import { Grid, Box, Typography, Divider, Drawer, makeStyles, IconButton, Hidden } from '@material-ui/core';
+import { useHistory } from 'react-router-dom';
+import { Grid, Typography, Divider, Drawer, makeStyles, IconButton, Hidden } from '@material-ui/core';
 import TimelineIcon from '@material-ui/icons/Timeline';
 import PauseCircleFilledIcon from '@material-ui/icons/PauseCircleFilled';
 import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled';
@@ -10,9 +11,6 @@ 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';
 
 const useStyles = makeStyles(theme => ({
@@ -60,7 +58,7 @@ const routes = [
   { name: t('reportChart'), href: '/reports/chart', icon: <TrendingUpIcon /> },
 ];
 
-const ReportLayoutPage = ({ children, filter }) => {
+const ReportLayoutPage = ({ children, filter, }) => {
   const classes = useStyles();
   const history = useHistory();
   const [openDrawer, setOpenDrawer] = useState(false);
@@ -102,11 +100,7 @@ const ReportLayoutPage = ({ children, filter }) => {
         <div className={classes.toolbar} />
         <Grid container direction="column" spacing={2}>
           <Grid item>{filter}</Grid>
-          <Grid item>
-              <Box sx={{ minWidth: 1050 }}>
-                {children}
-              </Box>
-          </Grid>
+          <Grid item>{children}</Grid>
         </Grid>
       </div>      
     </div>
-- 
cgit v1.2.3


From 402b30df63f6dfafda32ae37aa2d4df9ef638fd2 Mon Sep 17 00:00:00 2001
From: Ashutosh Bishnoi <mail2bishnoi@gmail.com>
Date: Tue, 25 May 2021 10:54:25 +0530
Subject: Added Report Title For Mobile and Tablet view

---
 modern/src/components/reports/ReportNavbar.js |  4 ++--
 modern/src/reports/ReportLayoutPage.js        | 20 +++++++++++++++++---
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/modern/src/components/reports/ReportNavbar.js b/modern/src/components/reports/ReportNavbar.js
index 674db3a..3167c75 100644
--- a/modern/src/components/reports/ReportNavbar.js
+++ b/modern/src/components/reports/ReportNavbar.js
@@ -3,7 +3,7 @@ import { AppBar, Toolbar, Typography, IconButton } from '@material-ui/core';
 import MenuIcon from '@material-ui/icons/Menu';
 import t from '../../common/localization';
 
-const ReportNavbar = ({ openDrawer, setOpenDrawer }) => {
+const ReportNavbar = ({ openDrawer, setOpenDrawer, reportTitle }) => {
 
   return (
     <AppBar position="fixed" color="inherit">
@@ -16,7 +16,7 @@ const ReportNavbar = ({ openDrawer, setOpenDrawer }) => {
           <MenuIcon />
         </IconButton>
         <Typography variant="h6" noWrap>
-          {t('reportTitle')}
+          {t('reportTitle')} {reportTitle ? `/ ${reportTitle}` : ''}
         </Typography>        
       </Toolbar>
     </AppBar> 
diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayoutPage.js
index ed7fe54..4280400 100644
--- a/modern/src/reports/ReportLayoutPage.js
+++ b/modern/src/reports/ReportLayoutPage.js
@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import React, { useState, useEffect } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
 import { Grid, Typography, Divider, Drawer, makeStyles, IconButton, Hidden } from '@material-ui/core';
 import TimelineIcon from '@material-ui/icons/Timeline';
 import PauseCircleFilledIcon from '@material-ui/icons/PauseCircleFilled';
@@ -61,12 +61,26 @@ const routes = [
 const ReportLayoutPage = ({ children, filter, }) => {
   const classes = useStyles();
   const history = useHistory();
+  const location = useLocation();
   const [openDrawer, setOpenDrawer] = useState(false);
+  const [reportTitle, setReportTitle] = useState();
+
+  useEffect(() => {
+    routes.forEach(route => {
+      switch (location.pathname) {
+        case `${route.href}`:
+          setReportTitle(route.name);
+          break;
+        default:
+          break;
+      }
+    });
+  }, []);
 
   return (
     <div className={classes.root}>
       <Hidden only={['lg', 'xl']}>
-        <ReportNavbar openDrawer={openDrawer} setOpenDrawer={setOpenDrawer} />
+        <ReportNavbar openDrawer={openDrawer} setOpenDrawer={setOpenDrawer} reportTitle={reportTitle} />
         <Drawer
           variant="temporary"
           open={openDrawer}
-- 
cgit v1.2.3


From 8e1bddcc608ba4e52699c30084f5ef950bd7e329 Mon Sep 17 00:00:00 2001
From: Ashutosh Bishnoi <mail2bishnoi@gmail.com>
Date: Mon, 31 May 2021 14:17:13 +0530
Subject: Finalizing reports implemetations

---
 modern/src/components/reports/ReportSidebar.js |  2 +-
 modern/src/reports/EventReportPage.js          | 14 +++++++------
 modern/src/reports/Graph.js                    |  7 +++----
 modern/src/reports/ReportFilter.js             | 15 +++++++++++--
 modern/src/reports/RouteReportPage.js          | 20 ++++++++++--------
 modern/src/reports/StopReportPage.js           | 19 ++++++++++-------
 modern/src/reports/SummaryReportPage.js        | 21 +++++++++++--------
 modern/src/reports/TripReportPage.js           | 29 ++++++++++++++------------
 modern/src/theme/dimensions.js                 |  4 ++++
 9 files changed, 79 insertions(+), 52 deletions(-)

diff --git a/modern/src/components/reports/ReportSidebar.js b/modern/src/components/reports/ReportSidebar.js
index a71ac4b..2d4c47c 100644
--- a/modern/src/components/reports/ReportSidebar.js
+++ b/modern/src/components/reports/ReportSidebar.js
@@ -7,7 +7,7 @@ const ReportNavbar = ({ routes }) => {
   const location = useLocation();
 
   return (
-    <List disablePadding>
+    <List disablePadding style={{paddingTop: '16px'}}>
       {routes.map((route, index) => (
         <ListItem
           disableRipple
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js
index b20984f..8b21769 100644
--- a/modern/src/reports/EventReportPage.js
+++ b/modern/src/reports/EventReportPage.js
@@ -1,12 +1,13 @@
 import React, { useState } from 'react';
 import { DataGrid } from '@material-ui/data-grid';
 import { Grid, FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
-import t from '../common/localization';
+import { useTheme } from "@material-ui/core/styles";
+import { useSelector } from 'react-redux';
 import { formatDate } from '../common/formatter';
 import ReportFilter from './ReportFilter';
 import ReportLayoutPage from './ReportLayoutPage';
 import { prefixString } from '../common/stringUtils';
-import { useSelector } from 'react-redux';
+import t from '../common/localization';
 
 const Filter = ({ setItems }) => {
 
@@ -61,6 +62,7 @@ const Filter = ({ setItems }) => {
 
 const EventReportPage = () => {
 
+  const theme = useTheme();
   const geofences = useSelector(state => state.geofences.items);
   const [items, setItems] = useState([]);
 
@@ -76,24 +78,24 @@ const EventReportPage = () => {
     headerName: t('positionFixTime'),
     field: 'serverTime',
     type: 'dateTime',
-    flex: 1,
+    width: theme.dimensions.dateColumnWidth,
     valueFormatter: ({ value }) => formatDate(value),
   }, {
     headerName: t('sharedType'),
     field: 'type',
     type: 'string',
-    flex:1,
+    width: theme.dimensions.stringColumnWidth,
     valueFormatter: ({ value }) => t(prefixString('event', value)),
   }, {
     headerName: t('sharedGeofence'),
     field: 'geofenceId',
-    flex: 1,
+    width: theme.dimensions.stringColumnWidth,
     valueFormatter: ({ value }) => formatGeofence(value),
   }, {
     headerName: t('sharedMaintenance'),
     field: 'maintenanceId',
     type: 'number',
-    flex: 1
+    width: theme.dimensions.stringColumnWidth,
   }];
 
   return (
diff --git a/modern/src/reports/Graph.js b/modern/src/reports/Graph.js
index b785e06..990eb5d 100644
--- a/modern/src/reports/Graph.js
+++ b/modern/src/reports/Graph.js
@@ -1,9 +1,8 @@
 import React from 'react';
-import { Box, Paper } from '@material-ui/core';
+import { withWidth } from '@material-ui/core';
 import {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
 
 const CustomizedAxisTick = ({ x, y, payload }) =>{
-  console.log('inside customized tick ', payload.value)
   if(!payload.value) {
     return payload.value;
   }
@@ -19,7 +18,7 @@ const CustomizedAxisTick = ({ x, y, payload }) =>{
 const Graph = ({ type, items }) => {
 
   return (
-    <ResponsiveContainer height={400} width={500}>
+    <ResponsiveContainer height={400} width="100%" debounce={1}>
       <LineChart data={items}>
         <XAxis dataKey="fixTime" tick={<CustomizedAxisTick/>} height={60} />
         <YAxis />
@@ -32,4 +31,4 @@ const Graph = ({ type, items }) => {
   );
 }
 
-export default Graph;
+export default withWidth()(Graph);
diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js
index 0e5ab69..c7835e7 100644
--- a/modern/src/reports/ReportFilter.js
+++ b/modern/src/reports/ReportFilter.js
@@ -1,11 +1,22 @@
 import React, { useState } from 'react';
-import { FormControl, InputLabel, Select, MenuItem, Button, TextField, Grid, Typography } from '@material-ui/core';
+import { FormControl, InputLabel, Select, MenuItem, Button, TextField, Grid, Typography, makeStyles } from '@material-ui/core';
 import { useSelector } from 'react-redux';
 import moment from 'moment';
 import t from '../common/localization';
 
+const useStyles = makeStyles(theme => ({
+  gridContainer: {
+    margin: theme.spacing(0, -1),
+    '& > .MuiGrid-item': {
+      padding: theme.spacing(1.5, 1)
+    }
+  } 
+}));
+
 const ReportFilter = ({ children, handleSubmit, showOnly }) => {
 
+  const classes = useStyles();
+
   const devices = useSelector(state => Object.values(state.devices.items));
   const [deviceId, setDeviceId] = useState();
   const [period, setPeriod] = useState('today');
@@ -57,7 +68,7 @@ const ReportFilter = ({ children, handleSubmit, showOnly }) => {
   }
 
   return (
-    <Grid container spacing={3}>
+    <Grid container spacing={2} className={classes.gridContainer}>
       <Grid item xs={12} sm={period === 'custom' ? 3 : 6}>
         <FormControl variant="filled" fullWidth>
           <InputLabel>{t('reportDevice')}</InputLabel>
diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js
index 02d41a2..6befa47 100644
--- a/modern/src/reports/RouteReportPage.js
+++ b/modern/src/reports/RouteReportPage.js
@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
+import { Paper } from '@material-ui/core';
 import { DataGrid } from '@material-ui/data-grid';
-import t from '../common/localization';
+import { useTheme } from "@material-ui/core/styles";
 import { formatDistance, formatSpeed, formatBoolean, formatDate, formatCoordinate } from '../common/formatter';
 import ReportFilter from './ReportFilter';
 import ReportLayoutPage from './ReportLayoutPage';
 import { useAttributePreference, usePreference } from '../common/preferences';
-import { Paper } from '@material-ui/core';
+import t from '../common/localization';
 
 const Filter = ({ setItems }) => {
 
@@ -31,41 +32,42 @@ const RouteReportPage = () => {
   const distanceUnit = useAttributePreference('distanceUnit');
   const speedUnit = useAttributePreference('speedUnit');
   const coordinateFormat = usePreference('coordinateFormat');
+  const theme = useTheme();
 
   const columns = [{
     headerName: t('positionFixTime'),
     field: 'fixTime',
     type: 'dateTime',
-    flex: 1,
+    width: theme.dimensions.dateColumnWidth,
     valueFormatter: ({ value }) => formatDate(value),
   }, {
     headerName: t('positionLatitude'),
     field: 'latitude',
     type: 'number',
-    flex: 1,
+    width: theme.dimensions.numberColumnWidth,
     valueFormatter: ({ value }) => formatCoordinate('latitude', value, coordinateFormat),
   }, {
     headerName: t('positionLongitude'),
     field: 'longitude',
     type: 'number',
-    flex: 1,
+    width: theme.dimensions.numberColumnWidth,
     valueFormatter: ({ value }) => formatCoordinate('longitude', value, coordinateFormat),
   }, {
     headerName: t('positionSpeed'),
     field: 'speed',
     type: 'number',
-    flex: 1,
+    width: theme.dimensions.stringColumnWidth,
     valueFormatter: ({ value }) => formatSpeed(value, speedUnit),
   }, {
     headerName: t('positionAddress'),
     field: 'address',
     type: 'string',
-    flex: 1,
+    width: theme.dimensions.stringColumnWidth,
   }, {
     headerName: t('positionIgnition'),
     field: 'ignition',
     type: 'boolean',
-    flex: 1,
+    width: theme.dimensions.booleanColumnWidth,
     valueGetter: ({ row }) => row.attributes.ignition,
     valueFormatter: ({ value }) => formatBoolean(value),
   }, {
@@ -73,7 +75,7 @@ const RouteReportPage = () => {
     field: 'totalDistance',
     type: 'number',
     hide: true,
-    flex: 1,
+    width: theme.dimensions.numberColumnWidth,
     valueGetter: ({ row }) => row.attributes.totalDistance,
     valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
   }]
diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js
index 7873151..d572742 100644
--- a/modern/src/reports/StopReportPage.js
+++ b/modern/src/reports/StopReportPage.js
@@ -1,10 +1,11 @@
 import React, { useState } from 'react';
 import { DataGrid } from '@material-ui/data-grid';
-import t from '../common/localization';
+import { useTheme } from "@material-ui/core/styles";
 import { formatDistance, formatHours, formatDate, formatVolume } from '../common/formatter';
 import ReportFilter from './ReportFilter';
 import ReportLayoutPage from './ReportLayoutPage';
 import { useAttributePreference } from '../common/preferences';
+import t from '../common/localization';
 
 const Filter = ({ setItems }) => {
 
@@ -28,6 +29,8 @@ const Filter = ({ setItems }) => {
 
 const StopReportPage = () => {
 
+  const theme = useTheme();
+
   const distanceUnit = useAttributePreference('distanceUnit');
   const volumeUnit = useAttributePreference('volumeUnit');
 
@@ -37,43 +40,43 @@ const StopReportPage = () => {
     headerName: t('reportStartTime'),
     field: 'startTime',
     type: 'dateTime',
-    flex: 1,
+    width: theme.dimensions.dateColumnWidth,
     valueFormatter: ({ value }) => formatDate(value), 
   }, {
     headerName: t('positionOdometer'),
     field: 'startOdometer',
     type: 'number',
-    flex: 1,
+    width: theme.dimensions.numberColumnWidth,
     valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
   }, {
     headerName: t('positionAddress'),
     field: 'address',
     type: 'string',
     hide: true,
-    flex: 1,    
+    width: theme.dimensions.stringColumnWidth,    
   }, {
     headerName: t('reportEndTime'),
     field: 'endTime',
     type: 'dateTime',
-    flex: 1,
+    width: theme.dimensions.dateColumnWidth,
     valueFormatter: ({ value }) => formatDate(value),
   }, {
     headerName: t('reportDuration'),
     field: 'duration',
     type: 'string',
-    flex: 1,
+    width: theme.dimensions.stringColumnWidth,
     valueFormatter: ({ value }) => formatHours(value),
   }, {
     headerName: t('reportEngineHours'),
     field: 'engineHours',
     type: 'string',
-    flex: 1,
+    width: theme.dimensions.stringColumnWidth,
     valueFormatter: ({ value }) => formatHours(value),
   }, {
     headerName: t('reportSpentFuel'),
     field: 'spentFuel',
     type: 'number',
-    flex: 1,
+    width: theme.dimensions.numberColumnWidth,
     hide: true,
     valueFormatter: ({ value }) => formatVolume(value, volumeUnit),    
   }]
diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js
index f63f50b..a2392f2 100644
--- a/modern/src/reports/SummaryReportPage.js
+++ b/modern/src/reports/SummaryReportPage.js
@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
 import { DataGrid } from '@material-ui/data-grid';
 import { Grid, FormControlLabel, Checkbox } from '@material-ui/core';
-import t from '../common/localization';
+import { useTheme } from "@material-ui/core/styles";
 import { formatDistance, formatHours, formatDate, formatSpeed, formatVolume } from '../common/formatter';
 import ReportFilter from './ReportFilter';
 import ReportLayoutPage from './ReportLayoutPage';
 import { useAttributePreference } from '../common/preferences';
+import t from '../common/localization';
 
 const Filter = ({ setItems }) => {
 
@@ -39,6 +40,8 @@ const Filter = ({ setItems }) => {
 
 const SummaryReportPage = () => {
 
+  const theme = useTheme();
+
   const distanceUnit = useAttributePreference('distanceUnit');
   const speedUnit = useAttributePreference('speedUnit');
   const volumeUnit = useAttributePreference('volumeUnit');
@@ -49,49 +52,49 @@ const SummaryReportPage = () => {
     headerName: t('reportStartDate'),
     field: 'startTime',
     type: 'dateTime',
-    flex: 1,
+    width: theme.dimensions.dateColumnWidth,
     valueFormatter: ({ value }) => formatDate(value, 'YYYY-MM-DD'),
   }, {
     headerName: t('sharedDistance'),
     field: 'distance',
     type: 'number',
-    flex: 1,
+    width: theme.dimensions.numberColumnWidth,
     valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
   }, {
     headerName: t('reportStartOdometer'),
     field: 'startOdometer',
     type: 'number',
-    flex: 1,
+    width: theme.dimensions.numberColumnWidth,
     valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
   }, {
     headerName: t('reportEndOdometer'),
     field: 'endOdometer',
     type: 'number',
-    flex: 1,
+    width: theme.dimensions.numberColumnWidth,
     valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
   }, {
     headerName: t('reportAverageSpeed'),
     field: 'averageSpeed',
     type: 'number',
-    flex: 1,
+    width: theme.dimensions.numberColumnWidth,
     valueFormatter: ({ value }) => formatSpeed(value, speedUnit),
   }, {
     headerName: t('reportMaximumSpeed'),
     field: 'maxSpeed',
     type: 'number',
-    flex: 1,
+    width: theme.dimensions.numberColumnWidth,
     valueFormatter: ({ value }) => formatSpeed(value, speedUnit),
   }, {
     headerName: t('reportEngineHours'),
     field: 'engineHours',
     type: 'string',
-    flex: 1,
+    width: theme.dimensions.numberColumnWidth,
     valueFormatter: ({ value }) => formatHours(value),
   }, {
     headerName: t('reportSpentFuel'),
     field: 'spentFuel',
     type: 'number',
-    flex: 1,
+    width: theme.dimensions.numberColumnWidth,
     hide: true,
     valueFormatter: ({ value }) => formatVolume(value, volumeUnit),                
   }]
diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js
index 45a7786..ab5f449 100644
--- a/modern/src/reports/TripReportPage.js
+++ b/modern/src/reports/TripReportPage.js
@@ -1,10 +1,11 @@
 import React, { useState } from 'react';
 import { DataGrid } from '@material-ui/data-grid';
-import t from '../common/localization';
+import { useTheme } from "@material-ui/core/styles";
 import { formatDistance, formatSpeed, formatHours, formatDate, formatVolume } from '../common/formatter';
 import ReportFilter from './ReportFilter';
 import ReportLayoutPage from './ReportLayoutPage';
 import { useAttributePreference } from '../common/preferences';
+import t from '../common/localization';
 
 const Filter = ({ setItems }) => {
 
@@ -27,6 +28,8 @@ const Filter = ({ setItems }) => {
 }
 
 const TripReportPage = () => {
+
+  const theme = useTheme();
   
   const distanceUnit = useAttributePreference('distanceUnit');
   const speedUnit = useAttributePreference('speedUnit');
@@ -38,74 +41,74 @@ const TripReportPage = () => {
     headerName: t('reportStartTime'),
     field: 'startTime',
     type: 'dateTime',
-    flex: 1,
+    width: theme.dimensions.dateColumnWidth,
     valueFormatter: ({ value }) => formatDate(value),
   }, {
     headerName: t('reportStartOdometer'),
     field: 'startOdometer',
     type: 'number',
-    flex: 1,
+    width: theme.dimensions.numberColumnWidth,
     valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
   }, {
     headerName: t('reportStartAddress'),
     field: 'startAddress',
     type: 'string',
     hide: true,
-    flex: 1,
+    width: theme.dimensions.stringColumnWidth,
   }, {
     headerName: t('reportEndTime'),
     field: 'endTime',
     type: 'dateTime',
-    flex: 1,
+    width: theme.dimensions.dateColumnWidth,
     valueFormatter: ({ value }) => formatDate(value),
   }, {
     headerName: t('reportEndOdometer'),
     field: 'endOdometer',
     type: 'number',
-    flex: 1,
+    width: theme.dimensions.numberColumnWidth,
     valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
   }, {
     headerName: t('reportEndAddress'),
     field: 'endAddress',
     type: 'string',
     hide: true,
-    flex: 1,
+    width: theme.dimensions.stringColumnWidth,
   }, {
     headerName: t('sharedDistance'),
     field: 'distance',
     type: 'number',
-    flex: 1,
+    width: theme.dimensions.numberColumnWidth,
     valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
   }, {
     headerName: t('reportAverageSpeed'),
     field: 'averageSpeed',
     type: 'number',
-    flex: 1,
+    width: theme.dimensions.numberColumnWidth,
     valueFormatter: ({ value }) => formatSpeed(value, speedUnit),
   }, {
     headerName: t('reportMaximumSpeed'),
     field: 'maxSpeed',
     type: 'number',
-    flex: 1,
+    width: theme.dimensions.numberColumnWidth,
     valueFormatter: ({ value }) => formatSpeed(value, speedUnit),
   }, {
     headerName: t('reportDuration'),
     field: 'duration',
     type: 'string',
-    flex: 1,
+    width: theme.dimensions.stringColumnWidth,
     valueFormatter: ({ value }) => formatHours(value),
   }, {
     headerName: t('reportSpentFuel'),
     field: 'spentFuel',
     type: 'number',
-    flex: 1,
+    width: theme.dimensions.numberColumnWidth,
     hide: true,
     valueFormatter: ({ value }) => formatVolume(value, volumeUnit),
   }, {
     headerName: t('sharedDriver'),
     field: 'driverName',
     type: 'string',
-    flex: 1,
+    width: theme.dimensions.stringColumnWidth,
     hide: true                                        
   }]
 
diff --git a/modern/src/theme/dimensions.js b/modern/src/theme/dimensions.js
index 16e6aad..ebb393b 100644
--- a/modern/src/theme/dimensions.js
+++ b/modern/src/theme/dimensions.js
@@ -5,4 +5,8 @@ export default {
   tabletSidebarWidth: '52px',
   desktopDrawerWidth: '360px',
   tabletDrawerWidth: '320px',
+  dateColumnWidth: 160,
+  numberColumnWidth: 130,
+  stringColumnWidth: 160,
+  booleanColumnWidth: 130
 };
-- 
cgit v1.2.3


From b897b8027613ca1fc65d87c70a55860cfd339583 Mon Sep 17 00:00:00 2001
From: Ashutosh Bishnoi <mail2bishnoi@gmail.com>
Date: Fri, 11 Jun 2021 11:51:26 +0530
Subject: Fixing issues in report implementations

---
 modern/src/SocketController.js                 |  1 -
 modern/src/components/reports/ReportNavbar.js  |  6 ++--
 modern/src/components/reports/ReportSidebar.js |  4 +--
 modern/src/reports/EventReportPage.js          |  8 +++---
 modern/src/reports/ReportFilter.js             | 40 +++++++++++++-------------
 modern/src/reports/ReportLayoutPage.js         |  8 +++---
 modern/src/reports/RouteReportPage.js          | 14 ++++-----
 modern/src/reports/StopReportPage.js           | 14 ++++-----
 modern/src/reports/SummaryReportPage.js        | 16 +++++------
 modern/src/reports/TripReportPage.js           | 24 ++++++++--------
 modern/src/theme/dimensions.js                 | 14 ++++-----
 11 files changed, 74 insertions(+), 75 deletions(-)

diff --git a/modern/src/SocketController.js b/modern/src/SocketController.js
index 9ce4ab2..c100df1 100644
--- a/modern/src/SocketController.js
+++ b/modern/src/SocketController.js
@@ -38,7 +38,6 @@ const SocketController = () => {
 
     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/reports/ReportNavbar.js b/modern/src/components/reports/ReportNavbar.js
index 3167c75..ac01fad 100644
--- a/modern/src/components/reports/ReportNavbar.js
+++ b/modern/src/components/reports/ReportNavbar.js
@@ -3,7 +3,7 @@ import { AppBar, Toolbar, Typography, IconButton } from '@material-ui/core';
 import MenuIcon from '@material-ui/icons/Menu';
 import t from '../../common/localization';
 
-const ReportNavbar = ({ openDrawer, setOpenDrawer, reportTitle }) => {
+const ReportNavbar = ({ setOpenDrawer, reportTitle }) => {
 
   return (
     <AppBar position="fixed" color="inherit">
@@ -12,11 +12,11 @@ const ReportNavbar = ({ openDrawer, setOpenDrawer, reportTitle }) => {
           color="inherit"
           aria-label="open drawer"
           edge="start"
-          onClick={() => setOpenDrawer(!openDrawer)}>
+          onClick={() => setOpenDrawer(true)}>
           <MenuIcon />
         </IconButton>
         <Typography variant="h6" noWrap>
-          {t('reportTitle')} {reportTitle ? `/ ${reportTitle}` : ''}
+          {t('reportTitle')} {` / ${reportTitle}`}
         </Typography>        
       </Toolbar>
     </AppBar> 
diff --git a/modern/src/components/reports/ReportSidebar.js b/modern/src/components/reports/ReportSidebar.js
index 2d4c47c..90e20c0 100644
--- a/modern/src/components/reports/ReportSidebar.js
+++ b/modern/src/components/reports/ReportSidebar.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { List, ListItem, ListItemText, ListItemIcon } from '@material-ui/core';
 import { Link, useLocation } from 'react-router-dom';
 
-const ReportNavbar = ({ routes }) => {
+const ReportSidebar = ({ routes }) => {
 
   const location = useLocation();
 
@@ -26,4 +26,4 @@ const ReportNavbar = ({ routes }) => {
   )
 }
 
-export default ReportNavbar;
+export default ReportSidebar;
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js
index 8b21769..6d80860 100644
--- a/modern/src/reports/EventReportPage.js
+++ b/modern/src/reports/EventReportPage.js
@@ -78,24 +78,24 @@ const EventReportPage = () => {
     headerName: t('positionFixTime'),
     field: 'serverTime',
     type: 'dateTime',
-    width: theme.dimensions.dateColumnWidth,
+    width: theme.dimensions.columnWidthDate,
     valueFormatter: ({ value }) => formatDate(value),
   }, {
     headerName: t('sharedType'),
     field: 'type',
     type: 'string',
-    width: theme.dimensions.stringColumnWidth,
+    width: theme.dimensions.columnWidthString,
     valueFormatter: ({ value }) => t(prefixString('event', value)),
   }, {
     headerName: t('sharedGeofence'),
     field: 'geofenceId',
-    width: theme.dimensions.stringColumnWidth,
+    width: theme.dimensions.columnWidthString,
     valueFormatter: ({ value }) => formatGeofence(value),
   }, {
     headerName: t('sharedMaintenance'),
     field: 'maintenanceId',
     type: 'number',
-    width: theme.dimensions.stringColumnWidth,
+    width: theme.dimensions.columnWidthString,
   }];
 
   return (
diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js
index c7835e7..8055d30 100644
--- a/modern/src/reports/ReportFilter.js
+++ b/modern/src/reports/ReportFilter.js
@@ -121,26 +121,26 @@ const ReportFilter = ({ children, handleSubmit, showOnly }) => {
           {t('reportShow')}
         </Button>
       </Grid>
-      <Grid item xs={4} sm={2}>
-        {!showOnly && 
-          <Button 
-            onClick={() => handleClick(false, false)}
-            variant='outlined'
-            color='secondary'
-            fullWidth>
-            {t('reportExport')}
-          </Button>}
-      </Grid>
-      <Grid item xs={4} sm={2}>
-        {!showOnly && 
-          <Button 
-            onClick={() => handleClick(true, false)}
-            variant='outlined'
-            color='secondary'
-            fullWidth>
-            <Typography variant="button" noWrap>{t('reportEmail')}</Typography>
-          </Button>}
-      </Grid>
+      {!showOnly && 
+        <Grid item xs={4} sm={2}>
+            <Button 
+              onClick={() => handleClick(false, false)}
+              variant='outlined'
+              color='secondary'
+              fullWidth>
+              {t('reportExport')}
+            </Button>
+        </Grid>}
+      {!showOnly && 
+        <Grid item xs={4} sm={2}>
+            <Button 
+              onClick={() => handleClick(true, false)}
+              variant='outlined'
+              color='secondary'
+              fullWidth>
+              <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 4280400..fafffc7 100644
--- a/modern/src/reports/ReportLayoutPage.js
+++ b/modern/src/reports/ReportLayoutPage.js
@@ -19,12 +19,12 @@ const useStyles = makeStyles(theme => ({
     height: '100%',
   },
   drawerContainer: {
-    width: theme.dimensions.desktopDrawerWidth,
+    width: theme.dimensions.drawerWidthDesktop,
   },
   drawer: {
-    width: theme.dimensions.desktopDrawerWidth,
+    width: theme.dimensions.drawerWidthDesktop,
     [theme.breakpoints.down("md")]: {
-      width: theme.dimensions.tabletDrawerWidth,
+      width: theme.dimensions.drawerWidthTablet,
     }
   }, 
   content: {
@@ -80,7 +80,7 @@ const ReportLayoutPage = ({ children, filter, }) => {
   return (
     <div className={classes.root}>
       <Hidden only={['lg', 'xl']}>
-        <ReportNavbar openDrawer={openDrawer} setOpenDrawer={setOpenDrawer} reportTitle={reportTitle} />
+        <ReportNavbar setOpenDrawer={setOpenDrawer} reportTitle={reportTitle} />
         <Drawer
           variant="temporary"
           open={openDrawer}
diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js
index 6befa47..04b513e 100644
--- a/modern/src/reports/RouteReportPage.js
+++ b/modern/src/reports/RouteReportPage.js
@@ -38,36 +38,36 @@ const RouteReportPage = () => {
     headerName: t('positionFixTime'),
     field: 'fixTime',
     type: 'dateTime',
-    width: theme.dimensions.dateColumnWidth,
+    width: theme.dimensions.columnWidthDate,
     valueFormatter: ({ value }) => formatDate(value),
   }, {
     headerName: t('positionLatitude'),
     field: 'latitude',
     type: 'number',
-    width: theme.dimensions.numberColumnWidth,
+    width: theme.dimensions.columnWidthNumber,
     valueFormatter: ({ value }) => formatCoordinate('latitude', value, coordinateFormat),
   }, {
     headerName: t('positionLongitude'),
     field: 'longitude',
     type: 'number',
-    width: theme.dimensions.numberColumnWidth,
+    width: theme.dimensions.columnWidthNumber,
     valueFormatter: ({ value }) => formatCoordinate('longitude', value, coordinateFormat),
   }, {
     headerName: t('positionSpeed'),
     field: 'speed',
     type: 'number',
-    width: theme.dimensions.stringColumnWidth,
+    width: theme.dimensions.columnWidthString,
     valueFormatter: ({ value }) => formatSpeed(value, speedUnit),
   }, {
     headerName: t('positionAddress'),
     field: 'address',
     type: 'string',
-    width: theme.dimensions.stringColumnWidth,
+    width: theme.dimensions.columnWidthString,
   }, {
     headerName: t('positionIgnition'),
     field: 'ignition',
     type: 'boolean',
-    width: theme.dimensions.booleanColumnWidth,
+    width: theme.dimensions.columnWidthBoolean,
     valueGetter: ({ row }) => row.attributes.ignition,
     valueFormatter: ({ value }) => formatBoolean(value),
   }, {
@@ -75,7 +75,7 @@ const RouteReportPage = () => {
     field: 'totalDistance',
     type: 'number',
     hide: true,
-    width: theme.dimensions.numberColumnWidth,
+    width: theme.dimensions.columnWidthNumber,
     valueGetter: ({ row }) => row.attributes.totalDistance,
     valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
   }]
diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js
index d572742..6953c46 100644
--- a/modern/src/reports/StopReportPage.js
+++ b/modern/src/reports/StopReportPage.js
@@ -40,43 +40,43 @@ const StopReportPage = () => {
     headerName: t('reportStartTime'),
     field: 'startTime',
     type: 'dateTime',
-    width: theme.dimensions.dateColumnWidth,
+    width: theme.dimensions.columnWidthDate,
     valueFormatter: ({ value }) => formatDate(value), 
   }, {
     headerName: t('positionOdometer'),
     field: 'startOdometer',
     type: 'number',
-    width: theme.dimensions.numberColumnWidth,
+    width: theme.dimensions.columnWidthNumber,
     valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
   }, {
     headerName: t('positionAddress'),
     field: 'address',
     type: 'string',
     hide: true,
-    width: theme.dimensions.stringColumnWidth,    
+    width: theme.dimensions.columnWidthString,    
   }, {
     headerName: t('reportEndTime'),
     field: 'endTime',
     type: 'dateTime',
-    width: theme.dimensions.dateColumnWidth,
+    width: theme.dimensions.columnWidthDate,
     valueFormatter: ({ value }) => formatDate(value),
   }, {
     headerName: t('reportDuration'),
     field: 'duration',
     type: 'string',
-    width: theme.dimensions.stringColumnWidth,
+    width: theme.dimensions.columnWidthString,
     valueFormatter: ({ value }) => formatHours(value),
   }, {
     headerName: t('reportEngineHours'),
     field: 'engineHours',
     type: 'string',
-    width: theme.dimensions.stringColumnWidth,
+    width: theme.dimensions.columnWidthString,
     valueFormatter: ({ value }) => formatHours(value),
   }, {
     headerName: t('reportSpentFuel'),
     field: 'spentFuel',
     type: 'number',
-    width: theme.dimensions.numberColumnWidth,
+    width: theme.dimensions.columnWidthNumber,
     hide: true,
     valueFormatter: ({ value }) => formatVolume(value, volumeUnit),    
   }]
diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js
index a2392f2..e3819a5 100644
--- a/modern/src/reports/SummaryReportPage.js
+++ b/modern/src/reports/SummaryReportPage.js
@@ -52,49 +52,49 @@ const SummaryReportPage = () => {
     headerName: t('reportStartDate'),
     field: 'startTime',
     type: 'dateTime',
-    width: theme.dimensions.dateColumnWidth,
+    width: theme.dimensions.columnWidthDate,
     valueFormatter: ({ value }) => formatDate(value, 'YYYY-MM-DD'),
   }, {
     headerName: t('sharedDistance'),
     field: 'distance',
     type: 'number',
-    width: theme.dimensions.numberColumnWidth,
+    width: theme.dimensions.columnWidthNumber,
     valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
   }, {
     headerName: t('reportStartOdometer'),
     field: 'startOdometer',
     type: 'number',
-    width: theme.dimensions.numberColumnWidth,
+    width: theme.dimensions.columnWidthNumber,
     valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
   }, {
     headerName: t('reportEndOdometer'),
     field: 'endOdometer',
     type: 'number',
-    width: theme.dimensions.numberColumnWidth,
+    width: theme.dimensions.columnWidthNumber,
     valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
   }, {
     headerName: t('reportAverageSpeed'),
     field: 'averageSpeed',
     type: 'number',
-    width: theme.dimensions.numberColumnWidth,
+    width: theme.dimensions.columnWidthNumber,
     valueFormatter: ({ value }) => formatSpeed(value, speedUnit),
   }, {
     headerName: t('reportMaximumSpeed'),
     field: 'maxSpeed',
     type: 'number',
-    width: theme.dimensions.numberColumnWidth,
+    width: theme.dimensions.columnWidthNumber,
     valueFormatter: ({ value }) => formatSpeed(value, speedUnit),
   }, {
     headerName: t('reportEngineHours'),
     field: 'engineHours',
     type: 'string',
-    width: theme.dimensions.numberColumnWidth,
+    width: theme.dimensions.columnWidthNumber,
     valueFormatter: ({ value }) => formatHours(value),
   }, {
     headerName: t('reportSpentFuel'),
     field: 'spentFuel',
     type: 'number',
-    width: theme.dimensions.numberColumnWidth,
+    width: theme.dimensions.columnWidthNumber,
     hide: true,
     valueFormatter: ({ value }) => formatVolume(value, volumeUnit),                
   }]
diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js
index ab5f449..5f414f4 100644
--- a/modern/src/reports/TripReportPage.js
+++ b/modern/src/reports/TripReportPage.js
@@ -41,74 +41,74 @@ const TripReportPage = () => {
     headerName: t('reportStartTime'),
     field: 'startTime',
     type: 'dateTime',
-    width: theme.dimensions.dateColumnWidth,
+    width: theme.dimensions.columnWidthDate,
     valueFormatter: ({ value }) => formatDate(value),
   }, {
     headerName: t('reportStartOdometer'),
     field: 'startOdometer',
     type: 'number',
-    width: theme.dimensions.numberColumnWidth,
+    width: theme.dimensions.columnWidthNumber,
     valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
   }, {
     headerName: t('reportStartAddress'),
     field: 'startAddress',
     type: 'string',
     hide: true,
-    width: theme.dimensions.stringColumnWidth,
+    width: theme.dimensions.columnWidthString,
   }, {
     headerName: t('reportEndTime'),
     field: 'endTime',
     type: 'dateTime',
-    width: theme.dimensions.dateColumnWidth,
+    width: theme.dimensions.columnWidthDate,
     valueFormatter: ({ value }) => formatDate(value),
   }, {
     headerName: t('reportEndOdometer'),
     field: 'endOdometer',
     type: 'number',
-    width: theme.dimensions.numberColumnWidth,
+    width: theme.dimensions.columnWidthNumber,
     valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
   }, {
     headerName: t('reportEndAddress'),
     field: 'endAddress',
     type: 'string',
     hide: true,
-    width: theme.dimensions.stringColumnWidth,
+    width: theme.dimensions.columnWidthString,
   }, {
     headerName: t('sharedDistance'),
     field: 'distance',
     type: 'number',
-    width: theme.dimensions.numberColumnWidth,
+    width: theme.dimensions.columnWidthNumber,
     valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
   }, {
     headerName: t('reportAverageSpeed'),
     field: 'averageSpeed',
     type: 'number',
-    width: theme.dimensions.numberColumnWidth,
+    width: theme.dimensions.columnWidthNumber,
     valueFormatter: ({ value }) => formatSpeed(value, speedUnit),
   }, {
     headerName: t('reportMaximumSpeed'),
     field: 'maxSpeed',
     type: 'number',
-    width: theme.dimensions.numberColumnWidth,
+    width: theme.dimensions.columnWidthNumber,
     valueFormatter: ({ value }) => formatSpeed(value, speedUnit),
   }, {
     headerName: t('reportDuration'),
     field: 'duration',
     type: 'string',
-    width: theme.dimensions.stringColumnWidth,
+    width: theme.dimensions.columnWidthString,
     valueFormatter: ({ value }) => formatHours(value),
   }, {
     headerName: t('reportSpentFuel'),
     field: 'spentFuel',
     type: 'number',
-    width: theme.dimensions.numberColumnWidth,
+    width: theme.dimensions.columnWidthNumber,
     hide: true,
     valueFormatter: ({ value }) => formatVolume(value, volumeUnit),
   }, {
     headerName: t('sharedDriver'),
     field: 'driverName',
     type: 'string',
-    width: theme.dimensions.stringColumnWidth,
+    width: theme.dimensions.columnWidthString,
     hide: true                                        
   }]
 
diff --git a/modern/src/theme/dimensions.js b/modern/src/theme/dimensions.js
index ebb393b..a2403ab 100644
--- a/modern/src/theme/dimensions.js
+++ b/modern/src/theme/dimensions.js
@@ -2,11 +2,11 @@ export default {
   inputHeight: '42px',
   borderRadius: '4px',
   sidebarWidth: '28%',
-  tabletSidebarWidth: '52px',
-  desktopDrawerWidth: '360px',
-  tabletDrawerWidth: '320px',
-  dateColumnWidth: 160,
-  numberColumnWidth: 130,
-  stringColumnWidth: 160,
-  booleanColumnWidth: 130
+  sidebarWidthTablet: '52px',
+  drawerWidthDesktop: '360px',
+  drawerWidthTablet: '320px',
+  columnWidthDate: 160,
+  columnWidthNumber: 130,
+  columnWidthString: 160,
+  columnWidthBoolean: 130
 };
-- 
cgit v1.2.3