4 files changed, 48 insertions, 0 deletions
diff --git a/modern/src/App.js b/modern/src/App.js
index 1f6b55a..6fd5c00 100644
--- a/modern/src/App.js
+++ b/modern/src/App.js
@@ -14,6 +14,7 @@ import NotificationPage from './settings/NotificationPage';
 import GroupsPage from './settings/GroupsPage';
 import GroupPage from './settings/GroupPage';
 import PositionPage from './PositionPage';
+import ReplayPage from './reports/ReplayPage';
 
 const App = () => {
   return (
@@ -23,6 +24,7 @@ const App = () => {
       <Switch>
         <Route exact path='/' component={MainPage} />
         <Route exact path='/login' component={LoginPage} />
+        <Route exact path='/replay' component={ReplayPage} />
         <Route exact path='/position/:id?' component={PositionPage} />
         <Route exact path='/user/:id?' component={UserPage} />
         <Route exact path='/device/:id?' component={DevicePage} />
diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js
index b4757d8..942aac6 100644
--- a/modern/src/MainToolbar.js
+++ b/modern/src/MainToolbar.js
@@ -29,6 +29,7 @@ import NotificationsActiveIcon from '@material-ui/icons/NotificationsActive';
 import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted';
 import TrendingUpIcon from '@material-ui/icons/TrendingUp';
 import FolderIcon from '@material-ui/icons/Folder';
+import ReplayIcon from '@material-ui/icons/Replay';
 import t from './common/localization';
 
 const useStyles = makeStyles(theme => ({
@@ -96,6 +97,12 @@ const MainToolbar = () => {
               </ListItemIcon>
               <ListItemText primary={t('mapTitle')} />
             </ListItem>
+            <ListItem button onClick={() => history.push('/replay')}>
+              <ListItemIcon>
+                <ReplayIcon />
+              </ListItemIcon>
+              <ListItemText primary={t('reportReplay')} />
+            </ListItem>
           </List>
           <Divider />
           <List
diff --git a/modern/src/reports/ReplayPage.js b/modern/src/reports/ReplayPage.js
new file mode 100644
index 0000000..826b361
--- /dev/null
+++ b/modern/src/reports/ReplayPage.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core';
+import MainToolbar from '../MainToolbar';
+import Map from '../map/Map';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  content: {
+    flexGrow: 1,
+    overflow: 'hidden',
+    display: 'flex',
+    flexDirection: 'row',
+    [theme.breakpoints.down('xs')]: {
+      flexDirection: 'column-reverse',
+    }
+  },
+  mapContainer: {
+    flexGrow: 1,
+  },
+}));
+
+const ReplayPage = () => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <MainToolbar />
+      <Map>
+      </Map>
+    </div>
+  );
+}
+
+export default ReplayPage;
diff --git a/web/l10n/en.json b/web/l10n/en.json
index 4f0825c..2b24cf2 100644
--- a/web/l10n/en.json
+++ b/web/l10n/en.json
@@ -380,6 +380,7 @@
     "notificatorSms": "SMS",
     "notificatorFirebase": "Firebase",
     "notificatorTraccar": "Traccar",
+    "reportReplay": "Replay",
     "reportRoute": "Route",
     "reportEvents": "Events",
     "reportTrips": "Trips",